/* ═══════════════════════════════════════════════════════════════════
   INTERACTIONS — Lusion-inspired, lightweight
   Custom cursor · magnetic buttons · hero parallax · card spotlight
   Auto-disabled on touch devices & prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */

/* Hide the native cursor only where we show our custom one
   (fine pointer + no reduced motion) */
@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    html, body a, body button, body label, body select,
    body input, body textarea, body .cursor-target { cursor: none; }
  }
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 99999;
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #00b6ff;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(0, 182, 255, 0.6);
  transition: width .25s var(--ease), height .25s var(--ease),
              border-color .25s var(--ease), margin .25s var(--ease);
}
.cursor-ring.is-active {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: #00b6ff;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── MAGNETIC BUTTONS ──────────────────────────────────────────── */
.btn {
  will-change: transform;
  transition: transform .25s var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn.is-magnetic { transition: transform .18s var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
}

/* ── HERO PARALLAX ─────────────────────────────────────────────── */
.hero__orb, .hero__grid-bg {
  will-change: transform;
  transition: transform .5s cubic-bezier(0.2, 0, 0, 1);
}

/* ── CARD SPOTLIGHT (cursor-follow) ────────────────────────────── */
.service-card {
  --mx: 50%;
  --my: 50%;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  background: radial-gradient(200px circle at var(--mx) var(--my),
              rgba(0, 182, 255, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.service-card:hover::after { opacity: 1; }
.service-card > * { position: relative; z-index: 2; }