/* Motion: hero entrance, scroll reveals and small interaction animations, on every page.
   Start states (hidden, offset) only apply under html.motion, which shared/motion.js sets when the visitor
   hasn't asked for reduced motion; without it every element simply shows. */
:root { --m-ease: cubic-bezier(.16, 1, .3, 1); }

@keyframes m-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes m-rise-scale { from { opacity: 0; transform: translateY(36px) scale(.97); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-word { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px); } }
@keyframes m-mark { from { background-size: 0% 100%; } }
@keyframes m-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } }
@keyframes m-clip { from { clip-path: inset(100% 0 0 0 round 32px); } to { clip-path: inset(0 0 0 0 round 32px); } }
@keyframes m-zoom { from { transform: scale(1.18); } }
@keyframes m-square { from { opacity: 0; transform: scale(.4) rotate(-24deg); } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes m-slide { from { opacity: 0; transform: translateX(24px); } }
@keyframes m-step-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes m-step-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes m-check { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 65% { opacity: 1; transform: scale(1.08) rotate(3deg); } }
@keyframes m-ring { from { box-shadow: 0 0 0 0 rgba(255, 194, 28, .55); } to { box-shadow: 0 0 0 26px rgba(255, 194, 28, 0); } }

/* ---------- Hero entrance (home and town/airport pages) ---------- */

.motion:not(.motion-ready) :is(.hero h1, .hero .lead, .hero .widget, .hero-visual, .lp-hero .breadcrumb, .lp-hero h1, .lp-hero .lead, .lp-hero .widget,
  .info-photo, .contact-card, .legal-hero .updated) { opacity: 0; }

.motion-ready :is(.hero, .lp-hero) h1:not(.words) { animation: m-rise .9s var(--m-ease) .05s both; }
/* Desktop headings rise word by word (motion.js wraps each word in .w). */
.motion-ready :is(.hero, .lp-hero) h1.words .w { display: inline-block; animation: m-word .9s var(--m-ease) both; animation-delay: calc(.08s + var(--i) * 70ms); }
.motion-ready :is(.hero, .lp-hero) .lead { animation: m-rise .9s var(--m-ease) .3s both; }
.motion-ready :is(.hero, .lp-hero) .widget { animation: m-rise-scale 1s var(--m-ease) .45s both; }
.motion-ready .lp-hero .breadcrumb { animation: m-fade .8s ease both; }
.motion-ready .info-photo { animation: m-clip 1.3s var(--m-ease) .2s both; }
.motion-ready .info-photo img { animation: m-zoom 2.4s var(--m-ease) .2s both; }
.motion-ready .contact-card { animation: m-rise-scale .9s var(--m-ease) both; }
.motion-ready .contact-card:nth-child(1) { animation-delay: .4s; }
.motion-ready .contact-card:nth-child(2) { animation-delay: .5s; }
.motion-ready .contact-card:nth-child(3) { animation-delay: .6s; }
.motion-ready .legal-hero .updated { animation: m-rise .9s var(--m-ease) .4s both; }
.motion-ready .hero-chip { animation: m-rise .6s var(--m-ease) both; animation-delay: calc(.75s + var(--i, 0) * 55ms); }

/* The yellow highlight sweeps in behind the key words. */
.motion :is(.hero, .lp-hero) mark { background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 100% 100%; }
.motion-ready :is(.hero, .lp-hero) mark { animation: m-mark 1s var(--m-ease) .45s both; }

.motion-ready .hero-visual .photo { animation: m-clip 1.3s var(--m-ease) .2s both; }
.motion-ready .hero-visual .photo img { animation: m-zoom 2.4s var(--m-ease) .2s both; }
.motion-ready .hero-square { animation: m-square 1.1s var(--m-ease) .55s both; }

/* ---------- Scroll reveal ---------- */
/* Keep this list in sync with REVEAL in shared/motion.js. */
.motion :is(.section .eyebrow, .section h2, .section-lead, .split > div > .btn, .benefits > *, .fleet > *, .how > li, .airports > *,
  .faq > .qa, .lp-text > p, .info-text > p, .routes > *, .nearby-links > a, .cta > *, .footer-brand, .footer-col, .footer-bottom,
  .details-card, .book-box, .prose > section, .legal-toc):not(.in) {
  opacity: 0; transform: translateY(28px);
}
.motion .nearby-links > a:not(.in) { transform: translateY(12px) scale(.94); }
.motion .cta:not(.in) { opacity: 0; transform: scale(.97); }
.motion .cta.in { transition: opacity .9s var(--m-ease), transform 1.1s var(--m-ease); }

/* Section headings: the yellow full stop pops once the heading is in. */
.motion .section h2.in .dot-end { display: inline-block; animation: m-pop .6s var(--m-ease) both; animation-delay: calc(var(--d, 0ms) + .45s); }
.motion .how > li.in .num, .motion .benefits > .in .icon-tile { animation: m-pop .7s var(--m-ease) both; animation-delay: calc(var(--d, 0ms) + .15s); }

/* ---------- Small interactions ---------- */

:is(.btn, .btn-primary, .btn-call) { transition: transform .25s var(--m-ease), box-shadow .25s var(--m-ease), background-color .15s, color .15s; }
:is(.btn, .btn-primary:not([aria-disabled="true"]), .btn-call):hover { transform: translateY(-2px); }
.btn-yellow:hover, .btn-primary:not([aria-disabled="true"]):hover { box-shadow: 0 12px 28px -12px rgba(220, 160, 0, .75); }
:is(.btn, .btn-primary:not([aria-disabled="true"]), .btn-call):active { transform: scale(.97); transition-duration: .08s; }
/* Arrow icons at the end of a button slide forward on hover. */
:is(.btn, .btn-primary) .ms:last-child:not(:first-child) { transition: transform .3s var(--m-ease); }
:is(.btn, .btn-primary:not([aria-disabled="true"])):hover .ms:last-child:not(:first-child) { transform: translateX(4px); }

.route-card { transition: transform .35s var(--m-ease), box-shadow .2s; }
.route-card:hover { transform: translateY(-4px); }
.route-card .arrow { transition: transform .35s var(--m-ease); }
.route-card:hover .arrow { transform: translateX(4px); }
.car .photo img { transition: transform .9s var(--m-ease); }
.car:hover .photo img { transform: scale(1.05); }
.benefit .icon-tile { transition: transform .4s var(--m-ease); }
.benefit:hover .icon-tile { transform: rotate(-8deg) scale(1.08); }

:is(.hero-chip, .nearby-links a, .pill, .locate, .tile-btn, .chip) { transition: transform .2s var(--m-ease), background-color .15s, border-color .15s, color .15s; }
.nearby-links a:hover { transform: translateY(-2px); }
:is(.hero-chip, .nearby-links a, .pill, .locate, .tile-btn, .counter button, .vehicle, .suggest-item):active { transform: scale(.96); transition-duration: .08s; }
.vehicle, .counter button { transition: transform .2s var(--m-ease), border-color .2s, background-color .2s; }

.swap .ms { transition: transform .45s var(--m-ease); }

.qa button .ms { transition: transform .4s var(--m-ease), background-color .2s; }
.qa button[aria-expanded="true"] .ms { transform: rotate(180deg); }
.qa .answer:not([hidden]) { animation: m-drop .45s var(--m-ease); }

.suggest:not([hidden]) { animation: m-drop .25s var(--m-ease); }
.suggest-item { transition: background-color .12s, transform .2s var(--m-ease); }

@media (min-width: 1180px) {
  .main-nav a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size .35s var(--m-ease); }
  .main-nav a:hover { text-decoration: none; background-size: 100% 2px; }
}
.footer a { transition: color .2s; }

/* Mobile menu: links follow the panel in. */
.menu:not([hidden]) :is(.menu-links a, .lang-lg, .menu-panel > .btn) { animation: m-slide .5s var(--m-ease) backwards; }
.menu:not([hidden]) .menu-links a:nth-child(1) { animation-delay: .06s; }
.menu:not([hidden]) .menu-links a:nth-child(2) { animation-delay: .1s; }
.menu:not([hidden]) .menu-links a:nth-child(3) { animation-delay: .14s; }
.menu:not([hidden]) .menu-links a:nth-child(4) { animation-delay: .18s; }
.menu:not([hidden]) .menu-links a:nth-child(5) { animation-delay: .22s; }
.menu:not([hidden]) .menu-links a:nth-child(6) { animation-delay: .26s; }
.menu:not([hidden]) .lang-lg { animation-delay: .3s; }
.menu:not([hidden]) .menu-panel > .btn { animation-delay: .34s; }

/* ---------- Booking ---------- */

/* Each new step slides in from the side it comes from (motion.js sets .m-fwd / .m-back and --i). */
.step.m-fwd > * { animation: m-step-fwd .55s var(--m-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.step.m-back > * { animation: m-step-back .55s var(--m-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.err-text { animation: m-drop .3s var(--m-ease); }

/* Progress bar segments fill from the left. */
.motion .segs span { position: relative; overflow: hidden; }
.motion .segs span.done, .motion .segs span.current { background: var(--line); }
.motion .segs span::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--m-ease), background-color .3s;
}
.motion .segs span.current::after { transform: none; }
.motion .segs span.done::after { transform: none; background: var(--ink); }

/* Confirmation: the check tile pops with a ring, then the rest follows. */
.confirm .check-tile { animation: m-check .8s var(--m-ease) .1s both, m-ring 1.2s ease-out .6s; }
.step.m-fwd .confirm > *:not(.check-tile) { animation: m-rise .7s var(--m-ease) both; }
.step.m-fwd .confirm > :nth-child(2) { animation-delay: .25s; }
.step.m-fwd .confirm > :nth-child(3) { animation-delay: .35s; }
.step.m-fwd .confirm > :nth-child(4) { animation-delay: .42s; }
.step.m-fwd .confirm > :nth-child(5) { animation-delay: .48s; }
.step.m-fwd .confirm > :nth-child(n+6) { animation-delay: .55s; }

@media print {
  .motion * { opacity: 1 !important; transform: none !important; animation: none !important; }
}