/* ========================================================================
   fx-cursor.css — Yuversity Academy · Kivo Marketing
   Premium custom cursor, magnetic, spotlight & sweep effects
   ======================================================================== */

:root {
  --fx-accent: #2A9D8F;
  --fx-accent-2: #3DBFB0;
  --fx-gold: #C9A96E;
}

/* Hide native cursor only on fine-pointer devices */
body.fx-cursor-on,
body.fx-cursor-on a,
body.fx-cursor-on button,
body.fx-cursor-on [role="button"] {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  body.fx-cursor-on,
  body.fx-cursor-on a,
  body.fx-cursor-on button {
    cursor: auto;
  }
  #fx-cursor, #fx-cursor-ring { display: none !important; }
}

/* ---- Dot ---- */
#fx-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fx-accent-2);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  transition: opacity .25s ease, width .25s ease, height .25s ease;
}

/* ---- Ring ---- */
#fx-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--fx-gold);
  background: transparent;
  pointer-events: none;
  z-index: 99998;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  transition:
    width .28s cubic-bezier(.2,.8,.2,1),
    height .28s cubic-bezier(.2,.8,.2,1),
    background-color .28s ease,
    border-color .28s ease,
    opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fx-gold);
}
#fx-cursor-ring::after { content: ''; opacity: 0; transition: opacity .2s ease; }

/* ---- States ---- */
#fx-cursor-ring.c-link {
  width: 60px; height: 60px;
  border-color: var(--fx-accent-2);
}
body.fx-cursor-on #fx-cursor.is-link { opacity: 0; }

#fx-cursor-ring.c-btn {
  width: 90px; height: 90px;
  background-color: rgba(42,157,143,.15);
  border-color: var(--fx-accent);
}

#fx-cursor-ring.c-view {
  width: 80px; height: 80px;
  background-color: rgba(201,169,110,.08);
  border-color: var(--fx-gold);
}
#fx-cursor-ring.c-view::after {
  content: 'VIEW';
  opacity: 1;
}

/* ---- Magnetic ---- */
.magnetic {
  --tx: 0px;
  --ty: 0px;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ---- Spotlight ---- */
.spotlight {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle 220px at var(--mx) var(--my),
    rgba(61,191,176,.18),
    rgba(201,169,110,.06) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
  border-radius: inherit;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ---- Button sweep ---- */
.btn-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-sweep::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(61,191,176,.22) 45%,
    rgba(201,169,110,.35) 55%,
    transparent 100%
  );
  transition: left .6s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.btn-sweep:hover::before { left: 100%; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  #fx-cursor, #fx-cursor-ring, .magnetic, .btn-sweep::before {
    transition: none !important;
  }
}