/* =========================================================
   Scroll reveal system
   Everything is gated behind .js so content stays visible
   if JavaScript fails or is disabled.
   ========================================================= */

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

/* ---------- 1. Standalone fade-in: data-reveal ---------- */
/* Variants: data-reveal="up" (default) | "fade" | "left" | "right" */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.js [data-reveal='fade'] {
    transform: none;
}
.js [data-reveal='left'] {
    transform: translate3d(-28px, 0, 0);
}
.js [data-reveal='right'] {
    transform: translate3d(28px, 0, 0);
}

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

/* ---------- 2. Grouped reveal: data-reveal-group ---------- */
/* The group is observed. When it enters view, its children animate
   using their own --reveal-delay for a staggered sequence. */
.js [data-reveal-group] [data-reveal-child] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.js [data-reveal-group] [data-reveal-child='left'] {
    transform: translate3d(-24px, 0, 0);
}
.js [data-reveal-group].is-visible [data-reveal-child] {
    opacity: 1;
    transform: none;
}

/* ---------- 3. Gold line that draws itself ---------- */
.js [data-reveal-group] [data-reveal-line] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform;
}
.js [data-reveal-group].is-visible [data-reveal-line] {
    transform: scaleX(1);
}

/* ---------- 4. Image wipe: data-reveal-child="mask" ---------- */
/* The element is uncovered left to right while the image inside
   settles from a slight zoom. */
.js [data-reveal-group] [data-reveal-child='mask'] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: clip-path;
}
.js [data-reveal-group] [data-reveal-child='mask'] img {
    transform: scale(1.15);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal-group].is-visible [data-reveal-child='mask'] {
    clip-path: inset(0 0 0 0);
}
.js [data-reveal-group].is-visible [data-reveal-child='mask'] img {
    transform: scale(1);
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-reveal-group] [data-reveal-child],
    .js [data-reveal-group] [data-reveal-line] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .js [data-reveal-group] [data-reveal-child='mask'] {
        clip-path: none;
    }
    .js [data-reveal-group] [data-reveal-child='mask'] img {
        transform: none;
        transition: none;
    }
}