/*
 * scenes.css — Escena de fondo inmersiva del portal.
 *
 * Hay UNA sola escena: una "puerta estelar" (.scene--portal). La geometría es
 * idéntica en claro y oscuro; solo cambian los colores, que se leen de las
 * variables --scene-* que cada tema define en tokens.css. Así, "la misma imagen
 * recoloreada" es literal: claro = amanecer luminoso, oscuro = la misma puerta
 * de noche cerrada.
 *
 * 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.
 *
 * El grupo .scene-parallax lo desplaza levemente portal.js según el puntero.
 * 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;
}

.scene--portal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Fundido suave al cambiar de tema (los colores cambian de golpe; esto lo
     disimula). */
  animation: scene-fade var(--transition-normal, 220ms) ease;
}
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Recolor por tema ───────────────────────────────────────────────────────── */
/* Los <stop> y trazos de la escena toman su color de las variables --scene-*.
   Cambiar de tema reescribe esas variables y, con ellas, toda la escena. */
.scene--portal .sc-sky-top     { stop-color: var(--scene-sky-top); }
.scene--portal .sc-sky-mid     { stop-color: var(--scene-sky-mid); }
.scene--portal .sc-sky-horizon { stop-color: var(--scene-sky-horizon); }
.scene--portal .sc-halo        { stop-color: var(--scene-halo); }
.scene--portal .sc-core-in     { stop-color: var(--scene-core-in); }
.scene--portal .sc-core-mid    { stop-color: var(--scene-core-mid); }
.scene--portal .sc-core-out    { stop-color: var(--scene-core-out); }

.scene--portal .sc-rays .sc-ray { fill: var(--scene-ray); }
.scene--portal .sc-rays         { opacity: 0.16; }
.scene--portal .sc-mist         { fill: var(--scene-mist); }
.scene--portal .sc-particles circle { fill: var(--scene-particle); }

/* Anillos: el trazo (stroke) toma el color de cada anillo. Cuando un elemento
   lleva una clase de "color de anillo" Y una de animación, ambas conviven. */
.scene--portal .sc-ring   { stroke: var(--scene-ring); }
.scene--portal .sc-ring-2 { stroke: var(--scene-ring-2); }
.scene--portal .sc-ring-3 { stroke: var(--scene-ring-3); }

/* ── Parallax ───────────────────────────────────────────────────────────────── */
/* portal.js fija --px/--py según la posición del puntero; aquí solo se aplican
   con una transición suave. Valores por defecto a 0 (sin JS o reduced-motion). */
.scene-parallax {
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 220ms ease-out;
  transform-box: view-box;
  transform-origin: 720px 600px;
}

/* ── Anillos giratorios ─────────────────────────────────────────────────────── */
.sc-spin {
  transform-box: view-box;
  transform-origin: 720px 600px;
}
.sc-spin--slow { animation: sc-rotate 70s linear infinite; }
.sc-spin--rev  { animation: sc-rotate 52s linear infinite reverse; }
@keyframes sc-rotate { to { transform: rotate(360deg); } }

/* ── Núcleo: latido + resplandor (bloom) ────────────────────────────────────── */
.sc-core {
  transform-box: view-box;
  transform-origin: 720px 600px;
  animation: sc-pulse 7s ease-in-out infinite;
  filter: drop-shadow(0 0 16px var(--scene-glow));
}
@keyframes sc-pulse {
  0%, 100% { opacity: 0.9;  transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.035); }
}

/* El aura difusa respira en contrafase para dar sensación de profundidad viva. */
.sc-aura {
  transform-box: view-box;
  transform-origin: 720px 600px;
  animation: sc-aura-breathe 9s ease-in-out infinite;
}
@keyframes sc-aura-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

/* Pulso breve del núcleo cuando se abre un portal (clase la pone portal.js). */
.portal-scene.portal-opening .sc-core {
  animation: sc-core-flash 700ms ease-out;
}
.portal-scene.portal-opening .sc-aura {
  animation: sc-aura-flash 700ms ease-out;
}
@keyframes sc-core-flash {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 16px var(--scene-glow)); }
  40%  { transform: scale(1.12); filter: drop-shadow(0 0 48px var(--scene-glow)) brightness(1.25); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 16px var(--scene-glow)); }
}
@keyframes sc-aura-flash {
  0%   { opacity: 0.7;  transform: scale(1);    }
  40%  { opacity: 1;    transform: scale(1.16); }
  100% { opacity: 0.7;  transform: scale(1);    }
}

/* ── Partículas: titileo + deriva ascendente ────────────────────────────────── */
.sc-particles circle {
  transform-box: view-box;
  animation: sc-twinkle 4.5s ease-in-out infinite, sc-drift 11s ease-in-out infinite;
}
.sc-particles circle:nth-child(3n)   { animation-delay: 1.2s, 0.5s; }
.sc-particles circle:nth-child(3n+1) { animation-delay: 2.6s, 2.0s; }
.sc-particles circle:nth-child(4n)   { animation-delay: 0.4s, 3.4s; }
@keyframes sc-twinkle {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 1;    }
}
@keyframes sc-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ── Accesibilidad: sin movimiento ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portal-scene *,
  .scene--portal { animation: none !important; }
  .scene-parallax { transition: none; transform: none; }
  /* El núcleo conserva su resplandor estático (solo se quita el movimiento). */
  .sc-core { filter: drop-shadow(0 0 16px var(--scene-glow)); }
}