/* Scroll reveal — every public page.
   Driven by public/assets/js/scroll-reveal.js (GSAP + ScrollTrigger).

   Nothing here hides content by itself: the script arms an element with
   data-reveal only once GSAP has loaded, so with JS off, a blocked CDN or
   prefers-reduced-motion everything simply stays visible.

   The motion uses the individual `translate` / `scale` properties (fed by
   the two custom properties below) instead of `transform`. Those compose
   with an element's own transform rather than replacing it, so the reveal
   never fights a button's hover scale, the rails' own scrolling, or the -50%
   centring on badges and arrows. */

@property --reveal-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --reveal-scale {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/* !important so a button's own hover/press translate/scale (buttons.css) and its
   transitions can never bend or lag a reveal that is still playing. */
[data-reveal] {
    translate: 0 var(--reveal-y, 0px) !important;
    scale: var(--reveal-scale, 1) !important;
    transition: none !important;
}

[data-reveal="running"] {
    will-change: opacity, translate, scale;
}

/* clip-path lives in the element's own (scaled) coordinate space, so the
   inset is the inverse of the scale: it keeps the settling photo inside
   its original box — corners included — even when the parent has no
   overflow:hidden of its own (collage and pool grids). */
[data-reveal-clip] {
    clip-path: inset(
        calc((var(--reveal-scale, 1) - 1) / (2 * var(--reveal-scale, 1)) * 100%)
        round calc(var(--reveal-radius, 0px) / var(--reveal-scale, 1))
    );
}

@media print, (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        clip-path: none !important;
    }
}