/* ============================================================
   three.css — Estilos para las escenas 3D (Three.js)
   Capas, contenedores y degradación elegante sin WebGL.
   ============================================================ */

/* ---------- Hero: lienzo de esferas de energía ---------- */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sobre hero__bg/glow (-1), bajo el contenido (2) */
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
}

.hero__canvas.is-ready {
  opacity: 1;
}

/* El contenido del hero debe quedar por encima del lienzo 3D */
.hero__content,
.hero__scroll {
  position: relative;
  z-index: 2;
}

/* ---------- Experiencia: escena de velas 3D ---------- */
.scene-candles {
  position: relative;
  width: 100%;                /* alinea sus bordes con la galería */
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  height: clamp(320px, 46vh, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  /* Fondo cálido tipo spa: luz central crema que cae a arena */
  background:
    radial-gradient(70% 80% at 50% 34%, rgba(255, 253, 249, 0.95),
      rgba(239, 231, 222, 0.7) 52%, rgba(225, 212, 196, 0.55) 100%);
}

.scene-candles__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
}

.scene-candles__canvas.is-ready {
  opacity: 1;
}

/* Viñeta suave para dar profundidad y enmarcar las llamas */
.scene-candles__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 40%, transparent 55%, rgba(78, 68, 61, 0.12) 100%),
    radial-gradient(40% 40% at 50% 34%, rgba(255, 200, 130, 0.16), transparent 70%);
}

/* ---------- Degradación sin WebGL ----------
   Si no hay soporte, evitamos lienzos vacíos. */
.no-webgl .hero__canvas {
  display: none;
}

.no-webgl .scene-candles {
  display: none;
}

/* ---------- Movimiento reducido ----------
   El JS dibuja un único fotograma estático; el lienzo permanece. */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas,
  .scene-candles__canvas {
    transition: none;
  }
}

/* Móvil: escena de velas un poco más baja para respirar */
@media (max-width: 560px) {
  .scene-candles {
    height: clamp(260px, 50vh, 360px);
  }
}