/*
 * TFM motion system
 * One easing, one set of durations, a clear hierarchy.
 * Roles are assigned by motion.js via [data-m]; nothing here applies until JS runs.
 */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-dur-small: 500ms;   /* small elements, eyebrows, buttons */
  --m-dur-text: 700ms;    /* supporting text */
  --m-dur-section: 800ms; /* blocks, card groups */
  --m-dur-heading: 900ms; /* large typography */
  --m-dur-media: 1100ms;  /* images / major visuals */
}

/* ---- Reveal targets ---------------------------------------------------- */

/* !important only while a reveal is in progress: [data-m] is removed afterwards,
   so components keep their own hover transitions and transforms. */
[data-m] {
  transition-property: opacity, transform, clip-path !important;
  transition-duration: var(--m-d, var(--m-dur-section)) !important;
  transition-timing-function: var(--m-ease) !important;
  transition-delay: var(--m-delay, 0ms) !important;
  will-change: opacity, transform;
}

[data-m]:not(.m-in) { opacity: 0 !important; }

[data-m="heading"] { --m-d: var(--m-dur-heading); }
[data-m="heading"]:not(.m-in) { transform: translate3d(0, 40px, 0) !important; }

[data-m="text"] { --m-d: var(--m-dur-text); }
[data-m="text"]:not(.m-in) { transform: translate3d(0, 22px, 0) !important; }

[data-m="block"] { --m-d: var(--m-dur-section); }
[data-m="block"]:not(.m-in) { transform: translate3d(0, 25px, 0) !important; }

/* Cards move as one composition: same distance, same duration, near-identical start */
[data-m="card"] { --m-d: var(--m-dur-section); }
[data-m="card"]:not(.m-in) { transform: translate3d(0, 26px, 0) scale(0.985) !important; }

[data-m="small"] { --m-d: var(--m-dur-small); }
[data-m="small"]:not(.m-in) { transform: translate3d(0, 12px, 0) !important; }

/* Images: slightly more movement than text - settle from a light scale inside a soft clip */
[data-m="media"] { --m-d: var(--m-dur-media); }
[data-m="media"]:not(.m-in) {
  transform: scale(1.06) !important;
  clip-path: inset(5% 5% 5% 5%) !important;
}

/* ---- Scroll-linked depth (GSAP drives --m-par on desktop only) ---------- */

[data-m-par] {
  translate: 0 var(--m-par, 0px);
  scale: 1.1; /* headroom so the image never shows an edge while it drifts */
}

/* Hero photo layer (from the bg-zoom block): extra headroom + parallax offset */
.bg-zoom::after {
  inset: -10% 0 !important;
  translate: 0 var(--m-par, 0px);
}

/* Hero photo fades in on first load rather than popping */
.m-js .bg-zoom::after {
  opacity: 0;
  transition: opacity var(--m-dur-media) var(--m-ease);
}
.m-js.m-loaded .bg-zoom::after,
.m-js.m-fail .bg-zoom::after { opacity: 1; }

/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-m],
  [data-m]:not(.m-in) {
    transform: none !important;
    clip-path: none !important;
    transition: opacity 300ms linear !important;
    transition-delay: 0ms !important;
  }
  [data-m-par] { translate: none !important; scale: none !important; }
  .bg-zoom::after { translate: none !important; }
}