:root {
  --acc: #b8ff3d;
  --fg: #f1ffd6;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #02040a; overflow-x: hidden; }
html.fine, html.fine * { cursor: none; }

body {
  min-height: 400vh;
  font-family: 'Space Mono', ui-monospace, Consolas, monospace;
  color: var(--fg);
  background: #02040a;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.no-gl { background: radial-gradient(circle at 30% 20%, #1f8a3e 0%, #02130a 70%); }

canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#bg { z-index: 0; }
#fx { z-index: 1; pointer-events: none; }

.scanlines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}

.grain {
  position: fixed; inset: -120px; z-index: 3; pointer-events: none; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(8%, 2%); }
  100% { transform: translate(0, 0); }
}

.spot {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .8s var(--ease);
  background: radial-gradient(circle 280px at var(--sx, 50%) var(--sy, 50%), transparent 0 55%, rgba(6,0,12,.8) 100%);
}
body[data-kind="shards"] .spot { opacity: 1; }

main { position: relative; z-index: 4; }

/* ---------- sections ---------- */
.act {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  perspective: 1200px; display: flex; align-items: center; justify-content: center;
}
.act-inner {
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4vh; padding: 0 4vw; transform-style: preserve-3d;
}
.eyebrow {
  font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .45em; text-transform: uppercase;
  color: var(--acc); opacity: .9;
}

.name-wrap { position: relative; max-width: 100%; transform-style: preserve-3d; will-change: transform; }

.name {
  position: relative; font-family: 'Unbounded', system-ui, sans-serif; font-weight: 900;
  font-size: var(--fs); line-height: .84; letter-spacing: -.05em; text-align: center;
  color: var(--fg); user-select: none;
}
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; vertical-align: top; }
.ch-in { display: inline-block; opacity: 0; }
.act.is-in .ch-in {
  animation: rise 1.2s var(--ease) both;
  animation-delay: calc(var(--i) * 26ms + 120ms);
}
@keyframes rise {
  0% { opacity: 0; transform: translateY(120%) rotate(14deg) scale(.8); filter: blur(14px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* RGB-split glitch copies of the name */
.name::before, .name::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  text-align: center; opacity: 0; pointer-events: none;
}
.name::before { color: #ff2bd6; mix-blend-mode: screen; }
.name::after { color: #00f0ff; mix-blend-mode: screen; }
.name.glitch::before { opacity: .85; animation: g1 .18s steps(2, end) infinite; }
.name.glitch::after { opacity: .85; animation: g2 .22s steps(3, end) infinite; }
@keyframes g1 {
  0% { transform: translate(-.035em, 0); clip-path: inset(8% 0 62% 0); }
  50% { transform: translate(.03em, .01em); clip-path: inset(48% 0 22% 0); }
  100% { transform: translate(0, 0); clip-path: inset(70% 0 4% 0); }
}
@keyframes g2 {
  0% { transform: translate(.04em, 0); clip-path: inset(60% 0 8% 0); }
  50% { transform: translate(-.05em, 0); clip-path: inset(20% 0 48% 0); }
  100% { transform: translate(.01em, 0); clip-path: inset(34% 0 40% 0); }
}

/* per-section type treatments */
.act--frog { --fs: min(15vw, 24vh); --acc: #b8ff3d; --fg: #f1ffd6; }
.act--fluff { --fs: min(9.2vw, 15vh); --acc: #c9a8ff; --fg: #fff6ff; }
.act--sparks { --fs: min(12vw, 22vh); --acc: #ff3b3b; --fg: #eef6ff; }
.act--shards { --fs: min(12.5vw, 26vh); --acc: #ff2bd6; --fg: #ffffff; }

.act--frog .name {
  color: #f1ffd6;
  text-shadow: 0 0 .16em rgba(184, 255, 61, .6), 0 0 .03em rgba(184, 255, 61, .9);
}
.act--fluff .name {
  color: rgba(255, 246, 255, .12); -webkit-text-stroke: 2px #c9a8ff;
}
.act--shards .eyebrow { color: #ffffff; }
.act--sparks .name {
  color: #f4f8ff;
  text-shadow: 0 0 .12em rgba(255, 59, 59, .6), 0 0 .02em rgba(255, 59, 59, .9);
}
/* guest letters get their own hue (set per letter in app.js) */

.tag {
  display: flex; align-items: center; gap: 1.1em; white-space: nowrap;
  font-size: clamp(12px, 1.7vw, 22px); letter-spacing: .3em; text-transform: lowercase;
  color: var(--fg); min-height: 1.8em;
}
.tag::before, .tag::after {
  content: ""; width: min(8vw, 120px); height: 2px; background: var(--acc);
  box-shadow: 0 0 12px var(--acc);
}
.caret { color: var(--acc); margin-left: .2em; animation: blink .8s steps(2) infinite; }
.caret.done { animation: none; opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }

/* marquee bands */
.band {
  position: absolute; left: 0; right: 0; z-index: 3;
  height: clamp(40px, 6.4vh, 68px); overflow: hidden;
  display: flex; align-items: center;
  background: rgba(0, 0, 0, .32); backdrop-filter: blur(5px);
  border: solid color-mix(in srgb, var(--acc) 45%, transparent); border-width: 1px 0;
}
.band--top { top: 0; }
.band--bot { bottom: 0; }
.band-track {
  display: flex; flex: none; white-space: nowrap; will-change: transform;
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(14px, 2.4vh, 28px); letter-spacing: -.01em;
  color: var(--acc);
}

/* spinning text badge */
.badge {
  position: absolute; z-index: 3; width: min(15vw, 200px); aspect-ratio: 1;
  animation: spin 18s linear infinite;
}
.badge svg { width: 100%; height: 100%; overflow: visible; }
.badge text { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .14em; fill: var(--fg); text-transform: uppercase; }
.badge .core-txt { fill: var(--acc); font-size: 28px; letter-spacing: 0; }
.badge circle { fill: none; stroke: var(--acc); stroke-width: 1.2; }
@keyframes spin { to { transform: rotate(360deg); } }
.act--frog .badge { left: 5vw; top: 13vh; }
.act--fluff .badge { right: 5vw; bottom: 17vh; }
.act--sparks .badge { left: 5vw; bottom: 17vh; }
.act--shards .badge { right: 5vw; top: 13vh; }

/* frog mascot */
.frog {
  position: absolute; z-index: 3; right: 8vw; bottom: 15vh; width: min(18vw, 240px);
  animation: bob 3.6s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(184, 255, 61, .45));
}
.frog-svg { width: 100%; height: auto; display: block; overflow: visible; cursor: pointer; }
.frog-svg.wiggle { animation: wig .7s ease; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes wig {
  0% { transform: rotate(0); }
  20% { transform: rotate(-9deg) scale(1.08); }
  45% { transform: rotate(7deg); }
  70% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
.eye-g { transform-box: fill-box; transform-origin: 50% 50%; animation: lid 4.6s infinite; }
.eye-g.b { animation-delay: .14s; }
@keyframes lid { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.06); } }

/* HUD */
.hud {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg);
}
.hud-bar { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: rgba(255, 255, 255, .08); }
.hud-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acc), #fff); box-shadow: 0 0 14px var(--acc);
}
.hud-idx {
  position: absolute; left: 28px; bottom: 84px;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .06em;
}
.hud-idx b { color: var(--acc); font-weight: 900; }
.hud-pct { position: absolute; right: 28px; bottom: 84px; font-variant-numeric: tabular-nums; }

/* cursor */
.cur-ring, .cur-dot {
  position: fixed; left: 0; top: 0; z-index: 7; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference;
}
.cur-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s;
}
.cur-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; }
body.hovering .cur-ring { width: 120px; height: 120px; margin: -60px 0 0 -60px; background: rgba(255, 255, 255, .12); }
html:not(.fine) .cur-ring, html:not(.fine) .cur-dot { display: none; }

/* small screens */
@media (max-width: 720px) {
  .act--fluff { --fs: min(11vw, 15vh); }
  .act--sparks { --fs: min(13vw, 22vh); }
  .act--shards { --fs: min(13.5vw, 26vh); }
  .frog { width: 38vw; right: 4vw; bottom: 12vh; }
  .badge { width: 28vw; }
  .tag::before, .tag::after { width: 6vw; }
  .band-track { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .frog, .badge, .eye-g, .name, .caret { animation: none !important; }
  .act .ch-in { opacity: 1; }
}