/* =========================================================
   KEY! | IGLOO-MOTION.CSS
   ---------------------------------------------------------
   Capa de animación premium inspirada en la fluidez de
   igloo.inc: cursor personalizado, parallax de profundidad,
   revelado de texto por palabras, transición de "cobertura"
   entre secciones y partículas ambientales.

   Este archivo es 100% ADITIVO: no sobreescribe reglas de
   styles.css / animations.css / responsive.css, solo agrega
   comportamiento nuevo bajo sus propias clases y atributos
   [data-igloo-*]. Pensado para convivir sin conflictos dentro
   de Elementor (namespacing propio, sin !important salvo
   accesibilidad, sin dependencias externas).

   Índice:
   1. Variables de easing "orgánico"
   2. Cursor personalizado (custom-cursor)
   3. Glow de cursor ambiental
   4. Partículas flotantes
   5. Parallax de profundidad [data-igloo-depth]
   6. Revelado de texto por palabras (split-text)
   7. Transición de cobertura entre secciones
   8. Revelado enriquecido [data-reveal="mask"]
   9. Responsivo (tablet / móvil)
   10. Accesibilidad (prefers-reduced-motion)
========================================================= */


/* =========================================================
   1. VARIABLES DE EASING ORGÁNICO
   ---------------------------------------------------------
   Curvas más "vivas" que un ease-in-out estándar: entran
   rápido y se asientan con un pequeño acolchado, como en
   igloo.inc. Se usan en todo este archivo.
========================================================= */

:root {
    --igloo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --igloo-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --igloo-ease-elastic: cubic-bezier(0.22, 1.3, 0.36, 1);
    --igloo-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    --igloo-depth-strength: 1;
    --igloo-cursor-size: 38px;
}


/* =========================================================
   2. CURSOR PERSONALIZADO
   ---------------------------------------------------------
   El marcado y el estado base ya existen en styles.css
   (#custom-cursor). Aquí solo añadimos los estados que
   activa igloo-motion.js: is-active / is-hover / is-press.
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .custom-cursor {
        transition:
            opacity 320ms var(--igloo-ease-out);
    }

    .custom-cursor.is-active {
        opacity: 1;
    }

    .custom-cursor__outer {
        transition:
            width 380ms var(--igloo-ease-elastic),
            height 380ms var(--igloo-ease-elastic),
            border-color 280ms var(--igloo-ease-out),
            box-shadow 280ms var(--igloo-ease-out),
            background-color 280ms var(--igloo-ease-out);
    }

    .custom-cursor__inner {
        transition:
            width 260ms var(--igloo-ease-elastic),
            height 260ms var(--igloo-ease-elastic),
            opacity 260ms var(--igloo-ease-out);
    }

    .custom-cursor__label {
        opacity: 0;
        transform: translate(20px, 18px) scale(0.85);
        transition:
            opacity 260ms var(--igloo-ease-out),
            transform 320ms var(--igloo-ease-elastic);
    }

    /* Estado "hover": el aro crece y el punto se retrae,
       igual que los cursores de sitios de agencia premium. */

    .custom-cursor.is-hover .custom-cursor__outer {
        width: 64px;
        height: 64px;
        background: rgba(140, 255, 63, 0.06);
        border-color: rgba(140, 255, 63, 0.7);
    }

    .custom-cursor.is-hover .custom-cursor__inner {
        width: 3px;
        height: 3px;
        opacity: 0.6;
    }

    .custom-cursor.is-label .custom-cursor__label {
        opacity: 1;
        transform: translate(20px, 18px) scale(1);
    }

    /* Estado "press": leve compresión al hacer click. */

    .custom-cursor.is-press .custom-cursor__outer {
        width: 30px;
        height: 30px;
    }

    /* Se oculta sobre inputs de texto y elementos con cursor
       nativo (el navegador ya muestra su propio indicador). */

    .custom-cursor.is-text .custom-cursor__outer {
        width: 2px;
        height: 26px;
        border-radius: 2px;
        background: var(--color-primary, #8cff3f);
        border-color: transparent;
    }

    /* Oculta el cursor nativo solo cuando el nuestro está
       listo y activo, para evitar el "doble cursor" y nunca
       perder el puntero si el script falla. */

    html.has-igloo-cursor,
    html.has-igloo-cursor a,
    html.has-igloo-cursor button,
    html.has-igloo-cursor [role="button"] {
        cursor: none;
    }

}


/* =========================================================
   3. GLOW DE CURSOR AMBIENTAL
   ---------------------------------------------------------
   .global-effects__cursor-glow ya existe en styles.css con
   su apariencia; aquí lo hacemos seguir al cursor con inercia
   (lerp aplicado desde JS mediante translate3d).
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .global-effects__cursor-glow {
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 420ms var(--igloo-ease-out);
        will-change: transform;
    }

    .global-effects__cursor-glow.is-active {
        opacity: 0.65;
    }

}


/* =========================================================
   4. PARTÍCULAS FLOTANTES
   ---------------------------------------------------------
   Puntos muy sutiles generados por JS dentro de
   #global-particles, con deriva vertical aleatoria.
========================================================= */

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

    .igloo-particle {
        position: absolute;
        bottom: -8%;
        width: var(--particle-size, 3px);
        height: var(--particle-size, 3px);
        border-radius: 50%;
        background: rgba(140, 255, 63, var(--particle-opacity, 0.35));
        left: var(--particle-x, 50%);
        animation:
            igloo-particle-rise var(--particle-duration, 14s)
            linear infinite;
        animation-delay: var(--particle-delay, 0s);
        will-change: transform, opacity;
    }

    @keyframes igloo-particle-rise {

        0% {
            transform: translate3d(0, 0, 0);
            opacity: 0;
        }

        8% {
            opacity: var(--particle-opacity, 0.35);
        }

        92% {
            opacity: var(--particle-opacity, 0.35);
        }

        100% {
            transform: translate3d(var(--particle-drift, 24px), -112vh, 0);
            opacity: 0;
        }

    }

}


/* =========================================================
   5. PARALLAX DE PROFUNDIDAD [data-igloo-depth]
   ---------------------------------------------------------
   Cualquier elemento con este atributo se mueve levemente
   según el scroll, con la fuerza indicada (0 a 1). El motor
   JS aplica un translate3d suavizado (lerp) por rAF.
========================================================= */

[data-igloo-depth] {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   6. REVELADO DE TEXTO POR PALABRAS
   ---------------------------------------------------------
   igloo-motion.js envuelve cada palabra de los títulos de
   sección en un <span class="igloo-word"> con --i (índice).
   Cada palabra entra con un pequeño stagger orgánico.
========================================================= */

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

    .igloo-split {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: 0.12em;
        margin-bottom: -0.12em;
    }

    .igloo-word {
        display: inline-block;
        transform: translateY(105%) rotate(2deg);
        opacity: 0;
        transition:
            transform 900ms var(--igloo-ease-out),
            opacity 700ms var(--igloo-ease-out);
        transition-delay: calc(var(--i, 0) * 55ms);
    }

    .igloo-split.is-in-view .igloo-word {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

}


/* =========================================================
   7. TRANSICIÓN DE COBERTURA ENTRE SECCIONES
   ---------------------------------------------------------
   Cuando la siguiente sección empieza a cubrir a la actual,
   la actual se atenúa y encoge un poco (efecto "capas" de
   igloo.inc). Muy sutil para no afectar la lectura.
========================================================= */

@media (prefers-reduced-motion: no-preference) and (min-width: 921px) {

    [data-igloo-section] {
        transform-origin: center top;
        transition:
            transform 900ms var(--igloo-ease-in-out),
            filter 900ms var(--igloo-ease-in-out),
            opacity 900ms var(--igloo-ease-in-out);
        will-change: transform;
    }

    [data-igloo-section].is-covered {
        transform: scale(0.965);
        filter: brightness(0.92);
        opacity: 0.94;
    }

}


/* =========================================================
   8. REVELADO ENRIQUECIDO [data-reveal="mask"]
   ---------------------------------------------------------
   Variante adicional para el sistema [data-reveal] existente:
   una "cortina" que se abre en vez de solo hacer fade.
   No interfiere con las variantes up / right / scale ya
   presentes en animations.css.
========================================================= */

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

    [data-reveal="mask"] {
        opacity: 1;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 900ms var(--igloo-ease-out);
    }

    [data-reveal="mask"].is-in-view {
        clip-path: inset(0 0 0% 0);
    }

    [data-reveal="fade-scale"] {
        opacity: 0;
        transform: scale(1.045);
        transition:
            opacity 820ms var(--igloo-ease-out),
            transform 1020ms var(--igloo-ease-out);
    }

    [data-reveal="fade-scale"].is-in-view {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   9. RESPONSIVO
   ---------------------------------------------------------
   En tablet y móvil se apaga todo lo que dependa de un
   puntero fino, se reduce la fuerza del parallax y se acortan
   los tiempos para que se sienta ágil, no perezoso.
========================================================= */

@media (hover: none), (pointer: coarse) {

    .custom-cursor,
    .global-effects__cursor-glow {
        display: none !important;
    }

    html.has-igloo-cursor,
    html.has-igloo-cursor a,
    html.has-igloo-cursor button {
        cursor: auto;
    }

}

@media (max-width: 1080px) {

    :root {
        --igloo-depth-strength: 0.55;
    }

    .igloo-word {
        transition-delay: calc(var(--i, 0) * 35ms);
    }

}

@media (max-width: 740px) {

    :root {
        --igloo-depth-strength: 0.3;
    }

    [data-igloo-section] {
        transition-duration: 500ms;
    }

    [data-igloo-section].is-covered {
        transform: scale(0.985);
        filter: none;
        opacity: 1;
    }

    .igloo-particle {
        display: none;
    }

}


/* =========================================================
   10. ACCESIBILIDAD
   ---------------------------------------------------------
   Si el sistema pide movimiento reducido, todo lo nuevo de
   este archivo queda desactivado y el contenido visible.
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .custom-cursor,
    .global-effects__cursor-glow,
    #global-particles {
        display: none !important;
    }

    [data-igloo-depth] {
        transform: none !important;
    }

    .igloo-word {
        transform: none;
        opacity: 1;
        transition: none;
    }

    [data-igloo-section] {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    [data-reveal="mask"] {
        clip-path: none;
    }

}