/* ==========================================================================
   motion.css — styles for the motion.js interaction kit
   Dependency-free. Everything is scoped behind .motion-ready, which only
   exists when JavaScript is running, so content is never hidden without it.
   Rename the --m-* values to the site's own tokens if it already has some.
   ========================================================================== */

:root {
  --m-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrances, exits, hover */
  --m-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* things moving on screen */
  --m-duration: 700ms;                               /* reveal length */
  --m-distance: 24px;                                /* reveal travel */
}

/* Reveal on scroll --------------------------------------------------------- */
.motion-ready [data-reveal]:not([data-reveal="done"]) {
  opacity: 0;
  transition:
    opacity var(--m-duration) var(--m-ease-out) var(--m-delay, 0ms),
    transform var(--m-duration) var(--m-ease-out) var(--m-delay, 0ms),
    clip-path 900ms var(--m-ease-in-out) var(--m-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready [data-reveal=""],
.motion-ready [data-reveal="up"] { transform: translateY(var(--m-distance)); }
.motion-ready [data-reveal="down"] { transform: translateY(calc(var(--m-distance) * -1)); }
.motion-ready [data-reveal="left"] { transform: translateX(var(--m-distance)); }
.motion-ready [data-reveal="right"] { transform: translateX(calc(var(--m-distance) * -1)); }
.motion-ready [data-reveal="scale"] { transform: scale(0.96); }
.motion-ready [data-reveal="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); }

.motion-ready [data-reveal].is-in:not([data-reveal="done"]) {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Children of a stagger group stay hidden until the script tags them */
.motion-ready [data-stagger] > :not([data-reveal]) { opacity: 0; }

/* Word-by-word heading reveal ---------------------------------------------- */
.motion-ready [data-split]:not(.m-split) { visibility: hidden; }
.m-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders inside the mask */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.m-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--m-ease-out) calc(var(--m-delay, 0ms) + var(--m-i, 0) * 45ms);
}
.m-split.is-in .m-word > span { transform: none; }

/* Pointer effects ---------------------------------------------------------- */
[data-magnetic] { transition: transform 300ms var(--m-ease-out); }
[data-tilt] { transition: transform 200ms var(--m-ease-out); transform-style: preserve-3d; }

/* Spotlight uses ::after. Skip it on elements that already style ::after. */
[data-spotlight] { position: relative; }
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(var(--m-spot-size, 260px) circle at var(--m-x, 50%) var(--m-y, 50%), var(--m-spot, rgba(255, 255, 255, 0.2)), transparent 70%);
  transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-spotlight]:hover::after { opacity: 1; }
}

/* Scroll progress bar ------------------------------------------------------ */
[data-scroll-progress] { transform: scaleX(0); transform-origin: 0 50%; }

/* Marquee ------------------------------------------------------------------ */
[data-marquee] { overflow: hidden; }
.m-marquee-track {
  display: flex;
  width: max-content;
  animation: m-marquee var(--m-marquee-duration, 30s) linear infinite;
}
.m-marquee-track > * { flex: none; margin-right: var(--m-gap, 3rem); }
@media (hover: hover) and (pointer: fine) {
  [data-marquee]:hover .m-marquee-track { animation-play-state: paused; }
}
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* Reduced motion: keep the fade, drop the travel --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal]:not([data-reveal="done"]) {
    transform: none;
    clip-path: none;
    transition: opacity 200ms ease;
  }
  .motion-ready [data-reveal="clip"]:not(.is-in) { opacity: 0; }
  [data-magnetic],
  [data-tilt] { transition: none; }
}