/* ============================================
   SYNERGIA COPRO - Animations
   ============================================ */

/* --- Scroll Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-reveal),
                transform var(--transition-reveal);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    transform: translateX(-40px);
}

.reveal--left.visible {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(40px);
}

.reveal--right.visible {
    transform: translateX(0);
}

.reveal--scale {
    transform: scale(0.95);
}

.reveal--scale.visible {
    transform: scale(1);
}

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* --- Hero Entrance --- */
.hero__badge,
.hero__title,
.hero__subtitle,
.hero__buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__badge { animation-delay: 0.1s; }
.hero__title { animation-delay: 0.3s; }
.hero__subtitle { animation-delay: 0.5s; }
.hero__buttons { animation-delay: 0.7s; }

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

/* --- Counter Animation --- */
.counter-animate {
    transition: all 0.3s ease;
}

/* --- Floating particles (decorative) --- */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: 0s; }
.particle:nth-child(2) { left: 25%; animation-duration: 20s; animation-delay: -5s; }
.particle:nth-child(3) { left: 40%; animation-duration: 18s; animation-delay: -3s; }
.particle:nth-child(4) { left: 55%; animation-duration: 22s; animation-delay: -8s; }
.particle:nth-child(5) { left: 70%; animation-duration: 16s; animation-delay: -2s; }
.particle:nth-child(6) { left: 85%; animation-duration: 19s; animation-delay: -6s; }

@keyframes particleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* --- Pulse ring (for CTAs) --- */
.pulse-ring {
    position: relative;
}

.pulse-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--color-sapphire);
    opacity: 0;
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* --- Shimmer effect (loading state) --- */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-gray-100) 25%,
        var(--color-gray-200) 50%,
        var(--color-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__badge,
    .hero__title,
    .hero__subtitle,
    .hero__buttons {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .particle {
        animation: none;
        display: none;
    }

    .pulse-ring::after {
        animation: none;
        display: none;
    }
}