/* =====================================================================
   ANIMATE — Digital Function Animation Framework
===================================================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(var(--distance, 20px)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(calc(var(--distance, 20px) * -1)); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(calc(var(--distance, 20px) * -1)); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(var(--distance, 20px)); }
    to   { opacity: 1; transform: translateX(0); }
}

.reveal {
    opacity: 0;
    will-change: opacity, transform;
}

.reveal.visible {
    animation-name: fadeIn;
    animation-duration: var(--duration, .6s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.reveal.visible[data-animation="fadeInUp"]    { animation-name: fadeInUp; }
.reveal.visible[data-animation="fadeInDown"]  { animation-name: fadeInDown; }
.reveal.visible[data-animation="fadeInLeft"]  { animation-name: fadeInLeft; }
.reveal.visible[data-animation="fadeInRight"] { animation-name: fadeInRight; }

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.visible {
        animation: none;
        opacity: 1;
        transform: none;
    }
}