/* Nerve background — vivid themed worlds, transform/opacity motion only */

#nerve-bg {
  --nb-fade: 520ms;
  --a4-rate: 2.4s;
  --a4-heat: 0;
  --a5-beat: 0.95s;
  --a5-sat: 0;
  --a6-horizon: 56%;
  --a6-scroll: 3.6s;
}

.nb-act {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  transition: opacity var(--nb-fade) ease;
}

.nb-act.is-on { opacity: 1; z-index: 2; }
.nb-act.is-leaving { opacity: 0; z-index: 1; }

.nb-act:not(.is-on):not(.is-leaving) * {
  animation-play-state: paused !important;
}

.nb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nb-scrim {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(8, 10, 14, 0.04) 0%,
    rgba(8, 10, 14, 0.18) 52%,
    rgba(6, 8, 10, 0.42) 100%
  );
}

.nb-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #dfeeff;
  opacity: 0;
}

.nb-flash.go { animation: nbLightning 0.42s ease-out; }

@keyframes nbLightning {
  0% { opacity: 0; }
  8% { opacity: 0.55; }
  18% { opacity: 0.08; }
  32% { opacity: 0.35; }
  100% { opacity: 0; }
}

/* ========== Act 1 — Coral lagoon ========== */

.a1-water {
  background: linear-gradient(180deg, #7fe7ff 0%, #2ec7d4 28%, #148ea8 62%, #0b5c78 100%);
}

.a1-sun {
  width: 22vmin;
  height: 22vmin;
  left: 12%;
  top: -4%;
  inset: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c2 0%, #ffd15a 45%, rgba(255, 180, 60, 0) 72%);
}

.a1-rays .a1-ray {
  position: absolute;
  top: -6%;
  height: 120%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 224, 120, 0.55), rgba(255, 200, 80, 0.12) 40%, transparent);
  clip-path: polygon(40% 0, 60% 0, 95% 100%, 5% 100%);
  animation: a1ray 8.5s ease-in-out infinite;
}

.a1-ray:nth-child(1) { left: 6%; width: 14%; --r: 8deg; }
.a1-ray:nth-child(2) { left: 14%; width: 20%; --r: 14deg; animation-duration: 10s; }
.a1-ray:nth-child(3) { left: 26%; width: 12%; --r: 6deg; animation-duration: 9s; }
.a1-ray:nth-child(4) { left: 10%; width: 16%; --r: 18deg; opacity: 0.55; animation-duration: 11s; }

@keyframes a1ray {
  0%, 100% { transform: rotate(var(--r, 10deg)); }
  50% { transform: rotate(calc(var(--r, 10deg) + 4deg)) translate3d(8px, 0, 0); }
}

.a1-kelp i {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 52%;
  border-radius: 28px 28px 8px 8px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #7dffc4, #0f8a58 70%, #0a5a3c);
  box-shadow: 8px 0 0 -4px #2fb877;
  animation: kelp 3.6s ease-in-out infinite;
}

.a1-kelp i:nth-child(1) { left: 6%; height: 52%; animation-delay: -0.4s; }
.a1-kelp i:nth-child(2) { left: 11%; width: 10px; height: 40%; background: linear-gradient(180deg, #3dcc88, #0a6a44); animation-delay: -1.2s; }
.a1-kelp i:nth-child(3) { left: 78%; height: 46%; animation-delay: -0.8s; }
.a1-kelp i:nth-child(4) { left: 86%; width: 12px; height: 58%; animation-delay: -1.8s; }
.a1-kelp i:nth-child(5) { left: 92%; height: 36%; animation-delay: -2.4s; }

@keyframes kelp {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}

.a1-coral {
  top: auto;
  height: 34%;
  background:
    radial-gradient(ellipse 120px 90px at 10% 85%, #ff4d6d 0%, transparent 68%),
    radial-gradient(ellipse 150px 100px at 24% 110%, #ff8a3d 0%, transparent 68%),
    radial-gradient(ellipse 130px 95px at 76% 90%, #ff3d8a 0%, transparent 68%),
    radial-gradient(ellipse 170px 110px at 92% 115%, #ffc14d 0%, transparent 70%);
}

.a1-bubbles span {
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  animation: bubbleUp linear infinite;
}

@keyframes bubbleUp {
  from { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  to { transform: translate3d(18px, -110vh, 0); opacity: 0; }
}

.fish-lane {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.fish-lane .nb-fish {
  display: block;
  overflow: visible;
  transform-origin: 50% 50%;
}

.fish-lane.rtl .nb-fish {
  transform: scaleX(-1);
}

.fish-lane.ltr:nth-child(1) {
  top: 34%;
  animation: swimLtr 16s linear infinite;
}
.fish-lane.ltr:nth-child(1) .nb-fish { width: 120px; }

.fish-lane.rtl {
  top: 52%;
  animation: swimRtl 22s linear infinite;
  animation-delay: -6s;
}
.fish-lane.rtl .nb-fish { width: 96px; }

.fish-lane.ltr:nth-child(3) {
  top: 68%;
  animation: swimLtr 26s linear infinite;
  animation-delay: -12s;
}
.fish-lane.ltr:nth-child(3) .nb-fish { width: 74px; }

@keyframes swimLtr {
  from { transform: translate3d(-18vw, 0, 0); }
  50% { transform: translate3d(50vw, -10px, 0); }
  to { transform: translate3d(118vw, 0, 0); }
}

@keyframes swimRtl {
  from { transform: translate3d(118vw, 0, 0); }
  50% { transform: translate3d(50vw, 10px, 0); }
  to { transform: translate3d(-18vw, 0, 0); }
}

.nb-fish .fin,
.nb-fish .tail,
.nb-fish .tail-fan {
  transform-box: fill-box;
}

.nb-fish .tail {
  transform-origin: 100% 50%;
  animation: tailWag 0.44s ease-in-out infinite;
}

.nb-fish .tail-fan {
  transform-origin: 100% 50%;
  animation: tailFan 0.44s ease-in-out infinite;
}

.nb-fish .dorsal {
  transform-origin: 50% 100%;
  animation: dorsalWag 0.7s ease-in-out infinite;
}

.nb-fish .ventral {
  transform-origin: 50% 0%;
  animation: ventralWag 0.7s ease-in-out infinite;
}

.nb-fish .pec {
  transform-origin: 0% 50%;
  animation: pecWag 0.4s ease-in-out infinite;
}

@keyframes tailWag {
  0% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}

@keyframes tailFan {
  0% { transform: scaleX(0.86); }
  50% { transform: scaleX(1.08); }
  100% { transform: scaleX(0.86); }
}

@keyframes dorsalWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}

@keyframes ventralWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@keyframes pecWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-14deg); }
}

/* ========== Act 2 — Deep space ========== */

.a2-sky {
  background:
    radial-gradient(ellipse 80% 50% at 70% 30%, rgba(80, 40, 140, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 70%, rgba(20, 80, 160, 0.4) 0%, transparent 50%),
    linear-gradient(180deg, #050014 0%, #0a1838 48%, #120828 100%);
}

.a2-nebula {
  background:
    radial-gradient(ellipse 55% 40% at 22% 28%, rgba(90, 40, 220, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 78% 62%, rgba(0, 180, 255, 0.28) 0%, transparent 68%),
    radial-gradient(ellipse 40% 30% at 48% 18%, rgba(255, 70, 160, 0.18) 0%, transparent 70%);
  animation: a2drift 18s ease-in-out infinite;
}

@keyframes a2drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.05); }
}

.a2-stars span {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #fff;
  animation: twinkle 2.6s ease-in-out infinite;
}

.a2-planet {
  left: auto;
  right: 6%;
  top: 12%;
  width: 28vmin;
  height: 28vmin;
  inset: auto;
}

.a2-planet-body {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #c8e6ff 0%, #4a7ab8 38%, #1a3a6a 72%, #0a1a32 100%);
  box-shadow:
    inset -10px -8px 18px rgba(0, 0, 20, 0.45),
    0 0 28px rgba(80, 160, 255, 0.35);
}

.a2-planet-ring {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 42%;
  height: 16%;
  border: 3px solid rgba(200, 220, 255, 0.55);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 10px rgba(160, 200, 255, 0.4);
}

.a2-moon {
  left: 14%;
  top: 22%;
  width: 8vmin;
  height: 8vmin;
  inset: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #f0f4ff, #8a92a8 60%, #3a4050);
  box-shadow: 0 0 16px rgba(200, 210, 255, 0.35);
}

.a2-meteors {
  overflow: hidden;
}

.a2-meteor i {
  display: block;
  font-style: normal;
}

.a2-meteor {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: a2meteor var(--dur, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.a2-meteor .a2-glow {
  position: absolute;
  left: -150px;
  top: -16px;
  width: 160px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 70, 0, 0.22) 42%, rgba(255, 180, 40, 0.6) 100%);
  filter: blur(7px);
}

.a2-meteor .a2-trail {
  position: absolute;
  left: -210px;
  top: -9px;
  width: 212px;
  height: 18px;
  background: linear-gradient(90deg,
    rgba(255, 40, 0, 0) 0%,
    rgba(255, 60, 0, 0.4) 32%,
    rgba(255, 140, 20, 0.85) 68%,
    rgba(255, 230, 120, 1) 88%,
    #fff 100%);
  clip-path: polygon(0% 50%, 100% 4%, 100% 96%);
  filter: blur(0.4px);
}

.a2-meteor .a2-core {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
    #fff 0%,
    #fff6b8 22%,
    #ffc03a 48%,
    #ff6a12 68%,
    rgba(255, 40, 0, 0) 82%);
  box-shadow:
    0 0 10px 4px rgba(255, 230, 140, 1),
    0 0 22px 10px rgba(255, 110, 20, 0.65);
}

.a2-meteor.s1 { top: 9%; left: -4%; --ang: 32deg; --fly: 108vw; --dur: 3.4s; --delay: 0s; }
.a2-meteor.s2 { top: 24%; left: 12%; --ang: 26deg; --fly: 98vw; --dur: 4.2s; --delay: -1.6s; }
.a2-meteor.s3 { top: 6%; left: 38%; --ang: 38deg; --fly: 86vw; --dur: 2.8s; --delay: -2.8s; }
.a2-meteor.s4 { top: 38%; left: -8%; --ang: 22deg; --fly: 118vw; --dur: 5.1s; --delay: -0.7s; }

@keyframes a2meteor {
  0% { transform: rotate(var(--ang)) translate3d(0, 0, 0); opacity: 0; }
  5% { opacity: 1; }
  36% { transform: rotate(var(--ang)) translate3d(var(--fly), 0, 0); opacity: 0; }
  100% { transform: rotate(var(--ang)) translate3d(var(--fly), 0, 0); opacity: 0; }
}

/* ========== Act 3 — Sunset aurora ========== */

.a3-scene { animation: a3sway 9s ease-in-out infinite; }

@keyframes a3sway {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(3px, -2px, 0); }
}

.a3-sky {
  background: linear-gradient(180deg, #1a1448 0%, #c43d7a 38%, #ff7a3c 58%, #ffd07a 68%, #4a2048 69%, #140c22 100%);
}

.a3-sun {
  width: 42vmin;
  height: 42vmin;
  left: 62%;
  top: 12%;
  margin-left: 0;
  inset: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1a8 0%, #ff9a3c 48%, rgba(255, 80, 40, 0) 70%);
}

.a3-aurora {
  background:
    radial-gradient(ellipse 70% 32% at 24% 24%, rgba(40, 255, 190, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 60% 28% at 72% 18%, rgba(170, 80, 255, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 50% 22% at 50% 30%, rgba(80, 220, 255, 0.28) 0%, transparent 70%);
  animation: a3aurora 8s ease-in-out infinite;
}

@keyframes a3aurora {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.85; }
  50% { transform: translate3d(3%, 2%, 0); opacity: 1; }
}

.a3-stars span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 2.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.a3-range {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  width: 200%;
  height: 38%;
  bottom: 28%;
}

.a3-range svg { display: block; width: 100%; height: 100%; }

.a3-far { bottom: 38%; height: 26%; animation: a3pan 80s linear infinite; }
.a3-mid { bottom: 30%; height: 32%; animation: a3pan 48s linear infinite; }
.a3-near { bottom: 26%; height: 30%; animation: a3pan 28s linear infinite; }

@keyframes a3pan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.a3-birds {
  top: 18%;
  height: 20%;
  bottom: auto;
}

.a3-bird {
  position: absolute;
  width: 28px;
  height: 10px;
  border: solid #1a1028;
  border-width: 0 0 3px 3px;
  border-radius: 0 0 0 12px;
  transform: rotate(-20deg);
  animation: birdFly 14s linear infinite;
}

.a3-bird:nth-child(2) { animation-duration: 18s; animation-delay: -7s; top: 40%; }
.a3-bird:nth-child(3) { animation-duration: 12s; animation-delay: -3s; top: 20%; width: 20px; }

@keyframes birdFly {
  from { transform: rotate(-20deg) translate3d(-10vw, 0, 0); }
  50% { transform: rotate(-28deg) translate3d(50vw, -10px, 0); }
  to { transform: rotate(-20deg) translate3d(110vw, 0, 0); }
}

/* ========== Act 4 — Synthwave strip ========== */

.a4-sky {
  background: linear-gradient(180deg, #09011c 0%, #3b0a5e 42%, #ff2e97 62%, #ff8a3d 70%, #120018 71%);
}

.a4-sun {
  width: 42vmin;
  height: 42vmin;
  left: 50%;
  top: 18%;
  margin-left: -21vmin;
  inset: auto;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, #ff3d8a 0 8px, #ffd166 8px 14px);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
}

.a4-floor {
  top: 52%;
  bottom: 0;
  height: auto;
  overflow: hidden;
}

.a4-gridplane {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 10%,
      rgba(255, 45, 200, 0.85) 10% calc(10% + 2px)
    );
  transform: none;
  animation: none;
  opacity: 1;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}

.a4-vanishing {
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 0%,
      rgba(0, 245, 255, 0.55) 0 0.6deg,
      transparent 0.6deg 8deg
    );
  transform-origin: 50% 0;
  top: 52%;
  height: 48%;
  mask-image: linear-gradient(180deg, #000 0%, #000 100%);
}

.a4-heatveil {
  background: radial-gradient(ellipse at 50% 62%, rgba(255, 120, 40, 0.35), transparent 55%);
  opacity: calc(0.2 + var(--a4-heat) * 0.7);
}

.a4-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 1.8s ease-in-out infinite;
}

.a4-palm {
  position: absolute;
  bottom: 18%;
  width: 70px;
  height: 28%;
  background: #090014;
  clip-path: polygon(48% 100%, 52% 100%, 52% 42%, 88% 8%, 70% 18%, 78% 0, 50% 22%, 28% 0, 36% 18%, 12% 6%, 48% 42%);
}

.a4-palm.p2 { left: auto; right: 4%; transform: scaleX(-1); }

.a4-nodes span {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px;
  border-radius: 50%;
  background: #00f6ff;
  box-shadow: 0 0 10px #00f6ff;
  animation: a4node 1.6s ease-in-out infinite;
}

.a4-nodes span.late {
  background: #ff9a3c;
  box-shadow: 0 0 10px #ff9a3c;
  opacity: 0;
}

@keyframes a4node {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 1; }
}

#nerve-bg[data-heat="1"] .a4-nodes span.late:nth-child(-n+4),
#nerve-bg[data-heat="2"] .a4-nodes span.late {
  opacity: 1;
}

.a4-gridplane {
  animation: a4scan 2.2s linear infinite;
}

@keyframes a4scan {
  from { background-position: 0 0; }
  to { background-position: 0 40px; }
}

/* ========== Act 5 — Solar flare ========== */

.a5-void {
  background: radial-gradient(circle at 50% 48%, #4a1028 0%, #140018 55%, #050008 100%);
}

.a5-tint {
  background: #ff1848;
  opacity: calc(var(--a5-sat) * 0.32);
}

.a5-core {
  left: 78%;
  top: 18%;
  width: 85vmin;
  height: 85vmin;
  margin: -20vmin 0 0 -42vmin;
  inset: auto;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c2 0%, #ffb347 22%, #ff4d2a 46%, rgba(255, 20, 80, 0.45) 62%, transparent 74%);
  animation: a5beat var(--a5-beat) ease-in-out infinite;
}

.a5-ring {
  left: 78%;
  top: 18%;
  width: 55vmin;
  height: 55vmin;
  margin: -8vmin 0 0 -28vmin;
  inset: auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 120, 0.55);
  animation: a5ring var(--a5-beat) ease-out infinite;
}

@keyframes a5beat {
  0%, 100% { transform: scale(0.82); opacity: 0.7; }
  12% { transform: scale(1.08); opacity: 1; }
  24% { transform: scale(0.9); opacity: 0.75; }
  36% { transform: scale(1.02); opacity: 0.95; }
  55% { transform: scale(0.82); opacity: 0.7; }
}

@keyframes a5ring {
  0% { transform: scale(0.7); opacity: 0.8; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.a5-sparks span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 8px #ff7a3c;
  animation: sparkDrift 3.2s linear infinite;
}

@keyframes sparkDrift {
  from { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translate3d(var(--dx, 40px), var(--dy, -80px), 0) scale(0.2); opacity: 0; }
}

.a5-filaments path {
  fill: none;
  stroke: rgba(255, 170, 90, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: a5flicker 1.4s ease-in-out infinite;
}

.a5-filaments path:nth-child(odd) { stroke: rgba(255, 80, 140, 0.5); animation-delay: -0.4s; }

@keyframes a5flicker {
  0%, 100% { opacity: 0.15; }
  45% { opacity: 0.9; }
}

/* ========== Act 6 — Night ride ========== */

.a6-sky {
  background:
    radial-gradient(ellipse 80% 36% at 62% 28%, rgba(50, 70, 110, 0.28) 0%, transparent 62%),
    linear-gradient(
      180deg,
      #04060c 0%,
      #0a101c 38%,
      #121a28 calc(var(--a6-horizon) - 3%),
      #1c2838 var(--a6-horizon),
      #0c1018 var(--a6-horizon)
    );
}

.a6-stars span {
  position: absolute;
  background: #c8d4e8;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(200, 220, 255, 0.5);
  opacity: 0.45;
  animation: twinkle 2.8s ease-in-out infinite;
}

.a6-stars {
  bottom: auto;
  height: var(--a6-horizon);
}

.a6-moon {
  width: 12vmin;
  height: 12vmin;
  top: 8%;
  right: 10%;
  left: auto;
  bottom: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #d8deea 0%, #8a93a6 52%, #4a5260 100%);
  box-shadow: 0 0 22px 4px rgba(160, 180, 210, 0.18);
  filter: brightness(0.72);
}

.a6-clouds i {
  position: absolute;
  height: 18%;
  border-radius: 40% 50% 45% 55%;
  background: rgba(18, 24, 38, 0.78);
  filter: blur(8px);
  animation: a6cloud 28s linear infinite;
}

.a6-clouds i:nth-child(1) { left: -8%; top: 6%; width: 46%; height: 16%; animation-duration: 32s; }
.a6-clouds i:nth-child(2) { left: 38%; top: 2%; width: 52%; height: 20%; opacity: 0.85; animation-duration: 24s; animation-delay: -8s; }
.a6-clouds i:nth-child(3) { left: 8%; top: 18%; width: 40%; height: 14%; opacity: 0.6; animation-duration: 36s; animation-delay: -14s; }
.a6-clouds i:nth-child(4) { left: 58%; top: 22%; width: 48%; height: 12%; opacity: 0.55; animation-duration: 22s; animation-delay: -4s; }

@keyframes a6cloud {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(6%, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.a6-glow {
  background:
    radial-gradient(ellipse 60% 16% at 50% var(--a6-horizon), rgba(140, 170, 220, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 28% 10% at 50% var(--a6-horizon), rgba(200, 220, 255, 0.1) 0%, transparent 70%);
}

.a6-sheet {
  background:
    radial-gradient(ellipse 80% 50% at 38% 20%, rgba(230, 240, 255, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 36% at 72% 16%, rgba(190, 210, 255, 0.7) 0%, transparent 58%),
    linear-gradient(180deg, rgba(220, 230, 255, 0.35), transparent 42%);
  opacity: 0;
  animation: a6sheet 6.4s ease-in-out infinite;
}

@keyframes a6sheet {
  0%, 58%, 74%, 100% { opacity: 0; }
  60% { opacity: 0.45; }
  61.2% { opacity: 0.06; }
  62.8% { opacity: 0.92; }
  64.4% { opacity: 0.1; }
  66% { opacity: 0.55; }
  68% { opacity: 0.08; }
}

.a6-rain span {
  position: absolute;
  top: -12%;
  width: 1px;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(180, 200, 230, 0.45));
  transform: rotate(14deg);
  animation: a6rain 0.9s linear infinite;
}

.a6-rain span:nth-child(1) { left: 12%; animation-delay: -0.1s; animation-duration: 0.82s; }
.a6-rain span:nth-child(2) { left: 28%; animation-delay: -0.4s; height: 14%; }
.a6-rain span:nth-child(3) { left: 41%; animation-delay: -0.7s; animation-duration: 1.05s; }
.a6-rain span:nth-child(4) { left: 55%; animation-delay: -0.2s; height: 22%; }
.a6-rain span:nth-child(5) { left: 67%; animation-delay: -0.55s; }
.a6-rain span:nth-child(6) { left: 78%; animation-delay: -0.85s; height: 12%; animation-duration: 0.76s; }
.a6-rain span:nth-child(7) { left: 18%; animation-delay: -0.3s; height: 10%; top: 20%; }
.a6-rain span:nth-child(8) { left: 88%; animation-delay: -0.6s; }

@keyframes a6rain {
  from { transform: rotate(14deg) translate3d(0, 0, 0); opacity: 0.7; }
  to { transform: rotate(14deg) translate3d(-18px, 70vh, 0); opacity: 0; }
}

.a6-road {
  top: var(--a6-horizon);
  bottom: 0;
  height: auto;
  overflow: hidden;
}

.a6-asphalt {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a3142 0%, #171b24 28%, #10141c 100%);
  clip-path: polygon(49.4% 0, 50.6% 0, 128% 100%, -28% 100%);
}

.a6-marks {
  position: absolute;
  inset: 0;
}

.a6-marks span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 22px;
  margin-left: -5px;
  background: #d4b84a;
  border-radius: 1px;
  transform-origin: 50% 50%;
  animation: a6mark var(--a6-scroll) linear infinite;
  animation-fill-mode: both;
}

@keyframes a6mark {
  0%   { top: 8%;    transform: scale(0.28); opacity: 0.55; }
  22%  { top: 22%;   transform: scale(0.5);  opacity: 0.9; }
  48%  { top: 42%;   transform: scale(0.85); opacity: 1; }
  72%  { top: 68%;   transform: scale(1.2);  opacity: 1; }
  100% { top: 114%;  transform: scale(1.55); opacity: 0.7; }
}

.a6-bike-lane {
  z-index: 3;
}

.a6-bike {
  position: absolute;
  left: 50%;
  bottom: calc(20% + 20px);
  width: min(13vmin, 86px);
  transform: translate3d(-50%, 0, 0);
}

.a6-bike::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 1%;
  height: 8%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
}

.a6-bike img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 8px rgba(255, 40, 50, 0.35));
  animation: a6idle 0.28s ease-in-out infinite;
}

@keyframes a6idle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(1px, -2px, 0); }
}

@media (max-width: 600px) {
  .a1-bubbles span:nth-child(n+10),
  .a3-stars span:nth-child(n+10),
  .a4-stars span:nth-child(n+10),
  .a5-sparks span:nth-child(n+8),
  .a6-stars span:nth-child(n+10) { display: none; }
  .a4-gridplane { opacity: 0.55; }
  .a6-bike { width: min(18vmin, 78px); bottom: calc(16% + 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-flash.go { animation: none; opacity: 0; }
  .a6-bike img,
  .a6-sheet,
  .a6-rain span,
  .a6-clouds i { animation: none; }
  .a6-marks span { animation-play-state: paused; }
  .a6-sheet { opacity: 0; }
}