/* =====================================================
   SCROLL REVEAL — smooth left/right → center reveal
   ===================================================== */

:root {
    --reveal-duration: 0.85s;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Header elements: fade up ---- */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---- Zigzag: copy + visual start hidden ---- */
.zigzag-row .zigzag-copy,
.zigzag-row .zigzag-visual {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
}

/* Normal row: copy slides from LEFT, image from RIGHT */
.zigzag-row:not(.is-reverse) .zigzag-copy {
    transform: translate3d(-80px, 0, 0);
    transition-delay: 0ms;
}
.zigzag-row:not(.is-reverse) .zigzag-visual {
    transform: translate3d(80px, 0, 0);
    transition-delay: 120ms;
}

/* Reversed row: image slides from LEFT, copy from RIGHT */
.zigzag-row.is-reverse .zigzag-visual {
    transform: translate3d(-80px, 0, 0);
    transition-delay: 0ms;
}
.zigzag-row.is-reverse .zigzag-copy {
    transform: translate3d(80px, 0, 0);
    transition-delay: 120ms;
}

/* ---- Revealed state ---- */
.zigzag-row.is-revealed .zigzag-copy,
.zigzag-row.is-revealed .zigzag-visual {
    opacity: 1;
    transform: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    .zigzag-row .zigzag-copy,
    .zigzag-row .zigzag-visual {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}