/* ==========================================================================
   animations.css — Scroll Reveal, Keyframes, Reduced Motion
   Uses Intersection Observer via assets/js/animations.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17. Scroll Reveal Animations
   -------------------------------------------------------------------------- */
/* Elements are only hidden once JS is confirmed available (no-JS fallback) */
.js .reveal {
    opacity: 0;
    will-change: transform, opacity;
}
.reveal.is-visible {
    animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered delays based on data-delay attribute */
.reveal[data-delay="1"].is-visible { animation-delay: 0.1s; }
.reveal[data-delay="2"].is-visible { animation-delay: 0.2s; }
.reveal[data-delay="3"].is-visible { animation-delay: 0.3s; }
.reveal[data-delay="4"].is-visible { animation-delay: 0.4s; }
.reveal[data-delay="5"].is-visible { animation-delay: 0.5s; }

/* Direction variants */
.reveal[data-anim="fade-left"].is-visible {
    animation-name: fadeLeft;
}
.reveal[data-anim="fade-right"].is-visible {
    animation-name: fadeRight;
}
.reveal[data-anim="scale"].is-visible {
    animation-name: scaleIn;
}
.reveal[data-anim="fade-up"].is-visible {
    animation-name: fadeUp;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Non-reveal keyframes */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(242, 184, 75, 0); }
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; }
}