/* ==========================================================================
   PEASANT — FROM PEASANT TO ROBINHOOD
   Production scroll film. Static HTML/CSS/JS. No server, no build, no deps.

   Structure: a fixed <div class="stage"> holds all 18 scenes, each composed
   of three parallax planes. A tall spacer supplies the scroll distance. The
   text layer is separate from the visual layer at every level.
   ========================================================================== */

:root{
  /* palette — carried over unchanged from the approved brand paper */
  --mud-900:#1A1512; --linen-300:#A99881; --fog-200:#C9C4BB;
  --stone-800:#1F2326; --rain-300:#7C8B95; --wanted-red:#7E2A22;
  --moss-500:#46583C; --leaf-400:#5E7A4A;
  --forest-700:#17301D; --sun-400:#D9A548; --fire-500:#C8752F; --sage-300:#8FA36B;
  --void-950:#0A0B0A; --earned-green:#1E5B33; --earned-lift:#2C7A45;
  --gold-500:#B48A3C; --parchment-200:#E4DAC6;
  --modern-deep:#137547; --modern-green:#1FA05C; --paper-100:#F2EEE6;

  --font-display:"Cormorant Garamond","EB Garamond","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-ui:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  --ease-cine:cubic-bezier(.22,.61,.36,1);
  --ease-ui:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--void-950)}
body{
  margin:0; background:var(--void-950); color:var(--parchment-200);
  font-family:var(--font-ui); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}

/* film grain over everything — the texture rule from the brand paper */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   STAGE — fixed viewport-filling visual layer
   -------------------------------------------------------------------------- */
.stage{
  position:fixed; inset:0; z-index:1; overflow:hidden;
  background:var(--void-950);
}
.spacer{position:relative;z-index:0;pointer-events:none}

.scene{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  will-change:opacity;
}
.scene[data-live="1"]{visibility:visible}

.plane{position:absolute;inset:-6%}
/* only the two or three scenes actually on screen get a compositor layer */
.scene[data-live="1"] .plane{will-change:transform}
.plane--plate{background:var(--void-950)}
/* The still and the clip occupy the same box. The still is the poster and the
   permanent fallback; the clip fades in over it only once it can actually be
   seeked, so a missing or blocked video is invisible rather than broken. */
.plane--plate > .plate-still,
.plane--plate > .plate-clip{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.plane--plate > .plate-clip{opacity:0;transition:opacity .45s var(--ease-cine)}
.plane--plate[data-showclip="1"] > .plate-clip{opacity:1}

/* low-quality colour bed shown until the plate decodes — no white flash */
.plane--plate::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--stone-800),var(--void-950));
}

/* ---- atmosphere planes (parallax rate 0.55 — they lag the camera) ---- */
.plane--atmos{mix-blend-mode:screen;opacity:.5}
.atmos--fog{
  background:
    radial-gradient(60% 30% at 20% 62%,rgba(201,196,187,.16),transparent 70%),
    radial-gradient(52% 26% at 68% 48%,rgba(201,196,187,.13),transparent 72%),
    radial-gradient(70% 34% at 45% 82%,rgba(201,196,187,.10),transparent 70%);
}
.atmos--shafts{
  background:repeating-linear-gradient(74deg,
    rgba(228,218,198,.11) 0 26px, transparent 26px 96px);
  opacity:.42;
}
.atmos--rain{
  background:repeating-linear-gradient(103deg,
    rgba(168,181,184,.20) 0 1px, transparent 1px 9px);
  opacity:.30;
}
.atmos--embers{
  background:
    radial-gradient(2px 2px at 22% 68%,rgba(216,140,74,.85),transparent),
    radial-gradient(2px 2px at 61% 47%,rgba(216,140,74,.65),transparent),
    radial-gradient(3px 3px at 78% 74%,rgba(216,140,74,.55),transparent),
    radial-gradient(2px 2px at 38% 82%,rgba(216,140,74,.70),transparent),
    radial-gradient(2px 2px at 84% 36%,rgba(216,140,74,.45),transparent),
    radial-gradient(3px 3px at 12% 44%,rgba(216,140,74,.50),transparent);
}
.atmos--dust{
  background:
    radial-gradient(48% 22% at 66% 72%,rgba(201,196,187,.14),transparent 72%),
    radial-gradient(40% 18% at 38% 80%,rgba(201,196,187,.10),transparent 72%);
}
.atmos--none{display:none}

/* ---- foreground planes (parallax rate 1.45 — they lead the camera) ---- */
.plane--fore{pointer-events:none}
.fore--trunk{
  background:
    linear-gradient(90deg,rgba(6,8,6,.92) 0%,rgba(6,8,6,.55) 7%,transparent 15%),
    linear-gradient(270deg,rgba(6,8,6,.92) 0%,rgba(6,8,6,.5) 6%,transparent 14%);
}
.fore--ferns{
  background:linear-gradient(0deg,rgba(6,8,6,.95) 0%,rgba(6,8,6,.6) 6%,transparent 18%);
}
.fore--beam{
  background:linear-gradient(180deg,rgba(6,8,6,.9) 0%,rgba(6,8,6,.45) 8%,transparent 18%);
}
.fore--none{display:none}

/* ---- grade + vignette, always on top of the planes ---- */
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,transparent 42%,rgba(0,0,0,.62) 100%);
}

/* ---- transition wash overlay ---- */
.wash{
  position:fixed; inset:0; z-index:25; pointer-events:none; opacity:0;
  will-change:opacity;
}
.wash--dark{background:var(--void-950)}
.wash--light{background:radial-gradient(80% 80% at 50% 50%,#F6EEDC,#E4DAC6)}

/* --------------------------------------------------------------------------
   TEXT LAYER — real HTML type, never baked into artwork
   -------------------------------------------------------------------------- */
.text-layer{position:fixed;inset:0;z-index:30;pointer-events:none}

.line{
  position:absolute; opacity:0; will-change:opacity,transform,filter;
  max-width:min(46vw,720px);
}
/* Title scrim. Several plates carry bright hazy areas — S16's right third is
   nearly white — and parchment type over them fails legibility. This is the
   standard cinematic fix: a soft, edge-less pool of shadow that sits under
   the type only. Invisible on dark scenes, decisive on bright ones. */
.line::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-1.7em -2.6em; opacity:var(--scrim,.45);
  background:radial-gradient(ellipse at center,
    rgba(4,6,4,.97) 0%, rgba(4,6,4,.78) 40%, rgba(4,6,4,.34) 66%, transparent 79%);
}
.line .t{
  display:block;
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  color:var(--parchment-200);
  font-size:clamp(1.4rem,3.3vw,3.1rem);
  letter-spacing:.11em; line-height:1.14; text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.8);
}
.line .t--sub{
  font-size:clamp(.8rem,1.45vw,1.25rem); letter-spacing:.17em;
  color:var(--fog-200); margin-top:1.1em; opacity:.92;
}

/* safe-area anchors — identical zones to the approved brand paper */
.sa-lower-left{left:6vw;bottom:14vh}
.sa-lower-center{left:50%;transform:translateX(-50%);bottom:12vh;text-align:center;max-width:min(72vw,900px)}
.sa-upper-left{left:6vw;top:16vh}
.sa-upper-right{right:6vw;top:16vh;text-align:right}
.sa-center-band{left:50%;transform:translateX(-50%);top:38vh;text-align:center;max-width:min(76vw,960px)}
.sa-right-third{right:6vw;top:32vh;text-align:right;max-width:min(38vw,560px)}

/* --------------------------------------------------------------------------
   INTERFACE — branded from the first viewport, ~8% of frame
   -------------------------------------------------------------------------- */
.ui{position:fixed;inset:0;z-index:40;pointer-events:none}
.ui > *{pointer-events:auto}

.brandbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:1.2rem;
  padding:1.35rem clamp(1.1rem,3vw,2.4rem);
}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0;flex:0 1 auto}
.mark svg{width:20px;height:20px;flex:0 0 auto}
.mark span{
  font-family:var(--font-display); font-size:.92rem; text-transform:uppercase;
  letter-spacing:.34em; color:var(--parchment-200); white-space:nowrap;
  overflow:hidden; text-overflow:clip;
}
.brandbar-spacer{flex:1 1 auto;min-width:.5rem}

.chapter{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(228,218,198,.62); text-align:right;
  line-height:1.5;
}
.chapter b{display:block;color:var(--sun-400);letter-spacing:.1em;font-weight:600}

.cta{
  font-family:var(--font-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  background:var(--modern-green); color:#07120C;
  padding:.85em 1.35em; border-radius:2px; border:0;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .18s var(--ease-ui), transform .18s var(--ease-ui);
}
.cta:hover{background:var(--earned-lift);transform:translateY(-1px)}
.cta:focus-visible{outline:2px solid var(--sun-400);outline-offset:3px}

/* chapter rail — 10 ticks, one per chapter */
.rail{
  position:absolute; left:clamp(1.1rem,3vw,2.4rem); top:50%;
  transform:translateY(-50%); display:flex; flex-direction:column; gap:.5rem;
}
.rail i{
  width:2px; height:10px; background:rgba(228,218,198,.22);
  display:block; border-radius:1px;
  transition:background .3s var(--ease-ui), height .3s var(--ease-ui);
}
.rail i[data-on="1"]{background:var(--sun-400);height:17px}
.rail i[data-done="1"]{background:rgba(228,218,198,.5)}

/* --------------------------------------------------------------------------
   HERO — the landing composition.
   The film's own first line does not reach full opacity until you have begun
   scrolling, so without this the first viewport was a picture with nothing to
   read and no invitation. This states the campaign, the belief and the scroll
   affordance, then clears out of the way as the story takes over.
   -------------------------------------------------------------------------- */
.hero{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,940px); text-align:center; pointer-events:none;
  will-change:opacity,transform;
}
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-14% -12%;
  background:radial-gradient(ellipse at center,
    rgba(4,6,4,.82) 0%, rgba(4,6,4,.6) 42%, rgba(4,6,4,.24) 68%, transparent 80%);
}
.hero-eyebrow{
  font-family:var(--font-ui); font-size:.6rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(228,218,198,.62); margin:0 0 1.6rem;
}
.hero-title{
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  font-size:clamp(2.1rem,6.4vw,5.4rem); line-height:1.02; letter-spacing:.07em;
  color:var(--parchment-200); margin:0;
  text-shadow:0 2px 50px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.8);
}
.hero-sub{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(.72rem,1.5vw,1.05rem); letter-spacing:.22em;
  color:var(--fog-200); margin:1.5rem 0 0;
}
.hero-scroll{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  margin:3.2rem 0 0;
  font-family:var(--font-ui); font-size:.56rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(228,218,198,.55);
}
/* a slow travelling tick — the only looping animation on the whole site */
.hero-scroll i{
  display:block; width:1px; height:46px; position:relative;
  background:linear-gradient(180deg,rgba(228,218,198,.28),transparent);
}
.hero-scroll i::after{
  content:""; position:absolute; left:-1px; top:0; width:3px; height:12px;
  border-radius:2px; background:var(--sun-400);
  animation:tick 2.6s var(--ease-cine) infinite;
}
@keyframes tick{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  78%{opacity:1}
  100%{transform:translateY(34px);opacity:0}
}

.sound{
  position:absolute; right:clamp(1.1rem,3vw,2.4rem); bottom:1.4rem;
  background:transparent; border:1px solid rgba(228,218,198,.28);
  color:rgba(228,218,198,.7); border-radius:2px; cursor:pointer;
  font-family:var(--font-ui); font-size:.55rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:.6em .9em;
}
.sound:hover{color:var(--parchment-200);border-color:rgba(228,218,198,.6)}
.sound:focus-visible{outline:2px solid var(--sun-400);outline-offset:3px}
/* Sound is on by default, but browsers refuse to play until the visitor has
   interacted. While we are holding that intention the control says so and
   breathes gently, rather than claiming to be playing in silence. */
.sound[data-state="wait"]{
  color:var(--parchment-200); border-color:rgba(228,218,198,.55);
  animation:sound-wait 2.6s var(--ease-cine) infinite;
}
.sound[data-state="on"]{color:var(--parchment-200)}
@keyframes sound-wait{
  0%,100%{opacity:.62} 50%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .sound[data-state="wait"]{animation:none;opacity:1}
}

/* the ending CTA, inside the composition rather than floating over it */
.finale{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:16vh; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease-cine);
}
.finale[data-on="1"]{opacity:1;pointer-events:auto}
.finale .cta{font-size:.78rem;padding:1.05em 2.1em}
.finale small{
  display:block; margin-top:1rem; font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(228,218,198,.45);
}

/* --------------------------------------------------------------------------
   LOADING — the feather draws itself; no spinner, no percentage
   -------------------------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:80; background:var(--void-950);
  display:grid; place-items:center; gap:2rem;
  transition:opacity .8s var(--ease-cine), visibility .8s;
}
.loader[data-done="1"]{opacity:0;visibility:hidden}
.loader-in{text-align:center}
.loader svg{width:46px;height:46px;margin:0 auto 1.6rem}
.loader svg path{
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:draw 2.4s var(--ease-cine) infinite;
}
.loader svg path:nth-child(2){animation-delay:.18s}
.loader svg path:nth-child(3){animation-delay:.36s}
@keyframes draw{
  0%{stroke-dashoffset:60} 45%{stroke-dashoffset:0}
  75%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:.25}
}
.loader p{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(.8rem,1.6vw,1.05rem);
  color:rgba(228,218,198,.7); margin:0;
}

/* --------------------------------------------------------------------------
   NO-JS / ACCESSIBLE FALLBACK — the whole story as a readable document
   -------------------------------------------------------------------------- */
.fallback{
  position:relative; z-index:70; background:var(--void-950);
  padding:6rem clamp(1.2rem,5vw,4rem);
}
.fallback h1{
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(2rem,5vw,3.4rem); margin:0 0 2rem;
}
.fallback ol{list-style:none;padding:0;margin:0 0 3rem;max-width:52ch}
.fallback li{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.12em; font-size:1.05rem; line-height:1.35;
  padding:1.1rem 0; border-bottom:1px solid rgba(228,218,198,.12);
}
.fallback li b{
  display:block; font-family:var(--font-ui); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; color:var(--sun-400); margin-bottom:.5rem;
}
/* only shown when JS is unavailable */
.js .fallback{display:none}

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--modern-green); color:#07120C; padding:.8em 1.2em;
  border-radius:2px; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  transition:top .2s var(--ease-ui);
}
.skip:focus{top:1rem}

/* --------------------------------------------------------------------------
   MOBILE — art direction changes, not just scale
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .rail{display:none}                       /* noise at this width */
  .line{max-width:82vw}
  .line .t{font-size:clamp(1.15rem,6vw,1.9rem);letter-spacing:.09em}
  .line .t--sub{font-size:clamp(.68rem,3vw,.85rem);letter-spacing:.14em}
  .sa-lower-left{left:7vw;bottom:16vh}
  .sa-upper-right{right:7vw}
  .sa-right-third{right:7vw;max-width:80vw;top:26vh}
  .sa-center-band{max-width:84vw}
  .brandbar{padding:1rem 1.1rem}
  .mark span{font-size:.7rem;letter-spacing:.28em}
  .chapter{display:none}                    /* the rail and chapter both go */
  .cta{font-size:.58rem;padding:.8em 1.1em;flex:0 0 auto}
  .hero{width:88vw}
  .hero-eyebrow{font-size:.5rem;letter-spacing:.22em;margin-bottom:1.1rem}
  .hero-title{font-size:clamp(1.7rem,9vw,2.6rem);letter-spacing:.05em}
  .hero-sub{font-size:.62rem;letter-spacing:.16em;margin-top:1.1rem}
  .hero-scroll{margin-top:2.2rem;font-size:.5rem;letter-spacing:.2em}
  .sound{bottom:1rem;font-size:.5rem}
  /* the CTA becomes bottom-anchored and persistent once the film resolves */
  .cta--sticky{
    position:fixed; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:45;
    text-align:center; padding:1.1em; font-size:.72rem;
    opacity:0; pointer-events:none; transition:opacity .5s var(--ease-cine);
  }
  .cta--sticky[data-on="1"]{opacity:1;pointer-events:auto}
}
@media (max-width:560px){
  /* small phones: the wordmark and the CTA must both fit, uncut */
  .brandbar{gap:.55rem;padding:.9rem .9rem}
  .mark{gap:.5rem}
  .mark svg{width:13px;height:13px}
  .mark span{font-size:.6rem;letter-spacing:.18em}
  .cta{font-size:.52rem;padding:.7em .8em;letter-spacing:.1em}
}
@media (min-width:768px){ .cta--sticky{display:none} }

/* --------------------------------------------------------------------------
   REDUCED MOTION — the film becomes calmer, never broken.
   Every one of the 18 lines still appears, in order, fully readable.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .plane{transition:none!important}
  .line{transition:opacity .12s linear!important}
  .loader svg path{animation:none;stroke-dashoffset:0}
  .hero-scroll i::after{animation:none;opacity:.9}
  .cta{transition:none}
  html{scroll-behavior:auto}
}