/* ==========================================================================
   Scroll Animations
   CSS classes toggled by Intersection Observer (scroll-animations.js).
   Elements start hidden/shifted, then transition to visible when
   they enter the viewport.
   ========================================================================== */

/* ---- Base state: hidden, shifted down ---- */
.w250-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--w250-anim-duration) ease,
                transform var(--w250-anim-duration) ease;
}

/* ---- Visible state: triggered by JS adding .is-visible ---- */
.w250-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Variant: slide from left ---- */
.w250-animate--left {
    transform: translateX(-40px) translateY(0);
}
.w250-animate--left.is-visible {
    transform: translateX(0) translateY(0);
}

/* ---- Variant: slide from right ---- */
.w250-animate--right {
    transform: translateX(40px) translateY(0);
}
.w250-animate--right.is-visible {
    transform: translateX(0) translateY(0);
}

/* ---- Variant: scale up ---- */
.w250-animate--scale {
    transform: scale(0.95);
    opacity: 0;
}
.w250-animate--scale.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* ---- Variant: fade only (no movement) ---- */
.w250-animate--fade {
    transform: none;
    opacity: 0;
}
.w250-animate--fade.is-visible {
    opacity: 1;
}

/* ---- Stagger children (galleries, grids) ---- */
.w250-animate--stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.w250-animate--stagger.is-visible > *:nth-child(1)  { transition-delay: 0s;    opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(2)  { transition-delay: 0.1s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(3)  { transition-delay: 0.2s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(4)  { transition-delay: 0.3s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(5)  { transition-delay: 0.4s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(6)  { transition-delay: 0.5s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(7)  { transition-delay: 0.6s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(8)  { transition-delay: 0.7s;  opacity: 1; transform: translateY(0); }
.w250-animate--stagger.is-visible > *:nth-child(n+9) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }


/* ---- Variant: background reveal (color wash lifts) ---- */
.w250-animate--reveal .reveal__overlay {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.w250-animate--reveal.is-visible .reveal__overlay {
    transform: scaleX(0);
    transform-origin: right;
}


/* ==========================================================================
   Accessibility: Reduced Motion
   Respects the user's OS-level "reduce motion" preference.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .w250-animate,
    .w250-animate--left,
    .w250-animate--right,
    .w250-animate--scale,
    .w250-animate--fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .w250-animate--stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .w250-animate--reveal .reveal__overlay {
        transform: scaleX(0);
        transition: none;
    }
}