/* ============================================
   AutoFollowUp Landing — animations.css
   Loaded with: media="(prefers-reduced-motion: no-preference)"
   ============================================ */

/* --- Reveal on scroll --- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero entrance --- */
.hero-content {
    animation: heroFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-visual {
    animation: heroSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* --- Mockup float --- */
.mockup {
    animation: mockupFloat 4s ease-in-out infinite;
}
@keyframes mockupFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Button pulse on hero --- */
.hero .btn-primary {
    position: relative;
}
.hero .btn-primary::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: rgba(255,255,255,0.2);
    opacity: 0;
    animation: btnPulse 2.5s ease-in-out infinite 1.5s;
}
@keyframes btnPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* --- Step number pop --- */
.step-number {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step:hover .step-number {
    transform: scale(1.1);
}

/* --- Stat counter emphasis --- */
.stat-number {
    transition: transform 0.3s ease;
}
.stat-card:hover .stat-number {
    transform: scale(1.05);
}

/* --- Feature icon hover --- */
.feature-icon svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-card:hover .feature-icon svg {
    transform: scale(1.15) rotate(-3deg);
}

/* --- Early badge shimmer --- */
.early-badge {
    position: relative;
    overflow: hidden;
}
.early-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}