/* Coreografias Pesadas y Especificas */
/* Text Mask Reveal Animations */
.animate-hero-title {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translateY(40px);
    animation: revealHeroText 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, titleBounceRadar 12.5s infinite ease-in-out 1.5s;
    animation-delay: 0.3s, 1.5s;
}

#catalogo-titulo, #por-que-elegir-titulo, #cta-servicios-titulo, .animate-title-radar {
    animation: titleBounceRadar 12.5s infinite ease-in-out;
}

@keyframes titleBounceRadar {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(-40px) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    3% { opacity: 1; transform: translateX(0) translateY(0) scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    6% { transform: translateX(0) translateY(-20px) scale(1); }
    9% { transform: translateX(0) translateY(0) scale(1); }
    12% { transform: translateX(0) translateY(-12px) scale(1); }
    15% { transform: translateX(0) translateY(0) scale(1); }
    18% { transform: translateX(0) translateY(-7px) scale(1); }
    20% { transform: translateX(0) translateY(0) scale(1); }
    22% { transform: translateX(0) translateY(-4px) scale(1); }
    23% { transform: translateX(0) translateY(0) scale(1); }
    24% { transform: translateX(0) translateY(-2px) scale(1); }
    25% { transform: translateX(0) translateY(0) scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    /* 2 seconds text pulse (+15px equivalent / scale(1.12)) */
    33.3% { transform: translateX(0) translateY(0) scale(1.12); }
    41.6% { transform: translateX(0) translateY(0) scale(1); }
    75% { opacity: 1; transform: translateX(0) translateY(0) scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    80%, 100% { opacity: 0; transform: translateX(0) translateY(-20px) scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.animate-hero-desc {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translateY(30px);
    animation: revealHeroText 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes revealHeroText {
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateY(0);
    }
}

.animate-hero-badge {
    opacity: 0;
    transform: scale(0.85);
    animation: revealHeroBadge 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes revealHeroBadge {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-hero-btn1 {
    opacity: 0;
    transform: translateY(20px);
    animation: revealHeroBtn 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.7s;
}

.animate-hero-btn2 {
    opacity: 0;
    transform: translateY(20px);
    animation: revealHeroBtn 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.8s;
}

@keyframes revealHeroBtn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tracking Timeline Animations */
@keyframes timelineGoldPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.4), 0 0 20px rgba(255, 204, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 204, 0, 0.9), 0 0 35px rgba(255, 204, 0, 0.5);
        transform: scale(1.1);
    }
}

.animate-gold-pulse {
    animation: timelineGoldPulse 2.5s infinite ease-in-out;
}

@keyframes timelineLineShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.animate-line-shimmer {
    animation: timelineLineShimmer 3s infinite linear;
}