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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05050f;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Subtle radial vignette */
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, #05050f 100%);
  pointer-events: none;
  z-index: 10;
}

/* ── lane base ── */
.lane {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  line-height: 1;
  transform-origin: center center;
  pointer-events: none;
}

.lane-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.lane-inner span {
  display: inline-block;
  padding-right: 0.35em;
}

/* ── keyframes ── */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── individual lanes ── */

/* 1 — Bebas Neue, huge, magenta, steep angle */
.l1 {
  top: 4vh;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 14vw, 200px);
  color: #ff2d87;
  text-shadow: 0 0 40px #ff2d8799, 0 0 80px #ff2d8744;
  transform: rotate(-18deg);
}
.l1 .lane-inner { animation: scroll-left 18s linear infinite; }

/* 2 — Dancing Script, medium, electric cyan, gentle upward tilt */
.l2 {
  top: 15vh;
  font-family: 'Dancing Script', cursive;
  font-size: clamp(40px, 6vw, 96px);
  color: #00e5ff;
  text-shadow: 0 0 30px #00e5ff99;
  transform: rotate(7deg);
}
.l2 .lane-inner { animation: scroll-right 38s linear infinite; }

/* 3 — Anton, very large, golden, shallow negative */
.l3 {
  top: 26vh;
  font-family: 'Anton', sans-serif;
  font-size: clamp(60px, 11vw, 160px);
  color: #ffd600;
  text-shadow: 0 0 50px #ffd60088, 0 0 100px #ffd60033;
  transform: rotate(-6deg);
}
.l3 .lane-inner { animation: scroll-left 28s linear infinite; }

/* 4 — Playfair Display italic, large, coral, steep positive */
.l4 {
  top: 38vh;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(50px, 9vw, 140px);
  color: #ff6b4a;
  text-shadow: 0 0 35px #ff6b4a88;
  transform: rotate(22deg);
}
.l4 .lane-inner { animation: scroll-left 34s linear infinite; }

/* 5 — Space Mono bold, small, lime, shallow positive */
.l5 {
  top: 50vh;
  font-family: 'Space Mono', monospace;
  font-size: clamp(22px, 3.5vw, 56px);
  color: #76ff03;
  text-shadow: 0 0 20px #76ff0399;
  transform: rotate(4deg);
  letter-spacing: 0.12em;
}
.l5 .lane-inner { animation: scroll-right 22s linear infinite; }

/* 6 — Permanent Marker, medium-large, violet, negative tilt */
.l6 {
  top: 60vh;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(45px, 7.5vw, 120px);
  color: #d500f9;
  text-shadow: 0 0 40px #d500f9aa, 0 0 80px #d500f944;
  transform: rotate(-14deg);
}
.l6 .lane-inner { animation: scroll-left 30s linear infinite; }

/* 7 — Lobster, large, hot orange, slight positive */
.l7 {
  top: 71vh;
  font-family: 'Lobster', cursive;
  font-size: clamp(55px, 10vw, 155px);
  color: #ff6d00;
  text-shadow: 0 0 45px #ff6d0099;
  transform: rotate(10deg);
}
.l7 .lane-inner { animation: scroll-right 42s linear infinite; }

/* 8 — Black Han Sans, enormous, very dim white (background layer) */
.l8 {
  top: 30vh;
  font-family: 'Black Han Sans', sans-serif;
  font-size: clamp(100px, 22vw, 360px);
  color: rgba(255,255,255,0.04);
  transform: rotate(-2deg);
  z-index: 0;
}
.l8 .lane-inner { animation: scroll-left 80s linear infinite; }

/* 9 — Righteous, medium-small, sky blue, steep negative */
.l9 {
  top: 82vh;
  font-family: 'Righteous', sans-serif;
  font-size: clamp(30px, 5vw, 72px);
  color: #40c4ff;
  text-shadow: 0 0 25px #40c4ff88;
  transform: rotate(-20deg);
}
.l9 .lane-inner { animation: scroll-right 25s linear infinite; }

/* 10 — Bebas Neue again, mid-size, rose, positive steep */
.l10 {
  top: -6vh;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(35px, 5.5vw, 80px);
  color: #f06292;
  text-shadow: 0 0 20px #f0629277;
  transform: rotate(16deg);
}
.l10 .lane-inner { animation: scroll-left 48s linear infinite; }

/* ── interactive burst particles ── */
.burst {
  position: fixed;
  pointer-events: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: #fff;
  z-index: 100;
  animation: burst-out 0.9s ease-out forwards;
  white-space: nowrap;
}
@keyframes burst-out {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); }
}