/* ══════════════════════════════════════════════════════════
   American Beneficiary — Animations
   Lightweight CSS-only animations. Never hides content.
   ══════════════════════════════════════════════════════════ */

/* ─── Hero Entrance Animations ──────────────────── */
.hero .hero__label {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero .hero__title {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero .hero__subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.hero .hero__actions {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.hero .hero__trust {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.hero .scroll-indicator {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

/* Inner hero entrance */
.inner-hero .section-label {
    animation: fadeInUp 0.6s ease 0.1s both;
}
.inner-hero__title {
    animation: fadeInUp 0.6s ease 0.2s both;
}
.inner-hero__subtitle {
    animation: fadeInUp 0.6s ease 0.35s both;
}

/* ─── Keyframes ─────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes drawLine {
    from { width: 0; }
    to   { width: 100%; }
}

/* ─── Button Glow Pulse ─────────────────────────── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(212, 168, 67, 0); }
}

/* ─── Floating Elements ─────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ─── Shimmer (loading placeholders) ────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 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;
    }
    
    /* Show scrollytelling elements immediately */
    .problem .section-label,
    .problem .section-title,
    .problem__narrative,
    .problem__cost-item,
    .problem__total {
        opacity: 1 !important;
    }
}
