/* ============================================================
   SA Transport — motion layer
   Luxury-grade animation: one easing language, transform/opacity
   only, finite ambient motion, full reduced-motion + keyboard support.
   Board-approved 2026-07-13 after 9-agent design/perf/a11y review.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:auto}

/* -- 1. Hero entrance: choreographed rise (tight delays protect LCP) -- */
.hero-inner>.tagpill,.hero-inner>h1,.hero-inner>p,.hero-inner>.hero-cta,.hero-inner>.hero-badges{opacity:0;transform:translateY(24px);animation:heroIn .85s cubic-bezier(.16,1,.3,1) forwards}
.hero-inner>.tagpill{animation-delay:.05s}
.hero-inner>h1{animation-delay:.15s}
.hero-inner>p{animation-delay:.3s}
.hero-inner>.hero-cta{animation-delay:.45s}
.hero-inner>.hero-badges{animation-delay:.6s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* -- 2. Hero photo: veil-lift entrance + one slow cinematic settle, then still -- */
.hero.kb-on{background:var(--navy)}
.kb{position:absolute;inset:0;z-index:0;overflow:hidden}
.kb i{position:absolute;inset:0;background:url("hero-car.jpg") center/cover;transform-origin:62% 38%;animation:kb 30s ease-out forwards}
.kb::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,16,26,.93),rgba(13,27,42,.78) 55%,rgba(14,134,202,.35))}
@keyframes kb{0%{opacity:0;transform:scale(1.07)}5%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* -- 3. Scroll reveals: luxury easing + stagger (zeroed on phones & for keyboard) -- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.reveal.on{opacity:1;transform:none}
.reveal:focus-within{transition-delay:0s}
@media (max-width:720px){.reveal{transition-delay:0s!important}}

/* -- 4. Fleet cards: lift + synced photo zoom + arrow slide (hover & keyboard) -- */
.car{transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .5s}
.car:hover,.car:focus-visible{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 24px 48px rgba(8,16,26,.5)}
.car .ph img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.car:hover .ph img,.car:focus-visible .ph img{transform:scale(1.06)}
.car .vg{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.car:hover .vg,.car:focus-visible .vg{transform:translateX(6px)}

/* -- 5. Service tiles & sector cards: gentle lift -- */
.svc{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.svc:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(13,27,42,.16)}
.sector{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.sector:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(8,16,26,.4)}

/* -- 6. Buttons: quiet lift + tone shift (no sheen — restraint) -- */
.btn{transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s,color .25s,border-color .25s,box-shadow .35s,filter .25s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn-gold:hover,.btn-gold:focus-visible{filter:brightness(1.07)}

/* -- 7. Header: real frosted glass on desktop only (phones keep opaque navy) -- */
@media (min-width:1024px){
header.scrolled{background:rgba(13,27,42,.8);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4)}
}

/* -- 8. WhatsApp float: three soft welcome pulses (compositor-only), then still -- */
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(37,211,102,.45);opacity:0;animation:waPulse 3.2s ease-out .8s 3}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

/* -- 9. FAQ: answer eases open, active question turns gold -- */
.faq summary{transition:color .25s}
.faq[open] summary{color:var(--gold)}
.faq[open] .fa-body{animation:faqIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}