/* Quiet motion layer. js/motion.js adds .m-on to <html> only when the visitor allows motion,
   so without JS or with "reduce motion" the page renders exactly as before. */

/* Drifting backgrounds: the section's own background is copied onto a pseudo layer that can move.
   The parent's background stays underneath, so any edge the layer uncovers shows the same art. */
.m-on .banner-area,
.m-on .m-par { overflow: hidden; isolation: isolate; }
.m-on .banner-area::before,
.m-on .m-par::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: inherit;
  translate: 0 var(--py, 0px);
  will-change: transform, translate;
}
.m-on .banner-area::before,
.m-on .m-par::before { animation: m-drift 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.m-on .m-par::before { inset: -20% 0; animation-duration: 28s; }

/* A slow pan and zoom so the artwork reads as a live background.
   Scale never drops below 1.03 and the shift stays under the scaled margin, so no edge shows. */
@keyframes m-drift {
  from { transform: scale(1.03) translate(0, 0); }
  to   { transform: scale(1.1) translate(-2%, -1.4%); }
}

/* Scroll reveal: a short rise. Uses `translate` so it never fights a card's own hover `transform`;
   the classes are removed once the rise ends, which hands transitions back to custom.css. */
.m-on .m-rv { opacity: 0; translate: 0 20px; }
.m-on .m-rv.m-in {
  opacity: 1; translate: 0 0;
  transition: opacity 0.5s ease-out, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

/* Countdown digits roll in each time they change */
.m-on .countdown-num.m-tick { animation: m-tick 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes m-tick {
  from { translate: 0 -40%; opacity: 0.2; }
  to   { translate: 0 0; opacity: 1; }
}