/* ============================================================
   resamp — Motion / animations.css
   Keyframes · scroll-reveal utilities · split-text · cursor
   Every effect degrades to "visible & static" without JS
   and collapses under prefers-reduced-motion.
   ============================================================ */

/* ---------- Keyframes ------------------------------------ */
@keyframes clover-spin { to { transform: rotate(360deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 255, 115,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(139, 255, 115,0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 255, 115,0); }
}
@keyframes nudge { 0%,100% { transform: none; } 50% { transform: translateX(3px); } }
@keyframes float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes float-slower { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-26px) rotate(6deg); } }
@keyframes blob {
  0%,100% { border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; }
  33%     { border-radius: 62% 38% 41% 59% / 58% 62% 38% 42%; }
  66%     { border-radius: 38% 62% 58% 42% / 48% 38% 62% 52%; }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- Scroll-reveal core --------------------------- */
[data-reveal] {
  --rv-y: 34px;
  --rv-x: 0px;
  --rv-blur: 0px;
  --rv-scale: 1;
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-scale));
  filter: blur(var(--rv-blur));
  transition:
    opacity var(--dur-4) var(--ease-out-expo) var(--rv-delay, 0ms),
    transform var(--dur-4) var(--ease-out-expo) var(--rv-delay, 0ms),
    filter var(--dur-4) var(--ease-out-expo) var(--rv-delay, 0ms);
  will-change: opacity, transform, filter;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Variants */
[data-reveal="up"]     { --rv-y: 44px; }
[data-reveal="down"]   { --rv-y: -44px; }
[data-reveal="left"]   { --rv-x: 60px; --rv-y: 0; }
[data-reveal="right"]  { --rv-x: -60px; --rv-y: 0; }
[data-reveal="scale"]  { --rv-scale: .9; --rv-y: 0; }
[data-reveal="blur"]   { --rv-blur: 16px; --rv-y: 20px; }
[data-reveal="fade"]   { --rv-y: 0; }

/* Stagger children via inline --i set by JS or markup */
[data-reveal] { --rv-delay: calc(var(--i, 0) * var(--stagger, 80ms)); }

/* ---------- Clip / mask image reveal --------------------- */
[data-clip] { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-5) var(--ease-in-out) var(--rv-delay, 0ms); }
[data-clip].is-inview { clip-path: inset(0 0 0 0); }
.reveal-media { overflow: hidden; }
.reveal-media > img, .reveal-media > .ph {
  transform: scale(1.18); transition: transform var(--dur-5) var(--ease-out-expo);
}
.reveal-media.is-inview > img, .reveal-media.is-inview > .ph { transform: scale(1); }

/* ---------- Split text (words / chars) ------------------- */
.split .word,
.split .char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  /* Breathing room so overflow:hidden never clips ascenders/descenders
     on tight display line-heights — without changing the line-height. */
  padding-block: 0.22em;
  margin-block: -0.22em;
  max-width: 100%;
}
.split .word > i,
.split .char > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  transition: transform var(--dur-4) var(--ease-out-expo);
  will-change: transform;
}
.split.is-inview .word > i,
.split.is-inview .char > i { transform: translateY(0); }

/* Scroll-driven word fill (manifesto) — muted → ink as it enters */
.fill-text { color: var(--fg-faint); }
.fill-text .word {
  color: color-mix(in srgb, var(--fg) calc(var(--p, 0) * 100%), var(--fg-faint));
  transition: color .1s linear;
}

/* ---------- Animated hairlines --------------------------- */
.line-grow { transform-origin: left; transform: scaleX(0); }
.line-grow.is-inview { animation: draw-line var(--dur-5) var(--ease-out-expo) forwards; }

/* ---------- Counter -------------------------------------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- Parallax hook -------------------------------- */
[data-parallax] { will-change: transform; }

/* ---------- Custom cursor -------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot { width: 7px; height: 7px; background: #fff; }
.cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.8);
  transition: width var(--dur-2) var(--ease-out-expo), height var(--dur-2) var(--ease-out-expo), background var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
}
.cursor-ring.is-hover { width: 66px; height: 66px; background: rgba(255,255,255,.12); border-color: transparent; }
.cursor-ring.is-down { width: 30px; height: 30px; }
.cursor-ring.has-label {
  width: 92px; height: 92px; background: var(--lime);
  border-color: transparent; mix-blend-mode: normal;
}
.cursor-ring .cursor-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: 0;
  opacity: 0; transition: opacity var(--dur-1);
  text-transform: uppercase;
}
.cursor-ring.has-label .cursor-label { opacity: 1; }
.cursor-hidden { opacity: 0 !important; }
/* Hide the OS cursor only when custom cursor is active */
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor .magnetic { cursor: none; }

/* ---------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-clip], .split .word, .split .char, .reveal-media > img, .reveal-media > .ph {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .marquee__track { animation: none !important; }
}

/* Touch / no-hover devices: never hide the native cursor, drop hover-only flourishes */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .svc-preview { display: none !important; }
}