/*!
 * Happy Monday — shared motion CONTRACT (effects.css)
 * Pairs with effects.js. This file owns transitions/keyframes only — no visual
 * design, no colors. Content is fully visible without `html.js` (no-JS safety).
 *
 * DATA-ATTRIBUTE API (behavior lives in effects.js)
 * -------------------------------------------------
 *   data-reveal[="up|left|right|scale"] + data-reveal-delay="120"
 *   data-parallax="0.3"
 *   data-countup="10000" + data-countup-suffix, data-countup-dur
 *   data-tilt + data-tilt-max="8"
 *   data-marquee   (track: .hm-marquee__track)
 *   data-video-auto
 *   [data-gallery], [data-sticky-anchor] + .hm-sticky--fixed, .hm-faq
 *
 * TUNING SURFACE — variant authors re-tune motion by overriding these custom
 * props (per element, per section, or globally). No need to touch this file:
 *   --fx-dur          reveal duration          (default .7s)
 *   --fx-ease         reveal easing            (default cubic-bezier(.22,1,.36,1))
 *   --fx-reveal-from  reveal start transform   (set by direction variants)
 *   --fx-marquee-dur  marquee loop duration    (default 30s)
 *
 * Pages should ALSO include an inline head snippet to avoid reveal-flash:
 *   <script>document.documentElement.classList.add('js')</script>
 * (effects.js sets `.js` too, but it is usually deferred.)
 */

/* ---- reveal: hidden default only when JS is present -------------------- */
html.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: var(--fx-reveal-from, translateY(24px));
}

html.js [data-reveal="left"]:not(.is-revealed)  { --fx-reveal-from: translateX(-32px); }
html.js [data-reveal="right"]:not(.is-revealed) { --fx-reveal-from: translateX(32px); }
html.js [data-reveal="scale"]:not(.is-revealed) { --fx-reveal-from: scale(0.92); }

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--fx-dur, .7s) var(--fx-ease, cubic-bezier(.22, 1, .36, 1)),
    transform var(--fx-dur, .7s) var(--fx-ease, cubic-bezier(.22, 1, .36, 1));
}

/* ---- tilt: JS sets --tilt-x/--tilt-y and adds .tilt-active; CSS applies  */
/* m2: will-change scoped to .tilt-active so it only fires when JS binds it. */
[data-tilt] {
  /* No transform here — markup without JS shows nothing unexpected. */
  transition: transform .18s ease-out;
}
.tilt-active {
  transform: perspective(800px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

/* ---- marquee: JS clones children, CSS drives the loop ------------------ */
[data-marquee] { overflow: hidden; }
.hm-marquee__track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: hm-marquee var(--fx-marquee-dur, 30s) linear infinite;
}
[data-marquee]:hover .hm-marquee__track { animation-play-state: paused; }

@keyframes hm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- reduced-motion: force everything static --------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* I4: countup elements keep their fallback text by design; ensure they're visible. */
  /* Video autoplay is handled in JS (C3 in effects.js disconnects videoIO on change). */
  [data-countup] { opacity: 1 !important; }
  [data-parallax],
  [data-tilt],
  .tilt-active { transform: none !important; }
  .hm-marquee__track { animation: none !important; }
}