/* ===================================
   Animation Classes — Scroll + Transitions
   =================================== */

/* Entrance animation states (before GSAP reveals) */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-anim="fade-up"] {
    transform: translateY(40px);
}

[data-anim="fade-in"] {
    transform: none;
}

[data-anim="fade-left"] {
    transform: translateX(-40px);
}

[data-anim="fade-right"] {
    transform: translateX(40px);
}

/* Revealed state (set by GSAP) */
[data-anim].is-visible {
    opacity: 1;
    transform: none;
}

/* Parallax transition zones */
.parallax-transition {
    position: relative;
}

/* Micro-interactions (CSS-only) */
.btn {
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                padding var(--duration-normal) var(--ease-out);
}

.card,
.pricing-card {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

/* Accordion animation placeholder — GSAP handles height */
.accordion-content {
    overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1;
        transform: none;
    }

    .btn,
    .card,
    .pricing-card {
        transition: none;
    }

    .wa-anim-msg,
    .wa-anim-gap,
    .wa-anim-alert,
    .wa-anim-tag,
    .wa-anim-analysis,
    .wa-anim-analysis-item,
    .hero-wa__msg,
    .hero-wa__gap,
    .hero-wa__alert {
        opacity: 1;
        transform: none;
    }

    .wa-typing {
        display: none;
    }

    .wa-bubble--hidden {
        max-height: none;
        opacity: 1;
        padding-top: revert;
        padding-bottom: revert;
        margin: revert;
        overflow: visible;
    }

    /* Hero floating cards — show immediately, no parallax */
    .hero-float {
        opacity: 1;
        transform: none !important;
    }

    /* Dashboard — show immediately */
    .dashboard-reveal {
        opacity: 1;
    }

    .dashboard-window,
    [data-dash-el],
    .dashboard-chart,
    .dashboard-insight,
    .dashboard-charts-row {
        opacity: 1;
        transform: none;
    }

    /* Feature cards — always expanded */
    .feature-card__description {
        max-height: none;
        opacity: 1;
        margin-top: 12px;
    }

    .feature-card {
        transition: none;
    }

    .avatar--bird {
        animation: none;
    }
}