/* ============================================================
   AIKO — theme layer
   Nebula background + ambient particle canvas layers.

   ⚠ **Do NOT touch the UI accent / glass panel colors here.**
     The first version also changed --primary-accent / --secondary-accent /
     --glass-bg to purple-pink, and the user immediately reported "the UI is
     wrong, where did the previous UI go" — all they had asked for was the
     background, but the panels went from deep blue to purple and more
     transparent, making the whole site look like a different product.
     Lesson: **only change the layer you were asked to change.** Keep the
     :root values in style.css untouched
     (--primary-accent #6366f1 / --glass-bg rgba(15,23,42,.75)).

   ⚠ Load order: this file must come after the other styles in <head> (the
     landing page writes its body background in an inline <style>, so at equal
     specificity the later load wins).
       style.css has an element selector `canvas { position: fixed; z-index: 1 }`,
       so the particle canvases always use ID selectors (higher specificity) to
       override its z-index, otherwise all background and foreground particles
       would end up in front of the Live2D character.
   ============================================================ */

:root {
  /* only add brand color variables for this file and the new layers; don't override style.css's variables of the same name */
  --aiko-purple: #a855f7;
  --aiko-pink: #ff6b9d;
  --aiko-violet: #3d1466;
  --aiko-deep: #0a0618;
}

/* ---------- Base nebula ----------
   Originally a flat near-black --bg-dark. Here four layers build "dark top →
   aurora band in the middle → warm bottom", keeping the upper-center bright so
   the character art's contrast isn't flattened. */
body {
  background:
    radial-gradient(1100px 720px at 16% 6%, rgba(168, 85, 247, 0.30), transparent 62%),
    radial-gradient(940px 640px at 84% 16%, rgba(255, 107, 157, 0.22), transparent 60%),
    radial-gradient(1500px 900px at 50% 112%, rgba(90, 31, 110, 0.62), transparent 66%),
    linear-gradient(180deg, #0a0618 0%, #140a2e 30%, #2a1052 56%, #14081f 100%);
  background-color: var(--aiko-deep);
  background-attachment: fixed;
}

/* ---------- Breathing aurora ----------
   Three large blurred color blobs drift slowly for a "living nebula" feel.
   transform-only animation (compositor layer, no layout reflow). */
#aikoNebula {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none; overflow: hidden;
}
#aikoNebula i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(72px); opacity: 0.5;
  will-change: transform;
}
#aikoNebula i:nth-child(1) {
  width: 46vw; height: 46vw; left: -6vw; top: -8vw;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.62), transparent 68%);
  animation: aikoDrift1 38s ease-in-out infinite alternate;
}
#aikoNebula i:nth-child(2) {
  width: 40vw; height: 40vw; right: -4vw; top: 4vh;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.46), transparent 68%);
  animation: aikoDrift2 46s ease-in-out infinite alternate;
}
#aikoNebula i:nth-child(3) {
  width: 62vw; height: 40vw; left: 18vw; bottom: -18vh;
  background: radial-gradient(circle, rgba(90, 31, 110, 0.70), transparent 70%);
  animation: aikoDrift3 54s ease-in-out infinite alternate;
}
@keyframes aikoDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 6vh, 0) scale(1.14); } }
@keyframes aikoDrift2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-6vw, 9vh, 0) scale(0.94); } }
@keyframes aikoDrift3 { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(4vw, -7vh, 0) scale(1.12); } }

/* Vignette: pulls the eye back to the center so the edges don't smear into the nebula */
#aikoNebula::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 42%, transparent 42%, rgba(6, 3, 14, 0.72) 100%);
}

/* ---------- Ambient particle canvases ----------
   back sits behind the Live2D character (adds depth), front sits in front of it
   (sparse large bokeh). The ID selectors exist to beat style.css's
   `canvas { z-index: 1 }`. */
#aikoDustBack {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#aikoDustFront {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* When the user picked a background image, the nebula steps aside (the image itself lives in .bg-layer, z-index -1) */
body:has(#bgLayer[style*="background-image"]) #aikoNebula { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  #aikoNebula i { animation: none; }
}

/* ---------- Background music toggle ----------
   Self-contained styles: the landing page has no style.css variables, so colors
   are always written as literals + fallback.
   Placed bottom-right — on the app page the chat panel is top-left/bottom-left
   and the gear is top-right; bottom-right is free. */
#aikoMusicToggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42);
  transition: transform .18s, border-color .18s, color .18s, opacity .18s;
  -webkit-tap-highlight-color: transparent;
}
#aikoMusicToggle:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.32); }
#aikoMusicToggle:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
#aikoMusicToggle.is-off { opacity: .5; }
#aikoMusicToggle.is-on { color: #ffd6ec; border-color: rgba(255, 107, 157, 0.5); }

@media (max-width: 520px) {
  #aikoMusicToggle { right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 15px; }
}

/* The button must move on the app page: the settings panel is z-index 10000 and
   covers the whole right side, completely hiding the bottom-right corner
   (elementFromPoint at the button's center returns #settingsPanel).
   The panel's left edge is x≈1186, the chat panel's right edge is x≈574, and the
   stretch between them is empty → place it bottom-center.
   Use margin-left rather than transform to center it, so it doesn't fight the
   hover translateY. */
#aikoMusicToggle.aiko-music-app {
  right: auto; left: 50%; margin-left: -22px;
}
@media (max-width: 520px) {
  #aikoMusicToggle.aiko-music-app { left: 50%; right: auto; margin-left: -20px; }
}
