/* ============================================================
   PAPIERSTORM-SEQUENTIE, overgenomen uit geborgd-paperstorm.html
   en omgezet naar de Geborgd-huisstijl (tokens.css).
   Strook links met perspective (voor het paneel z'n 3D-morph),
   achtergrond is nu de scroll-scrubbed tornado-canvas, gepind via
   position: sticky.
   ============================================================ */

.storm-seq {
  position: relative;
  height: 320vh;
  background: var(--gb-paper);
}

.storm-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden; /* clipt alleen; NIET op een ouder van .storm-panel met 3D-context */
}

/* ---------- linkerstrook: de storm ---------- */
.storm-strip {
  position: relative;
  z-index: 2; /* storm-vellen boven de doorlopende atmosfeer-gloed */
  width: 50vw; /* breder (was 36vw): de chips clusterden te dicht links, rechts oogde leeg */
  height: 100%;
  perspective: 1500px;           /* perspective op de strook... */
  perspective-origin: 55% 45%;
  flex: none;
}

/* zachte fade boven en onder zodat vellen niet hard afgesneden worden */
.storm-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    var(--gb-paper) 0%,
    rgba(245, 247, 246, 0) 14%,
    rgba(245, 247, 246, 0) 86%,
    var(--gb-paper) 100%);
}

/* De AI-gerenderde papiertornado (scroll-scrubbed canvas, zelfde techniek
   als de video-vignetten in js/main.js) is nu de enige visuele laag in de
   strook -- verving eerst alleen de twee tekstloze SVG-lagen, en later ook
   de 7 getekste "nep-papier"-vellen (die klopten niet meer naast een
   fotorealistische video, review Abdul 01-08). */
.storm-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  object-fit: cover;
  object-position: left center;
  /* multiply i.p.v. een harde rechthoek: lichte pixels (de paginakleur-
     achtige achtergrond in de video zelf) lossen zo bijna helemaal op in
     --gb-paper erachter, alleen de donkerdere papierstrengen blijven
     zichtbaar -- oogt als achtergrond-diepte, niet als een los kader
     erbovenop (review Abdul 01-08) */
  mix-blend-mode: multiply;
  /* dooft links-verankerd uit: eerst 38%/62%, toen 55%/85% -- nog steeds
     te vroeg (review Abdul 01-08). Nu vol tot 70%, pas bij 95% helemaal
     weg. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, rgba(0, 0, 0, 0.7) 82%, transparent 95%);
  mask-image: linear-gradient(to right, #000 0%, #000 70%, rgba(0, 0, 0, 0.7) 82%, transparent 95%);
  transform: scale(1.015);
  transition: transform 2s ease-out;
}

/* Zodra js/storm.js zijn laatste vormings-frame bereikt (tornadoTVoor=1,
   p=0.50): geen harde stop, een echte tijd-gebaseerde ease-out van ~2s
   (transition hierboven), los van scrollsnelheid. */
.storm-canvas.is-klaar {
  transform: scale(1);
}

/* Onzichtbaar positie-anchor (geen kinderen meer, zie storm.js): bepaalt
   alleen bronOX/bronOY, het BEGINPUNT waar het paneel vandaan groeit (de
   eindpositie blijft altijd het midden, zie px/py in frame()). Stond op
   right:9% (de oude papierstapel rechtsonder), toen links (30%) binnen
   de tornado -- maar dat overlapte de rommelige wolk bovenin, alsof het
   paneel er toevallig achter hing. Nu op de rechterrand van de tornado-
   massa zelf (42%), het duidelijk draaiende deel, niet de wolk erboven
   (review Abdul 01-08). */
.storm-bron {
  position: absolute;
  left: 42%;
  bottom: 50%;
  width: 104px;
  height: 100px;
  z-index: 1;
}

/* het blok: de zijkant van de stapel. Fijne, dicht opeenvolgende streepjes
   simuleren tientallen velranden (zoals een pak printpapier van opzij),
   plus een algeheel verloop voor de schaduw onderin de stapel */
.storm-bron-blok {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 62px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(24, 36, 43, 0.22) 0px,
      rgba(24, 36, 43, 0.22) 0.6px,
      transparent 0.6px,
      transparent 2.4px
    ),
    linear-gradient(to bottom, #fdfdfc 0%, #e5e9e7 55%, #c7cdca 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(24, 36, 43, 0.15);
}

/* het bovenste vel: licht foreshortened (breder dan hoog), alsof je net
   iets van bovenaf op de stapel kijkt */
.storm-bron-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
}

.storm-bron-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- het paneel waar de storm in verdwijnt: echte Geborgd-UI ---------- */
.storm-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vw, 420px);
  transform-style: preserve-3d;
  opacity: 0;
  will-change: transform, opacity;
  z-index: 4;
  background: #ffffff;
  border-radius: var(--radius-medium);
  border: 1px solid var(--gb-line);
  box-shadow: 0 30px 70px rgba(24, 36, 43, 0.20), 0 3px 8px rgba(24, 36, 43, 0.06);
  overflow: hidden;
}

.storm-panel-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--gb-line);
  background: var(--gb-paper);
}

.storm-panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gb-line); }

.storm-panel-name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-gray);
  margin-left: 5px;
}

.storm-panel-body { padding: 8px 0 12px; }

.storm-panel-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  font-size: 12px;
}

.storm-panel-row + .storm-panel-row { border-top: 1px solid #eef1f0; }

.storm-panel-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: none;
  background: var(--gb-success);
  position: relative;
}

.storm-panel-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(43deg);
}

.storm-panel-label { flex: 1; color: var(--gb-ink); }

.storm-panel-state {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gb-success);
}

/* ---------- rechterkolom: de tekst ---------- */
.storm-copy {
  position: relative;
  flex: 1;
  padding: 0 7vw 0 4vw;
  z-index: 6;
}

.storm-copy-block {
  position: absolute;
  top: 50%;
  left: 7vw;
  right: 7vw;
  transform: translateY(-50%);
  will-change: opacity, transform;
}

.storm-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-gray);
  margin-bottom: 20px;
}

.storm-copy h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 700;
  max-width: 16ch;
  margin-bottom: 20px;
}

.storm-copy h2 em { font-style: normal; color: var(--gb-mint); }

.storm-lede {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.62;
  color: var(--gb-gray);
  max-width: 40ch;
}

.storm-counter {
  margin-top: 30px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.storm-counter-num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--gb-ink);
  font-variant-numeric: tabular-nums;
}

.storm-counter-txt {
  font-size: 0.86rem;
  color: var(--gb-gray);
  max-width: 18ch;
  line-height: 1.45;
}

/* FOUC-preventie: zonder JavaScript is het paneel gewoon zichtbaar (de
   tornado-canvas blijft dan onzichtbaar -- staat sowieso stil zonder de
   scroll-gedreven frame()-loop, dus liever leeg dan een bevroren frame).
   js/storm.js laat deze klasse óók staan op mobiel (isMobiel-check, zelfde
   drempel als main.js): geen scroll-jacking meer op smal, dezelfde
   statische opstelling als bij reduced-motion/geen-JS hieronder. */
.no-storm-js .storm-panel { opacity: 1 !important; }

/* de tornado-canvas krijgt hier zijn statische laatste-frame (main.js
   tekent 'm altijd, ongeacht isMobiel) -- zonder deze regel blijft hij op
   zijn CSS-standaard opacity:0 staan omdat alleen frame() (dat nu niet
   draait) 'm normaal zichtbaar maakt. scale(1) i.p.v. de 1.015 intro-zoom:
   dat is de rustpositie (zie .is-klaar hierboven). */
.no-storm-js .storm-canvas { opacity: 1; transform: scale(1); }

/* zelfde statische, gestapelde compositie als reduced-motion hieronder --
   geen los scroll/opacity-systeem nodig als frame() toch niet draait. Ook
   het paneel zelf mag hier niet meer position:absolute blijven (dat bleef
   het over de tekst heen zweven, review Abdul: "deresst heeft veel
   ruimte" -- paneel lag half over "Alles moet aantoonbaar zijn" heen): in
   deze statische compositie staat het paneel gewoon ná de tornado-strook
   in de normale document-flow, net als de tekstblokken. */
.no-storm-js .storm-seq { height: auto; }
.no-storm-js .storm-stage { position: static; height: auto; padding: 10vh 0 6vh; flex-direction: column; overflow: visible; }
.no-storm-js .storm-strip {
  position: relative;
  width: 100%;
  height: 42vh;
  min-height: 260px;
  perspective: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-storm-js .storm-panel { position: static; width: min(88vw, 380px); }
.no-storm-js .storm-copy { padding: 6vh 6vw 0; }
.no-storm-js .storm-copy-block { position: static; left: auto; right: auto; transform: none; opacity: 1 !important; }
.no-storm-js .storm-copy-block + .storm-copy-block { margin-top: 32px; }

/* ---------- mobiel: storm wordt achtergrond op lage dekking ----------
   Geldt alleen nog als storm.js WEL draait (desktop-breedte, JS enabled,
   geen reduced-motion) maar het venster toch smal genoeg is om deze
   layout-regels te willen (bijv. een smal desktopvenster). Op echte
   mobiele viewports (<768px) staat altijd .no-storm-js (zie storm.js),
   dus dan winnen de statische regels hierboven -- vandaar :not(.no-storm-js)
   hier, anders overschreef deze @media-blok (later in het bestand, dus
   hogere prioriteit bij gelijke specificiteit) alsnog .storm-strip terug
   naar position:absolute en veroorzaakte precies dezelfde overlap. */
@media (max-width: 820px) {
  /* achtergrond op lage dekking: rustig genoeg om overheen te lezen */
  html:not(.no-storm-js) .storm-strip { position: absolute; inset: 0; width: 100vw; opacity: 0.35; }
  html:not(.no-storm-js) .storm-copy { padding: 0 8vw; }
  html:not(.no-storm-js) .storm-copy-block { left: 8vw; right: 8vw; }
  html:not(.no-storm-js) .storm-panel { width: min(74vw, 340px); }
}

/* ---------- reduced motion: geen pin, statische compositie ---------- */
@media (prefers-reduced-motion: reduce) {
  .storm-seq { height: auto; }
  .storm-stage { position: static; height: auto; padding: 14vh 0; }
  .storm-strip { height: 60vh; }
  .storm-copy-block { position: static; transform: none; opacity: 1 !important; }
  .storm-copy-block + .storm-copy-block { margin-top: 44px; }
}