/* ==========================================================================
   Tufix — motion system styles (builder D)
   Helpers for motion.js: split-text masks, scroll progress hairline,
   magnetic / marquee / pinned-process helpers, and the fallbacks used when
   motion is unavailable (html.motion-failed) or unwanted (html.reduced-motion).
   Nothing here hides content by default: hidden start states are applied at
   runtime by motion.js only.
   ========================================================================== */

/* ---- Lenis essentials (replaces the CDN lenis.css, which is not loaded) ---- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ---- Split text ----------------------------------------------------------
   Each word is a mask (overflow hidden) around an inner span that slides up.
   The padding gives room to accents (Î, Ă), comma-below letters (ș, ț),
   descenders and the italic overhang of Fraunces; the matching negative
   margins cancel it out, so line breaks and spacing stay exactly as authored. */
.split-word {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.2em 0.1em 0.18em 0.05em;
  margin: -0.2em -0.1em -0.18em -0.05em;
}
.split-inner {
  display: inline-block;
  transform-origin: 0% 100%;
}
/* Accessible copy of the text for split elements that cannot carry aria-label */
.split-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Scroll progress hairline -------------------------------------------- */
.mo-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: calc(var(--z-header, 50) + 1);
  pointer-events: none;
  contain: layout style;
}
.mo-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-moss, #3c6b4c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: background-color var(--dur, 0.45s) var(--ease-out, ease-out);
  will-change: transform;
}
html[data-mo-tone="dark"] .mo-progress__bar {
  background: var(--c-lime, #d6ec6b);
  box-shadow: 0 0 12px rgba(214, 236, 107, 0.55);
}

/* ---- Magnetic buttons ------------------------------------------------------ */
.mo-magnetic.is-magnetic,
.mo-magnetic.is-magnetic .btn__label,
.mo-magnetic.is-magnetic .btn__icon,
.mo-magnetic.is-magnetic [data-magnetic-inner] {
  will-change: translate, transform;
}

/* ---- Marquee (JS-driven loop) ---------------------------------------------- */
.mo-marquee .marquee__track,
.mo-marquee [data-marquee-track] {
  width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation: none !important; /* the JS loop replaces the CSS fallback */
  backface-visibility: hidden;
}
.mo-marquee.is-running .marquee__track,
.mo-marquee.is-running [data-marquee-track] {
  will-change: transform;
}

/* ---- Pinned horizontal process (≥1024px, set by motion.js) ----------------- */
.is-hscroll [data-hscroll-track] {
  will-change: transform;
}

/* ---- Anchor targets focused after smooth scrolling ------------------------- */
[data-mo-focus]:focus {
  outline: none;
}

/* ---- Counters ------------------------------------------------------------------ */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ---- Failsafe: an intro curtain that never signalled its end --------------- */
html.mo-intro-timeout [data-intro] {
  display: none !important;
}

/* ==========================================================================
   Fallbacks — motion unavailable or reduced: everything visible and static.
   [data-mo-hidden] only exists while motion.js keeps an element hidden.
   ========================================================================== */
html.motion-failed [data-mo-hidden],
html.reduced-motion [data-mo-hidden] {
  opacity: 1 !important;
  transform: none !important;
}
html.motion-failed .split-inner,
html.reduced-motion .split-inner {
  transform: none !important;
}
html.reduced-motion .mo-progress__bar {
  transition: none;
  will-change: auto;
}
html.reduced-motion .marquee__track,
html.reduced-motion [data-marquee-track] {
  animation: none !important;
  transform: none !important;
}
html.reduced-motion .mo-magnetic,
html.reduced-motion .mo-magnetic .btn__label,
html.reduced-motion .mo-magnetic .btn__icon {
  translate: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-mo-hidden] {
    opacity: 1 !important;
    transform: none !important;
  }
  .split-inner {
    transform: none !important;
  }
  .mo-progress__bar {
    transition: none;
  }
  .marquee__track,
  [data-marquee-track] {
    animation: none !important;
  }
}