/* Home page: a clip opens, a product panel covers it, its cards follow. Twice — the Master
   Collection over the banner reel, then Simulacrum over the graded clip. */
.opening-scene{position:relative;height:calc(100svh - 92px);min-height:600px}
.scene-stage{height:100%;position:relative;overflow:hidden}
.scene-media{position:absolute;inset:0}
/* The banner is a clip and the Simulacrum opening is a still; the global img rule does not
   reach video, so both are stated here. The banner is 2.39:1 inside a ~1.7:1 box, so it
   covers and crops at the sides. */
.scene-media video,.scene-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.statement{position:absolute;left:var(--gutter);top:48px;max-width:calc(100% - 2 * var(--gutter));text-shadow:0 1px 14px #0009}
.statement h1{font-size:calc(clamp(52px,7.4vw,118px) * var(--display-scale));margin:0 0 28px}
.cover-panel{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:0 var(--gutter);padding:0 32px;overflow:hidden}
.cover-panel>*{position:relative}
.panel-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:72px 0}
.panel-object{grid-column:1/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;min-height:460px}
.panel-object .disc{width:min(86%,420px)}
.panel-copy{grid-column:7/13;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.panel-copy h2{font-size:calc(clamp(44px,4.6vw,78px) * var(--display-scale))}
.panel-copy>p{font-size:19px;max-width:30em;color:#c6cad3}
.delivery{border-top:1px solid var(--line)}
@media(min-width:900px){
  .opening-scene{height:calc(136svh - 140px)}
  .opening-scene .scene-stage{position:sticky;top:0;height:100svh}
  .cover-panel{margin-top:-36svh}
}
@media(max-width:1000px){
  .panel-object{grid-column:1/6}
  .panel-copy{grid-column:6/13}
}
@media(max-width:700px){
  .opening-scene{height:calc(88svh - 76px);min-height:560px}
  .statement{top:34px}
  .statement h1{font-size:46px}
  .cover-panel{padding:0 20px}
  .panel-grid{display:flex;flex-direction:column;gap:40px;padding:36px 0}
  .panel-object{min-height:300px;gap:24px}
  .panel-object .disc{width:min(92%,330px)}
  .panel-copy h2{font-size:42px}
  .panel-copy>p{font-size:16px}
}
/* Master Collection object: the six pack artworks staggered along one shared baseline, as
   if all six were standing on the same surface. No rotation — a tilt would break the shared
   bottom edge. One knob sets the whole stack: --plate is the front plate's share of the box
   width, the step is whatever is left split five ways, so the six always fill the box exactly
   and nothing is clipped by the panel. The box aspect follows from --plate, since plates are
   sized by width alone — 840:797, the packaging artwork's own proportions — and every bottom
   edge sits on the box's bottom. At .62 the five plates behind the front one each keep a
   sliver wide enough to read their pack's label. The back plates are darkened just enough to
   read as depth; the ramp stays shallow because each plate carries its own artwork, and
   darkening them like the blank stand-ins stops the six labels being readable.
   The shadow is a drop-shadow on the image, not a box-shadow on the plate: the artwork is
   transparent outside the case, and a box-shadow traces the element rectangle instead, which
   prints a visible edge across the transparent margin.
   Declared after the phone override above so the stack's sizing wins at every width. */
.disc-stack{position:relative;--plate:.62;--step:calc((1 - var(--plate)) / 5);width:min(100%,560px);aspect-ratio:calc(1.054 / var(--plate))}
.disc-stack .disc{position:absolute;bottom:0;width:calc(var(--plate) * 100%);max-width:none}
.disc-stack .disc img{filter:drop-shadow(-12px 0 16px #000000b3)}
.disc-stack .disc:nth-child(1){left:0;filter:brightness(.84)}
.disc-stack .disc:nth-child(2){left:calc(var(--step) * 100%);filter:brightness(.87)}
.disc-stack .disc:nth-child(3){left:calc(var(--step) * 200%);filter:brightness(.90)}
.disc-stack .disc:nth-child(4){left:calc(var(--step) * 300%);filter:brightness(.93)}
.disc-stack .disc:nth-child(5){left:calc(var(--step) * 400%);filter:brightness(.96)}
.disc-stack .disc:nth-child(6){left:calc(var(--step) * 500%)}
@media(max-width:700px){.disc-stack{--plate:.72;width:100%}}
body[data-motion=off] .scene-stage{position:relative}
body[data-motion=off] .opening-scene{height:calc(100svh - 140px)}
body[data-motion=off] .cover-panel{margin-top:0}
@media(prefers-reduced-motion:reduce){
  .scene-stage{position:relative}
  .opening-scene{height:calc(100svh - 140px)}
  .cover-panel{margin-top:0}
}

/* Second arc: the Simulacrum title card opens and its panel covers it, exactly like the first
   arc. Neither is offset: the home page has no sticky bar above it. The card carries its own
   SIMULACRUM wordmark, so this scene's heading is left in the document for the outline and
   for screen readers but not painted twice, and neither home opening carries a caption: the
   images speak for themselves and their provenance is in the generated sources ledger.
   Where the link goes is set by three things. The panel rises over the bottom 36svh of the
   sticky stage, so anything below that line is buried once the arc completes — the first arc
   escapes this by sitting at the top, which here is where the wordmark is. The card's middle
   is the type block, out to the L-DAT badge. And the card covers the stage, so with a window
   narrower than 16:9 its vertical mapping is the stage's own height. Hence 52svh: the link
   lands beside the type block, on the empty right of the recomposed card, 16svh clear of the
   panel at rest. Without the sticky stage nothing covers the card and it sits at its lower
   edge. */
.sim-scene{height:100svh;min-height:600px}
.sim-scene .statement{top:auto;bottom:44px}
.sim-scene .statement h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-object{overflow:hidden}
.case-object img{width:100%;height:100%;object-fit:contain}
.panel-object .case-object{width:auto;height:clamp(320px,42svh,520px);aspect-ratio:900/1237}
@media(min-width:900px){
  .sim-scene{height:136svh}
  .sim-scene .scene-stage{top:0;height:100svh}
  .sim-scene .statement{left:auto;right:var(--gutter);bottom:52svh;text-align:right}
}
@media(max-width:700px){
  /* Too narrow to crop a title card to: the scene gives up its full-height frame, the artwork
     runs at its own 16:9, and the link sits underneath it rather than on top of it. */
  .sim-scene,.sim-scene .scene-stage{height:auto;min-height:0}
  .sim-scene .scene-stage{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:28px}
  .sim-scene .scene-media{position:relative;width:100%}
  .sim-scene .scene-media img{height:auto;aspect-ratio:16/9}
  .sim-scene .statement{position:static;margin:14px var(--gutter) 0;max-width:none;text-shadow:none}
}
/* Motion off and reduced motion collapse both arcs: the generic rules already release the
   sticky stage and the negative panel margin, so only this scene's own height is restated. */
body[data-motion=off] .sim-scene{height:100svh}
@media(prefers-reduced-motion:reduce){
  .sim-scene{height:100svh}
}

/* The Master Collection panel carries three affordances in descending weight: the buy button
   in the bar, the route into the product page, then the scroll to the six packs. Wrapping the
   two links in one child keeps .panel-copy's 24px column rhythm. */
.panel-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.panel-link-secondary{color:var(--muted)}
.panel-link-secondary:hover,.panel-link-secondary:focus-visible{color:var(--ink)}
@media(max-width:700px){.panel-links{gap:8px 24px}}