/* =========================================================
   MTK — GLOBAL MOTION SYSTEM
   Animaciones ligeras para Home, About, Services, Products
   y futuras páginas MTK.
   Todas las reglas están limitadas a body.mtk-redesign-page.
========================================================= */

/* ---------------------------------------------------------
   Variables globales de movimiento
--------------------------------------------------------- */
body.mtk-redesign-page{
    --mtk-motion-distance: 34px;
    --mtk-motion-duration: .82s;
    --mtk-motion-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   Estado inicial.
   Solo se activa cuando JS añade .mtk-motion-ready.
   Si JavaScript falla, el contenido seguirá siendo visible.
--------------------------------------------------------- */
body.mtk-redesign-page.mtk-motion-ready .mtk-reveal{
    opacity: 0;
    transform: translate3d(0,var(--mtk-motion-distance),0);
    transition:
        opacity var(--mtk-motion-duration) var(--mtk-motion-ease),
        transform var(--mtk-motion-duration) var(--mtk-motion-ease);
    will-change: opacity, transform;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-left{
    opacity: 0;
    transform: translate3d(-42px,0,0);
    transition:
        opacity var(--mtk-motion-duration) var(--mtk-motion-ease),
        transform var(--mtk-motion-duration) var(--mtk-motion-ease);
    will-change: opacity, transform;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-right{
    opacity: 0;
    transform: translate3d(42px,0,0);
    transition:
        opacity var(--mtk-motion-duration) var(--mtk-motion-ease),
        transform var(--mtk-motion-duration) var(--mtk-motion-ease);
    will-change: opacity, transform;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-scale{
    opacity: 0;
    transform: scale(.965);
    transition:
        opacity .9s var(--mtk-motion-ease),
        transform 1s var(--mtk-motion-ease);
    will-change: opacity, transform;
}

/* Estado visible */
body.mtk-redesign-page.mtk-motion-ready .mtk-reveal.is-visible,
body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-left.is-visible,
body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-right.is-visible,
body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-scale.is-visible{
    opacity: 1;
    transform: none;
}

/* Delays para grupos */
body.mtk-redesign-page .mtk-delay-1{ transition-delay: .07s !important; }
body.mtk-redesign-page .mtk-delay-2{ transition-delay: .14s !important; }
body.mtk-redesign-page .mtk-delay-3{ transition-delay: .21s !important; }
body.mtk-redesign-page .mtk-delay-4{ transition-delay: .28s !important; }
body.mtk-redesign-page .mtk-delay-5{ transition-delay: .35s !important; }
body.mtk-redesign-page .mtk-delay-6{ transition-delay: .42s !important; }

/* ---------------------------------------------------------
   Hero: entrada inicial más elegante
--------------------------------------------------------- */
body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion{
    opacity: 0;
    transform: translate3d(0,24px,0);
}

body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion.is-visible{
    opacity: 1;
    transform: none;
    transition:
        opacity .9s var(--mtk-motion-ease),
        transform .9s var(--mtk-motion-ease);
}

body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion.mtk-hero-delay-1{
    transition-delay: .08s;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion.mtk-hero-delay-2{
    transition-delay: .18s;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion.mtk-hero-delay-3{
    transition-delay: .30s;
}

/* ---------------------------------------------------------
   Imágenes
--------------------------------------------------------- */
body.mtk-redesign-page .mtk-motion-image{
    overflow: hidden;
}

body.mtk-redesign-page .mtk-motion-image > img,
body.mtk-redesign-page img.mtk-motion-image{
    transition:
        transform 1.1s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

/* Hover muy sutil, solo en dispositivos con hover real */
@media (hover:hover) and (pointer:fine){
    body.mtk-redesign-page .mtk-motion-image:hover > img,
    body.mtk-redesign-page img.mtk-motion-image:hover{
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   Líneas / separadores
--------------------------------------------------------- */
body.mtk-redesign-page.mtk-motion-ready .mtk-line-reveal{
    position: relative;
}

body.mtk-redesign-page.mtk-motion-ready .mtk-line-reveal::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .22;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--mtk-motion-ease);
}

body.mtk-redesign-page.mtk-motion-ready .mtk-line-reveal.is-visible::after{
    transform: scaleX(1);
}

/* ---------------------------------------------------------
   Botones / CTA
--------------------------------------------------------- */
body.mtk-redesign-page .mtk-header-cta,
body.mtk-redesign-page .mtk-final-circle,
body.mtk-redesign-page .mtk-about-inline-link,
body.mtk-redesign-page .mtk-mobile-contact{
    transition:
        transform .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        opacity .28s ease;
}

@media (hover:hover) and (pointer:fine){
    body.mtk-redesign-page .mtk-header-cta:hover{
        transform: translateY(-2px);
    }

    body.mtk-redesign-page .mtk-final-circle:hover{
        transform: translateY(-5px) rotate(-1deg);
    }
}

/* ---------------------------------------------------------
   Accesibilidad
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    body.mtk-redesign-page *,
    body.mtk-redesign-page *::before,
    body.mtk-redesign-page *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    body.mtk-redesign-page.mtk-motion-ready .mtk-reveal,
    body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-left,
    body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-right,
    body.mtk-redesign-page.mtk-motion-ready .mtk-reveal-scale,
    body.mtk-redesign-page.mtk-motion-ready .mtk-hero-motion{
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   MTK — LCP DEL HERO EN MOVIL
   Evita ocultar o animar el H1 y su contenedor durante la
   primera carga. Respaldo CSS aunque el JS esté cacheado.
   El resto del sitio y el hero de escritorio no se modifican.
========================================================= */
@media (max-width: 767px) {
    body.mtk-redesign-page .mtk-main-hero .mtk-hero-copy,
    body.mtk-redesign-page .mtk-main-hero h1 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}