/* =========================================================
   SmileAge — Shared subtle scroll-reveal animations (styles)
   -----------------------------------------------------------
   Pairs with js/scroll-animate.js. Only adds the transition/
   initial-state rules needed for the reveal — it does not
   redeclare any visual property (color, size, layout) already
   owned by another stylesheet, so this is safe to load on any
   page alongside programs.css / events.css / research.css.
   All effects are short (<= 1s), run once, and are skipped
   entirely under prefers-reduced-motion via a media query.
   ========================================================= */

@property --pct {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

[data-anim] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--sa-anim-delay, 0s),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--sa-anim-delay, 0s);
}

[data-anim].sa-anim-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Reveal variants ----------
   Default [data-anim] (no value, or data-anim="up") fades up. Opt into
   a different entrance by giving the attribute a value; JS behavior is
   unchanged (it only checks hasAttribute), so these are pure-CSS variants. */
[data-anim="left"] {
    transform: translateX(-32px);
}

[data-anim="left"].sa-anim-in {
    transform: translateX(0);
}

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

[data-anim="right"].sa-anim-in {
    transform: translateX(0);
}

[data-anim="zoom"] {
    transform: scale(0.9);
}

[data-anim="zoom"].sa-anim-in {
    transform: scale(1);
}

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

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

.sa-rep-gauge[data-anim-meter] {
    transition: --pct 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-rep-fill[data-anim-meter] {
    width: 0;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-evd-funnel-fill[data-anim-meter] {
    width: 0;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-imp-fill[data-anim-meter] {
    width: 0;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-bar[data-anim-meter] {
    width: 0;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Home page: staggered reveal ----------
   Same [data-anim] fade-up, but items in the same row/list get an
   incremental delay via --sa-anim-delay (inherited custom property)
   so grouped cards cascade in instead of popping together. Works
   whether [data-anim] sits on the nth-child itself or a descendant. */
.stats-bar .col:nth-child(1),
.feature-grid .col:nth-child(1),
.programs-section .row-cols-md-3 > .col:nth-child(1),
.campaign-section .row-cols-md-3 > .col:nth-child(1),
.event-list .event-item:nth-child(1),
.theory-cards-row > .col:nth-child(1),
.values-list-mobile .values-list-item:nth-child(1),
.about-section .row.mt-4 > .col-lg-6:nth-child(1),
.empower-section .row.g-4 > .col-lg-6:nth-child(1) {
    --sa-anim-delay: 0s;
}

.stats-bar .col:nth-child(2),
.feature-grid .col:nth-child(2),
.programs-section .row-cols-md-3 > .col:nth-child(2),
.campaign-section .row-cols-md-3 > .col:nth-child(2),
.event-list .event-item:nth-child(2),
.theory-cards-row > .col:nth-child(2),
.values-list-mobile .values-list-item:nth-child(2),
.about-section .row.mt-4 > .col-lg-6:nth-child(2),
.empower-section .row.g-4 > .col-lg-6:nth-child(2) {
    --sa-anim-delay: 0.09s;
}

.stats-bar .col:nth-child(3),
.feature-grid .col:nth-child(3),
.programs-section .row-cols-md-3 > .col:nth-child(3),
.campaign-section .row-cols-md-3 > .col:nth-child(3),
.event-list .event-item:nth-child(3),
.theory-cards-row > .col:nth-child(3),
.values-list-mobile .values-list-item:nth-child(3) {
    --sa-anim-delay: 0.18s;
}

.stats-bar .col:nth-child(4),
.feature-grid .col:nth-child(4),
.theory-cards-row > .col:nth-child(4),
.values-list-mobile .values-list-item:nth-child(4) {
    --sa-anim-delay: 0.27s;
}

.stats-bar .col:nth-child(5),
.theory-cards-row > .col:nth-child(5),
.values-list-mobile .values-list-item:nth-child(5) {
    --sa-anim-delay: 0.36s;
}

.stats-bar .col:nth-child(6) {
    --sa-anim-delay: 0.45s;
}

.values-text-1 { --sa-anim-delay: 0s; }
.values-text-2 { --sa-anim-delay: 0.09s; }
.values-text-3 { --sa-anim-delay: 0.18s; }
.values-text-4 { --sa-anim-delay: 0.27s; }
.values-text-5 { --sa-anim-delay: 0.36s; }

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

    .sa-rep-gauge[data-anim-meter],
    .sa-rep-fill[data-anim-meter],
    .sa-imp-fill[data-anim-meter],
    .progress-bar[data-anim-meter] {
        transition: none;
    }
}