/* wa-lint: skip */
/* ============================================================
   Custom cursor — pulserende rød prik, minder om pulse-rings i spinneren.
   Vises ved hover på interaktive elementer (knapper, links, dots).
   Bygges via JS i custom-cursor.js, der følger musen.
   ============================================================ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  pointer-events: none;
  z-index: 1000000; /* over modaler (playground-modal er på 9999) */
  opacity: 1;
  will-change: transform;
}

/* Custom cursor:
   - Idle (not over an interactive element): primary teal (the brand
     "green").
   - Hovering an interactive element: swap to accent (orange) — the
     "this is clickable" indicator.
   - If that interactive element is itself orange/accent-coloured (the
     accent CTA button mid-:hover, the demo PRØV-tag, etc.): revert
     to primary teal so cursor stays visible against the orange fill. */
.cursor {
  --ug-cursor-color: var(--primary, rgb(49, 79, 89));
  --ug-cursor-glow: rgba(49, 79, 89, 0.40);
}
.cursor.is-active {
  --ug-cursor-color: var(--accent, rgb(184, 90, 58));
  --ug-cursor-glow: rgba(184, 90, 58, 0.45);
}
.cursor.is-active.is-on-orange {
  --ug-cursor-color: var(--primary, rgb(49, 79, 89));
  --ug-cursor-glow: rgba(49, 79, 89, 0.40);
}
.cursor__dot {
  position: absolute;
  inset: 0;
  background: var(--ug-cursor-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ug-cursor-glow);
  transition: transform 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease, border 0.15s ease;
}

/* ─── Hover-state: outline-ring over interactive elementer ──────────────────
   Den fyldte prik dækker tekst på CTA-knapper ("Book●møde" i stedet for
   "Book et møde"). Over interactive elementer skifter vi til en outline-ring
   med transparent center, så al tekst forbliver læsbar. Prikken vokser også
   en smule for at gøre den mere synlig som ring. */
.cursor.is-active .cursor__dot {
  background: transparent;
  border: 2px solid var(--ug-cursor-color);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 0 8px var(--ug-cursor-glow);
}

/* Pulsing rings — only animate when over an interactive element. */
.cursor__pulse {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ug-cursor-color);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
  animation: ugCursorPulse 1.2s ease-out infinite;
  animation-play-state: paused;
  transition: border-color 0.15s ease;
}
.cursor__pulse--late {
  animation-delay: -0.6s;
}
.cursor.is-active .cursor__pulse {
  animation-play-state: running;
}
.cursor.is-active .cursor__dot {
  transform: scale(1.15);
}

@keyframes ugCursorPulse {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* Hide native cursor everywhere — only the custom pulsing dot is visible.
   Form controls keep text/move cursors so typing/dragging still feels right. */
body.cursor-active,
body.cursor-active * {
  cursor: none;
}
body.cursor-active input[type="text"],
body.cursor-active input[type="search"],
body.cursor-active input[type="email"],
body.cursor-active textarea {
  cursor: text;
}

/* Touch devices and reduced-motion: don't show custom cursor */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  body.cursor-active,
  body.cursor-active * {
    cursor: auto;
  }
  body.cursor-active button,
  body.cursor-active a,
  body.cursor-active [role="button"],
  body.cursor-active .manifest-pagination__dot,
  body.cursor-active .standkort__stand,
  body.cursor-active .standkort__omraade-title,
  body.cursor-active .hero-exit,
  body.cursor-active .scene-nav__btn,
  body.cursor-active .news-card {
    cursor: pointer;
  }
}