/* ============================================================
   B-5 — Scroll & 3D interaction layer
   Adds: scroll-triggered 3D reveal, staggered grid entrances,
   pointer-driven card tilt, and subtle scroll parallax.
   Pure CSS + vanilla JS (see scroll-fx.js) — no external deps.
   Respects prefers-reduced-motion throughout.
   ============================================================ */

main#main section {
    perspective: 1400px;
}

/* ---- Scroll-triggered 3D reveal ----
   .scroll-trigger already exists in the markup as a hook that
   main.js flips to "visible" via IntersectionObserver — this file
   is what actually gives that transition its motion. */
.scroll-trigger {
    opacity: 0;
    transform: translateY(56px) rotateX(12deg);
    transform-origin: 50% 100%;
    transition:
        opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1),
        transform 1s cubic-bezier(0.16, 0.84, 0.44, 1);
    transition-delay: calc(var(--fx-i, 0) * 70ms);
    will-change: transform, opacity;
}
.scroll-trigger.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* ---- Pointer-driven 3D tilt for cards ----
   scroll-fx.js applies inline transforms on pointermove; this
   just sets up the 3D context and a smooth spring-back. */
.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.tilt-card.tilt-active {
    transition: transform 0.12s ease-out;
}
.tilt-card > * {
    transform: translateZ(0);
}

/* ---- Scroll parallax layers ----
   scroll-fx.js updates --fx-parallax on these elements as the
   page scrolls; translate is applied here so it stays GPU-cheap. */
.fx-parallax {
    transform: translate3d(0, calc(var(--fx-parallax, 0) * 1px), 0);
    will-change: transform;
}

/* Full-bleed media (backgrounds/videos) get a gentle zoom instead of a
   translate — a translate on an edge-to-edge layer can reveal a gap at
   the container's border, a scale never does (it only ever zooms in). */
.fx-parallax-scale {
    transform: scale(calc(1 + var(--fx-scale, 0)));
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-trigger {
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }
    .tilt-card,
    .tilt-card.tilt-active {
        transition: none !important;
        transform: none !important;
    }
    .fx-parallax,
    .fx-parallax-scale {
        transform: none !important;
    }
}

@media (max-width: 760px) {
    /* Keep entrances readable on small screens — less rotation, still 3D */
    .scroll-trigger {
        transform: translateY(32px) rotateX(6deg);
    }
}