/* Tempo Traveller pages — shared visuals and motion on top of the cab/package styles. Scoped to
   .cab-page--tempo-fx, so no other cab/boat/package page is affected. Motion is transform/opacity
   only, paused while the hero is off-screen, and switched off for prefers-reduced-motion. */

.cab-page--tempo-fx {
	--tfx-ink: #122534;
	--tfx-gold: #e8a23f;
	--tfx-sky: #2b6f9e;
}

/* ═════════════ Hero scene ═════════════ */
.cab-page--tempo-fx .pkg-hero { isolation: isolate; min-height: 540px; }
.tfx-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.tfx-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; fill: rgba(5, 18, 28, .55); }

.tfx-bird { position: absolute; top: var(--t); left: 0; width: 34px; height: 14px; fill: rgba(255, 255, 255, .78); animation: tfx-fly var(--s) linear var(--d) infinite, tfx-flap .75s ease-in-out infinite alternate; }
.tfx-bird--sm { width: 22px; height: 9px; }
@keyframes tfx-fly { from { transform: translate3d(-60px, 0, 0); } to { transform: translate3d(105vw, -24px, 0); } }
@keyframes tfx-flap { from { scale: 1 1; } to { scale: 1 .5; } }

.tfx-road { position: absolute; left: 0; right: 0; bottom: 9%; height: 5px; border-radius: 3px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 36px, transparent 36px 72px); animation: tfx-road-move 1.3s linear infinite; opacity: .85; }
@keyframes tfx-road-move { from { background-position-x: 0; } to { background-position-x: -72px; } }

.tfx-drive { position: absolute; left: 0; bottom: 9.6%; width: 230px; height: 96px; animation: tfx-drive 58s linear infinite; }
@keyframes tfx-drive { from { transform: translate3d(-260px, 0, 0); } to { transform: translate3d(106vw, 0, 0); } }
.tfx-drive__bob { position: relative; display: block; width: 100%; height: 100%; animation: tfx-bob 1.1s ease-in-out infinite alternate; }
@keyframes tfx-bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
.tfx-van { display: block; width: 230px; height: 96px; color: var(--tfx-ink); fill: var(--tfx-ink); opacity: .85; }
.tfx-van__glass { fill: rgba(176, 212, 230, .85); }
.tfx-van__stripe { fill: var(--tfx-gold); opacity: .9; }
.tfx-van__wheel { fill: #0a1a26; }
.tfx-van__hub { fill: #9aa7af; }
.tfx-dust { position: absolute; left: -46px; bottom: 4px; width: 50px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); animation: tfx-dust 1.3s ease-in-out infinite; }
@keyframes tfx-dust { 0% { opacity: 0; transform: scaleX(.6) translateX(10px); } 40% { opacity: .7; } 100% { opacity: 0; transform: scaleX(1.3) translateX(-16px); } }

.pkg-hero.is-paused .tfx-fx * { animation-play-state: paused; }
.pkg-hero.is-paused .tfx-fx { animation-play-state: paused; }

/* Section titles: a short underline that draws itself when the section scrolls into view */
.cab-page--tempo-fx h2.pkg-title::after { content: ""; display: block; width: 68px; height: 4px; margin: 12px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--tfx-gold), var(--pkg-primary)); transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .8, .2, 1) .15s; }
.cab-page--tempo-fx .is-visible h2.pkg-title::after { transform: scaleX(1); }

/* ═════════════ Cards: icons, hover and staggered entrance ═════════════ */
.cab-page--tempo-fx .pkg-card { position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.cab-page--tempo-fx .pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18, 37, 52, .14); }
.cab-page--tempo-fx .pkg-card__icon { width: 46px; height: 46px; padding: 12px; margin-bottom: 14px; border-radius: 14px; color: #fff; fill: #fff; background: linear-gradient(140deg, var(--tfx-gold), var(--pkg-primary)); box-shadow: 0 10px 22px rgba(216, 48, 48, .28); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.cab-page--tempo-fx .pkg-card:hover .pkg-card__icon { transform: rotate(-8deg) scale(1.1); }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(1) { --i: 0; }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(2) { --i: 1; }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(3) { --i: 2; }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(4) { --i: 3; }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(5) { --i: 4; }
.cab-page--tempo-fx .pkg-cards .pkg-card:nth-child(6) { --i: 5; }
.cab-page--tempo-fx .is-visible .pkg-card,
.cab-page--tempo-fx .is-visible .pkg-service,
.cab-page--tempo-fx .is-visible .pkg-place { animation: tfx-pop .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes tfx-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* ═════════════ Photo gallery ═════════════ */
.tfx-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0 auto; max-width: 1100px; }
.tfx-photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(18, 37, 52, .16); animation: tfx-pop .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.tfx-photo a { display: block; }
.tfx-photo img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .5s ease; }
.tfx-photo:hover img { transform: scale(1.06); }
.tfx-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(0deg, rgba(5, 18, 28, .82), rgba(5, 18, 28, 0)); }

/* ═════════════ Seat comparison ═════════════ */
.tfx-compare { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .tfx-compare { grid-template-columns: 1fr; } }
.tfx-compare__card { position: relative; display: block; padding: 26px 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(18, 37, 52, .08); box-shadow: 0 14px 30px rgba(18, 37, 52, .08); text-align: center; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.tfx-compare__card, .tfx-compare__card * { text-decoration: none; }
.tfx-compare__card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18, 37, 52, .14); }
.tfx-compare__card--current { border-color: var(--pkg-primary); box-shadow: 0 16px 34px rgba(216, 48, 48, .18); }
.tfx-compare__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--pkg-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tfx-compare__seats { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 40px; color: var(--tfx-ink); line-height: 1; margin: 6px 0 2px; }
.tfx-compare__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pkg-primary); }
.tfx-compare__name { margin: 10px 0 6px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--tfx-ink); }
.tfx-compare__best { margin: 0 0 16px; font-size: 14px; color: #4a5a68; min-height: 42px; }
.tfx-compare__fare { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(18, 37, 52, .06); font-size: 13px; font-weight: 600; color: var(--tfx-ink); }
.tfx-compare__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pkg-primary); text-decoration: none; }
.tfx-compare__go:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.tfx-fx *, .tfx-drive, .tfx-drive__bob, .tfx-dust, .tfx-road, .tfx-bird { animation: none !important; }
	.cab-page--tempo-fx .pkg-card, .cab-page--tempo-fx .tfx-photo { animation: none !important; opacity: 1 !important; transform: none !important; }
}