/* ============================================================
   INMERSIÓN SCROLL / 3D  —  "otro mundo" hipnótico  (Capa 1)
   Coreografía por SCROLL de los visuales generados con Higgsfield.
   NO dibuja ningún visual: solo mueve en PROFUNDIDAD (parallax +
   respiración de escala) los fondos ya generados con Higgsfield,
   creando la sensación de una ventana viva a otro mundo.
   Se carga DESPUÉS de cinematic_bg.css.
   Con prefers-reduced-motion: reduce -> se conserva el zoom suave original.
   Variables --bgY / --bgScale las setea scroll_immersion.js por sección.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* Fondos de IMAGEN: parallax vertical + respiración de escala.
     Sustituye el zoom fijo (hypZoom) por movimiento guiado por scroll. */
  #precios::before, #confianza::before, #vision::before,
  #roadmap::before, #afiliados::before, #contacto::before {
    transform: translate3d(0, var(--bgY, 0px), 0) scale(var(--bgScale, 1.14));
    animation: none !important;
    will-change: transform;
  }

  /* Fondos de VIDEO: mismo parallax. scale(1.14) da margen para que
     el desplazamiento nunca muestre los bordes del video. */
  #mercados > .sec-bg-video,
  #tecnologia > .sec-bg-video,
  #resultados > .sec-bg-video {
    transform: translate3d(0, var(--bgY, 0px), 0) scale(var(--bgScale, 1.14)) !important;
    will-change: transform;
  }

  /* ===== CAPA 2: entrada 3D del contenido =====
     Cada sección "vuela hacia ti" desde la profundidad al entrar en el viewport.
     --depth (0 = lejos/entrando, 1 = llegó) lo setea scroll_immersion.js.
     En reposo (depth=1) el transform es neutro -> 100% legible y clickeable. */
  #precios, #confianza, #mercados, #vision, #tecnologia,
  #resultados, #roadmap, #afiliados, #contacto {
    perspective: 700px;               /* PORTAL EXTREMO: convergencia máxima */
    perspective-origin: 50% 42%;
  }
  #precios   > .container, #confianza  > .container, #mercados   > .container,
  #vision    > .container, #tecnologia > .container, #resultados > .container,
  #roadmap   > .container, #afiliados  > .container, #contacto   > .container {
    transform: translateZ(calc((var(--depth, 1) - 1) * 850px))
               rotateX(calc((1 - var(--depth, 1)) * 12deg));
    transform-origin: 50% 100%;
    opacity: calc(0.35 + var(--depth, 1) * 0.65);   /* emerge del vacío */
    filter: blur(calc((1 - var(--depth, 1)) * 2px)); /* enfoque al llegar, desenfoque al alejarse (portal) */
    will-change: transform, opacity, filter;
  }
}