/* ============================================================
   SchoolClaude Kids — Per-Section Scene Backdrops
   6 scenes, pure CSS/SVG, crossfade on scroll via JS.
   Import AFTER kids-fx.css.
   ============================================================ */

.kids-scene-stack {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: #07091a;
}

.kids-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.kids-scene.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ── SCENE: space (transparent → shows photo bg through body) ── */
.kids-scene--space {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 10, 50, 0) 0%, rgba(7, 9, 26, 0.35) 100%);
}

/* ── SCENE: nebula — magenta/violet gradient storm ── */
.kids-scene--nebula {
  background:
    radial-gradient(ellipse 70% 55% at 20% 30%, rgba(168, 85, 247, 0.55), transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 126, 236, 0.40), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(120, 80, 255, 0.30), transparent 70%),
    linear-gradient(135deg, #0a0420 0%, #1a0838 50%, #0a0420 100%);
}

/* ── SCENE: blueprint — tech grid on deep blue ── */
.kids-scene--blueprint {
  background-color: #061224;
  background-image:
    linear-gradient(rgba(56, 216, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 216, 255, 0.08) 1px, transparent 1px),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(56, 216, 255, 0.18), transparent 70%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
  background-position: center center;
}

/* ── SCENE: hologram — cyan scan-lines on teal ── */
.kids-scene--hologram {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(58, 255, 220, 0.06) 0px,
      rgba(58, 255, 220, 0.06) 2px,
      transparent 2px,
      transparent 6px
    ),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 180, 200, 0.30), transparent 70%),
    linear-gradient(180deg, #021a22 0%, #052a33 50%, #021a22 100%);
}

/* ── SCENE: planet — soft green-blue gradient ── */
.kids-scene--planet {
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(58, 255, 156, 0.35), transparent 65%),
    radial-gradient(ellipse 55% 45% at 25% 70%, rgba(56, 180, 255, 0.30), transparent 65%),
    linear-gradient(135deg, #041f1a 0%, #0a3a2e 50%, #041f28 100%);
}

/* ── SCENE: lab — warm amber/sun ── */
.kids-scene--lab {
  background:
    radial-gradient(ellipse 65% 55% at 30% 35%, rgba(255, 210, 63, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 45% at 75% 75%, rgba(255, 126, 40, 0.22), transparent 65%),
    linear-gradient(135deg, #1a1005 0%, #2a1a08 50%, #1a0f04 100%);
}

/* ── Soft dark vignette over every scene for text legibility ── */
.kids-scene-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 5, 15, 0.35) 0%,
    rgba(3, 5, 15, 0.10) 30%,
    rgba(3, 5, 15, 0.15) 70%,
    rgba(3, 5, 15, 0.55) 100%
  );
  z-index: 10;
}

/* ── When scene-stack exists, dim the photo space-background ── */
body.kids-page:has(.kids-scene-stack) .space-background {
  z-index: -2;
}

/* ── Reduced-motion: instant swap, no scale ── */
@media (prefers-reduced-motion: reduce) {
  .kids-scene {
    transition: none;
    transform: none !important;
  }
}

/* ── Mobile: tone down gradient intensity to preserve battery ── */
@media (max-width: 768px) {
  .kids-scene--blueprint {
    background-size: 30px 30px, 30px 30px, 100% 100%;
  }
  .kids-scene {
    transition-duration: 600ms;
  }
}