/* =========================================================
   scroll-animations.css
   Subtle, lightweight scroll-reveal animations.
   Pure presentational logic — no text content is touched.
   Paired with scroll-animations.js (IntersectionObserver).
   ========================================================= */

/* ---------- Fade + slight rise ---------- */
.sa-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1),
                transform .7s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

/* ---------- Fade + gentle horizontal slide ---------- */
.sa-reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1),
                transform .7s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

.sa-reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1),
                transform .7s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

/* ---------- Fade + soft scale-in (used for cards/tiles) ---------- */
.sa-reveal-scale {
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transition: opacity .65s cubic-bezier(.16,.84,.44,1),
                transform .65s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

/* ---------- Section headings: smooth, slower reveal ---------- */
.sa-heading {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s cubic-bezier(.16,.84,.44,1),
                transform .8s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

/* ---------- Visible state ---------- */
.sa-reveal.sa-visible,
.sa-reveal-left.sa-visible,
.sa-reveal-right.sa-visible,
.sa-reveal-scale.sa-visible,
.sa-heading.sa-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .sa-reveal,
    .sa-reveal-left,
    .sa-reveal-right,
    .sa-reveal-scale,
    .sa-heading {
        opacity: 1;
        transform: none;
        transition: none;
    }
}