/* ─────────────────────────────────────────────────────────────────────────────
   e11-magnetic.css — magnetic button + nav-item cursor attraction
   Depends on: e11-magnetic.js (sets --magnet-x, --magnet-y, .mag-active)
───────────────────────────────────────────────────────────────────────────── */

/* Base state — GPU layer ready */
.mag-target {
  will-change: transform;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* When JS sets inline transform, this provides the spring fallback reset */
.mag-target.mag-idle {
  transform: translate(0px, 0px) !important;
}

/* Magnetic glow on CTA buttons */
.hero-actions .btn-primary.mag-target,
.hero-actions .btn-ghost.mag-target {
  position: relative;
  overflow: hidden;
}

.hero-actions .btn-primary.mag-target::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    circle 60px at var(--magnet-x, 50%) var(--magnet-y, 50%),
    oklch(93% 0.27 122 / 0.18) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 0;
}

.hero-actions .btn-primary.mag-hovered::before {
  opacity: 1;
}

/* Nav link magnetic underline attraction */
.site-nav a.mag-target {
  position: relative;
}

/* Dot that follows the mouse within nav links */
.mag-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(93% 0.27 122);
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
}

.site-nav a:hover .mag-dot {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

/* Category tiles — subtle magnetic pull */
.category-tile.mag-target {
  transform-origin: center center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mag-target {
    transition: none !important;
    will-change: auto !important;
  }
  .hero-actions .btn-primary.mag-target::before {
    display: none;
  }
}