/**
 * Custom Cursor – Premium, performance-orientiert
 * Interaktions-Feedback zusätzlich über :has() am body (siehe unten)
 */

/* Nur aktiv, wenn JS die Klasse setzt (feine Zeiger, keine reduced motion) */
body.cursor-enabled {
  cursor: none;
}

body.cursor-enabled a,
body.cursor-enabled button,
body.cursor-enabled [role="button"],
body.cursor-enabled input,
body.cursor-enabled textarea,
body.cursor-enabled select,
body.cursor-enabled label {
  cursor: none;
}

#custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: exclusion;
  will-change: transform;
}

.cursor-dot,
.cursor-ring {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
}

/* Innerer Punkt */
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* Äußerer Ring */
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease,
    border-color 0.35s ease, opacity 0.25s ease;
}

/* --- Kontext via :has() – State-of-the-Art 2025/2026 --- */
/* Links & primäre Interaktion: größer, weicher */
body.cursor-enabled:has(a:hover) .cursor-ring,
body.cursor-enabled:has(button:hover) .cursor-ring,
body.cursor-enabled:has([role="button"]:hover) .cursor-ring,
body.cursor-enabled:has(.btn:hover) .cursor-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(255, 255, 255, 0.75);
}

/* Formularfelder: leicht eckiger Eindruck */
body.cursor-enabled:has(input:hover) .cursor-ring,
body.cursor-enabled:has(textarea:hover) .cursor-ring,
body.cursor-enabled:has(select:hover) .cursor-ring {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

/* Medien / editorial cards */
body.cursor-enabled:has(img:hover) .cursor-ring,
body.cursor-enabled:has(article:hover) .cursor-ring,
body.cursor-enabled:has(.card:hover) .cursor-ring {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  opacity: 0.95;
}

/* Fokus sichtbar für Tastatur: Ring etwas vergrößern */
body.cursor-enabled:has(a:focus-visible) .cursor-ring,
body.cursor-enabled:has(button:focus-visible) .cursor-ring {
  width: 48px;
  height: 48px;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring {
    transition: none;
  }
}