/* Sections and the text panels that ride over the swarm. */

.scroller{position:relative;z-index:10}
section{min-height:100svh;display:flex;align-items:center;padding:clamp(96px,14vh,180px) var(--pad)}

.panel{position:relative;isolation:isolate;max-width:640px;opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
/* Without JS the reveal never fires, so the panels must start visible. */
html:not(.js) .panel{opacity:1;transform:none}
.panel.in{opacity:1;transform:none}

/* Local veil: the swarm passes UNDER the text. text-shadow alone is not enough
   when a saturated crest travels behind a line of body copy. */
/* Lateral bleed capped to the gutter: never any horizontal scroll on mobile. */
.panel::before{content:'';position:absolute;inset:-30px calc(var(--pad) * -.8);z-index:-1;pointer-events:none;
  background:radial-gradient(58% 56% at 50% 50%,
    rgba(4,4,14,.93) 0%,rgba(4,4,14,.82) 44%,rgba(4,4,14,.44) 73%,rgba(4,4,14,0) 100%)}

/* The block is pushed to the right; the text stays left-aligned.
   The tension of the composition comes from the panel position, not from glyph
   alignment: a single reading axis, ragged right throughout. */
section.right{justify-content:flex-end}
section.center{justify-content:center}
section.center .panel{text-align:center;max-width:780px}

/* --ink2 rather than --live: at 10.5px this is normal text and needs 4.5:1, which
   the opening violet cannot give (3.73:1). The swarm still carries the colour. */
.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:22px}
.tag::before{content:'';width:26px;height:1px;background:currentColor}
section.center .tag::before{display:none}

.panel h1{font-size:clamp(36px,5.5vw,74px);letter-spacing:-.05em;font-weight:400}
/* Legibility over the particles, without an opaque box. */
.panel h1,.panel h2,.panel p{text-shadow:0 2px 30px rgba(4,4,14,.92),0 1px 4px rgba(4,4,14,.7)}
section:first-child .panel{max-width:940px}
.panel h2{font-size:clamp(28px,4.8vw,56px);font-weight:400}
.panel h1 em,.panel h2 em{font-style:normal;color:var(--live);font-weight:600}
.panel p{margin-top:22px;font-size:clamp(16px,1.7vw,19px);color:var(--ink2);max-width:52ch}
section.center .panel p{margin-inline:auto}
.panel p strong{color:var(--ink);font-weight:600}
.panel p + p{margin-top:14px}

.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--live),transparent);
  animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* The offset composition collapses on narrow screens: one column, one axis. */
@media (max-width:720px){
  section.right{justify-content:flex-start}
}

/* The reveal transition is killed globally, so panels would stay at opacity 0. */
@media (prefers-reduced-motion:reduce){
  .panel{opacity:1;transform:none}
}