/* =========================================================
   Scroll reveals, image masks, parallax helpers
   Reveal states only apply when JS is running (html.js),
   so content is always visible without JavaScript.
   ========================================================= */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Image mask reveal — a panel wipes away to uncover photography */
.js [data-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-mask="left"] { clip-path: inset(0 100% 0 0); }
.js [data-mask].is-visible { clip-path: inset(0 0 0 0); }
.js [data-mask] img { transform: scale(1.18); transition: transform 2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-mask].is-visible img { transform: scale(1); }
.js .cap-tile[data-mask].is-visible:hover .cap-tile__img img { transform: scale(1.06); }

/* Line draw for technical rules */
.js [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out); }
.js [data-line].is-visible { transform: scaleX(1); }

/* Parallax targets get GPU hint */
[data-parallax] { will-change: transform; }

/* Section transition — soft fade between hero and next section */
.hero + .section::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-mask], .js [data-line] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .js [data-mask] img { transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}