/* Image settle + rule draw: the motion is Web Animations in part.js (one start keyframe each, so items land on their
   own resting style). This file holds the rule origins, the held state and the pre-paint hide (part.js in <head>
   adds .isr-js to <html>), with a failsafe that shows everything at 4 s if the script never arrives.
   Knobs (read by part.js):
     --isr-scale: 1.25;  --isr-dur: 1.6s;  --isr-ease: (expo.out as linear(), cubic-bezier(.16,1,.3,1) fallback)
     --isr-rule-dur: 1s;  --isr-rule-ease: cubic-bezier(.4,0,.2,1);  --isr-rule-delay: .15s   (Sadewa vision rule)
     Heron's rule instead: --isr-rule-dur: 1.2s; --isr-rule-ease: cubic-bezier(.333,.667,.667,1); --isr-rule-delay: 0s
     --isr-stagger: .1s
   Drift mode (Mova) knobs: see the drift block below. */
[data-isr="rule"] { transform-origin: left center; }   /* give the rule a block or inline-block box: scale needs one */
[data-isr="rule"][data-isr-from="right"] { transform-origin: right center; }
[data-isr="rule"][data-isr-from="top"] { transform-origin: center top; }
[data-isr="rule"][data-isr-from="bottom"] { transform-origin: center bottom; }
[data-isr="rule"][data-isr-from="center"] { transform-origin: center; }

.isr-held { visibility: hidden; }

.isr-js [data-isr]:not([data-isr-state]) {
  visibility: hidden;
  animation: isr-failsafe 0s 4s forwards;
}
@keyframes isr-failsafe { to { visibility: visible; } }

/* Drift mode, data-isr="drift" (Mova's scaleBigImage, teardown 10-05): a picture that waits VISIBLE and zoomed in at
   scale 1.5, settles to 1.1 over 2.6 s when its top is 100px above the window bottom, and separately drifts down
   (translate -5% -> 10% of its own height) locked to the scroll while it crosses the window. No fade. Put it in an
   overflow: clip frame the same size as the picture (inset: 0): the 10% overhang at 1.1 covers the drift on screen.
   data-isr-drift="lazy" = Mova's smaller lazyAnimImage numbers. Knobs (read by part.js unless noted):
     --isr-drift-from: 1.5       resting scale before the settle (CSS)
     --isr-drift-to: 1.1         scale it settles to and keeps (CSS)
     --isr-drift-dur: 2.6s       settle duration
     --isr-drift-ease            unset = Mova's CustomEase as linear() (lazy preset: its own); any CSS easing
     --isr-drift-start: 100px    settle trigger for a lone drift picture: its top this far above the window bottom
     --isr-drift-y-from: -5%  --isr-drift-y-to: 10%    scrubbed translate, % of the picture's own height
     --isr-drift-y-start: calc(50vh - 10px)            picture's top (from the window top) where the drift starts
     --isr-drift-y-end: calc(10px - 100vh)             ... and where it ends (ScrollTrigger "10px center" to innerHeight-10)
     --isr-drift-y-ease: power2.inOut                  ease across that window: power2.inOut | linear */
[data-isr="drift"] {                                  /* defaults as var() fallbacks, so an ancestor can set the knobs */
  scale: var(--isr-drift-to, 1.1);
  translate: 0 var(--isr-drift-y-from, -5%);
}
[data-isr="drift"][data-isr-drift="lazy"] {
  --isr-drift-from: 1.6;
  --isr-drift-dur: 2.4s;
  --isr-drift-start: 50px;
  --isr-drift-y-from: -8%;                             /* Mova: scale(1.6) translateY(-5%) = -8% of the height */
  --isr-drift-y-start: calc(100vh - 10px);
}
.isr-js [data-isr="drift"]:not([data-isr-state]), [data-isr="drift"].isr-held {
  visibility: visible;
  animation: none;
  scale: var(--isr-drift-from, 1.5);
}

@media (prefers-reduced-motion: reduce) {
  .isr-held, .isr-js [data-isr]:not([data-isr-state]) { visibility: visible; animation: none; }
  [data-isr="drift"], .isr-js [data-isr="drift"]:not([data-isr-state]), [data-isr="drift"].isr-held { scale: var(--isr-drift-to, 1.1); translate: none; }
}