/* ============================================================
   OFG — INTERACTION LAYER
   Custom cursor · magnetism · scramble · kinetic type.
   Only activates on fine pointers with motion allowed.
   ============================================================ */

/* hide the native cursor only when our custom one is active */
body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor .mood-range { cursor: none; }

.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  translate: -50% -50%;
  will-change: transform;
  mix-blend-mode: difference;   /* pops on any background */
}
.cursor-dot {
  width: 7px; height: 7px; background: #ffffff;
}
.cursor-ring {
  width: 34px; height: 34px; border: 2px solid #ffffff;
  transition: width .22s var(--ease-back), height .22s var(--ease-back),
              background-color .22s ease, opacity .2s ease;
}
/* swollen state over interactive elements */
body.cursor-hot .cursor-ring {
  width: 58px; height: 58px; background: rgba(255,255,255,0.12);
}
body.cursor-down .cursor-ring { width: 26px; height: 26px; }

/* magnetic + kinetic elements get GPU-friendly transforms from JS */
[data-magnetic] { will-change: transform; }
.word { will-change: transform; }

/* scramble keeps layout stable while characters churn */
[data-scramble] { font-variant-ligatures: none; }

@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-ring, .cursor-dot { display: none; }
}