/* =========================================
   EFFECTS — WebGL shader + GSAP scroll magic
   Aislado. Borra este archivo + sus <script> para revertir.
========================================= */

/* Contiene shader/parallax dentro del hero */
#menu {
    overflow: hidden;
}

#menu-foto {
    position: relative;
}

/* Canvas del shader: cubre exactamente la foto del hero.
   mix-blend soft-light => tinte vivo sutil sobre la foto real. */
#hero-shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: 0.55;
    /* Si WebGL falla, el canvas queda transparente: la foto se ve intacta. */
}

/* El sobre y la tarjeta viven por encima del shader */
.menu-envelope,
.menu-card {
    will-change: transform;
}

/* Suaviza el trabajo del compositor durante los reveals */
.collage-item,
.square-item,
.vertical-item {
    will-change: transform, opacity;
}

/* =========================================
   ACCESIBILIDAD
   Sin animación => todo visible, sin transformaciones.
   (animations.js ya hace early-return con esta media query;
   este bloque es el cinturón de seguridad en CSS.)
========================================= */
@media (prefers-reduced-motion: reduce) {
    #hero-shader {
        display: none;
    }
    .menu-envelope,
    .menu-card,
    .collage-item,
    .square-item,
    .vertical-item {
        will-change: auto;
    }
}