/* ==========================================================================
   NADA ENERGY
   Base CSS renders a plain, readable, stacked document. `html.motion` (added
   by app.js only when motion is allowed and the viewport is big enough) opts
   into the pinned scenes and the 3D arc. Nothing below the fold depends on JS.
   ========================================================================== */

@font-face{
  font-family:"Archivo";src:url(fonts/archivo-roman.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";src:url(fonts/archivo-italic.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;
}

:root{
  --ink:#07080a;
  --ink-2:#101319;
  --paper:#f3f1ed;
  --mute:#8b919b;
  --accent:#c8ced8;          /* JS overwrites per flavour */
  --flood:#0b0d11;
  --edge:rgba(255,255,255,.12);
  --hud-h:62px;
}
*{box-sizing:border-box}
/* A decorative element past the viewport makes the document scroll sideways
   and slides the fixed header off. clip, not hidden, so sticky still works. */
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* fixed, NOT absolute. Absolute positions it against the initial containing
   block, so tabbing anywhere below the first screen parks it at the top of the
   DOCUMENT rather than the top of the viewport — off-screen, and the one user
   who needs it is the one who cannot see where it went. */
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--ink);
  padding:11px 18px;border-radius:2px;font-weight:700;text-decoration:none;transition:top .18s ease}
/* Both land in the same place. Only one can be focused at a time, so offsetting
   the second just parks it in from the edge with nothing beside it. */
.skip:focus{top:12px}
/* The skip targets take focus programmatically so the jump actually moves the
   keyboard position — a bare id on a <section> is not focusable, so without
   this the link scrolls and leaves focus behind in the header. They are
   regions rather than controls, so no ring is drawn on them. */
[tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){ .skip{transition:none} }
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- display type ---------- */
.disp{
  font-style:italic;font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.86;
}

/* ==========================================================================
   HUD
   ========================================================================== */
.hud{
  position:fixed;top:0;left:0;right:0;height:var(--hud-h);z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 18px;gap:12px;
  /* No backdrop-filter here. The header sits over the product scenes, and a
     blurred backdrop turns the can tops into a smeared halo along the exact
     line where the filter region ends. A taller scrim does the same job. */
  background:linear-gradient(rgba(7,8,10,.96) 40%,rgba(7,8,10,.72) 70%,rgba(7,8,10,0));
  height:calc(var(--hud-h) + 26px);padding-bottom:26px;
}
.hud-read{
  margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-variant-numeric:tabular-nums;
}
.hud-sep{opacity:.45;padding:0 .35em}
.hud-mark{
  justify-self:center;text-decoration:none;font-style:italic;font-weight:900;
  font-stretch:125%;font-size:19px;letter-spacing:-.02em;color:var(--paper);
}
.hud-nav{justify-self:end;display:flex;align-items:center;gap:10px}
.hud-menu,.hud-cta{
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;min-height:36px;border-radius:100px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
}
.hud-menu{background:none;border:1px solid var(--edge);color:var(--paper)}
.hud-menu:hover{border-color:var(--paper)}
.hud-cta{background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:background .2s ease,color .2s ease}
.hud-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

.menu{
  position:fixed;top:var(--hud-h);right:14px;z-index:95;
  display:flex;flex-direction:column;min-width:210px;padding:8px;
  background:rgba(16,19,25,.96);border:1px solid var(--edge);border-radius:14px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.menu[hidden]{display:none}
.menu a{
  text-decoration:none;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:600;
  min-height:44px;display:flex;align-items:center;
}
.menu a:hover{background:rgba(255,255,255,.08)}

/* ==========================================================================
   BASE (no-JS / reduced-motion / small screens) — a plain document
   ========================================================================== */
.scene{padding:calc(var(--hud-h) + 40px) 18px 60px}
.pin{max-width:1180px;margin:0 auto}
.void,.plinth,.ghost{display:none}

.stage-kicker{
  margin:0 0 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  text-align:center;
}
.ring{display:none}

.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.grid a{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 8px 18px;
  text-decoration:none;border:1px solid var(--edge);border-radius:16px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 70%);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.grid a:hover{border-color:var(--accent);transform:translateY(-3px)}
.grid img{height:190px;width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.grid span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center}

/* Controls that only work with scripting are hidden until `js` is present,
   and the content they reveal is served in full as static text instead. */
.scrub,.rail,.claim-one{display:none}
.js .scrub{display:block}
.js .rail{display:flex}
.js .claim-one{display:block}
.js .claim-all{display:none}
.claim-all{margin:0}
.claim-all dt{margin:20px 0 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-all dt:first-child{margin-top:0}
.claim-all dd{margin:0;color:#c3c8d1;max-width:62ch}

/* the scrub bar */
.scrub{max-width:620px;margin:38px auto 40px;text-align:center}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:grab;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
.scrub-now{margin:14px 0 0;font-size:13.5px;color:var(--mute);min-height:3.2em}
.scrub-now strong{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:23px;letter-spacing:-.02em;color:var(--paper);margin-bottom:5px;
}

/* ---------- flavour detail ---------- */
.detail{display:grid;gap:30px}
.detail-eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.detail-name{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,92px);line-height:.86;letter-spacing:-.03em;
}
.detail-note{margin:16px 0 0;max-width:34ch;color:#c3c8d1}
.claim{margin-top:32px;padding-top:26px;border-top:1px solid var(--edge);max-width:42ch;min-height:190px}
.claim-h{margin:0 0 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-p{margin:0;color:#c3c8d1;line-height:1.72}
.detail-can{margin:0;text-align:center}
.detail-can img{height:min(52vh,430px);width:auto;margin:0 auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}

.rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rail button{
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;min-height:44px;border-radius:100px;cursor:pointer;
  background:none;border:1px solid var(--edge);color:var(--mute);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.rail button:hover{color:var(--paper);border-color:var(--paper)}
.rail button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#0a0b0d}

/* ---------- line-up ---------- */
.scene-lineup{padding:80px 18px 90px;background:linear-gradient(var(--ink),#0d1015)}
.lineup-head{max-width:1180px;margin:0 auto 44px}
.lineup-head h2{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(40px,10vw,110px);line-height:.85;letter-spacing:-.035em;
}
.lineup-head h2 em{font-style:italic;color:var(--accent)}
.lineup-head p{margin:20px 0 0;max-width:46ch;color:#aab0ba}
.row{
  max-width:1180px;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(2px,1.4vw,14px);flex-wrap:wrap;
}
.row img{height:clamp(150px,26vw,300px);width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))}

/* ---------- faq ---------- */
.scene-faq{padding:90px 18px 100px;background:#0d1015}
.faq-h{
  max-width:1180px;margin:0 auto 44px;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,104px);line-height:.84;letter-spacing:-.035em;
}
.faq-h em{font-style:italic;-webkit-text-stroke:1px var(--paper);color:transparent}
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--edge)}
.faq-list details{border-bottom:1px solid var(--edge)}
.faq-list summary{
  cursor:pointer;padding:22px 44px 22px 0;position:relative;list-style:none;
  font-size:clamp(16px,2.4vw,19px);font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list p{margin:0 0 26px;max-width:62ch;color:#aab0ba}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:70px 18px 40px;border-top:1px solid var(--edge)}
.foot-in{max-width:1180px;margin:0 auto}
.foot-mark{
  margin:0 0 34px;font-style:italic;font-weight:900;font-stretch:125%;
  font-size:clamp(56px,17vw,190px);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);
}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.foot-cols h3{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.foot-cols p{margin:0;font-size:14.5px;color:#9aa0aa;line-height:1.7}
.foot-note{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--edge);
  font-size:12.5px;color:#7d838e;max-width:62ch}   /* 5.26:1; #6f7580 was 4.32 */

/* ==========================================================================
   MOTION MODE — pinned scenes and the 3D arc
   ========================================================================== */
html.motion .scene{padding:0;position:relative}
/* One screen. In v1 this was 360vh because document scroll WAS the arc's
   position; here the arc has its own wheel surface, so the section is just a
   section and the page is ~2,000px shorter. */
html.motion .scene-range{height:100vh}
/* In motion mode the flavour copy lives in the click-opened viewer, so this
   section is only the plain-mode / no-JS home for the same words. */
html.motion .scene-flavour{display:none}
/* No negative margin. There is no sticky tail to cover any more: the range is
   exactly one viewport and the line-up simply follows it. */
html.motion .scene-lineup{position:relative;z-index:3;
  background:linear-gradient(180deg,var(--ink),#0d1015)}

/* No CSS scroll-snap. The arc is not a scroll container, so the browser has
   nothing to snap; settling on a can is done in JS after the wheel goes quiet. */
html.locked{overflow-y:hidden}
html.motion .pin{
  position:relative;height:100vh;max-width:none;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
/* dvh, not vh, on anything that has to fit a phone screen. Mobile browsers
   report 100vh as the height WITHOUT their collapsing URL bar, so a 100vh pin
   is taller than what you can actually see and the bottom of the helix sits
   under the browser chrome until you scroll. dvh tracks the visible box. The
   100vh above stays as the fallback for anything that lacks dvh. */
@supports (height:100dvh){ html.motion .pin{height:100dvh} }

/* ---- no fold peek ------------------------------------------------------
   The range is one whole viewport again. v4 briefly ran it at 90dvh so the
   bottom edge sliced the top of "All eight", on the reasoning that a headline
   cut by the fold is the oldest way to say there is more below. It worked, and
   it is not what this section wants: the first screen is a product shot, and a
   second headline crowding into the bottom of it costs more than the cue is
   worth. The range reveals the cans and nothing else.

   WHAT THAT COSTS, so the next person does not rediscover it by accident. The
   range LOOPS, so it never ends and never hands the wheel back on its own; the
   way out is the gutters either side of the column (see .shaft). Those are a
   desktop affordance — under ~720px the column is wider than the screen, so
   there is no gutter, and with no peek either there is nothing on a phone
   saying a page exists below. The escape is real (a swipe below the cans
   scrolls the document, see drag.mode in app.js) but it is unadvertised. If
   phone bounce ever needs fixing, that is the thing to fix, and the cheapest
   honest fix is to put the peek back at this breakpoint only. */

/* ---- and that is exactly what this is ----------------------------------
   The peek, phones only. Desktop keeps the whole viewport for the cans
   because it does not need the cue: the gutters either side of the column are
   visibly page, and a wheel in one of them leaves the section immediately.
   Under 720px that column is wider than the screen, so there is no gutter to
   find, the range loops and never ends on its own, and nothing at all would
   say a page exists below. So the fold takes a tenth of the screen back and
   slices the top of "All eight" — enough to prove there is something under
   there and that it has been cut.

   720px is not a guess: it is the same threshold sizeArc() switches the helix
   geometry at, so the breakpoint where the cue appears is the breakpoint where
   the gutters disappear. Keep them in step.

   Both heights, not just the pin's — the section carries its own and the pin
   fills it, so shrinking one alone just leaves the difference as empty section
   and the fold lands in exactly the same place. The tenth comes out of the
   ring (slack: the cans are absolute at its midpoint, so a shorter box does
   not move them) and the air under the scrub. */
@media (max-width:719px){
  html.motion .scene-range{height:90vh}
  html.motion .scene-range .pin{height:90vh}
  html.motion .scene-range .ring{height:min(56vh,520px)}
  html.motion .scene-range .scrub{margin-bottom:26px}
  html.motion .scene-lineup{padding-top:7vh}
  @supports (height:100dvh){
    html.motion .scene-range{height:90dvh}
    html.motion .scene-range .pin{height:90dvh}
    html.motion .scene-lineup{padding-top:7dvh}
  }
}

html.motion .grid{display:none}

/* the studio void */
html.motion .void{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% 34%, color-mix(in srgb, var(--flood) 82%, #fff 6%) 0%, transparent 70%),
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent) 22%, #000) 0%, transparent 62%),
    var(--flood);
  transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .scene-range .stage-kicker{position:relative;z-index:3;margin-top:calc(var(--hud-h) + 6px)}

/* the arc */
html.motion .stage{
  position:relative;z-index:2;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 46%;
}

/* ---- the shaft ---------------------------------------------------------
   v4. The scroll container, lit.

   app.js bounds the wheel and the mouse drag to a column around the helix
   rather than to the whole pinned viewport, and hands the width here as
   --surf-w. This is that same column made visible — not a border, which would
   be a diagram of the rule rather than the room, but a shaft of light that the
   range stands in and the gutters do not. The fall-off IS the edge: the eye
   reads the lit region as the space this thing lives in, and the panel either
   side as somewhere else.

   It has to stay this quiet. Loud enough to notice and you have drawn a box on
   a product shot; the cursor does the precise half of the job the moment
   anyone actually reaches for it. */
.shaft{display:none}
html.motion .shaft{
  display:block;position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;
  width:var(--surf-w,62%);z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0,
    color-mix(in srgb, var(--paper) 5%, transparent) 24%,
    color-mix(in srgb, var(--paper) 5%, transparent) 76%,
    transparent 100%);
  /* Same reasoning as the rail's mask: the column is a shaft, not a panel, so
     it must not end on a hard line at the top or bottom of the stage. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}

/* ---- the rail ----------------------------------------------------------
   v4. The helix was invisible: eight cans placed on a curve, and the curve
   itself drawn nowhere. Which meant the section had no way of saying it was a
   TRACK — that the cans are beads on it, that it has a direction, and that it
   runs past what you can see. Every other cue (the counter, the scrub bar) is
   a label for that fact; this is the fact.

   Not in plain mode. There is no helix there to draw. */
.track{display:none}
html.motion .track{
  display:block;position:absolute;inset:0;
  /* Behind the cans. z-index:0 still makes a stacking context, and the ring
     below takes 1, so the painting order is stated rather than inferred from
     DOM order and a pair of `auto`s. */
  z-index:0;pointer-events:none;
  /* A line that STOPS inside the frame reads as a decoration. A line that
     dissolves off both edges reads as something that continues past them,
     which is the entire point — the eight cans are a window onto a run, not
     the whole of it. The fade also keeps the rail off the kicker above and the
     scrub below, so it never has to compete with type. */
     Graded rather than a plain fade in and out, because the top of the stage
     has the kicker line living in it — measured at 16 to 21% of the stage
     height across every breakpoint — and the rail passes straight through it.
     So the first stretch is held at a fraction of full strength: enough that
     the rail visibly arrives from somewhere above rather than starting at a
     hard edge, faint enough that it never competes with type it is crossing.
     Full strength only below the kicker, where the only thing to cross is
     panel.

     The first pass had this the wrong way round — opaque from 19% to 76%,
     which is roughly the band the CANS occupy. The rail was at its strongest
     exactly where a can was hiding it and at its weakest in the gaps where it
     could actually be seen. Nothing below the stage needs protecting: the
     scrub bar is a sibling, not a child, so the bottom is free to run out to
     the edge. */
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.3) 8%, rgba(0,0,0,.3) 21%, #000 32%, #000 93%, transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.3) 8%, rgba(0,0,0,.3) 21%, #000 32%, #000 93%, transparent 100%);
}
html.motion .scene-range .ring{z-index:1}

/* v3 made the WHOLE pinned scene the handle, because restricting it left a
   dead margin over most of the screen and a dead margin reads as the
   interaction being broken rather than bounded.

   v4 restricts it after all — but the thing that made that fail was never the
   bound, it was that the bound was invisible. So the column is lit (.shaft
   above) and, more to the point, the cursor now changes at its edge: `.hot` is
   toggled by app.js the moment the pointer crosses into the box. A boundary
   you can feel before you commit is a boundary, not a bug. Plain `auto`
   outside, so the gutters read as ordinary page — which is exactly what they
   now behave as. */
html.motion .scene-range .pin{
  cursor:auto;
  /* touch-action:none hands us every touch here instead of letting the browser
     start a page scroll and cancel the gesture mid-spin. It also means the page
     can no longer scroll from within this scene on its own, so app.js forwards
     anything past either end of the range to the document by hand. */
  touch-action:none;
  /* A drag across the scene would otherwise select the copy under it. */
  -webkit-user-select:none;user-select:none;
}
html.motion .scene-range .pin.hot{cursor:grab}
html.motion .scene-range .pin.hot:active{cursor:grabbing}
html.motion .stage,html.motion .can,html.motion .can-btn{cursor:inherit}
/* The scrub bar keeps its own cursor and its own gestures: it is a real slider,
   and app.js declines to start a drag from it for the same reason. */
html.motion .scene-range .scrub{cursor:auto}
html.motion .scene-range .scrub input{cursor:pointer;touch-action:none}

/* ---- the bar, taken out of the composition ------------------------------
   v4. The range loops now and the helix says where it is by moving; a track
   with a thumb parked a fifth of the way along was measuring a run that no
   longer has ends. So it goes — visually.

   It does NOT come out of the DOM, and it must not. In motion mode `.grid` is
   display:none, which leaves this slider as the ONLY keyboard route through
   the range: delete it and the carousel becomes mouse-and-finger-only, which
   is a straight WCAG 2.1.1 failure on a public page. Hidden with opacity
   rather than display or a clip rect so it stays focusable, and it fades back
   in on focus — the bar exists, for exactly the people who need it.

   Opacity also keeps its 34px in the flow. Collapsing it would have the whole
   composition jump the moment a keyboard user tabbed in, and reserved air
   under a floating helix reads as spacing rather than as a gap. */
html.motion .scene-range .scrub input{
  opacity:0;pointer-events:none;
  transition:opacity 320ms cubic-bezier(.4,0,.2,1);
}
html.motion .scene-range .scrub:focus-within input{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  html.motion .scene-range .scrub input{transition:none}
}
/* Chrome on Android paints a tap flash on the button under a spin. */
html.motion .can-btn{-webkit-tap-highlight-color:transparent}
html.motion .ring{
  display:block;position:relative;width:100%;height:min(62vh,560px);
  transform-style:preserve-3d;
  /* THE RING MUST NOT BE HIT-TESTABLE. preserve-3d puts its own box on the
     Z=0 plane of the 3D context, and every can sits at NEGATIVE z (behind it),
     so the ring wins every hit test while being completely invisible. Clicks on
     the cans silently did nothing. pointer-events inherits, so the cans have to
     opt back in below. */
  pointer-events:none;
}
html.motion .can{
  position:absolute;left:50%;top:50%;width:auto;
  /* `translate` composes BEFORE `transform`, so the JS transform can own the
     arc maths without having to know the can's rendered width. */
  translate:-50% -50%;
  will-change:transform,opacity;
  pointer-events:auto;          /* see the note on .ring above */
}
html.motion .can img{
  height:min(34vh,285px);width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.75));
}
/* absolute so the reflection does not add to the wrapper height, which would
   push the can itself off centre */
html.motion .can .refl{
  position:absolute;left:0;top:100%;margin-top:2px;
  height:min(42vh,340px);width:auto;transform:scaleY(-1);opacity:.11;
  -webkit-mask-image:linear-gradient(transparent 74%,#000);
  mask-image:linear-gradient(transparent 74%,#000);
  filter:none;
}
html.motion .can-btn{
  position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;cursor:pointer;
}
html.motion .plinth{
  display:none;position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:min(30vw,300px);height:min(4vw,34px);border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
  filter:blur(11px);opacity:.5;transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .scrub{position:relative;z-index:3;margin:0 auto 42px;padding:0 18px;width:100%}

/* flavour scene */
html.motion .scene-flavour .pin{justify-content:center}
/* Sits behind the CAN on the right, not behind the copy on the left, and a
   left scrim keeps the paragraph off it entirely. Ghost type crossing body
   text is the fastest way to make a scene look busy and unreadable. */
html.motion .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
}
html.motion .scene-flavour .pin::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(4,5,8,.88) 0%, rgba(4,5,8,.62) 45%, transparent 100%);
}
html.motion .scene-flavour{background:none}
html.motion .scene-flavour .pin{
  background:
    radial-gradient(70% 60% at 62% 46%, color-mix(in srgb, var(--flood) 70%, #fff 8%), transparent 68%),
    linear-gradient(160deg, var(--flood), #06070a 78%);
  transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .detail{
  position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 20px) clamp(18px,5vw,70px) 40px;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
html.motion .detail-can img{height:min(66vh,620px)}
html.motion .rail{flex-direction:column;flex-wrap:nowrap;gap:10px}
html.motion .rail button{width:100%;justify-content:flex-start;text-align:left}

/* line-up gets real depth in motion mode */
html.motion .row{
  flex-wrap:nowrap;perspective:1100px;perspective-origin:50% 50%;
  transform-style:preserve-3d;justify-content:center;
}
html.motion .row img{
  height:clamp(170px,25vw,320px);flex:0 0 auto;
  transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform;
}

/* ==========================================================================
   THE VIEWER — the zoom-in state
   ========================================================================== */
.viewer{display:none}
.viewer[hidden]{display:none}
html.motion .viewer:not([hidden]){
  display:block;position:fixed;inset:0;z-index:120;
}
.viewer .rail,.viewer .rail button{cursor:pointer}
.viewer-close{cursor:pointer}
.viewer-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(66% 58% at 62% 46%, color-mix(in srgb, var(--flood) 66%, #fff 9%), transparent 68%),
    linear-gradient(160deg, var(--flood), #05060a 78%);
  opacity:0;transition:opacity .24s ease;
}
.viewer-bg::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);
  background:linear-gradient(90deg, rgba(4,5,8,.9) 0%, rgba(4,5,8,.64) 45%, transparent 100%);
}
.viewer.in .viewer-bg{opacity:1}

.viewer .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  opacity:0;transition:opacity .27s ease .04s;
}
.viewer.in .ghost{opacity:1}

.viewer-close{
  position:absolute;top:calc(var(--hud-h) + 14px);right:20px;z-index:6;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;
  border-radius:100px;cursor:pointer;color:var(--paper);
  background:rgba(255,255,255,.07);border:1px solid var(--edge);
  opacity:0;transition:opacity .22s ease .05s,background .17s ease,border-color .17s ease;
}
.viewer-close span{font-size:17px;line-height:0}
.viewer-close:hover{background:rgba(255,255,255,.16);border-color:var(--paper)}
.viewer.in .viewer-close{opacity:1}

.viewer-in{
  position:relative;z-index:4;height:100%;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 30px) clamp(18px,5vw,70px) 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
.viewer-copy{opacity:0;transform:translateY(14px);
  transition:opacity .23s ease .04s,transform .3s cubic-bezier(.2,.7,.3,1) .04s}
.viewer.in .viewer-copy{opacity:1;transform:none}
.viewer-can{margin:0;text-align:center}
/* The image that grows. It is NOT faded in: it takes over from the arc's can at
   the identical rect with the identical pixels, so it must be opaque from the
   first frame or the handover shows as a flicker. JS owns its transform. */
.viewer-can img{height:min(74vh,680px);width:auto;margin:0 auto;
  filter:drop-shadow(0 44px 62px rgba(0,0,0,.72));
  will-change:transform}
.viewer .rail{flex-direction:column;flex-wrap:nowrap;gap:10px;
  opacity:0;transition:opacity .23s ease .07s}
.viewer.in .rail{opacity:1}
.viewer .rail button{width:100%;justify-content:flex-start;text-align:left}

/* the arc ducks out of the way while the viewer is open */
html.motion .stage,html.motion .scrub,html.motion .stage-kicker{
  transition:opacity .21s ease,transform .28s cubic-bezier(.4,0,.2,1);
}
html.viewing .stage{opacity:0;pointer-events:none}
html.viewing .scrub,html.viewing .stage-kicker{opacity:0;pointer-events:none}

/* The affordance is the can itself lifting under the pointer, not a caption
   telling you to click. The JS owns .can's transform and filter every frame,
   so hover has to live on the image. */
html.motion .can-btn{cursor:pointer}
html.motion .can img{transition:filter .16s ease}
html.motion .can:hover img:not(.refl),
html.motion .can-btn:focus-visible ~ img{
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.8)) brightness(1.12);
}

@media(max-width:900px){
  .viewer-in{grid-template-columns:1fr;gap:18px;align-content:center;
    padding-top:calc(var(--hud-h) + 56px)}
  .viewer-can{order:-1}
  .viewer-can img{height:min(38vh,330px)}
  .viewer .rail{flex-direction:row;flex-wrap:wrap}
  .viewer .rail button{width:auto}
}

/* loader */
/* Hidden unless motion mode asked for it, so a plain document never sees it.
   .gone is also set by a failsafe timer in the head, so a missing app.js
   cannot leave the loader covering the page. */
#loader{display:none}
html.motion #loader{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:grid;place-items:center;transition:opacity .24s ease;
}
#loader.gone{display:none!important}
#loader.done{opacity:0;pointer-events:none}
.loader-in{text-align:center}
.loader-mark{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;font-size:clamp(48px,12vw,120px);
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);
}
.loader-pct{
  display:block;margin-top:16px;font-size:13px;letter-spacing:.3em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.loader-step{display:block;margin-top:7px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  html.motion .detail{grid-template-columns:1fr;gap:22px;padding-top:calc(var(--hud-h) + 12px)}
  html.motion .detail-can{order:-1}
  html.motion .detail-can img{height:min(34vh,300px)}
  html.motion .rail{flex-direction:row;flex-wrap:wrap}
  html.motion .rail button{width:auto}
  html.motion .claim{min-height:150px;margin-top:20px;padding-top:18px}
}
/* ---- the helix on a phone ---------------------------------------------- */
@media(max-width:719px){
  /* Capped by vw as well as vh. A can is about three times taller than it is
     wide, so sizing it off height alone makes it tall AND wide enough that two
     neighbours collide across a 375px screen. */
  /* The vw term is a guard for short landscape screens, not the usual binding
     constraint — a can is roughly a third as wide as it is tall, so 32vw here
     was capping the HEIGHT at a third of the screen width and shrinking the can
     to about 40px across. Loose enough now that vh does the work. */
  html.motion .can img{height:min(25vh,46vw,200px)}
  /* Smaller drop shadow to match the smaller object; the desktop one reads as
     a smudge at this size. */
  html.motion .can img{filter:drop-shadow(0 18px 26px rgba(0,0,0,.7))}
  html.motion .ring{height:min(56vh,420px)}
  html.motion .scene-range .stage-kicker{font-size:10px;letter-spacing:.14em}
}

@media(max-width:620px){
  .hud{grid-template-columns:auto 1fr auto;padding:0 12px}
  .hud-read{display:none}
  .hud-mark{justify-self:start}
  .hud-cta{display:none}
  .grid img{height:150px}
  .foot-cols{gap:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}