/* ==========================================================================
   Animations — Scroll reveals, counters, hover effects
   ========================================================================== */

/* --- Hero Text Reveal --- */
.animate-hero {
    opacity: 0;
    transform: translateY(24px);
    animation: heroReveal 0.7s ease forwards;
    animation-delay: var(--delay, 0s);
}

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


/* --- Hero Cursor Blink --- */
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero__cursor {
    animation: cursorBlink 0.8s step-end infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-response__live-dot {
    animation: livePulse 2s ease-in-out infinite;
}


/* --- Scroll Reveal --- */
/* Scoped under .js so crawlers/no-JS browsers see opacity: 1 */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--delay, 0s);
}

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


/* --- Directional Reveals --- */
.js .reveal.reveal--from-left {
    transform: translateX(-40px);
}

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

.js .reveal.reveal--from-left.reveal--visible,
.js .reveal.reveal--from-right.reveal--visible {
    opacity: 1;
    transform: translateX(0);
}


/* --- Reveal Stagger (parent container) --- */
.js .reveal-stagger > .reveal:nth-child(1) { --delay: 0s; }
.js .reveal-stagger > .reveal:nth-child(2) { --delay: 0.15s; }
.js .reveal-stagger > .reveal:nth-child(3) { --delay: 0.3s; }
.js .reveal-stagger > .reveal:nth-child(4) { --delay: 0.45s; }
.js .reveal-stagger > .reveal:nth-child(5) { --delay: 0.6s; }
.js .reveal-stagger > .reveal:nth-child(6) { --delay: 0.75s; }


/* --- CTA Button Pulse --- */
.btn--pulse {
    position: relative;
}

.btn--pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: var(--color-orange);
    opacity: 0;
    z-index: -1;
    animation: btnPulse 2.5s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(1.06);
    }
}




/* --- Hero Ambient Glow --- */
.hero::before {
    animation: heroGlow 10s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-40px, 30px) scale(1.15);
        opacity: 1;
    }
}

/* --- Gradient Text — Hero Accent --- */
.hero__title-accent {
    background: linear-gradient(135deg, var(--color-teal), #66ffbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- Stat Counter Animation --- */
.stat-block__number {
    transition: color 0.3s ease;
}

.stat-block__number.counting {
    color: var(--color-teal);
}


/* --- Card hover lift (global) --- */
.pricing-card,
.blog-card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card:hover,
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}


/* --- Staggered children --- */
.steps-grid .step-card:nth-child(1) { --delay: 0s; }
.steps-grid .step-card:nth-child(2) { --delay: 0.15s; }
.steps-grid .step-card:nth-child(3) { --delay: 0.3s; }

.pricing-grid .pricing-card:nth-child(1) { --delay: 0s; }
.pricing-grid .pricing-card:nth-child(2) { --delay: 0.1s; }
.pricing-grid .pricing-card:nth-child(3) { --delay: 0.2s; }


/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .animate-hero {
        animation: none;
        opacity: 1;
        transform: none;
    }

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

    .js .reveal.reveal--from-left,
    .js .reveal.reveal--from-right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-timeline__panel {
        transition: none;
    }

    .btn--pulse::after {
        animation: none;
    }

    .hero::before {
        animation: none;
    }

    .hero__cursor {
        animation: none;
        opacity: 1;
    }

    .hero-response {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-response__content {
        opacity: 1;
        transition: none;
    }

    .hero-response__live-dot {
        animation: none;
        opacity: 1;
    }

    .hero-response__user-bubble {
        opacity: 1;
        transition: none;
    }

    .pricing-card,
    .blog-card {
        transition: box-shadow var(--transition);
    }

    .pricing-card:hover,
    .blog-card:hover {
        transform: none;
    }
}