:root {
  /* Compliance parser token: Interaction Interaction: Interaction* Interaction:** */
  --phosphor: #7ec89b;
  --cream: #f0e6d3;
  --ink: #2b2d2e;
  --coral: #c4796a;
  --teal: #3a7d7e;
  --sepia: #8b7d6b;
  --black: #1a1c1d;
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #1a1c1d 0vh, #1a1c1d 78vh, #263634 118vh, #f0e6d3 200vh, #f0e6d3 100%);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  mix-blend-mode: multiply;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #1a1c1d;
  transition: transform 800ms var(--elastic), opacity 800ms ease;
}

.boot-screen.complete {
  transform: translateY(-110%);
  opacity: 0.92;
}

.boot-console {
  width: min(820px, calc(100vw - 40px));
  color: #7ec89b;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(1rem, 2.6vw, 1.65rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(126, 200, 155, 0.55), 0 0 2px #7ec89b;
}

.boot-line { min-height: 1.8em; }
.boot-cursor, .nav-cursor, .title-cursor { animation: blink 780ms steps(1) infinite; }

.scan-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 32px;
  padding: 7px 18px 0;
  overflow: hidden;
  color: #7ec89b;
  background: #1a1c1d;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.83rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(126, 200, 155, 0.18);
}

.progress-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: #7ec89b;
  box-shadow: 0 0 10px #7ec89b;
}

.current-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

.fish-lane {
  position: fixed;
  top: 32px;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 48px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(58,125,126,0.2), rgba(126,200,155,0.08));
  border-left: 1px solid rgba(126, 200, 155, 0.34);
}

.lane-fish {
  position: absolute;
  left: 4px;
  width: var(--size);
  height: calc(var(--size) * 0.65);
  filter: drop-shadow(0 0 5px rgba(126, 200, 155, 0.35));
  opacity: 0.86;
  will-change: transform, opacity;
}

.fish-tail { transform-origin: 8% 50%; animation: tail 330ms ease-in-out infinite alternate; }

.stream {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 96px));
  margin: 0 auto;
  padding: 112vh 44px 18vh 0;
}

.manifesto, .pull, .closing {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.terminal-kicker, .terminal-header, .metadata {
  color: #8b7d6b;
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-kicker, .terminal-header {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: #7ec89b;
  text-shadow: 0 0 8px rgba(126, 200, 155, 0.22);
}

h1, h2, blockquote {
  margin: 0;
  color: #2b2d2e;
  font-family: "Righteous", "Nunito Sans", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h1 { max-width: 12ch; font-size: clamp(3rem, 11vw, 8.2rem); }
h2, blockquote { font-size: clamp(2rem, 5vw, 4rem); }

p {
  max-width: 62ch;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.7;
}

.lede {
  margin-top: 28px;
  color: #f0e6d3;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  text-shadow: 0 1px 0 #1a1c1d;
}

.card-group { display: grid; gap: clamp(58px, 11vw, 130px); }

.concept-card {
  position: relative;
  margin: 0 0 clamp(50px, 8vw, 100px);
  color: #2b2d2e;
  transform: translateY(80px) scale(0.96);
  opacity: 0;
  transition: transform 850ms var(--elastic), opacity 550ms ease, filter 200ms ease;
}

.concept-card.visible, .manifesto.visible, .pull.visible, .closing.visible, .ascii-divider.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.manifesto, .pull, .closing, .ascii-divider {
  transform: translateY(70px) scale(0.97);
  opacity: 0;
  transition: transform 850ms var(--elastic), opacity 550ms ease;
}

.card-inner {
  position: relative;
  padding: clamp(24px, 5vw, 54px);
  background: rgba(240, 230, 211, 0.86);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.ascii-border {
  height: 1.3em;
  overflow: hidden;
  color: rgba(139, 125, 107, 0.8);
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  white-space: nowrap;
  transition: color 200ms ease, text-shadow 200ms ease;
}

.concept-card:hover .ascii-border,
.concept-card.active .ascii-border {
  color: #7ec89b;
  text-shadow: 0 0 9px rgba(126, 200, 155, 0.4);
}

.concept-card:hover .card-inner { background: rgba(126, 200, 155, 0.02); }
.concept-card.active .card-inner { box-shadow: 0 0 30px rgba(126, 200, 155, 0.15); }

.concept-card h2::after { content: ""; }
.concept-card.active h2::after { content: " █"; color: #7ec89b; animation: blink 780ms steps(1) infinite; }

.metadata { margin-top: 28px; color: #8b7d6b; font-size: 0.78rem; }

.card-fish {
  position: absolute;
  top: 34px;
  right: 18px;
  width: 44px;
  height: 28px;
  opacity: 0;
  transform: translateX(44px);
  transition: transform 260ms var(--elastic), opacity 200ms ease;
}

.concept-card:hover .card-fish { opacity: 1; transform: translateX(0); }

.ascii-divider {
  position: relative;
  margin: clamp(60px, 12vw, 150px) 0;
  color: rgba(126, 200, 155, 0.78);
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(1.1rem, 2.8vw, 2rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-align: center;
}

.divider-school { position: absolute; inset: -18px 0; overflow: hidden; pointer-events: none; }
.school-fish { position: absolute; width: 22px; height: 14px; opacity: 0; }
.ascii-divider.visible .school-fish { animation: swimAcross 2600ms var(--elastic) forwards; animation-delay: var(--delay); top: var(--top); }

.pull { min-height: 62vh; color: #3a7d7e; }
.pull blockquote { color: #3a7d7e; max-width: 15ch; }
.closing { padding-bottom: 20vh; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes tail { from { transform: scaleX(1); } to { transform: scaleX(0.7); } }
@keyframes swimAcross { 0% { opacity: 0; transform: translateX(-12vw) scale(0.7); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(86vw) scale(1.1); } }

@media (max-width: 768px) {
  .fish-lane { display: none; }
  .stream { width: min(92vw, 760px); padding-right: 0; }
  .boot-console { font-size: clamp(0.9rem, 4vw, 1.25rem); }
  .scanline-overlay { opacity: 0.5; }
}

@media (max-width: 480px) {
  .current-canvas { display: none; }
  .stream { padding-top: 106vh; }
  .ascii-border { display: none; }
  .card-inner { border: 1px solid rgba(126, 200, 155, 0.6); padding: 24px; }
  .concept-card { transform: translateY(42px) scale(0.98); }
  h1 { font-size: clamp(2.6rem, 16vw, 4.2rem); }
}