/* Shared full-screen background for the tool pages (/breathe, /tap, and any
   future tools): aurora + twinkling stars + drifting dust + orbiting motes +
   vignette/night-shade. The base .aurora/.blob and .grain styles live in
   styles.css; this file layers on the tool-specific animation and light/
   reduced-motion overrides so every tool shares one identical sky. */

.tool-bg .aurora {
  z-index: 0;
  opacity: var(--aurora-intensity, 0.75);
  animation:
    ambient-breathe 7s ease-in-out infinite,
    ambient-flow 36s linear infinite;
}
@keyframes ambient-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes ambient-flow {
  from { filter: blur(90px) saturate(1.35) hue-rotate(0deg); }
  to { filter: blur(90px) saturate(1.35) hue-rotate(360deg); }
}

.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.stars span {
  position: absolute;
  border-radius: 9999px;
  background: #fff;
  opacity: var(--star-min, 0.2);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: var(--star-min, 0.15); }
  50% { opacity: var(--star-max, 0.7); }
}

.dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.dust span {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: dust-drift linear infinite;
}
@keyframes dust-drift {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--dust-opacity, 0.3); }
  88% { opacity: var(--dust-opacity, 0.3); }
  100% { transform: translate3d(var(--dust-dx, 20px), var(--dust-dy, -120px), 0); opacity: 0; }
}

.motes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mote-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation: orbit-spin var(--orbit-p, 40s) linear infinite;
}
.mote {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--orbit-r, 200px));
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 9999px;
  background: #fff;
  box-shadow:
    0 0 8px hsla(var(--mote-hue, 267), 95%, 85%, 1),
    0 0 18px hsla(var(--mote-hue, 267), 90%, 70%, 0.7);
}
.mote-orbit-1 { --orbit-r: clamp(200px, 32vw, 280px); --orbit-p: var(--orbit-p1, 38s); }
.mote-orbit-2 { --orbit-r: clamp(250px, 40vw, 360px); --orbit-p: var(--orbit-p2, 58s); }
.mote-orbit-3 { --orbit-r: clamp(150px, 24vw, 210px); --orbit-p: var(--orbit-p3, 26s); }
.mote-orbit-2 .mote { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: 0.75; filter: blur(1.5px); }
.mote-orbit-3 .mote { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; opacity: 0.95; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(5, 5, 8, 0.5) 100%);
}
.night-shade {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #050508;
  opacity: 0;
  transition: opacity 3s ease;
}

/* --- light theme ---------------------------------------------------------- */
html.light .tool-bg .aurora { opacity: calc(var(--aurora-intensity, 0.75) * 0.45); }
html.light .tool-bg .aurora .blob { mix-blend-mode: multiply; }
html.light .stars span { background: #334155; }
html.light .dust span { background: rgba(15, 23, 42, 0.5); }
html.light .mote {
  background: #334155;
  box-shadow:
    0 0 8px hsla(var(--mote-hue, 200), 80%, 50%, 0.9),
    0 0 18px hsla(var(--mote-hue, 200), 70%, 55%, 0.5);
}
html.light .vignette { background: radial-gradient(ellipse at center, transparent 46%, rgba(245, 245, 250, 0.6) 100%); }
html.light .night-shade { background: #f5f5fa; }

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tool-bg .aurora,
  .mote-orbit,
  .dust span,
  .stars span { animation: none; }
}

/* Breathe dims its motes while the creature sleeps. */
body.sleeping .motes { opacity: 0.3; }