/* ───────────────────────────────────────────────────────────────────
   AMBIENT BACKGROUND SYSTEM v2
   Undersea-Kung-Fu-Panda library creatures. Vibrant 4-color.
   Math + Greeks glyph rotation. Intensity floor 50.
   Pure CSS/SVG. Pairs with ambient.js for interactive layer.
   ─────────────────────────────────────────────────────────────────── */

.ambient {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0; isolation: isolate;
}
.ambient--fixed { position: fixed; z-index: -1; }
html { background: var(--void, #0a0612); }
body { background: transparent !important; }

/* ─── STARS ─────────────────────────────────────────────────────── */
.ambient::before, .ambient::after, .ambient > .ambient__stars {
  content: ""; position: absolute; inset: -50%; pointer-events: none;
}
.ambient::before {
  background-image:
    radial-gradient(1px 1px at 13% 21%, rgba(216,220,255,.6), transparent 50%),
    radial-gradient(1px 1px at 47% 71%, rgba(176,107,255,.55), transparent 50%),
    radial-gradient(1px 1px at 71% 33%, rgba(20,224,255,.5), transparent 50%),
    radial-gradient(1px 1px at 89% 88%, rgba(255,181,71,.5), transparent 50%),
    radial-gradient(1px 1px at 23% 81%, rgba(255,61,138,.4), transparent 50%),
    radial-gradient(1px 1px at 8%  47%, rgba(216,220,255,.55), transparent 50%),
    radial-gradient(1px 1px at 63% 14%, rgba(20,224,255,.45), transparent 50%),
    radial-gradient(1px 1px at 38% 56%, rgba(216,220,255,.45), transparent 50%);
  background-size: 240px 240px; background-repeat: repeat;
  animation: stars-drift-slow 180s linear infinite;
  opacity: .7;
}
.ambient::after {
  background-image:
    radial-gradient(1.4px 1.4px at 17% 31%, rgba(216,220,255,.9), transparent 50%),
    radial-gradient(1.4px 1.4px at 57% 81%, rgba(176,107,255,.75), transparent 50%),
    radial-gradient(1.4px 1.4px at 81% 23%, rgba(20,224,255,.7), transparent 50%),
    radial-gradient(1.4px 1.4px at 33% 71%, rgba(255,181,71,.65), transparent 50%),
    radial-gradient(1.4px 1.4px at 91% 51%, rgba(216,220,255,.8), transparent 50%);
  background-size: 380px 380px; background-repeat: repeat;
  animation: stars-drift-mid 240s linear infinite reverse;
  opacity: .55;
}
.ambient > .ambient__stars {
  background-image:
    radial-gradient(2px 2px at 27% 14%, rgba(20,224,255,1), transparent 50%),
    radial-gradient(2px 2px at 73% 67%, rgba(255,61,138,.9), transparent 50%),
    radial-gradient(2px 2px at 47% 93%, rgba(255,181,71,.95), transparent 50%);
  background-size: 720px 720px; background-repeat: repeat;
  animation: stars-twinkle 8s ease-in-out infinite, stars-drift-slow 300s linear infinite;
  opacity: .9;
}
@keyframes stars-drift-slow { from{transform:translate3d(0,0,0);} to{transform:translate3d(-240px,-240px,0);} }
@keyframes stars-drift-mid  { from{transform:translate3d(0,0,0);} to{transform:translate3d(-380px,-190px,0);} }
@keyframes stars-twinkle    { 0%,100%{opacity:.9;} 50%{opacity:.45;} }

/* Intensity (floor 50 = visible-but-calm baseline) */
.ambient--subtle::before { opacity:.4; }
.ambient--subtle::after  { opacity:.3; }
.ambient--medium::before { opacity:.65; }
.ambient--medium::after  { opacity:.5; }
.ambient--full::before   { opacity:.9; }
.ambient--full::after    { opacity:.75; }

/* ─── CREATURES ────────────────────────────────────────────────── */
.ambient__creature {
  position: absolute; display: block;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);
  will-change: transform, opacity;
}

/* Firefly — pulsing colored dot, figure-8 drift */
.creature--firefly {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 35%, transparent 70%);
  color: #14e0ff;
  animation: firefly-path 26s ease-in-out infinite, firefly-pulse 2.4s ease-in-out infinite;
  top: 30%; left: 20%; opacity: .85;
}
.creature--firefly.c-violet  { color:#b06bff; animation-duration:32s,2.8s; top:65%; left:75%; animation-delay:-8s,0s; }
.creature--firefly.c-magenta { color:#ff3d8a; animation-duration:38s,3.2s; top:18%; left:70%; animation-delay:-14s,-1s; }
.creature--firefly.c-amber   { color:#ffb547; animation-duration:44s,2.1s; top:80%; left:30%; animation-delay:-22s,-0.5s; }
@keyframes firefly-path {
  0%{transform:translate(0,0);} 25%{transform:translate(140px,-80px);}
  50%{transform:translate(220px,60px);} 75%{transform:translate(80px,140px);}
  100%{transform:translate(0,0);}
}
@keyframes firefly-pulse { 0%,100%{opacity:.9;} 50%{opacity:.35;} }

/* Comet — diagonal streak */
.creature--comet {
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #d8dcff 50%, transparent 100%);
  color: #d8dcff; top: 15%; left: -10%;
  animation: comet-traverse 18s linear infinite;
  opacity: 0; transform: rotate(28deg);
}
.creature--comet.c-violet  { top:60%; animation-delay:-6s;  animation-duration:24s; background:linear-gradient(90deg,transparent,#b06bff,transparent); }
.creature--comet.c-magenta { top:38%; animation-delay:-12s; animation-duration:30s; background:linear-gradient(90deg,transparent,#ff3d8a,transparent); }
.creature--comet.c-amber   { top:75%; animation-delay:-18s; animation-duration:34s; background:linear-gradient(90deg,transparent,#ffb547,transparent); }
@keyframes comet-traverse {
  0%{transform:translate(0,0) rotate(28deg); opacity:0;}
  8%{opacity:.9;} 92%{opacity:.9;}
  100%{transform:translate(140vw,60vh) rotate(28deg); opacity:0;}
}

/* Nebula — soft drifting color bloom */
.creature--nebula {
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,61,245,.4) 0%, rgba(91,61,245,0) 60%);
  top: -10%; left: 60%; filter: blur(40px);
  animation: nebula-drift 80s ease-in-out infinite;
  opacity: .6;
}
.creature--nebula.c-cyan    { background: radial-gradient(circle, rgba(20,224,255,.32) 0%, rgba(20,224,255,0) 60%); top:60%; left:-10%; animation-delay:-30s; }
.creature--nebula.c-magenta { background: radial-gradient(circle, rgba(255,61,138,.3)  0%, rgba(255,61,138,0) 60%); top:30%; left:30%; animation-delay:-50s; }
.creature--nebula.c-amber   { background: radial-gradient(circle, rgba(255,181,71,.28) 0%, rgba(255,181,71,0) 60%); top:10%; left:10%; animation-delay:-70s; }
@keyframes nebula-drift {
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-80px,60px) scale(1.15);}
  66%{transform:translate(60px,-40px) scale(.92);}
}

/* Undersea glyph-fish — math/Greek glyph drifting like a friendly creature */
.creature--glyph {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px; font-weight: 600;
  color: rgba(176,107,255,.55);
  text-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
  top: 55%; left: 25%;
  animation: glyph-swim 30s ease-in-out infinite, glyph-tilt 5s ease-in-out infinite;
  opacity: .6;
}
.creature--glyph.c-cyan    { color: rgba(20,224,255,.6);  top:25%; left:65%; animation-delay:-10s,-1s; }
.creature--glyph.c-amber   { color: rgba(255,181,71,.6);  top:80%; left:45%; animation-delay:-18s,-2s; }
.creature--glyph.c-magenta { color: rgba(255,61,138,.55); top:15%; left:35%; animation-delay:-24s,-3s; }
@keyframes glyph-swim {
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(60px,-30px);}
  50%{transform:translate(40px,-80px);}
  75%{transform:translate(-30px,-40px);}
}
@keyframes glyph-tilt {
  0%,100%{transform:rotate(-6deg) scale(1);}
  50%{transform:rotate(6deg) scale(1.05);}
}

@media (prefers-reduced-motion: reduce) {
  .ambient *, .ambient::before, .ambient::after { animation: none !important; }
  .ambient__creature { opacity: .5; }
}