/* =====================================================================

   ENSUTEX — ANIMATIONS LAYER v2 (Antigravity-inspired)

   Organic, weightless motion. Respects prefers-reduced-motion.

   ===================================================================== */



/* ─── EASINGS PREMIUM (CSS custom properties) ─── */

:root {

  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  --ease-in-back:  cubic-bezier(0.6, -0.28, 0.735, 0.045);

  --dur-fast:   0.25s;

  --dur-med:    0.55s;

  --dur-slow:   0.85s;

  --dur-hero:   1.1s;

}



/* Typewriter elements hidden until revealed by JS — prevents flash */

[data-ty] { opacity: 0; }



/* ─────────────────────────────────────────

   1. REVEAL ON SCROLL — estado inicial/final

───────────────────────────────────────── */

.anim-reveal {

    opacity: 0;

    transform: translateY(32px);

    transition: opacity var(--dur-slow) var(--ease-smooth),

                transform var(--dur-slow) var(--ease-smooth);

    will-change: opacity, transform;

}

.anim-reveal--in {

    opacity: 1;

    transform: translateY(0);

}



/* ─────────────────────────────────────────

   2. STAGGER CHILDREN

───────────────────────────────────────── */

.anim-stagger-child {

    opacity: 0;

    transform: translateY(22px);

    transition: opacity var(--dur-med) var(--ease-smooth),

                transform var(--dur-med) var(--ease-smooth);

    transition-delay: var(--stagger-delay, 0ms);

    will-change: opacity, transform;

}

.anim-stagger-child--in {

    opacity: 1;

    transform: translateY(0);

}



/* ─────────────────────────────────────────

   3. WORD SPLIT — título hero estilo Antigravity

   JS splitea en .word, cada .word-inner sube

───────────────────────────────────────── */

.split-hero {

    overflow: visible;

    overflow-wrap: break-word;

}

.split-hero .word {

    display: inline-block;

    overflow: hidden;

    vertical-align: bottom;

    /* sin padding extra para no romper line-height */

}

.split-hero .word-inner {

    display: inline-block;

    transform: translateY(110%) rotate(3deg);

    opacity: 0;

    transition: transform var(--dur-hero) var(--ease-out-expo),

                opacity 0.4s ease;

    will-change: transform, opacity;

}

.split-hero.words-in .word-inner {

    transform: translateY(0) rotate(0deg);

    opacity: 1;

}

/* Stagger por posición word — aplicado via JS con --wi var */

.split-hero .word-inner {

    transition-delay: calc(var(--wi, 0) * 90ms);

}



/* ─────────────────────────────────────────

   4. HERO KICKER — badge pill que sube primero

───────────────────────────────────────── */

.hero-kicker-anim {

    opacity: 0;

    transform: translateY(8px) scale(0.992);

    transition: opacity 0.28s ease-out,

                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.05s;

    will-change: opacity, transform;

}

.hero-kicker-anim.in {

    opacity: 1;

    transform: translateY(0) scale(1);

}



/* ─────────────────────────────────────────

   5. HERO SUBTITLE & CTA — fade-up con delay

───────────────────────────────────────── */

.hero-sub-anim {

    opacity: 0;

    transform: translateY(9px);

    transition: opacity 0.26s ease-out,

                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.1s;

    will-change: opacity, transform;

}

.hero-sub-anim.in {

    opacity: 1;

    transform: translateY(0);

}

.hero-cta-anim {

    opacity: 0;

    transform: translateY(8px);

    transition: opacity 0.24s ease-out,

                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.14s;

    will-change: opacity, transform;

}

.hero-cta-anim.in {

    opacity: 1;

    transform: translateY(0);

}



/* ─────────────────────────────────────────

   6. NAV INTELIGENTE

───────────────────────────────────────── */

.anim-nav-smart {

    transition: transform 0.4s var(--ease-smooth),

                background-color 0.3s ease,

                box-shadow 0.3s ease,

                backdrop-filter 0.3s ease;

    will-change: transform;

}

.anim-nav-smart.anim-nav-hidden {

    transform: translateY(-100%);

}

.anim-nav-smart.anim-nav-solid {

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

}



/* ─────────────────────────────────────────

   7. SCROLL PROGRESS

───────────────────────────────────────── */

#anim-scroll-progress {

    position: fixed;

    top: 0; left: 0;

    height: 2.5px;

    width: 100%;

    background: linear-gradient(90deg, #E20613 0%, #ff6b35 50%, #E20613 100%);

    transform-origin: left center;

    transform: scaleX(0);

    z-index: 60;

    pointer-events: none;

    transition: transform 0.06s linear;

}



/* ─────────────────────────────────────────

   8. MAGNETIC BUTTON — elevación suave

   (JS maneja el seguimiento del cursor)

───────────────────────────────────────── */

.btn-magnetic {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: transform var(--dur-fast) var(--ease-smooth),

                box-shadow var(--dur-fast) ease;

    will-change: transform;

}

.btn-magnetic:hover {

    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.28);

}

.btn-magnetic .btn-inner {

    display: inline-flex;

    align-items: center;

    gap: inherit;

    transition: transform var(--dur-fast) var(--ease-smooth);

    pointer-events: none;

}



/* Variante blanca (hero CTA primario) */

.btn-magnetic.btn-light:hover {

    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.35);

}

/* Variante negra */

.btn-magnetic.btn-dark:hover {

    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.5);

}



/* ─────────────────────────────────────────

   9. RIPPLE (click feedback)

───────────────────────────────────────── */

.btn-ripple {

    position: relative;

    overflow: hidden;

    transition: transform var(--dur-fast) var(--ease-spring),

                box-shadow var(--dur-fast) ease;

}

.btn-ripple:hover {

    transform: translateY(-3px) scale(1.025);

}

.btn-ripple:active {

    transform: translateY(1px) scale(0.98);

    transition-duration: 0.1s;

}

.btn-ripple::after {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(

        circle at var(--ripple-x, 50%) var(--ripple-y, 50%),

        rgba(255,255,255,0.35) 0%,

        transparent 65%

    );

    opacity: 0;

    transition: opacity 0.5s ease;

    pointer-events: none;

}

.btn-ripple:active::after {

    opacity: 1;

    transition: 0s;

}



a[class*="bg-primary"][class*="rounded-full"],

a[class*="bg-black"][class*="rounded-full"],

button[class*="bg-primary"] {

    transition: transform var(--dur-fast) var(--ease-smooth),

                box-shadow var(--dur-fast) ease,

                background-color 0.2s ease,

                color 0.2s ease;

}



/* ─────────────────────────────────────────

   10. INPUTS premium focus

───────────────────────────────────────── */

input:focus,

textarea:focus,

select:focus {

    outline: none;

    box-shadow: 0 0 0 3px rgba(226, 6, 19, 0.15);

    transition: box-shadow 0.18s ease, border-color 0.18s ease;

}



/* ─────────────────────────────────────────

   11. CARD HOVER — elevación 3D sutil

───────────────────────────────────────── */

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

    .tilt-card:hover,

    article.bg-white.rounded-2xl:hover,

    .disciplina-card:hover {

        transform: translateY(-5px) scale(1.01);

        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.16);

        transition: transform 0.4s var(--ease-smooth),

                    box-shadow 0.4s ease;

    }

}



/* ─────────────────────────────────────────

   12. SECTION DIVIDER LINE — Antigravity style

   Añadir class .section-line al <div> que lo necesite

───────────────────────────────────────── */

.section-line {

    display: block;

    height: 1.5px;

    background: linear-gradient(90deg, #E20613, transparent);

    width: 0;

    transition: width 1s var(--ease-out-expo);

    margin-top: 0.5rem;

}

.anim-reveal--in .section-line,

.section-line.drawn {

    width: 3.5rem;

}



/* ─────────────────────────────────────────

   13. FLOAT sutil (hero mockup)

───────────────────────────────────────── */

@keyframes heroFloat {

    0%, 100% { transform: translateY(0); }

    50%       { transform: translateY(-10px); }

}

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

    [data-float] { animation: heroFloat 7s var(--ease-smooth) infinite; }

}



/* ─────────────────────────────────────────

   14. PARALLAX

───────────────────────────────────────── */

[data-parallax] { will-change: transform; }



/* ─────────────────────────────────────────

   15. LOADING STATE en botones de form

───────────────────────────────────────── */

button[disabled].is-loading {

    position: relative;

    pointer-events: none;

    color: transparent !important;

}

button[disabled].is-loading::after {

    content: '';

    position: absolute;

    top: 50%; left: 50%;

    width: 18px; height: 18px;

    margin: -9px 0 0 -9px;

    border: 2px solid currentColor;

    border-top-color: transparent;

    border-radius: 50%;

    animation: btnSpin 0.7s linear infinite;

    color: #fff;

}

@keyframes btnSpin { to { transform: rotate(360deg); } }



/* ─────────────────────────────────────────

   16. CAT-CARD highlight on hover

───────────────────────────────────────── */

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

    .cat-card:hover .bg-zinc-900 {

        background-color: #E20613;

        color: #fff;

        transition: background-color 0.3s ease, color 0.3s ease;

    }

}



/* ─────────────────────────────────────────

   17. CHATBOT — sin pulso competidor

───────────────────────────────────────── */

#chatbot-trigger { animation: none; }



/* ─────────────────────────────────────────

   18. NAV solid glassmorphism

───────────────────────────────────────── */

nav.anim-nav-smart.anim-nav-solid {

    background: rgba(0, 0, 0, 0.97);

    backdrop-filter: blur(20px) saturate(1.3);

    -webkit-backdrop-filter: blur(20px) saturate(1.3);

}



/* ─────────────────────────────────────────

   19. SECTION heading transition delay

───────────────────────────────────────── */

.anim-reveal h2, .anim-reveal h3 { transition-delay: 0.05s; }

footer.anim-reveal--in { animation: none; }



/* ─────────────────────────────────────────

   20. REDUCED MOTION — accesibilidad

───────────────────────────────────────── */

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

    .anim-reveal,

    .anim-stagger-child,

    .anim-nav-smart,

    .split-hero .word-inner,

    .hero-kicker-anim,

    .hero-sub-anim,

    .hero-cta-anim {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

    #anim-scroll-progress { display: none; }

    .tilt-card:hover,

    article.bg-white.rounded-2xl:hover,

    .disciplina-card:hover { transform: none; }

    [data-float] { animation: none; }

    .section-line { width: 3.5rem; }

}



/* ─────────────────────────────────────────

   21. MOBILE — reduce amplitudes

───────────────────────────────────────── */

@media (max-width: 767px) {

    .anim-reveal { transform: translateY(18px); }

    .anim-stagger-child { transform: translateY(12px); }

    body.menu-open .anim-nav-smart { transform: translateY(0) !important; }

    #anim-scroll-progress { height: 2px; }

    .split-hero .word-inner { transition-delay: calc(var(--wi, 0) * 60ms); }

}




/* ----- 19. Scene reveal tipo Antigravity ----- */
.scene-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(0.96);
    transform-origin: center top;
    transition:
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.64s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.64s ease;
}

.landing-hero-video,
.landing-media video,
main video[autoplay][muted] {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

#chatbot-cta {
    max-width: 9.75rem;
    white-space: nowrap !important;
    text-align: center;
    line-height: 1.2;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 0.56rem 0.9rem;
}

#chatbot-trigger {
    width: 3.5rem;
    height: 3.5rem;
}

@media (min-width: 768px) {
    #chatbot-trigger {
        width: 3.75rem;
        height: 3.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 767px) {
    .scene-reveal {
        transform: translate3d(0, 22px, 0) scale(0.97);
    }

    .catalog-hero-badge {
        width: 100%;
        justify-content: center;
        white-space: normal;
        line-height: 1.6;
        letter-spacing: 0.02em;
        text-align: center;
    }

    #ty-kicker {
        width: 100%;
        justify-content: center;
        white-space: normal;
        line-height: 1.55;
        letter-spacing: 0.02em;
        text-align: center;
    }
}

/* ─────────────────────────────────────────
   22. BOX-GROW EFFECT (Google Antigravity-inspired)
───────────────────────────────────────── */
.box-grow-container {
    opacity: 0;
    transform: scale(0.55) translateY(42px);
    transform-origin: center top;
    transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.box-grow-container.box-grow-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    background-color: #f4f4f5; /* bg-zinc-100 */
    color: #E20613; /* Ensutex Red */
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
    .box-grow-container {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────
   23. SLIDE-IN REVEAL OVERRIDES
───────────────────────────────────────── */
body [data-reveal="slide-left"] {
    opacity: 0;
    transform: translate3d(60px, 0, 0) !important;
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body [data-reveal="slide-left"].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}
body [data-reveal="slide-right"] {
    opacity: 0;
    transform: translate3d(-60px, 0, 0) !important;
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body [data-reveal="slide-right"].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* ─── EFECTOS DE BRILLO Y GLOW DE LOGOS (PREMIUM 2026) ─── */
.logo-shine-menu,
.logo-shine-footer,
.logo-shine-calc {
    transition: filter 0.4s var(--ease-smooth), transform 0.4s var(--ease-spring) !important;
    will-change: filter, transform;
}
.logo-shine-menu:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) !important;
    transform: scale(1.04) rotate(1deg) !important;
}
.logo-shine-footer:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) !important;
    transform: scale(1.04) rotate(-1deg) !important;
}
.logo-shine-calc:hover {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) brightness(1.1) !important;
    transform: scale(1.06) translateY(-2px) !important;
}