/* =========================================================================
   CENTURY AUTO TRAVELS — CINEMATIC HOMEPAGE EXPERIENCE
   Loaded ONLY on index.html, on top of style.css. Scoped entirely to new
   classes (.scene-*, .spotlight-*, .showcase-*) so it cannot affect any
   other page. Drives scroll-linked "camera" transforms via cinematic.js;
   this file defines the visual language + the reduced-motion / no-JS
   fallback (plain stacked layout, fully usable, nothing hidden).
   ========================================================================= */

.cinema{ position: relative; background: var(--bg); }

/* ---------------------------------------------------------------------
   Shared: gold light-sweep system (very sparing, decorative, inert)
   --------------------------------------------------------------------- */
.light-sweep{
  position: absolute;
  left: 0; right: 0;
  height: 60vh;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
  background: radial-gradient(60% 100% at 50% 50%, rgba(201,169,98,.14), transparent 70%);
  filter: blur(10px);
  will-change: transform, opacity;
  animation: ambientDrift 10s ease-in-out infinite;
}
@keyframes ambientDrift{
  0%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  50%      { transform: translateY(3%) scale(1.05); opacity: .75; }
}
body.motion-lite .light-sweep{ animation: none; }

/* ---------------------------------------------------------------------
   SCENE 1+2 — ARRIVAL / THE DRIVE (wraps the existing .hero, unchanged
   markup + JS slider — this only adds scroll-linked depth on exit)
   --------------------------------------------------------------------- */
.scene-hero{
  position: relative;
  height: 180vh;
}
.scene-hero .hero{
  position: sticky;
  top: 0;
  perspective: 1300px;
  transform-origin: 50% 30%;
  will-change: transform, opacity;
}
/* Subtle parallax/perspective layer — a few px of mouse-driven drift and
   a fraction of a degree of tilt on the image plane itself, independent
   of the existing Ken Burns zoom (which stays on the <img> untouched) and
   the existing scroll-exit scale/translate (which stays on .hero itself).
   This only adds a sense of depth behind the same image and slide timing. */
.hero-slide-media{ will-change: transform; }
/* Slow, continuous, very subtle gold sweep — ambient "showroom light
   moving" rather than anything scroll- or mouse-driven, so it reads as
   environment lighting rather than a UI effect. */
.hero-light-sweep{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .3;
  background: linear-gradient(100deg,
    transparent 35%,
    rgba(240,217,152,.10) 48%,
    transparent 62%);
  background-size: 260% 100%;
  animation: heroLightSweep 14s ease-in-out infinite;
}
@keyframes heroLightSweep{
  0%   { background-position: 110% 0; }
  50%  { background-position: -10% 0; }
  100% { background-position: 110% 0; }
}
body.motion-lite .hero-light-sweep{ opacity: .18; }
.hero-exit-glow{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(70% 60% at 50% 115%, rgba(230,199,102,.35), transparent 65%);
}

/* ---------------------------------------------------------------------
   SCENE 3 — THE SPOTLIGHT (new: single signature vehicle presentation)
   --------------------------------------------------------------------- */
.scene-spotlight{
  position: relative;
  height: 280vh;
  background: var(--bg);
}
.spotlight-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
}
/* Three-column stage: quiet headline on the left, the video (the real
   subject) centred and unshrinking, a quiet decorative counterweight on
   the right. All three share one perspective (inherited from
   .spotlight-sticky above) so they read as one continuous 3D scene. */
.spotlight-layout{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  transform-style: preserve-3d;
}
.spotlight-backdrop{
  position: absolute;
  inset: -3%;
  will-change: transform;
  background:
    radial-gradient(48% 55% at 50% var(--glow-y, 42%), rgba(201,169,98,var(--glow-a, .12)), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.7), transparent 60%),
    radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* ---------------------------------------------------------------------
   Spotlight live golden wave — same canvas-based environment as the
   Rent Now page (see js/cinematic.js → initGoldWave), tuned calmer and
   slower here so it reads as still, cinematic atmosphere rather than
   energy, matching this scene's original quieter mood. Sits behind the
   vehicle at all times; z-index 0, well under the vehicle stage's own
   stacking. Fades in on load, same as Rent Now's wave.
   --------------------------------------------------------------------- */
.spotlight-wave{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
.spotlight-wave.is-live{ opacity: 1; }
body.motion-reduced .spotlight-wave{ opacity: 1; transition: none; }

/* ---------------------------------------------------------------------
   Signature video — a fixed 9:16 portrait "cinema screen" frame, sized
   to this footage's own vertical orientation, so there is never a
   layout jump while the video's own metadata loads. object-fit:contain
   inside it (below) guarantees the footage is always shown whole, at
   its original aspect ratio, never cropped or stretched — the same
   contain-based approach already used for the Book Now gallery, just
   tuned to this film's own portrait shape instead of a product photo's.
   Sized by height first (min(80vh, 860px)) so it reads as a tall,
   deliberate cinema screen on desktop; max-width keeps it in bounds on
   narrow viewports, where aspect-ratio then derives a shorter height.
   --------------------------------------------------------------------- */
.spotlight-video-stage{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.spotlight-video-frame{
  position: relative;
  height: min(80vh, 860px);
  width: auto;
  max-width: 92vw;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  box-shadow: 0 46px 100px -30px rgba(0,0,0,.75);
  --glow: 0;
}
.spotlight-video-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(230,199,102, calc(.14 + var(--glow) * .34)),
    inset 0 0 70px rgba(230,199,102, calc(var(--glow) * .28));
  transition: box-shadow .3s ease;
}
.spotlight-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.spotlight-sound-btn{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(230,199,102,.35);
  background: rgba(10,9,6,.55);
  color: var(--gold);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .25s, transform .25s, border-color .25s;
}
.spotlight-sound-btn:hover{
  background: rgba(10,9,6,.78);
  border-color: rgba(230,199,102,.65);
  transform: scale(1.06);
}
.spotlight-sound-btn svg{ width: 18px; height: 18px; }
.spotlight-sound-btn .icon-unmuted{ display: none; }
.spotlight-sound-btn.is-unmuted .icon-muted{ display: none; }
.spotlight-sound-btn.is-unmuted .icon-unmuted{ display: block; }

/* ---------------------------------------------------------------------
   LEFT — premium 3D headline. Driven entirely by js/cinematic.js's
   updateSpotlight(), which reads the exact same scroll progress that
   moves the video, so both feel like one continuous 3D scene rather
   than two separately-animated pieces. Nothing here fades in/out on a
   fixed timer — every value is a direct function of scroll position.
   --------------------------------------------------------------------- */
.spotlight-text{
  position: relative;
  z-index: 2;
  flex: 1 1 260px;
  max-width: 360px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  text-align: left;
}
.spotlight-brand{
  margin-bottom: 1rem;
}
.spotlight-heading{
  position: relative;
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1.18;
  color: var(--text);
  text-shadow: 0 10px 34px rgba(0,0,0,.55);
  perspective: 600px;
}
.sl-line{
  display: block;
  transform-style: preserve-3d;
}
.sl-line.sl-gold{ color: var(--gold-light); }
/* Per-letter spans injected by js/cinematic.js (splitSpotlightText). Each
   carries its own --i index, used both for the entrance stagger and for
   the subtle scroll-driven depth fan below. Falls back gracefully to a
   single plain span (no split) if JS never runs. */
.sl-line .ch{
  display: inline-block;
  transform: translateZ(calc(var(--chz, 0) * 1px));
  white-space: pre;
}
.spotlight-tagline{
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: .96rem;
  line-height: 1.6;
  will-change: transform, opacity;
}
/* Soft ambient gold sheen drifting across the heading — the same
   "showroom light" language as .light-sweep/.hero-light-sweep elsewhere
   on this page, just scoped to the text and gated by scroll-driven
   --glow (set in JS) so it's most visible while the scene is in focus. */
.spotlight-heading::after{
  content: "";
  position: absolute;
  inset: -12% -30%;
  background: linear-gradient(100deg, transparent 42%, rgba(240,217,152,.65) 50%, transparent 58%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: var(--sweep-o, 0);
  animation: spotlightGoldSweep 9s ease-in-out infinite;
}
@keyframes spotlightGoldSweep{
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}

/* ---------------------------------------------------------------------
   RIGHT — quiet decorative counterweight. Abstract only (a line, a
   streak, a few particles) so the video remains the only real subject;
   entirely inert on touch devices via the .motion-lite rules below.
   --------------------------------------------------------------------- */
.spotlight-deco{
  position: relative;
  z-index: 1;
  flex: 1 1 260px;
  max-width: 360px;
  height: min(50vh, 420px);
  display: none;
  will-change: transform, opacity;
  opacity: 0;
}
.deco-line{
  position: absolute;
  left: 18%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(230,199,102,.55) 40%, rgba(230,199,102,.55) 60%, transparent);
}
.deco-streak{
  position: absolute;
  left: 0;
  top: 46%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,217,152,.7));
  filter: blur(.3px);
}
.deco-shape{
  position: absolute;
  right: 8%;
  top: 22%;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(230,199,102,.4);
  border-radius: 4px;
  transform: rotate(45deg);
}
.deco-particle{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px rgba(240,217,152,.8);
}
.deco-particle.p1{ left: 32%; top: 20%; }
.deco-particle.p2{ left: 12%; top: 62%; }
.deco-particle.p3{ left: 46%; top: 78%; }
@media (min-width: 1080px){
  .spotlight-deco{ display: block; }
}

.spotlight-next{
  position: absolute;
  bottom: 7%;
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
.spotlight-next.is-shown{ opacity: 1; }

/* ---------------------------------------------------------------------
   SCENE 4+5 — CHOOSE YOUR DRIVE / FEATURED VEHICLES (spatial showcase)
   --------------------------------------------------------------------- */
.scene-showcase{
  position: relative;
  height: 420vh;
  background: var(--bg);
}
.showcase-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 2.4rem);
}
.showcase-head{
  text-align: center;
  flex-shrink: 0;
}
.showcase-stage{
  position: relative;
  flex: 1;
  perspective: 1700px;
}
/* ---------------------------------------------------------------------
   Live golden wave environment — same canvas-based flowing curves +
   particles technique used on the Rent Now page (see js/cinematic.js →
   initGoldWave). Sits behind the cards at z-index 0; cards are given a
   high explicit z-index in JS, so this can never paint over a photo.
   --------------------------------------------------------------------- */
.showcase-wave{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}
.showcase-wave.is-live{ opacity: 1; }
body.motion-reduced .showcase-wave{ opacity: 1; transition: none; }

.showcase-glow{
  position: absolute;
  top: 50%; left: 50%;
  width: min(520px, 92vw);
  height: min(520px, 92vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,98,.22), transparent 72%);
  filter: blur(34px);
  opacity: .45;
  pointer-events: none;
  will-change: transform, opacity;
}
.showcase-stage::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.4) 100%);
}
body.motion-lite .showcase-glow{ filter: blur(16px); opacity: .32; }
.showcase-car{
  position: absolute;
  top: 52%; left: 50%;
  width: min(340px, 68vw);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  text-align: center;
}
/* Traveling gold edge-light — lives entirely OUTSIDE the photo's own box
   (negative inset, and stacked behind it via z-index), so it can only
   ever be visible as a soft glow peeking around the card's edge, never
   as an overlay on the vehicle image itself. Driven every frame by
   --edge-side / --edge-glow from the scroll engine. */
.showcase-car::after{
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  opacity: var(--edge-glow, 0);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,217,152,.6) var(--edge-side, 50%),
    transparent 100%);
  filter: blur(9px);
}
.showcase-car-media{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  /* Lifted slightly toward the viewer, on its own 3D plane above the
     card's text/price surface — the "image floats above the card"
     depth cue, subtle enough not to read as a gimmick. */
  transform: translateZ(22px);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(230,199,102,.12),
    0 0 22px -10px rgba(230,199,102,.2);
  transition: box-shadow .6s ease;
}
.showcase-car.is-focused .showcase-car-media{
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(230,199,102,.3),
    0 0 44px -8px rgba(230,199,102,.4);
}
.showcase-car-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 78%; }
/* NOTE: no overlay of any kind sits on .showcase-car-media itself — the
   vehicle photograph must stay completely clean. Edge lighting lives on
   the card's outer boundary instead, see .showcase-car-edge below. */
/* Faint showroom-floor reflection beneath each card, matching the
   Spotlight scene's treatment for a consistent visual language. */
.showcase-reflection{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: clamp(18px, 5vw, 46px);
  overflow: hidden;
  opacity: .18;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
}
.showcase-reflection img{ display: block; width: 100%; transform: scaleY(-1); }
body.motion-lite .showcase-reflection{ display: none; }
.showcase-car-name{
  margin-top: 1rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--text);
}
.showcase-detail{
  margin-top: .6rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .4s var(--ease-out);
}
.showcase-car.is-focused .showcase-detail{
  opacity: 1;
  max-height: none;
  overflow: visible;
}
.showcase-type{
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.showcase-specs{
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.showcase-desc{
  margin: .7rem auto 0;
  max-width: 34ch;
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.showcase-price{
  margin-top: .7rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text);
}
.showcase-price b{ color: var(--gold); }
.showcase-price span{ font-family: 'Montserrat', sans-serif; font-size: .7rem; color: var(--text-faint); }
.showcase-detail .car-link{ display: inline-flex; margin-top: .8rem; }

.showcase-footer-row{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 2rem;
}
.showcase-progress{ display: flex; gap: .6rem; }
.showcase-tick{
  width: 30px; height: 3px;
  background: var(--border-strong);
  border: none; padding: 0;
}
.showcase-tick.is-active{ background: var(--gold); }
.showcase-cta{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.showcase-cta.is-shown{ opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   MOBILE / LITE — shorter runway, no blur, no 3D rotation
   --------------------------------------------------------------------- */
@media (max-width: 860px){
  .scene-hero{ height: 140vh; }
  .scene-spotlight{ height: 200vh; }
  .scene-showcase{ height: 340vh; }
  /* Stack: headline above the video, decorative side-elements dropped
     entirely (already display:none below 1080px) so nothing competes
     with the video for this narrower, shorter stage. */
  .spotlight-layout{
    flex-direction: column;
    /* Text sits as a fixed header right under the nav; the video gets
       the entire leftover space below it (next rule) and centres
       itself within that space, rather than the two being centred
       together as one block — that coupling was what made a bigger
       video push the text around, and a bigger text push the video
       down. Each now has its own clear region. */
    justify-content: flex-start;
    gap: 1rem;
    padding-top: calc(var(--nav-h) + .5rem);
    padding-bottom: .5rem;
    height: 100%;
  }
  .spotlight-text{
    /* Base CSS gives this flex:1 1 260px for the desktop side-by-side
       row — sizing to content instead keeps it acting like a compact
       header rather than stretching to claim vertical space. */
    flex: 0 0 auto;
    max-width: 92vw;
    text-align: center;
  }
  .spotlight-brand{ margin-bottom: .35rem; }
  .spotlight-heading{ font-size: clamp(1.2rem, 5vw, 1.7rem); }
  .spotlight-tagline{ margin: .45rem auto 0; font-size: .84rem; line-height: 1.5; }
  /* flex:1 hands this stage all the space left after the text header,
     and its own (base-CSS) align-items/justify-content:center then
     centres the video frame within that region specifically — not the
     whole page — so it reads as "the video, centred below the
     heading" rather than a flat top-to-bottom stack. */
  .spotlight-video-stage{ flex: 1 1 auto; min-height: 0; }
  /* transform-origin: top — the scroll-driven scale() in cinematic.js
     shrinks/grows the frame from its top edge instead of its centre,
     so during entrance/exit it stays visually attached right under the
     text instead of shrinking inward and leaving a gap above it. */
  .spotlight-video-frame{ height: min(70vh, 660px); border-radius: 8px; transform-origin: center top; }
  .spotlight-sound-btn{ width: 38px; height: 38px; right: 12px; bottom: 12px; }

  /* ---- Featured Vehicles showcase — reclaim vertical room ----
     A focused card (image + name + type + specs + description + price
     + View Details) was measured taller than the space actually left
     for it between the header and the pagination-tick row below, so
     its bottom edge spilled down into that row — the price/link and
     the ticks visually interleaved instead of sitting in clearly
     separate bands. Trimmed on two fronts: less chrome padding around
     the card (more height handed to it) and tighter card-internal
     spacing/type so it's comfortably shorter than that space, with a
     visible margin to spare rather than an exact fit. */
  .showcase-sticky{ padding-top: calc(var(--nav-h) + 1.2rem); }
  .showcase-footer-row{ gap: .7rem; padding-bottom: 1rem; }
  .showcase-car{ top: 50%; }
  .showcase-car-name{ margin-top: .6rem; font-size: 1.05rem; }
  .showcase-detail{ margin-top: .4rem; }
  .showcase-specs{ margin-top: .4rem; font-size: .74rem; gap: .6rem; }
  .showcase-desc{ margin-top: .5rem; font-size: .78rem; line-height: 1.45; }
  .showcase-price{ margin-top: .5rem; font-size: 1.05rem; }
  .showcase-detail .car-link{ margin-top: .5rem; }
}
@media (max-width: 560px){
  .showcase-car{ width: min(260px, 78vw); }
}

/* ---------------------------------------------------------------------
   MOBILE PHONES ONLY — Featured Vehicles becomes a plain horizontal
   finger-swipe carousel, with NO connection to the page's vertical
   scroll position in either direction. Tablets and desktop are
   untouched (they stay above this breakpoint and keep the pinned
   scroll-driven showcase above, unchanged). js/cinematic.js skips
   updateShowcase() entirely under this same breakpoint (isMobilePhone),
   so nothing here ever fights JS for control — this is the ONLY styling
   these cards get on a phone.
   --------------------------------------------------------------------- */
@media (max-width: 699px){
  .scene-showcase{ height: auto; }
  .showcase-sticky{
    position: static;
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .showcase-stage{
    flex: none;
    perspective: none;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 1rem 6vw 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .showcase-stage::after{ display: none; }
  .showcase-stage::-webkit-scrollbar{ display: none; }
  .showcase-wave,
  .showcase-glow{ display: none; }
  .showcase-car{
    position: relative;
    top: auto; left: auto;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    flex: 0 0 auto;
    width: min(280px, 80vw);
    scroll-snap-align: center;
  }
  .showcase-car::after{ display: none; }
  .showcase-detail{
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Pagination ticks are meaningless once the cards aren't scroll-linked
     to a single continuous "focus" number anymore — the swipe itself,
     plus each card peeking at the edges, is the navigation affordance
     here. "View Full Fleet" stays, always visible (it no longer has a
     scroll position to react to). */
  .showcase-progress{ display: none; }
  .showcase-cta{ opacity: 1 !important; transform: none !important; }
}
/* Very short mobile viewports — the tagline is the first thing to give
   way so the heading and video both stay comfortably in view. */
@media (max-height: 700px) and (max-width: 860px){
  .spotlight-tagline{ display: none; }
  .spotlight-video-frame{ height: min(60vh, 520px); }
}
/* Short landscape viewports (phone rotated) — cap by width instead of
   height so the portrait frame never forces the page to scroll under
   the pinned scene. */
@media (max-height: 480px) and (orientation: landscape){
  .spotlight-layout{ flex-direction: row; gap: 1.2rem; padding-top: 0; }
  .spotlight-text{ text-align: left; max-width: 40vw; }
  .spotlight-tagline{ display: none; }
  .spotlight-video-frame{ height: min(88vh, 420px); }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION — disable pinning + scroll-linked transforms entirely;
   present everything as a normal, fully-visible stacked layout.
   --------------------------------------------------------------------- */
body.motion-reduced .scene-hero,
body.motion-reduced .scene-spotlight,
body.motion-reduced .scene-showcase{
  height: auto;
}
body.motion-reduced .scene-hero .hero{ position: relative; }
body.motion-reduced .spotlight-sticky,
body.motion-reduced .showcase-sticky{
  position: relative;
  height: auto;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
body.motion-reduced .spotlight-layout{
  flex-direction: column;
  padding: 2rem 1.5rem;
}
body.motion-reduced .spotlight-video-frame,
body.motion-reduced .spotlight-text,
body.motion-reduced .spotlight-tagline{
  opacity: 1 !important;
  transform: none !important;
}
body.motion-reduced .spotlight-text{ text-align: center; }
body.motion-reduced .spotlight-heading::after{ display: none; }
body.motion-reduced .sl-line .ch{ transform: none !important; }
body.motion-reduced .spotlight-deco{ display: none; }
body.motion-reduced .spotlight-next,
body.motion-reduced .showcase-cta{
  opacity: 1 !important;
  transform: none !important;
}
body.motion-reduced .showcase-stage{
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  perspective: none;
  padding: 2rem 0;
}
body.motion-reduced .showcase-car{
  position: static;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  width: min(280px, 80vw);
}
body.motion-reduced .showcase-reflection,
body.motion-reduced .showcase-car-media::before{ display: none; }
body.motion-reduced .showcase-car .showcase-detail{
  opacity: 1;
  max-height: none;
  overflow: visible;
}
body.motion-reduced .light-sweep{ display: none; }