/* Kreis-Zeiger auf dem Verlauf (js/motion/ring-cursor.js): leerer, gläserner Ring, Regenbogen-
   Ränder laufen mit der Geschwindigkeit auseinander (--split), selten ein kurzer Glitch. */
.has-ring .dark-zone,
.has-ring .dark-zone * {
  cursor: none;
}

.ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
  -webkit-backdrop-filter: blur(1.5px) saturate(150%);
  backdrop-filter: blur(1.5px) saturate(150%);
  transition:
    opacity 250ms var(--ease-in-out),
    width var(--duration-chip) var(--ease-spring),
    height var(--duration-chip) var(--ease-spring),
    background-color 300ms var(--ease-in-out);
}

.ring.is-on {
  opacity: 1;
}

/* Über Bedienbarem etwas größer und glasiger */
.ring.is-hover {
  width: 2.4rem;
  height: 2.4rem;
  background: rgb(255 255 255 / 0.1);
}

.ring::before,
.ring::after {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  content: '';
  mix-blend-mode: screen;
}

.ring::before {
  border: 1px solid rgb(255 90 170 / 0.7);
  transform: translate(calc(var(--split, 0) * -1px), calc(var(--split, 0) * 0.4px));
}

.ring::after {
  border: 1px solid rgb(80 210 255 / 0.7);
  transform: translate(calc(var(--split, 0) * 1px), calc(var(--split, 0) * -0.4px));
}

.ring.is-glitch::before {
  animation: ring-glitch-a 180ms steps(2) 1;
}

.ring.is-glitch::after {
  animation: ring-glitch-b 180ms steps(2) 1;
}

@keyframes ring-glitch-a {
  50% {
    clip-path: inset(0 0 55% 0);
    transform: translate(-2.5px, 1px);
  }
}

@keyframes ring-glitch-b {
  50% {
    clip-path: inset(45% 0 0 0);
    transform: translate(2.5px, -1px);
  }
}

/* Beschriftung neben dem Ring, zum Beispiel "Gorenje · Reel" im Social-Raum */
.ring__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.6rem);
  padding: 0.25rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
  color: var(--color-on-dark);
  font-size: var(--text-tag);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  opacity: 0;
  translate: -0.3rem -50%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    opacity 200ms var(--ease-in-out),
    translate 300ms var(--ease-out);
}

.ring.has-label .ring__label {
  opacity: 1;
  translate: 0 -50%;
}

/* Schwarz-Weiß-Modus: schwarzer Ring auf Silber, Beschriftung als schwarze Pille */
:root[data-theme='mono'] .ring {
  border-color: rgb(11 11 11 / 0.8);
}

:root[data-theme='mono'] .ring.is-hover {
  background: rgb(11 11 11 / 0.08);
}

:root[data-theme='mono'] .ring__label {
  border-color: var(--control-line);
  background: var(--control-fill);
  color: var(--control-ink);
}