/* =========================================================
   KEY! | ANIMATIONS.CSS
   ---------------------------------------------------------
   Motor visual de movimiento de la pagina:

   1. Scroll reveal          ([data-reveal])
   2. Parallax del hero        (capas + personaje)
   3. Insignias flotantes       (Prendas / Sublimacion / Equipos)
   4. Botones                    (shine + magnetico)
   5. Tarjetas                    (glow que sigue al cursor)
   6. Barra de progreso de lectura
   7. Detalles varios               (subrayado de nav, eyebrow, etc.)

   Todo queda desactivado si la persona pidio movimiento
   reducido en su sistema operativo.
========================================================= */


/* =========================================================
   0. SEGURO ANTI-DESBORDE
   ---------------------------------------------------------
   Los estados iniciales de [data-reveal] desplazan elementos
   fuera de su caja antes de aparecer; esto refuerza que nunca
   generen una barra de scroll horizontal, sobre todo en móvil.
========================================================= */

html {
    overflow-x: hidden;
}


/* =========================================================
   1. SCROLL REVEAL
========================================================= */

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

    [data-reveal] {
        opacity: 0;
        transition:
            opacity 760ms cubic-bezier(0.16, 0.84, 0.44, 1),
            transform 760ms cubic-bezier(0.16, 0.84, 0.44, 1);
        will-change: opacity, transform;
    }

    [data-reveal="up"] {
        transform: translateY(34px);
    }

    [data-reveal="right"] {
        transform: translateX(18px);
    }

    [data-reveal="scale"] {
        transform: scale(0.93);
    }

    [data-reveal].is-in-view {
        opacity: 1;
        transform: none;
    }

    /*
     * Una vez revelado, quitamos will-change para no gastar
     * memoria de composicion en toda la pagina.
     */

    [data-reveal].is-in-view {
        will-change: auto;
    }

}

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

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* =========================================================
   2. PARALLAX DEL HERO
========================================================= */

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

    .hero__layer {
        will-change: transform;
    }

    .hero__character {
        /* PULIDO: el seguimiento del cursor ahora se suaviza con
           interpolacion (lerp) en JS frame a frame (animations.js),
           por eso ya no lleva transition aqui -- una transition
           CSS sobre un valor que cambia cada frame solo generaria
           un doble suavizado y sensacion de retraso. */
        transform-style: preserve-3d;
        will-change: transform;
    }

    /* Flotacion suave permanente de Lupe, independiente del mouse */

    .hero__character-image {
        animation: lupe-idle-float 6.5s ease-in-out infinite;
    }

    @keyframes lupe-idle-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-14px); }
    }

    .hero__character-ring {
        animation: ring-rotate 60s linear infinite;
    }

    @keyframes ring-rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .hero__character-glow {
        animation: glow-breathe 5s ease-in-out infinite;
    }

    @keyframes glow-breathe {
        0%, 100% { opacity: 0.85; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.06); }
    }

}


/* =========================================================
   3. INSIGNIAS FLOTANTES DEL HERO
========================================================= */

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

    .hero-equipment.is-floating {
        animation:
            badge-float var(--float-duration, 6s) ease-in-out infinite;
        animation-delay: var(--float-delay, 0s);
    }

    @keyframes badge-float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(-1.5deg); }
    }

    .hero-equipment {
        /* PULIDO: cubic-bezier organico en vez de "ease" generico
           para que combine con el resto de microinteracciones. */
        transition:
            transform 320ms var(--igloo-ease-out, cubic-bezier(0.16, 0.84, 0.44, 1)),
            border-color 320ms var(--igloo-ease-out, cubic-bezier(0.16, 0.84, 0.44, 1)),
            background 320ms var(--igloo-ease-out, cubic-bezier(0.16, 0.84, 0.44, 1));
    }

    .hero-equipment:hover {
        border-color: rgba(140, 255, 63, 0.4);
        background: rgba(140, 255, 63, 0.1);
    }

}


/* =========================================================
   4. BOTONES: SHINE + REALCE
========================================================= */

.button {
    isolation: isolate;
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 48%,
        transparent 62%
    );
    transform: translateX(-130%);
    pointer-events: none;
}

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

    .button::before {
        transition: transform 620ms cubic-bezier(0.16, 0.84, 0.44, 1);
    }

    .button:hover::before {
        transform: translateX(130%);
    }

    .button--large {
        transition:
            transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1.4),
            box-shadow var(--transition-base),
            background var(--transition-base),
            color var(--transition-base),
            border-color var(--transition-base);
    }

}

.button--primary:hover {
    animation: button-pulse 1.6s ease-out infinite;
}

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

    @keyframes button-pulse {
        0% { box-shadow: 0 14px 34px rgba(114, 230, 45, 0.20), 0 0 0 0 rgba(140, 255, 63, 0.35); }
        70% { box-shadow: 0 14px 34px rgba(114, 230, 45, 0.20), 0 0 0 14px rgba(140, 255, 63, 0); }
        100% { box-shadow: 0 14px 34px rgba(114, 230, 45, 0.20), 0 0 0 0 rgba(140, 255, 63, 0); }
    }

}


/* =========================================================
   5. TARJETAS: BRILLO QUE SIGUE AL CURSOR
========================================================= */

.has-cursor-glow {
    position: relative;
}

.has-cursor-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
        260px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(140, 255, 63, 0.14),
        transparent 70%
    );
    transition: opacity 320ms ease;
}

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

    .has-cursor-glow:hover::after {
        opacity: 1;
    }

}

.has-cursor-glow > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   6. BARRA DE PROGRESO DE LECTURA
========================================================= */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.reading-progress__fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-primary, linear-gradient(135deg, #8cff3f, #72e62d));
    box-shadow: 0 0 12px rgba(140, 255, 63, 0.55);
}

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

    .reading-progress__fill {
        /* PULIDO: una curva suave en vez de linear evita el
           efecto "mecanico" al avanzar por la barra de lectura. */
        transition: width 220ms var(--igloo-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    }

}


/* =========================================================
   7. DETALLES: NAV, EYEBROW, DIVISORES
========================================================= */

.main-nav a,
[data-nav-link] {
    position: relative;
}

[data-nav-link]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

[data-nav-link]:hover::after,
[data-nav-link].is-active::after {
    transform: scaleX(1);
}

.eyebrow__line {
    display: inline-block;
    transform-origin: left;
}

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

    .eyebrow__line {
        animation: line-grow 900ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
    }

    @keyframes line-grow {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    .hero-interface__status-light {
        animation: status-pulse 2.4s ease-in-out infinite;
    }

    @keyframes status-pulse {
        0%, 100% { box-shadow: 0 0 15px rgba(77, 247, 165, 0.6); }
        50% { box-shadow: 0 0 22px rgba(77, 247, 165, 0.95); }
    }

    /* Las pestañas de misión/bioma reaccionan con un pequeño resorte */

    .view-selector__button,
    .mission-tab {
        transition:
            transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1.5),
            background var(--transition-base),
            border-color var(--transition-base),
            color var(--transition-base);
    }

    .view-selector__button:hover,
    .mission-tab:hover {
        transform: translateY(-2px);
    }

    .view-selector__button.is-active,
    .mission-tab.is-active {
        transform: scale(1.03);
    }

}


/* =========================================================
   7b. CARRUSEL DEL ARSENAL CREATIVO
   ---------------------------------------------------------
   Capas extra de movimiento para los carruseles de servicios
   (DTF, Sublimación, Bordado, Vinil, Uniformes, Merch):
   zoom lento tipo "Ken Burns", flechas/puntos con más
   respuesta al tacto, y un brillo que indica que el
   carrusel sigue avanzando solo.
========================================================= */

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

    /* Zoom lento y continuo sobre la imagen activa */

    .key-product-slide.is-active img {
        animation: key-slide-kenburns 9s ease-out forwards;
    }

    @keyframes key-slide-kenburns {
        from { transform: scale(1); }
        to { transform: scale(1.055); }
    }

    /* Como el hover ya anima el transform, evitamos que
       compitan: al pasar el mouse tomamos el control manual */

    .key-service:hover .key-product-slide.is-active img {
        animation-play-state: paused;
    }

    /* Brillo que recorre el borde de la tarjeta mientras
       el carrusel avanza por sí solo */

    .key-service.is-running {
        animation: key-service-alive 3.4s ease-in-out infinite;
    }

    @keyframes key-service-alive {
        0%, 100% {
            box-shadow:
                0 24px 70px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 0 0 rgba(var(--key-accent-rgb), 0);
        }
        50% {
            box-shadow:
                0 24px 70px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 0 26px rgba(var(--key-accent-rgb), 0.16);
        }
    }

    /* Flechas: reaccionan al tacto, no solo al hover con mouse */

    .key-service__arrow {
        transition:
            background 0.2s ease,
            transform 0.15s cubic-bezier(0.3, 0.7, 0.4, 1.5),
            border-color 0.2s ease;
    }

    .key-service__arrow:active {
        transform: scale(0.88);
    }

    /* Puntos: el activo respira con un halo suave */

    .key-service__dot.is-active {
        animation: key-dot-glow 2.6s ease-in-out infinite;
    }

    @keyframes key-dot-glow {
        0%, 100% { box-shadow: 0 0 0 rgba(var(--key-accent-rgb), 0); }
        50% { box-shadow: 0 0 10px rgba(var(--key-accent-rgb), 0.65); }
    }

    /* Entrada más viva de cada tarjeta del arsenal */

    .key-service[data-reveal].is-in-view .key-service__visual {
        animation: key-service-visual-in 900ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
    }

    @keyframes key-service-visual-in {
        from {
            clip-path: inset(0 0 100% 0);
        }
        to {
            clip-path: inset(0 0 0% 0);
        }
    }

}


/* =========================================================
   8. ACCESIBILIDAD
   ---------------------------------------------------------
   Ultima palabra: si el sistema pide movimiento reducido,
   ninguna animacion decorativa de este archivo se ejecuta.
========================================================= */

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

    .hero__character-image,
    .hero__character-ring,
    .hero__character-glow,
    .hero-equipment.is-floating,
    .button--primary:hover,
    .eyebrow__line,
    .hero-interface__status-light,
    .view-selector__button,
    .mission-tab,
    .key-product-slide.is-active img,
    .key-service.is-running,
    .key-service__dot.is-active,
    .key-service__visual {
        animation: none !important;
        transition: none !important;
    }

    .button::before {
        display: none;
    }

}