/* Periodically Nerdy · Lab — an immersive, scroll-driven experiment in the site's green theme */
:root {
  --abyss: #06110c; --deep: #0b1f17; --paper: #edf4ef; --muted: #9fb5a9;
  --mint: #8ff5c2; --emerald: #2fd88a; --gold: #ffc94d; --line: rgba(143, 245, 194, 0.18);
  --display: "Unbounded", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --body: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 44px);
}
* { box-sizing: border-box; }
html { background: var(--abyss); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--paper); font-family: var(--body); background: var(--abyss); overflow-x: clip; }
body.is-loading { overflow: hidden; }
a { color: inherit; }

/* the 3D world sits behind everything, sized to the tallest view so phone address bars never stretch it */
#gl { position: fixed; inset: 0 0 auto 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; touch-action: pan-y; cursor: grab; }
#gl.is-dragging { cursor: grabbing; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(3, 9, 6, 0.75) 100%); }
/* text floats above the 3D but lets drags through to it; only links and buttons take clicks */
main { pointer-events: none; }
main a, main button { pointer-events: auto; }
.hud-bc { bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .5s ease; }
.hud-bc.is-on { opacity: 1; }
.spin-ico { width: 26px; height: 10px; border: 1px solid var(--mint); border-radius: 50%; position: relative; animation: spin-ico 2.4s ease-in-out infinite; }
.spin-ico::after { content: ""; position: absolute; top: 2px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--mint); }
@keyframes spin-ico { 50% { transform: rotateY(160deg); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--abyss); transition: opacity .9s ease, visibility .9s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.ld-sym { width: 92px; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid var(--emerald); border-radius: 14px; font: 600 2.4rem/1 var(--display); color: var(--mint); box-shadow: 0 0 40px -10px var(--emerald); }
.ld-bar { width: min(220px, 60vw); height: 2px; background: var(--line); overflow: hidden; }
.ld-bar span { display: block; height: 100%; width: 0; background: var(--mint); transition: width .2s linear; }
.ld-pct { font: 400 0.78rem var(--mono); letter-spacing: 0.2em; color: var(--muted); }
.ld-enter { margin-top: 6px; min-height: 46px; padding: 0 24px; border: 1px solid var(--mint); border-radius: 999px; background: transparent; color: var(--paper); font: 600 0.9rem var(--body); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.ld-enter:hover { background: rgba(143, 245, 194, 0.12); }
.ld-enter:active { transform: scale(0.97); }

/* ---------- corner labels ---------- */
.hud { position: fixed; z-index: 10; font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.hud-tl { top: calc(16px + env(safe-area-inset-top)); left: var(--gutter); display: grid; gap: 2px; }
.hud-tl a { color: var(--paper); text-decoration: none; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hud-tr { top: calc(12px + env(safe-area-inset-top)); right: var(--gutter); }
.hud-bl { bottom: calc(18px + env(safe-area-inset-bottom)); left: var(--gutter); display: flex; align-items: baseline; gap: 8px; }
.hud-bl b { font: 600 1.4rem var(--display); color: var(--mint); letter-spacing: 0; }
.hud-bl em { font-style: normal; margin-left: 10px; color: var(--paper); }
.hud-br { bottom: calc(18px + env(safe-area-inset-bottom)); right: var(--gutter); display: flex; align-items: center; gap: 10px; transition: opacity .4s ease; }
.hint-line { width: 34px; height: 1px; background: var(--mint); transform-origin: left; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }
.sound { display: flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; letter-spacing: inherit; cursor: pointer; }
.sound i { width: 2px; height: 6px; background: currentColor; transition: height .2s ease; }
.sound span { margin-left: 8px; }
.sound[aria-pressed="true"] { color: var(--mint); }
.sound[aria-pressed="true"] i { animation: eq .9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] i:nth-child(2) { animation-delay: -.3s; } .sound[aria-pressed="true"] i:nth-child(3) { animation-delay: -.6s; } .sound[aria-pressed="true"] i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 4px; } to { height: 14px; } }
.sound:focus-visible, .link:focus-visible, .cta:focus-visible, .ld-enter:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 11; }
.progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--emerald), var(--gold)); transform: scaleX(0); transform-origin: left; }

/* ---------- chapters (text over the 3D scene) ---------- */
main { position: relative; z-index: 5; }
.chap { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter); max-width: 620px; }
.chap--right { margin-left: auto; text-align: right; align-items: flex-end; }
.chap--center { margin: 0 auto; text-align: center; align-items: center; justify-content: flex-start; padding-top: 11vh; padding-bottom: 11vh; }
.chap--center .cta { margin-top: auto; } /* heading at the top, button at the bottom, the blocks between */
.chap--center .big { font-size: clamp(2rem, 4.6vw, 3.6rem); }
/* computers: the three glass blocks are the price cards, so the list only shows on phones */
@media (min-width: 721px) { .chap--center .packs { display: none; } }
.kicker { margin: 0; font: 400 0.76rem var(--mono); letter-spacing: 0.14em; color: var(--mint); }
.big { margin: 18px 0 0; font: 800 clamp(2.3rem, 6.4vw, 5rem)/1.02 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.body { margin: 22px 0 0; max-width: 40ch; font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.link { margin-top: 26px; display: inline-flex; align-items: center; min-height: 44px; font: 600 0.92rem var(--body); text-decoration: none; border-bottom: 1px solid var(--mint); }
.packs { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); }
.packs li { display: grid; gap: 4px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 17, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.packs b { font: 600 1rem var(--display); }
.packs span { font: 400 0.74rem var(--mono); color: var(--gold); }
.cta { margin-top: 28px; display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--emerald); color: #04130b; font: 600 1rem var(--body); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cta:hover { box-shadow: 0 16px 40px -14px var(--emerald); }
.cta:active { transform: scale(0.97); }

/* text arrives once its chapter is in front of the camera */
.chap .body, .chap .link, .chap .packs, .chap .cta { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .25s, transform .8s cubic-bezier(.2, .8, .2, 1) .25s; }
.chap.is-on .body, .chap.is-on .link, .chap.is-on .packs, .chap.is-on .cta { opacity: 1; transform: none; }
[data-scramble] { visibility: hidden; }
.chap.is-on [data-scramble], .is-static [data-scramble] { visibility: visible; }

/* phones: text sits low, the glass block owns the top of the screen */
@media (max-width: 720px) {
  .chap, .chap--right, .chap--center { justify-content: flex-end; text-align: left; align-items: flex-start; margin: 0; max-width: none; padding: 46vh var(--gutter) 108px; }
  .chap--center { text-align: left; justify-content: flex-end; padding-top: 34vh; padding-bottom: 92px; }
  .chap--center .cta { margin-top: 22px; }
  .chap--center .big { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .big { font-size: clamp(2rem, 10vw, 2.8rem); }
  .body { font-size: 1rem; }
  .packs { grid-template-columns: 1fr; gap: 8px; }
  .packs li { grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; }
  .hud-tl span, .hud-bl em { display: none; }
  .hud-br { display: none; }
  .hud-bc { left: auto; right: var(--gutter); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}