/* ==========================================================================
   Scroll-triggered reveal animations - sitewide.
   assets/js/scroll-animations.js finds sections by their existing class
   names, tags them with data-reveal, and flips them to .is-revealed via
   IntersectionObserver. This file only owns the two visual states; it knows
   nothing about which elements get tagged.
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal="up"] {
    transform: translateY(36px);
}

[data-reveal="left"] {
    transform: translateX(-44px);
}

[data-reveal="right"] {
    transform: translateX(44px);
}

[data-reveal="scale"] {
    transform: scale(0.94);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* A little extra life on top of the plain reveal above - the icon inside a
   just-revealed stat/badge/credential springs in a beat after its own item
   has landed, rather than the icon and its text arriving as one flat block. */
[data-reveal].is-revealed .hero-stat-icon,
[data-reveal].is-revealed .treatment-awards-icon,
[data-reveal].is-revealed .why-choose-feature-icon,
[data-reveal].is-revealed .getstarted-feature-icon {
    animation: hmc-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.15s;
}

@keyframes hmc-icon-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Respect the OS-level reduced-motion setting - content simply appears,
   no motion, no delay stacking. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    [data-reveal].is-revealed .hero-stat-icon,
    [data-reveal].is-revealed .treatment-awards-icon,
    [data-reveal].is-revealed .why-choose-feature-icon,
    [data-reveal].is-revealed .getstarted-feature-icon {
        animation: none !important;
    }
}