/* --- Basic Reset & Theme (site-wide panel colors) --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg:#121212; --text:#e0e0e0; --muted:#bdbdbd;
  --ring:#2c2c2c;
  --g1:#8400ff; --g2:#ba0186; --g3:#f94016; --g4:#f96d16; --g5:#3b82f6;
  --accent: var(--g5);
  --maxw: 1100px;
}
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index: 9999; }

/* was: width: 100vw;  → causes overflow when parents have padding/scrollbar */
.big-viewport { width: 100%; overflow: hidden; }

html { overflow-x: clip; }   /* or use overflow-x: hidden; if clip isn’t supported */

/* --- Utilities & Containers --- */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; margin-top: 120px;}
.gradient{
  background: linear-gradient(90deg, var(--g1), var(--g3) 40%, var(--g4) 60%, var(--g5));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.accent{
  background: linear-gradient(90deg, var(--g1), var(--g3) 40%, var(--g4) 60%, var(--g5));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* --- Scrolly Sections --- */
.scrolly { min-height: 100vh; position: relative; }
.scrolly .pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6vmin 6vmin;
}
.scrolly .title { font-size: clamp(2.2rem, 7vw, 6rem); text-align: center; letter-spacing: -0.02em; }
.scrolly .title.small { font-size: clamp(1.6rem, 4.5vw, 3rem); color: var(--muted); }
.kicker { color: var(--muted); margin-top: 1rem; font-size: clamp(1rem, 2vw, 1.4rem); }
.note {
  max-width: min(80ch, var(--maxw)); margin: 0 auto;
  text-wrap: balance; color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.3rem); text-align: center;
}
.hint {
  position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: clamp(.9rem, 2vw, 1.1rem);
  opacity: calc(1 - var(--p, 0)); pointer-events: none;
}
.hint.under { bottom: 6vh; }

/* Reusable animated line */
.line { max-width: min(22ch, 88vw); text-align: center; font-weight: 700; letter-spacing: -0.01em; will-change: transform, opacity, letter-spacing; }

/* Scale-up effect */
.scale .scale-up {
  font-size: clamp(1.6rem, 5vw, 3rem);
  transform: scale(calc(1 + var(--p, 0) * 3));
  opacity: calc(.35 + var(--p, 0) * .65);
  letter-spacing: calc(var(--p, 0) * .03em);
}

html { overflow-x: hidden; }

.big-track {
  display: inline-block; white-space: nowrap; font-weight: 900; letter-spacing: .02em; line-height: 1; padding: 0 6vw;
  font-size: clamp(7rem, 24vw, 28rem); transform: translateX(0px); will-change: transform; user-select: none;
}
.big .pin { align-content: center; gap: 2vh; }
.big .hint { opacity: calc(.8 - var(--p, 0) * .8); }

/* Reveal next idea */
.reveal .fade-in { font-size: clamp(1.6rem, 5vw, 3rem); opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 24px)); }

/* Intro has a gentle entrance */
.intro .title { transform: translateY(calc((1 - var(--p, 0)) * 36px)); opacity: calc(.6 + var(--p, 0) * .4); padding-left: 100px; padding-right: 100px;}

/* Outro spacing */
.outro .note code, .outro .note abbr { color: #cbd3ff; }
.outro .note code { background: #13131a; padding: .2rem .4rem; border-radius: .4rem; }

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* No-JS and Reduced Motion fallbacks */
.noscript { background: #13131a; color: var(--muted); padding: 1rem 1.25rem; margin: 2rem auto; max-width: var(--maxw); border-radius: .75rem; }
@media (prefers-reduced-motion: reduce){
  .scale .scale-up, .reveal .fade-in, .intro .title, .big-track { transition: none !important; transform: none !important; }
}

/* --- Focus Lines panel (4 phrases that light up as you scroll) --- */
.panel{ position: relative; height: 260vh; }
.lines{ position: sticky; top: 0; min-height: 100vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8vh; }
.panel.focus .line{ text-align:left; max-width:min(28ch, 72vw); }
.line{ font-size:clamp(1.8rem,5.2vw,3.4rem); font-weight:800; line-height:1.1; opacity:.15; transform:translateY(18px); transition:opacity .25s linear, transform .25s ease; }
.line.is-active{ opacity:1; transform:translateY(0); }
.line span{ display:inline-block; }
.line .trail{ letter-spacing:calc(var(--pLocal) * .12em); }

/* Optional subtle background grain */
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* --- Focus Paragraph panel (wordy paragraph highlighted in chunks) --- */
.para-panel{ position:relative; height:240vh; }
.p-sticky{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.para{ max-width:min(62ch,90vw); font-size:clamp(1.25rem,3.2vw,2.1rem); font-weight:800; line-height:1.5; color:var(--muted); text-align:center; margin:0 auto; }
.para .chunk{ display:inline; opacity:.22; transform:translateY(8px) scale(1); transition: opacity .25s linear, transform .25s ease, letter-spacing .25s ease; letter-spacing:0; }
.para .chunk.is-active{
  opacity:1;
  transform: translateY(-6px) scale(calc(1 + var(--pChunk, 0) * .12));
  letter-spacing: calc(var(--pChunk, 0) * .02em);
  background: linear-gradient(90deg, var(--g1), var(--g3) 40%, var(--g4) 60%, var(--g5));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion: reduce){
  .para .chunk{ opacity:1 !important; transform:none !important; letter-spacing:0 !important; -webkit-text-fill-color:inherit !important; }
}

.scrolly.big2 .big-track2 {
  font-size: clamp(120px, 9vw, 120px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  white-space: nowrap;
}