/* AD.JUST Studio — Cursor styles
   Hides the OS cursor and styles the dot + ring elements.
*/

html, body { cursor: none; }
a, button, [role="button"], input, textarea, select, label,
.aj-nav__link, .aj-card, .aj-team__card { cursor: none; }

.aj-cursor-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 200ms ease;
}
.aj-cursor-host.is-visible { opacity: 1; }

.aj-cursor-dot {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 9999px;
  background: #6b4fd8;
  box-shadow: 0 0 12px rgba(107, 79, 216, 0.55);
  will-change: transform;
}

.aj-cursor-ring {
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 9999px;
  border: 1.5px solid rgba(107, 79, 216, 0.7);
  will-change: transform;
}

@keyframes ajCursorPulse {
  0%   { transform-origin: center; box-shadow: 0 0 0 0 rgba(107,79,216,0.45); }
  100% { box-shadow: 0 0 0 18px rgba(107,79,216,0); }
}
.aj-cursor-ring.is-pulsing {
  animation: ajCursorPulse 350ms ease-out;
}

/* [ADD: Cursor] Violet tint on the ring while hovering a magnetic target.
   Scale of the ring is driven by JS (composes with the translate transform). */
.aj-cursor-host.is-target .aj-cursor-ring {
  border-color: rgba(167, 139, 250, 0.95);
}

/* [ADD: Cursor] Trail dots — small violet ghosts lagging behind the dot.
   Per-dot opacity + scale (--s) are set inline by JS for the fade-out.
   Transform composes translate (set by JS each frame) + scale (--s). */
.aj-cursor-trail {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 9999px;
  background: rgba(167, 139, 250, 0.85);
  pointer-events: none;
  will-change: transform, opacity;
}

/* [ADD: Cursor] Media-follow preview — appears next to the cursor on
   project-card hover. Margin places it to the upper-right of the cursor
   point so it doesn't sit under the dot/ring. Translate is set by JS
   each frame; scale also baked in for the enter/leave ease. Opacity is
   toggled via the .is-media host class for clean fade. */
.aj-cursor-media {
  position: absolute;
  top: 0; left: 0;
  margin: -110px 0 0 28px;
  width: 180px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 100%;
  box-shadow: 0 18px 48px rgba(8,5,16,0.45), 0 0 0 1px rgba(167,139,250,0.30);
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.aj-cursor-host.is-media .aj-cursor-media { opacity: 1; }

.aj-cursor-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}