/* ============================================================
   Experience layer: preloader, cursor, split-text, marquee
   Art-direction agnostic — tokens come from style.css vars.
   ============================================================ */

/* ---------- custom cursor ---------- */
@media (pointer: fine) {
  body { cursor: none; }
  body a, body button, body select { cursor: none; }
  .cur-dot {
    position: fixed;
    top: -3px; left: -3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--black, #0b0b0a);
    mix-blend-mode: difference;
    filter: invert(1);
    pointer-events: none;
    z-index: 4000;
  }
  /* outer ring: GSAP drives x/y — must have NO CSS transition on transform,
     or the browser re-smooths every frame and the ring rubber-bands behind the mouse */
  .cur-ring {
    position: fixed;
    top: -18px; left: -18px;
    width: 36px; height: 36px;
    pointer-events: none;
    z-index: 3999;
  }
  /* inner ring: CSS owns its scale for hover states */
  .cur-ring__in {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: var(--black, #0b0b0a);
    mix-blend-mode: difference;
    filter: invert(1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, inset 0.3s ease, background 0.3s, opacity 0.3s;
  }
  body.cur-hover .cur-ring__in { transform: scale(1.7); }
  body.cur-label .cur-ring__in {
    transform: none; /* label mode grows via inset so the glyphs stay crisp */
    inset: -29px;
    background: var(--ivory, #f1efe9);
    border-color: transparent;
    mix-blend-mode: normal;
    filter: none;
  }
  body.cur-label .cur-ring__in::after {
    content: attr(data-label);
    font-family: var(--sans, sans-serif);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--black, #0b0b0a);
  }
  body.cur-label .cur-dot { opacity: 0; }
}

/* ---------- split text ---------- */
.sl { display: block; overflow: hidden; }
.sl__in { display: block; will-change: transform; }
.sc { display: inline-block; will-change: transform; }

/* ---------- marquee scaffolding ---------- */
.mq {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.mq__track {
  display: inline-flex;
  align-items: baseline;
  will-change: transform;
}

/* reduced motion: kill it all */
@media (prefers-reduced-motion: reduce) {
  .cur-dot, .cur-ring { display: none; }
  body { cursor: auto; }
  .sl__in, .sc { transform: none !important; }
}