/* ==========================================================================
   HOME — the hero film, and the quiet page that follows it

   Replaces the old nine-act story stylesheet. The footage does the talking
   now: one take, fired out of a gun and landing on a crate, played once as
   the logo intro lifts. Everything after it stays deliberately still so the
   film is the only thing on this page that moves much.
   ========================================================================== */

/* --- Logo intro ----------------------------------------------------------
   Shown once, on a visitor's first arrival, then the hero. It exists in the
   DOM on every load but is display:none unless <html class="has-intro"> was
   set before paint, so returning visitors pay nothing for it.

   z-index sits above the nav (60) so the chrome is not visible through it. */
.intro{
  display:none; position:fixed; inset:0; z-index:100;
  background:var(--night);
  align-items:center; justify-content:center;
}
html.has-intro .intro{ display:flex; }
html.has-intro{ overflow:hidden; }         /* no scrolling until it has played */
/* The chrome stays out of it entirely. The overlay is opaque, but as it lifts
   away the nav would otherwise surface through it a beat before the hero. */
html.has-intro .op-nav{ visibility:hidden; }
.intro__logo{
  height:min(62svh, 540px); width:auto; max-width:82vw;
  opacity:0; transform:scale(.92);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.7));
}
/* A faint ember glow behind the mark, in the film's own colour. */
.intro{ --intro-glow:0; }
.intro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:var(--intro-glow);
  background:radial-gradient(ellipse 46% 40% at 50% 52%, rgba(226,87,26,.28), transparent 70%);
}

/* --- The hero ------------------------------------------------------------
   A single supplied take, played once. Not pinned and not scrubbed, so the
   section is one viewport tall and the page scrolls normally beneath it. */

.hero{ position:relative; background:var(--night); }
.hero__stage{
  position:relative; height:100svh; overflow:hidden;
  background:#000 url("../img/hero/poster.webp") center/cover no-repeat;
}
.hero__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}

/* Already played this visit: the film element is not shown (and, because its
   source is only attached when it is going to play, not downloaded), the
   stage opens on the landing frame, and the headline is simply there. */
html.hero-played .hero__stage{ background-image:url("../img/hero/still.webp"); }
html.hero-played .hero__film,
html.hero-played .hero__sound{ display:none; }
html.hero-played .hero__copy{ opacity:1 !important; transform:none !important; transition:none; }

/* Sound toggle. A 44px target in the corner, in the palette, and gone the
   moment the film ends because there is nothing left to hear. */
.hero__sound{
  position:absolute; z-index:40; right:clamp(14px,3vw,30px); bottom:clamp(18px,4vh,34px);
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  color:var(--paper); background:rgba(7,5,5,.55);
  border:1px solid rgba(200,145,47,.45); border-radius:50%;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:opacity .4s, border-color .2s, background .2s;
}
.hero__sound:hover{ border-color:var(--brass-lt); background:rgba(7,5,5,.75); }
.hero__sound[aria-pressed="true"] .hero__sound-off{ display:none; }
.hero__sound[aria-pressed="false"] .hero__sound-on{ display:none; }
.hero__sound.is-done{ opacity:0; pointer-events:none; }

/* Vignette and floor gradient, so type always has somewhere dark to sit
   however bright the flash gets behind it. */
.hero__shade{
  position:absolute; inset:0; z-index:20; pointer-events:none;
  background:
    radial-gradient(ellipse 92% 74% at 50% 44%, transparent 42%, rgba(4,3,3,.72) 100%),
    linear-gradient(180deg, rgba(4,3,3,.78) 0%, transparent 24%, transparent 48%, rgba(4,3,3,.88) 84%, rgba(4,3,3,.97) 100%);
}

.hero__copy{
  position:absolute; z-index:30; left:0; right:0; bottom:clamp(26px,5vh,58px);
  padding-inline:var(--gut); text-align:center;
}
/* Landing. The headline is hidden until the film reaches the crate, then
   eased in by CSS so it cannot be stranded by a stalled animation loop. */
.hero__copy.is-waiting{ opacity:0; transform:translateY(26px); }
.hero__copy.is-landed{
  opacity:1; transform:none;
  transition:opacity .7s ease-out, transform .7s ease-out;
}
.hero__mark{
  display:block; margin:0 auto .5em;
  font-family:var(--f-stencil); font-size:clamp(.6rem,1.5vw,.76rem);
  letter-spacing:.42em; text-transform:uppercase; color:var(--brass-lt);
}
.hero__line{
  margin:0; font-family:var(--f-display);
  font-size:clamp(1.9rem,6.2vw,4.6rem); line-height:.98;
  letter-spacing:-.01em; color:var(--paper-lt);
  text-shadow:0 2px 30px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8);
}
.hero__line em{ font-style:normal; color:var(--ember-lt); }
.hero__sub{
  margin:.9em auto 0; max-width:34ch;
  font-family:var(--f-stencil); font-weight:300;
  font-size:clamp(.82rem,1.5vw,1rem); letter-spacing:.05em;
  color:var(--ink-soft);
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}

/* --- Page sections -------------------------------------------------------
   No pinning, no scrubbing, no scenery. Content arrives, sits still, and is
   readable. The only motion is a short rise on entry and a slow drift on the
   one image that earns it. */

.band{ position:relative; z-index:2; background:var(--night); padding:clamp(64px,12vh,150px) 0; }
.band--tight{ padding-block:clamp(44px,8vh,96px); }
.band--edge{ border-top:1px solid rgba(200,145,47,.16); }

/* An ember wash behind a band, so the black is never flat black. */
.band--lit::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 56% at 50% 0%, rgba(226,87,26,.13), transparent 68%);
}
.band > .wrap{ position:relative; z-index:1; }

.lede{ max-width:24ch; margin:0 auto; text-align:center; }
.lede h2{
  font-family:var(--f-display); font-size:clamp(1.7rem,4.6vw,3.2rem);
  line-height:1.02; margin:0; color:var(--paper-lt);
}
.lede h2 em{ font-style:normal; color:var(--ember-lt); }
.lede p{
  margin:1.1em auto 0; max-width:46ch; color:var(--ink-soft);
  font-size:clamp(.92rem,1.5vw,1.04rem); line-height:1.65;
}

.eyebrow{
  display:block; margin-bottom:1.1em;
  font-family:var(--f-stencil); font-size:.66rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--brass);
}

/* --- Split: the real bottle against the copy ---------------------------- */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,6vw,84px); align-items:center;
}
.split__art{
  position:relative; border-radius:2px; overflow:hidden;
  background:var(--night-2);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.split__art img{ display:block; width:100%; height:auto; }
.split__copy h2{
  font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.06; margin:0 0 .5em; color:var(--paper-lt);
}
.split__copy p{ color:var(--ink-soft); line-height:1.7; margin:0 0 1em; }

/* --- Three steps -------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,3vw,34px); }
.step{
  padding:clamp(22px,3vw,32px);
  border:1px solid rgba(200,145,47,.18); border-radius:2px;
  background:linear-gradient(168deg, var(--night-3), var(--night-2) 70%);
}
.step__n{
  font-family:var(--f-display); font-size:1.5rem; color:var(--ember);
  display:block; margin-bottom:.35em; line-height:1;
}
.step h3{ margin:0 0 .4em; font-size:1.02rem; color:var(--paper-lt); }
.step p{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.62; }

/* --- Closing call ------------------------------------------------------- */
.close{
  position:relative; text-align:center;
  padding:clamp(78px,15vh,190px) var(--gut);
  background:#000 url("../img/hero/still.webp") center/cover no-repeat;
}
.close::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,4,4,.86), rgba(5,4,4,.7) 45%, rgba(5,4,4,.94));
}
.close > *{ position:relative; z-index:1; }
.close h2{
  font-family:var(--f-display); font-size:clamp(1.8rem,5.2vw,3.6rem);
  line-height:1.02; margin:0 0 .5em; color:var(--paper-lt);
}
.close p{ margin:0 auto 1.8em; max-width:44ch; color:var(--ink-soft); }

@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split__art{ max-width:420px; margin-inline:auto; }
}

/* --- Reduced motion ------------------------------------------------------
   The film is the whole hero, so it is not removed — it is simply left on a
   single resolved frame instead of being driven by the scroll, and nothing
   else on the page animates at all. */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}