/* scroll-fx.css — companion styles for scroll-fx.js. Copy in, adjust colors/sizes to match
   the host project's design tokens (--bg, etc. below are placeholders — replace them). */

/* SCROLL-LINKED EFFECTS — support rules */
[data-scroll-fx="tilt3d"] {
  /* CSS transforms on inline SVG elements are unreliable across engines without an explicit
     transform-box — without this, rotateX/scale on an <svg> can silently compute to identity
     (no visible effect) in some browsers even though the JS math is correct. Always set this
     on anything with data-scroll-fx="tilt3d" or "scale-in" that might be an <svg>. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
[data-scroll-fx="clip-reveal"] { will-change: clip-path; }
[data-scroll-fx="split-lines"] > span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  [data-scroll-fx] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  [data-scroll-fx="split-lines"] > span { transform: none !important; opacity: 1 !important; }
}

/* ZOOM-PARALLAX GALLERY (sticky-pinned collage)
   Markup pattern:
   <section class="zoom-pin-wrap">
     <div class="zoom-pin-sticky">
       <div class="zoom-pin-img p0"><div class="frame"><img data-zoom-scale="4" src="..." alt="..."></div></div>
       <div class="zoom-pin-img p1"><div class="frame"><img data-zoom-scale="5" src="..." alt="..."></div></div>
       ... up to p6, each with its own position class below and a distinct data-zoom-scale
     </div>
   </section>
   Vary data-zoom-scale per image (e.g. 4,5,6,5,6,8,9) so they don't all balloon in lockstep —
   that variation is what makes the collage feel dimensional rather than a single flat zoom. */
.zoom-pin-wrap { position: relative; height: 300vh; }
.zoom-pin-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.zoom-pin-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.zoom-pin-img .frame { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.zoom-pin-img .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom-pin-img.p0 .frame { width: 32vw; height: 42vh; }
.zoom-pin-img.p1 .frame { position: absolute; top: -30vh; left: 6vw; width: 22vw; height: 22vh; }
.zoom-pin-img.p2 .frame { position: absolute; top: -8vh; left: -26vw; width: 16vw; height: 30vh; }
.zoom-pin-img.p3 .frame { position: absolute; left: 28vw; width: 20vw; height: 18vh; }
.zoom-pin-img.p4 .frame { position: absolute; top: 27vh; left: 6vw; width: 16vw; height: 18vh; }
.zoom-pin-img.p5 .frame { position: absolute; top: 27vh; left: -23vw; width: 22vw; height: 18vh; }
.zoom-pin-img.p6 .frame { position: absolute; top: 22vh; left: 26vw; width: 12vw; height: 12vh; }
@media (max-width: 900px) {
  .zoom-pin-wrap { height: 180vh; }
  .zoom-pin-img.p1 .frame, .zoom-pin-img.p2 .frame, .zoom-pin-img.p5 .frame, .zoom-pin-img.p6 .frame { display: none; }
  .zoom-pin-img.p0 .frame { width: 60vw; height: 34vh; }
  .zoom-pin-img.p3 .frame { left: 8vw; top: -22vh; width: 40vw; height: 20vh; }
  .zoom-pin-img.p4 .frame { left: 46vw; top: -22vh; width: 40vw; height: 20vh; }
}
@media (prefers-reduced-motion: reduce) {
  /* A tall scroll-jacked pin is a bad ride for anyone who can't tolerate forced scroll
     effects — collapse to a plain static wrapped grid instead of a 300vh scroll trap. */
  .zoom-pin-wrap { height: auto; }
  .zoom-pin-sticky { position: relative; height: auto; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 40px 0; }
  .zoom-pin-img { position: relative; inset: auto; }
  .zoom-pin-img .frame { position: relative !important; top: auto !important; left: auto !important; width: 200px !important; height: 200px !important; }
}