/* =============================================================================
   SCENE 3D · Octaedro WebGL real (Three.js)
   Asset paralelo a scene.css (versión CSS). El motor Three.js renderiza en un
   <canvas> que reemplaza visualmente al .octa CSS, manteniendo el resto del
   layout intacto (.scene, .scene-glow, .scene-shadow siguen aplicando).
   ============================================================================= */

.scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* iOS Safari smoothness — estabiliza transforms durante momentum scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.scene-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 22% at var(--gx,70%) var(--gy,40%), rgba(30,200,255,.20), transparent 70%),
    radial-gradient(ellipse 24% 18% at var(--gx2,30%) var(--gy2,60%), rgba(183,148,244,.18), transparent 70%);
  filter: blur(16px);
  transition: background .8s ease;
}
.scene-shadow {
  position: absolute; left: 50%; top: 50%;
  width: 360px; height: 80px;
  margin-left: -180px;
  margin-top: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11,13,18,.32), transparent 72%);
  filter: blur(18px);
  opacity: var(--shadow-strength, .25);
  transform: translate3d(var(--shadow-x,0), var(--shadow-y,180px), 0)
             scale(var(--shadow-scale,1));
  transition: opacity .5s ease;
  will-change: transform, opacity;
}

/* Canvas de Three.js — ocupa toda la escena */
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Octaedro CSS legacy (oculto cuando Three.js está activo) */
.octa {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.scene.three-active #octa { display: none !important; }

/* Faces del octa legacy (override backface-visibility para sub-elementos visibles) */
.face,
.face .img-wrap,
.face .gloss {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}