/* Persistent scroll-position choreography. Local media motion retains independent clocks. */
#home .continuous-veil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0}
#home .continuous-canvas .story-copy{transition:none;will-change:opacity,translate}
#home .continuous-canvas #story-copy-next{position:absolute;z-index:3}
#home .continuous-canvas #story-count{font-size:10px;letter-spacing:.12em;opacity:.65;min-width:3em}
#home .continuous-canvas::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--story-progress,0) * 100%);background:#d9c6a2;opacity:.55;pointer-events:none;z-index:10}
/* Automotive source framing may crop spare edges; horse compositions remain complete and fixed. */
#home .story-layer:is([data-media=S07],[data-media=S08])[data-comp]{--bw:max(100cqw,calc(100cqh / var(--pa)));--bh:calc(var(--bw) * var(--pa));--bl:calc((100cqw - var(--bw)) / 2);--bt:calc((100cqh - var(--bh)) / 2)}
@media(prefers-reduced-motion:reduce){#home .continuous-canvas .story-copy{translate:none!important}}
/* Authentic phone footage occupies the canvas width, preserving its complete source ratio.
   Only spare sky/road meet a soft edge; the real sign and full lineup stay unaltered. */
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-layer[data-frame=window]{inset:86px 0 auto 0;width:100%;height:calc(100vw * 16 / 9);background:#0d0f10;
  -webkit-mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent)}
 #home .story-layer[data-frame=window] img,#home .story-layer[data-frame=window] video{inset:0;width:100%;height:100%;object-fit:fill;object-position:center}
 #home .story-stage[data-layout=window] .story-shade{background:linear-gradient(180deg,rgba(3,5,5,.75),rgba(3,5,5,.4) 23%,transparent 38%,transparent 76%,rgba(3,5,5,.6))}
}

/* Finish the contained source perimeter against its ambient field without cropping artwork. */
@media(min-width:701px) and (min-aspect-ratio:8/5){
 #home .story-layer:is([data-media=S01],[data-media=WALK],[data-media=REAR],[data-media=S03]) :is(img,video){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
}
/* Walking sources hold their genuine terminal pose while the established sky light remains alive. */
#home .story-layer:is([data-media=WALK],[data-media=REAR]).has-atmosphere .scene-atmosphere{display:block}
#home .story-layer:is([data-media=WALK],[data-media=REAR]) .scene-atmosphere :is(.scene-cloud,.scene-valley,.scene-foreground){display:none}
/* Bridge stacking stays inside the media plane: shade, veil and copy keep their order above it. */
#home .continuous-canvas .story-media{isolation:isolate}
/* Client vehicle references: the full composed field, with the same 20px perimeter finish as the estate.
   Copy sits clear of the CSL logo, seats, wheels and car silhouettes. */
@media(min-width:701px) and (min-aspect-ratio:8/5){
 #home .story-layer:is([data-media=DRIVER],[data-media=COLOUR],[data-media=DETAIL],[data-media=WORLD]) :is(img,video){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
}
@media(min-width:701px) and (min-aspect-ratio:801/1000){
 #home .story-stage.continuous-canvas[data-chapter=C05B] .story-copy{left:7%;top:max(96px,12svh);bottom:auto;width:36%;transform:none}
 #home .story-stage.continuous-canvas[data-chapter=C05B] .story-shade{background:linear-gradient(160deg,rgba(5,9,10,.62),rgba(5,9,10,.2) 34%,transparent 52%)}
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-copy{left:5%;top:auto;bottom:max(15svh,128px);width:34%;transform:none}
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-shade{background:linear-gradient(20deg,rgba(5,9,10,.72),rgba(5,9,10,.25) 32%,transparent 50%)}
}
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage.continuous-canvas:is([data-chapter=C05B],[data-chapter=C07]) .story-shade{background:linear-gradient(180deg,rgba(5,9,10,.8),rgba(5,9,10,.42) 22%,transparent 38%)}
}
/* Mobile opening: the shared estate camera reserves quiet sky above the estate; copy sits there, clear of
   the horse (about y 400-580 at 390x844) and below the header, from first paint (before the story script
   sets data-chapter). The horse and source are not moved. */
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage[data-copy-mobile=top]:is(:not([data-chapter]),[data-chapter=C01],[data-chapter=C02],[data-chapter=C03]) .story-copy{top:calc(122px + env(safe-area-inset-top));bottom:auto;transform:none}
 #home .story-stage[data-copy-mobile=top]:is(:not([data-chapter]),[data-chapter=C01],[data-chapter=C02],[data-chapter=C03]) .story-shade{background:linear-gradient(180deg,rgba(5,9,10,.55),rgba(5,9,10,.2) 30%,transparent 42%)}
}
/* Mobile reveal/closing: a local scrim behind the copy zone only. The portrait window starts at 86px and is
   100vw*16/9 tall; the scrim has faded out by 34% of it (60.4vw), above the authentic sign and facade. A second
   local scrim covers only the last 96px behind the story controls (bright road on short phones). */
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage.continuous-canvas:is([data-chapter=C09],[data-chapter=C11]) .story-shade{
  background:linear-gradient(0deg,rgba(5,9,10,.72),rgba(5,9,10,.5) 56px,rgba(5,9,10,0) 96px),
   linear-gradient(180deg,rgba(5,9,10,.76),rgba(5,9,10,.68) calc(86px + 60.4vw - 72px),rgba(5,9,10,0) calc(86px + 60.4vw))}
}
/* The 320×568 review viewport scrolls the fixed stage beneath the fixed header. Give only C09's short-phone
   headline enough local clearance; its approved portrait window and every larger breakpoint stay unchanged. */
@media(max-width:340px) and (max-height:620px){
 #home .story-stage.continuous-canvas[data-chapter=C09] .story-copy{
  top:calc(180px + env(safe-area-inset-top))
 }
}
/* On phones shorter than 86px + 100vw*16/9 the closing window overflows the stage; overflow:hidden still lets
   focus/scrollIntoView scroll the stage internally, lifting the copy under the fixed header. clip removes that
   scroll range without changing what is painted. */
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage.continuous-canvas[data-chapter=C11]{overflow:clip}
}
/* C06 full scene: local scrims only — behind the headline (foliage/sky) and behind the story controls (pale
   paving). Both fade out before the car body (desktop car from y≈36%, wheels end ≈110px above the bottom). */
@media(min-width:701px) and (min-aspect-ratio:801/1000){
 #home .story-stage.continuous-canvas[data-chapter=C06] .story-shade{background:
  linear-gradient(180deg,rgba(5,9,10,.84),rgba(5,9,10,.8) 20%,rgba(5,9,10,.72) 25%,rgba(5,9,10,.36) 30%,rgba(5,9,10,0) 35%),
  linear-gradient(0deg,rgba(5,9,10,.84),rgba(5,9,10,.76) 84px,rgba(5,9,10,0) 128px)}
}
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage.continuous-canvas[data-chapter=C06] .story-shade{background:
  linear-gradient(180deg,rgba(5,9,10,.74),rgba(5,9,10,.56) 160px,rgba(5,9,10,0) 270px),
  linear-gradient(0deg,rgba(5,9,10,.84),rgba(5,9,10,.72) 120px,rgba(5,9,10,0) 210px)}
}
/* Final-execution readability (C05B / C07 / C08 only): copy clears the header, and a quiet bottom band sits
   behind the story controls and Skip. Compositions and media are unchanged. */
@media(min-width:701px) and (min-aspect-ratio:801/1000){
 #home .story-stage.continuous-canvas[data-chapter=C05B] .story-copy{top:max(120px,15svh)}
 #home .story-stage.continuous-canvas[data-chapter=C05B] .story-shade{background:
  linear-gradient(160deg,rgba(5,9,10,.62),rgba(5,9,10,.2) 34%,transparent 52%),
  linear-gradient(0deg,rgba(5,9,10,.84),rgba(5,9,10,.7) 84px,rgba(5,9,10,0) 128px)}
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-shade{background:
  linear-gradient(20deg,rgba(5,9,10,.72),rgba(5,9,10,.25) 32%,transparent 50%),
  linear-gradient(0deg,rgba(5,9,10,.72),rgba(5,9,10,.56) 84px,rgba(5,9,10,0) 128px)}
 #home .story-stage.continuous-canvas[data-chapter=C08] .story-shade{background:
  linear-gradient(0deg,rgba(5,9,10,.74),rgba(5,9,10,.58) 84px,rgba(5,9,10,0) 128px)}
}
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage.continuous-canvas[data-chapter=C05B] .story-shade{background:
  linear-gradient(180deg,rgba(5,9,10,.86),rgba(5,9,10,.74) 160px,rgba(5,9,10,0) 260px),
  linear-gradient(0deg,rgba(5,9,10,.86),rgba(5,9,10,.74) 96px,rgba(5,9,10,0) 170px)}
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-shade{background:
  linear-gradient(180deg,rgba(5,9,10,.8),rgba(5,9,10,.42) 22%,transparent 38%),
  linear-gradient(0deg,rgba(5,9,10,.88),rgba(5,9,10,.76) 96px,rgba(5,9,10,0) 170px)}
 #home .story-stage.continuous-canvas[data-chapter=C08] .story-shade{background:
  linear-gradient(0deg,rgba(5,9,10,.82),rgba(5,9,10,.62) 120px,rgba(5,9,10,0) 200px)}
}
/* The approved mobile DRIVER and DETAIL posters match the portrait canvas and
   therefore use the base full-bleed composition. No inset width or black side
   gutters are introduced. At the shortest 320px review viewport, retain only
   the local readability treatment around DETAIL's controls. */
@media(max-width:340px) and (max-height:700px) and (orientation:portrait){
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-shade{background:
  linear-gradient(180deg,rgba(5,9,10,.8),rgba(5,9,10,.42) 22%,transparent 38%),
  linear-gradient(0deg,rgba(5,9,10,.88),rgba(5,9,10,.76) 64px,rgba(5,9,10,0) 112px)}
 #home .story-stage.continuous-canvas[data-chapter=C07] .story-skip{left:23px!important;right:auto!important;top:156px!important;bottom:auto!important}
}
@media(max-width:700px) and (max-height:620px){
 #home .story-stage.continuous-canvas[data-chapter=C08] .story-copy{top:100px}
}
/* Short wide desktop screens: the C08 headline scales with height so it stays above the collection roofline. */
@media(min-width:701px) and (min-aspect-ratio:801/1000) and (max-height:660px){
 #home .story-stage.continuous-canvas[data-chapter=C08] .story-copy{top:max(118px,15svh)}
 #home .story-stage.continuous-canvas[data-chapter=C08] :is(#home-title,#home-title-next){font-size:clamp(34px,8svh,60px);line-height:1.02}
}
/* Phone M4 motion uses the same approved poster and 1.2% / six-second drift
   as its video, avoiding that video's additional compression generation. */
@keyframes mobile-m4-source-drift{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@media(max-width:700px),(max-aspect-ratio:4/5){
 /* Scroll already owns layer opacity. A second 1.1s CSS transition would
    crossfade the old seat back over the atomically selected M4 scene. */
 #home .continuous-canvas .story-layer{transition:none}
 #home .continuous-canvas .story-layer video{transition:none}
 #home .story-layer[data-media=COLOUR] img{animation:mobile-m4-source-drift 6s ease-in-out infinite;animation-play-state:paused;transform-origin:center}
 #home .story-stage[data-paused=false][data-suspended=false] .story-layer.is-current[data-media=COLOUR] img{animation-play-state:running}
 #home .story-layer[data-media=COLOUR] video{display:none}
}