/**
 * TourBooking Checkout Pro — animated transition screen styles.
 * Extracted from woo-travel-checkout-mvp.html (#screen-transition).
 *
 * @package WooTravelCheckout
 */

.wtc-transition {
	background: linear-gradient(160deg, #0B2F3A 0%, #1B4332 40%, #2D6A4F 100%);
	position: fixed;
	inset: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 9999;
	transition: opacity .6s ease;
}

.wtc-transition.wtc-is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Stars */
.wtc-transition__stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wtc-transition__star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: wtc-twinkle var(--wtc-d, 3s) var(--wtc-delay, 0s) infinite;
}

@keyframes wtc-twinkle {
	0%, 100% { opacity: 0; }
	50% { opacity: var(--wtc-op, 0.8); }
}

/* Ground / road */
.wtc-transition__ground {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 180px;
	background: linear-gradient(to top, #0B2F3A 0%, transparent 100%);
}

.wtc-transition__road {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	height: 32px;
	background: rgba(255, 255, 255, .06);
	overflow: hidden;
}

.wtc-transition__road-dashes {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	white-space: nowrap;
	animation: wtc-move-dashes 1.2s linear infinite;
}

.wtc-transition__road-dash {
	display: inline-block;
	width: 60px;
	height: 4px;
	background: rgba(255, 255, 255, .25);
	border-radius: 2px;
	margin: 0 30px;
}

@keyframes wtc-move-dashes {
	from { transform: translateY(-50%) translateX(0); }
	to { transform: translateY(-50%) translateX(-180px); }
}

/* Mountains */
.wtc-transition__mountains {
	position: absolute;
	bottom: 88px;
	left: 0;
	right: 0;
	pointer-events: none;
}

.wtc-transition__mountains svg {
	width: 100%;
	height: 140px;
	display: block;
}

/* Plane */
.wtc-transition__plane-scene {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.wtc-transition__plane-wrapper {
	animation: wtc-fly-across 3.8s cubic-bezier(.25, .46, .45, .94) forwards;
	position: relative;
	left: 0;
}

@keyframes wtc-fly-across {
	0%   { transform: translateX(-160px) translateY(40px) rotate(-2deg); opacity: 0; }
	15%  { opacity: 1; }
	60%  { transform: translateX(45vw) translateY(-30px) rotate(3deg); }
	85%  { transform: translateX(90vw) translateY(-10px) rotate(1deg); opacity: 1; }
	100% { transform: translateX(110vw) translateY(20px); opacity: 0; }
}

.wtc-transition__plane-svg {
	width: 160px;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .4));
}

.wtc-transition__contrail {
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	width: 200px;
	height: 3px;
	background: linear-gradient(to left, rgba(255, 255, 255, .5), transparent);
	animation: wtc-contrail-fade 3.8s ease forwards;
}

@keyframes wtc-contrail-fade {
	0%, 15% { opacity: 0; }
	30% { opacity: 1; }
	85% { opacity: .3; }
	100% { opacity: 0; }
}

/* Bus */
.wtc-transition__bus-scene {
	position: absolute;
	bottom: 64px;
	left: 0;
	right: 0;
	pointer-events: none;
	opacity: 0;
	animation: wtc-bus-appear .4s 2.8s ease forwards;
}

@keyframes wtc-bus-appear {
	to { opacity: 1; }
}

.wtc-transition__bus-wrapper {
	animation: wtc-bus-roll 2.5s 2.8s cubic-bezier(.25, .46, .45, .94) forwards;
	position: relative;
	left: 0;
}

@keyframes wtc-bus-roll {
	0%   { transform: translateX(-200px); }
	100% { transform: translateX(110vw); }
}

.wtc-transition__bus-svg {
	width: 120px;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}

.wtc-transition__wheel-spin {
	animation: wtc-spin .6s linear infinite;
	transform-origin: center;
}

@keyframes wtc-spin {
	to { transform: rotate(360deg); }
}

/* Center content */
.wtc-transition__content {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 24px;
}

.wtc-transition__logo {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 40px;
	letter-spacing: -.01em;
}

.wtc-transition__logo span {
	color: var(--wtc-sand, #F4A261);
}

.wtc-transition__logo--image {
	display: flex;
	justify-content: center;
}

.wtc-transition__logo-img {
	/* An explicit `height` (not `max-height`) on purpose: `max-height` only
	   ever shrinks an oversized image, it can never enlarge a small one —
	   so the size slider in the admin would silently stop having any effect
	   once it passed the logo's own natural size. An explicit height (with
	   `width: auto` to keep the aspect ratio) actually scales the image up
	   or down to match the slider, which is what "tamaño/escala" means. */
	height: var(--wtc-transition-logo-size, 48px);
	width: auto;
	max-width: 320px;
	object-fit: contain;
}

.wtc-transition__dest-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--wtc-r-full, 9999px);
	padding: 8px 20px;
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	margin-bottom: 24px;
	animation: wtc-fade-up-in .8s .3s both;
	backdrop-filter: blur(8px);
}

.wtc-transition__dest-pill .material-symbols-outlined {
	font-size: 16px;
	color: var(--wtc-sand, #F4A261);
}

.wtc-transition__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(26px, 6vw, 42px);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin-bottom: 12px;
	animation: wtc-fade-up-in .8s .5s both;
}

.wtc-transition__sub {
	font-size: 15px;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 48px;
	animation: wtc-fade-up-in .8s .7s both;
}

@keyframes wtc-fade-up-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.wtc-transition__loading-bar {
	width: 240px;
	height: 4px;
	background: rgba(255, 255, 255, .15);
	border-radius: var(--wtc-r-full, 9999px);
	margin: 0 auto 20px;
	overflow: hidden;
	animation: wtc-fade-up-in .8s .9s both;
}

.wtc-transition__loading-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wtc-sand, #F4A261), #fff);
	border-radius: var(--wtc-r-full, 9999px);
	animation: wtc-load-fill 3.2s 1s ease forwards;
	width: 0;
}

@keyframes wtc-load-fill {
	to { width: 100%; }
}

.wtc-transition__loading-label {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	animation: wtc-fade-up-in .8s 1s both;
	letter-spacing: .04em;
}

/* Reveal of checkout underneath */
.wtc-checkout-reveal {
	animation: wtc-checkout-reveal .6s ease both;
}

@keyframes wtc-checkout-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}