/* =====================================================================
   MUNINFOR · PREMIUM FX (capa de experiencia)
   Código y assets 100% originales. Usa GSAP y Lenis (MIT) por CDN y un
   shader WebGL propio. Inspirado en el "feel" de los portfolios creativos,
   pero sin copiar código/diseño de terceros.
   - Scroll suave (Lenis)
   - Cursor personalizado + botones magnéticos
   - Fondo WebGL animado (canvas a pantalla completa)
   - Preloader + transición de entrada
   ===================================================================== */

/* ───────── Soporte Lenis (CSS estándar recomendado) ───────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ───────── Fondo WebGL ───────── */
#mun-gl-bg {
    position: fixed;
    inset: 0;
    z-index: -2;            /* detrás de los blobs CSS y del contenido */
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
#mun-gl-bg.mun-gl-ready { opacity: .85; }
/* Si el WebGL arranca, ocultamos los blobs CSS para no duplicar */
body.mun-gl-on .mun-bg-fx { display: none; }

/* ───────── Cursor personalizado ───────── */
@media (hover: hover) and (pointer: fine) {
    html.mun-cursor-on, html.mun-cursor-on * { cursor: none !important; }

    .mun-cursor-dot,
    .mun-cursor-ring {
        position: fixed; top: 0; left: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 100000;
        transform: translate(-50%, -50%);
        will-change: transform;
    }
    .mun-cursor-dot {
        width: 7px; height: 7px;
        background: var(--mun-cyan, #22d3ee);
        box-shadow: 0 0 10px rgba(34,211,238,.9);
    }
    .mun-cursor-ring {
        width: 36px; height: 36px;
        border: 1.5px solid rgba(34,211,238,.55);
        transition: width .25s ease, height .25s ease, border-color .25s ease,
                    background-color .25s ease, opacity .25s ease;
    }
    /* Sobre elementos interactivos: el aro crece y se ilumina */
    html.mun-cursor-active .mun-cursor-ring {
        width: 64px; height: 64px;
        border-color: rgba(168,85,247,.8);
        background: rgba(34,211,238,.10);
    }
    html.mun-cursor-down .mun-cursor-ring { width: 26px; height: 26px; }
}

/* Botones magnéticos: transición suave del desplazamiento que aplica el JS */
.mun-magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ───────── Preloader ───────── */
.mun-preloader {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: 26px;
    background:
        radial-gradient(900px 600px at 50% 40%, rgba(59,130,246,.18), transparent 60%),
        var(--mun-bg, #0c1228);
    transition: opacity .7s ease, visibility .7s ease;
}
.mun-preloader[data-done="true"] { opacity: 0; visibility: hidden; pointer-events: none; }

.mun-preloader__logo {
    height: clamp(40px, 8vw, 64px);
    width: auto;
    /* el SVG del logo es negro -> lo pasamos a blanco sobre el fondo oscuro */
    filter: brightness(0) invert(1);
    opacity: 0; transform: translateY(14px);
    animation: mun-pre-in .8s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.mun-preloader__bar {
    width: min(260px, 60vw); height: 3px; border-radius: 99px;
    background: rgba(255,255,255,.12); overflow: hidden;
}
.mun-preloader__fill {
    display: block; height: 100%; width: 0%;
    background: var(--mun-grad, linear-gradient(90deg,#22d3ee,#a855f7));
    box-shadow: 0 0 12px rgba(34,211,238,.8);
    transition: width .2s ease;
}
.mun-preloader__pct {
    font-family: 'InterTight', system-ui, sans-serif;
    font-size: 13px; letter-spacing: .1em;
    color: var(--mun-text-dim, #8e99bf);
}
@keyframes mun-pre-in { to { opacity: 1; transform: none; } }

/* Mientras carga, evitamos scroll y el destello de contenido */
html.mun-preloading { overflow: hidden; }

/* Entrada global del contenido tras el preloader */
body.mun-enter main,
body.mun-enter footer { animation: mun-content-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mun-content-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ───────── Accesibilidad ───────── */
@media (prefers-reduced-motion: reduce) {
    #mun-gl-bg { display: none; }
    .mun-cursor-dot, .mun-cursor-ring { display: none; }
    html.mun-cursor-on, html.mun-cursor-on * { cursor: auto !important; }
    .mun-preloader__logo { animation: none; opacity: 1; transform: none; }
    body.mun-enter main, body.mun-enter footer { animation: none; }
}