/* ============================================
   TECNOKING - ANIMATIONS
   ============================================ */

/* ── AOS-like scroll reveal (más suave) ── */
[data-aos] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1),
                transform 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform, opacity;
}

[data-aos="fade-up"]    { transform: translateY(40px); }
[data-aos="fade-right"] { transform: translateX(-40px); }
[data-aos="fade-left"]  { transform: translateX(40px); }
[data-aos="zoom-in"]    { transform: scale(0.92); }
[data-aos="flip-up"]    { transform: rotateX(15deg) translateY(25px); }
[data-aos="fade-down"]  { transform: translateY(-25px); }

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

/* ── Particles de fondo del hero (optimizado) ── */
.tk-hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tk-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #FFE600;
    border-radius: 50%;
    animation: particleFloat 10s linear infinite;
    opacity: 0;
    will-change: transform;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    15% {
        opacity: 0.5;
    }
    85% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-10vh) translateX(30px);
        opacity: 0;
    }
}

/* ── Counter animation (más rápida y suave) ── */
.tk-stat-number.counting {
    animation: countPop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes countPop {
    0%   { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ── Hover en cards de servicio (más fluido) ── */
.tk-service-card:hover .tk-service-icon {
    animation: iconPop 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes iconPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1.02); }
}

/* ── Navbar entrance (más rápida) ── */
.tk-navbar {
    animation: navbarEntrance 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) both;
}
@keyframes navbarEntrance {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Page load fade (más rápido) ── */
body {
    animation: pageLoad 0.3s ease both;
}
@keyframes pageLoad {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Glitch effect para textos destacados (más limpio) ── */
.tk-glitch {
    position: relative;
    display: inline-block;
}
.tk-glitch::before,
.tk-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip: rect(0, 9999px, 0, 0);
    color: #FFE600;
    opacity: 0.6;
    animation: glitch 3s infinite;
}
.tk-glitch::before {
    text-shadow: -2px 0 #E6D000;
    animation-delay: 0.1s;
}
.tk-glitch::after {
    text-shadow: 2px 0 #FFF44F;
    animation-delay: 0.2s;
}

@keyframes glitch {
    0%, 100% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
    5% { clip: rect(12px, 9999px, 48px, 0); transform: translate(-1px, 1px); }
    10% { clip: rect(80px, 9999px, 130px, 0); transform: translate(2px, -1px); }
    15% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
    20% { clip: rect(45px, 9999px, 78px, 0); transform: translate(-1px, -1px); }
    25% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
}

/* ── Botones con transiciones suaves ── */
.tk-btn-gold, .tk-btn-yellow, .tk-btn-whatsapp, 
.tk-service-btn, .tk-filter-btn, .tk-social-btn {
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* ── Hover en cards general (más natural) ── */
.tk-service-card, .tk-process-card, .tk-value-card, 
.tk-portfolio-card, .tk-team-card, .tk-stat-card,
.tk-mision-card, .tk-contact-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1),
                border-color 0.2s ease,
                box-shadow 0.3s ease;
    will-change: transform;
}

/* ── FadeInUp genérico ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shimmer para botones (efecto brillo) ── */
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ── Pulse suave para el hero glow ── */
@keyframes heroPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(1.2); opacity: 0.7; }
}

/* ── Flotación del logo ── */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-12px); }
}

/* ── Scroll wheel animation ── */
@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}