/* ==========================================================================
   Animations — scroll reveal, counters, transitions
   ========================================================================== */

.js-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--sl-transition-slow), transform var(--sl-transition-slow);
}
.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.js-reveal--delay-1 { transition-delay: 90ms; }
.js-reveal--delay-2 { transition-delay: 180ms; }
.js-reveal--delay-3 { transition-delay: 270ms; }
.js-reveal--delay-4 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-reveal, .sl-hero__crystal--1, .sl-hero__crystal--2, .sl-hero__crystal--3 {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.sl-fade-in { animation: sl-fade-in 600ms ease both; }
@keyframes sl-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}