/* Scroll reveal helpers (used by /js/_animation.js)
   Elements start hidden with .reveal-hidden and become visible when .reveal-active is added. */
.reveal-hidden {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

.reveal-active {
    opacity: 1;
    transform: translate(0);
}

/* Directional variants (data-anim class is added on reveal)
   Use attribute selectors so the initial transform matches the intended direction. */
.reveal-hidden[data-anim="anim-fade-in"] {
    transform: none;
}

.reveal-hidden[data-anim="anim-fade-up"] {
    transform: translateY(16px);
}

.reveal-hidden[data-anim="anim-zoom-in"] {
    transform: scale(0.98);
}

.reveal-hidden[data-anim="anim-slide-left"] {
    transform: translateX(-18px);
}

.reveal-hidden[data-anim="anim-slide-right"] {
    transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-hidden {
        transition: none;
        transform: none;
    }
}