/* ============================================
   ANIMATIONS — Scroll reveals + micro-interactions
   ============================================ */

/* === SCROLL REVEAL BASE === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-smooth),
        transform var(--duration-reveal) var(--ease-smooth);
}

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

/* Variantes de dirección */
.reveal--left {
    transform: translateX(-30px);
}

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

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

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

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

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

/* Delays para secuencias */
.reveal--delay-1 {
    transition-delay: 100ms;
}

.reveal--delay-2 {
    transition-delay: 200ms;
}

.reveal--delay-3 {
    transition-delay: 300ms;
}

.reveal--delay-4 {
    transition-delay: 400ms;
}

.reveal--delay-5 {
    transition-delay: 500ms;
}

.reveal--delay-6 {
    transition-delay: 600ms;
}

/* === MICRO ANIMATIONS === */

/* Underline expand on hover */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sage-green);
    transition: width var(--duration-base) var(--ease-smooth);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Breathing glow for important elements */
@keyframes breathe {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(60, 179, 113, 0.15);
    }

    50% {
        box-shadow: 0 0 30px 5px rgba(60, 179, 113, 0.1);
    }
}

.animate-breathe {
    animation: breathe 4s ease-in-out infinite;
}

/* Gentle shake for attention */
@keyframes gentle-shake {

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

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* Counter animation for stats */
@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Leaf float decoration */
@keyframes leaf-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero__mockup {
        animation: none;
    }
}