/*
 * scenes.css — Escena de fondo inmersiva del portal.
 *
 *   · Tema claro  → puerta estelar luminosa (.scene--stargate).
 *   · Tema oscuro → la Puerta Negra de Mordor con el Ojo (.scene--mordor).
 *
 * La escena es puramente decorativa: va fija detrás de todo el contenido
 * (z-index negativo) y no captura clics. Las tarjetas "liquid glass" del portal
 * dejan entrever la escena, que es justo lo que les da profundidad.
 *
 * Todas las animaciones se desactivan con prefers-reduced-motion.
 */

/* ── Contenedor de la escena ────────────────────────────────────────────────── */
.portal-scene {
  position: fixed;
  inset: 0;
  z-index: -1;            /* detrás del contenido en flujo, sobre el fondo base */
  overflow: hidden;
  pointer-events: none;
}

.portal-scene .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;          /* el tema activo decide cuál se muestra */
}

/* El script en línea siempre fija data-theme a "light" u "oscuro" antes de
   pintar, así que una de las dos escenas está siempre visible. */
[data-theme="light"] .scene--stargate { display: block; }
[data-theme="dark"]  .scene--mordor   { display: block; }

/* Suaviza el cambio de tema. */
.portal-scene .scene { animation: scene-fade var(--transition-normal, 220ms) ease; }
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Puerta estelar (claro) ─────────────────────────────────────────────────── */
/* Anillos que giran lentamente alrededor del centro del portal (720,600). */
.sg-spin {
  transform-box: view-box;
  transform-origin: 720px 600px;
}
.sg-spin--slow { animation: sg-rotate 70s linear infinite; }
.sg-spin--rev  { animation: sg-rotate 52s linear infinite reverse; }
@keyframes sg-rotate { to { transform: rotate(360deg); } }

/* Latido suave del núcleo luminoso. */
.sg-core {
  transform-box: view-box;
  transform-origin: 720px 600px;
  animation: sg-pulse 7s ease-in-out infinite;
}
@keyframes sg-pulse {
  0%, 100% { opacity: 0.9;  transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* Parpadeo de las estrellas (fases distintas para que no titilen a la vez). */
.sg-stars circle { animation: twinkle 4.5s ease-in-out infinite; }
.sg-stars circle:nth-child(3n)   { animation-delay: 1.2s; }
.sg-stars circle:nth-child(3n+1) { animation-delay: 2.6s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}

/* ── Cueva / portal de Mordor (oscuro) ──────────────────────────────────────── */
/* Los anillos del vórtice del portal giran lentamente (centro en 720,500). */
.md-vortex {
  transform-box: view-box;
  transform-origin: 720px 500px;
  animation: md-vortex-spin 26s linear infinite;
}
.md-vortex--rev { animation-duration: 20s; animation-direction: reverse; }
@keyframes md-vortex-spin { to { transform: rotate(360deg); } }

/* El Ojo respira con un resplandor ámbar (dentro del portal, en 720,470). */
.md-eye {
  transform-box: view-box;
  transform-origin: 720px 470px;
  animation: md-eye-breathe 5s ease-in-out infinite;
}
@keyframes md-eye-breathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)); }
  50%      { filter: drop-shadow(0 0 28px rgba(245, 158, 11, 0.85)); }
}
.md-pupil {
  transform-box: view-box;
  transform-origin: 720px 470px;
  animation: md-pupil 5s ease-in-out infinite;
}
@keyframes md-pupil {
  0%, 100% { transform: scaleY(1);    }
  50%      { transform: scaleY(1.18); }
}

/* Brasas que ascienden desde el portón. */
.md-embers circle {
  transform-box: view-box;
  animation: md-ember 5.5s ease-in infinite;
}
.md-embers circle:nth-child(2n)   { animation-delay: 1.4s; }
.md-embers circle:nth-child(3n)   { animation-delay: 2.8s; }
.md-embers circle:nth-child(3n+1) { animation-delay: 0.7s; }
@keyframes md-ember {
  0%   { transform: translateY(0);      opacity: 0;   }
  15%  { opacity: 0.9; }
  100% { transform: translateY(-140px); opacity: 0;   }
}

.md-stars circle { animation: twinkle 6s ease-in-out infinite; }
.md-stars circle:nth-child(2n) { animation-delay: 2s; }

/* ── Accesibilidad: sin movimiento ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portal-scene * { animation: none !important; }
}