/* ============================================================
   Paper storm — scene styles. Shared by paper-storm.html and
   hiresense-verdict-immersive.html.

   Everything is namespaced .ps-* so it can drop into a page that
   already has its own layout without colliding. The debug HUD is
   NOT here: it belongs to the standalone prototype only.
   ============================================================ */

@font-face{font-family:Instrument;src:url(instrument-serif-italic.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

/* 660, not 520: the whole sequence reads too fast at the shorter length.
   Stretching the scroll slows every beat proportionally without disturbing
   any of the relative timing. */
.ps-scroller{height:660vh;position:relative}

/* Pinned by ScrollTrigger, not by position:sticky. A host page with
   overflow:hidden on html has no sticky scrollport, so sticky silently
   stops holding and the whole scene scrolls away mid-story. */
/* Transparent so the single global background (#bg-canvas starfield) shows
   through here too — every screen shares one background, not a per-section one. */
.ps-stage{position:relative;height:100svh;overflow:clip;isolation:isolate;
  background:transparent}
.ps-stage .ps-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* hero-only bloom + vignette removed so this screen matches all the others */
.ps-glow{display:none}
.ps-vig{display:none}

/* ---- scroll cue: the one thing on screen running on its own clock ---- */
.ps-cue{position:absolute;z-index:3;left:50%;bottom:clamp(18px,5vh,52px);
  transform:translateX(-50%);text-align:center;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-family:ui-monospace,'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:#4e6089;
  will-change:opacity,transform}
.ps-cue .rail{position:relative;width:1px;height:40px;
  background:rgba(120,150,230,.20);overflow:hidden}
.ps-cue .rail::after{content:'';position:absolute;left:0;width:1px;height:13px;
  background:linear-gradient(180deg,transparent,#4e7dff);
  animation:psCueRun 2.1s cubic-bezier(.6,0,.35,1) infinite}
@keyframes psCueRun{0%{top:-14px}60%,100%{top:40px}}

/* ---- opening title ---- */
.ps-intro{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;text-align:center;width:min(1220px,94vw);
  will-change:opacity,transform}
/* Same reason the stat block carries one: the idle sheets drift right
   through this type, and white text over white paper has no contrast to
   fall back on. Feathered wide so it reads as depth, not as a panel. */
.ps-intro::before{content:'';position:absolute;left:50%;top:50%;
  width:150%;height:260%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(3,5,12,.88),rgba(3,5,12,.60) 48%,rgba(3,5,12,0) 100%)}
.ps-intro .kicker{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:#5f7099;margin-bottom:20px}
.ps-intro h1{font-family:Clash,sans-serif;font-weight:600;
  font-size:clamp(28px,5.1vw,70px);line-height:1.04;letter-spacing:-.028em;
  color:#eef2ff;text-wrap:balance}
/* the first line holds on one line: it is the statement, and breaking
   "Everything I threw / away" strands the verb */
.ps-intro h1 .l1{display:block;white-space:nowrap}
.ps-intro h1 em{font-family:Instrument,Georgia,serif;font-style:italic;
  font-weight:400;color:#7aa2ff;letter-spacing:-.01em}
.ps-intro .by{margin-top:20px;font-family:Satoshi,sans-serif;
  font-size:clamp(13px,1.5vw,16px);color:#7c8db8;letter-spacing:.03em}

/* ---- the stat reveal ---- */
/* One line at a time, centred and large. Four rows stacked as a list forced
   the type small enough that it competed with the sheets passing behind it
   and none of it got read. Each row now owns the centre of the frame alone
   for its own stretch of scroll. */
.ps-stats{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;text-align:center;width:min(760px,90vw);
  height:min(300px,42vh)}
/* Type this quiet cannot hold its own against bright sheets passing behind
   it, so the block carries its own contrast floor. Sized well beyond the
   text and feathered hard, it reads as depth rather than as a panel. */
.ps-stats::before{content:'';position:absolute;left:50%;top:50%;
  width:190%;height:210%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(3,5,12,.86),rgba(3,5,12,.62) 45%,rgba(3,5,12,0) 100%)}
/* every row occupies the same centred box, only one is ever visible */
.ps-stat{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  will-change:opacity,transform}
.ps-stat .num{font-family:Instrument,Georgia,serif;font-style:italic;
  font-size:clamp(88px,15vw,210px);line-height:.88;color:#eef2ff;
  letter-spacing:-.02em}
.ps-stat .lab{font-family:Satoshi,sans-serif;font-size:clamp(15px,2vw,26px);
  color:#8093bd;letter-spacing:.16em;text-transform:lowercase}

.ps-lead{position:absolute;left:0;right:0;top:-6%;
  font-family:Instrument,Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,27px);color:#6f82ad;
  will-change:opacity}

/* the payoff: the one that is not a count of waste */
.ps-stat.payoff .num{color:#fff}
.ps-stat.payoff .lab{color:#4e7dff}

/* ---- live report, transformed onto the screen quad ---- */
.ps-css3d{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ps-cam{position:absolute;top:0;left:0;width:100%;height:100%;
  transform-style:preserve-3d}
.ps-plane{position:absolute;top:0;left:0;transform-style:preserve-3d;
  will-change:transform,opacity}
.ps-css3d iframe{display:block;border:0;background:#070b16;pointer-events:none}

/* ---- sound toggle badge ----
   Round glass button, injected into the stage by paper-storm.js. The SVG
   waveform inside is drawn live: a moving sine when ON, a flat line when
   OFF. */
.ps-sound{position:fixed;z-index:160;
  right:clamp(16px,4vw,44px);bottom:clamp(16px,5vh,48px);
  width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  color:#c7d4f5;
  background:rgba(12,16,30,.42);
  border:1px solid rgba(150,170,230,.26);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.7);
  transition:transform .25s ease,border-color .25s ease,
             color .25s ease,background .25s ease,box-shadow .25s ease}
.ps-sound:hover{transform:scale(1.06);
  border-color:rgba(78,125,255,.6);color:#fff}
.ps-sound:focus-visible{outline:2px solid #4e7dff;outline-offset:3px}
.ps-sound svg{width:26px;height:26px;overflow:visible}
/* ON: lit blue, faint halo so it reads as active */
.ps-sound.on{color:#7ea2ff;border-color:rgba(78,125,255,.5);
  box-shadow:0 0 18px -4px rgba(78,125,255,.5),0 6px 20px -8px rgba(0,0,0,.7)}
/* OFF: dimmed, no halo */
.ps-sound.off{color:#5c6685}