/* Eigener Mauszeiger – übernommen von codish.de (neue-websit-kirby/assets/css/cursor.css)
 * ===================================================================================
 *
 * Gleiche Mechanik und Ausprägungen wie auf codish.de; die Farben kommen hier
 * aus den Theme-Variablen (theme.json, helle Variante in site.css), damit der
 * Ring dem Hell/Dunkel-Umschalter folgt. Unterschiede zur Vorlage:
 *   - kein `is-ondark` (der Fußbereich dieser Seite wird in Hell mit hell)
 *   - z-index über dem DASI-Chatfenster (99990), sonst verschwände der Ring
 *     über dem Fenster
 *
 * Die drei Absicherungen der Vorlage gelten unverändert (Klasse nur per JS,
 * nur echte Maus, nicht bei reduzierter Bewegung).
 */

:root {
  --cursor-ring:       var(--wp--preset--color--cyan);
  --cursor-ring-ext:   var(--wp--preset--color--magenta);
  --cursor-fill:       rgba(0, 229, 255, .05);
  --cursor-fill-link:  rgba(0, 229, 255, .14);
  --cursor-fill-media: rgba(0, 229, 255, .06);
  --cursor-fill-read:  rgba(0, 229, 255, .18);
  --cursor-fill-ext:   rgba(255, 0, 85, .14);
  --cursor-glow:       var(--nova-glow-c);
  --cursor-glow-ext:   var(--nova-glow-m);
}

/* Werte der hellen Variante wie auf codish.de (theme-light.css) */
html[data-theme="light"] {
  --cursor-fill:       rgba(0, 124, 148, 0.10);
  --cursor-fill-link:  rgba(0, 124, 148, 0.18);
  --cursor-fill-media: rgba(0, 124, 148, 0.10);
  --cursor-fill-read:  rgba(0, 124, 148, 0.22);
  --cursor-fill-ext:   rgba(212, 0, 76, 0.16);
  --cursor-glow:       0 0 12px rgba(0, 124, 148, 0.35);
  --cursor-glow-ext:   0 0 12px rgba(212, 0, 76, 0.32);
}

@media (hover: hover) and (pointer: fine) {

  html.cursor-ring,
  html.cursor-ring body,
  html.cursor-ring a,
  html.cursor-ring button,
  html.cursor-ring [role="button"],
  html.cursor-ring summary,
  html.cursor-ring label {
    cursor: none;
  }

  /* Schreibmarke in Eingabefeldern bleibt sichtbar */
  html.cursor-ring input,
  html.cursor-ring textarea,
  html.cursor-ring select,
  html.cursor-ring [contenteditable="true"] {
    cursor: auto;
  }

  .cursor-ring-el {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--cursor-ring);
    border-radius: 9999px;
    background: var(--cursor-fill);
    box-shadow: var(--cursor-glow);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0;

    /* Position kommt aus JS (--cx/--cy), Druckgefühl aus --cs */
    transform: translate3d(var(--cx, 50vw), var(--cy, 50vh), 0) translate(-50%, -50%) scale(var(--cs, 1));
    will-change: transform;

    transition:
      width .2s cubic-bezier(.2, 0, 0, 1),
      height .2s cubic-bezier(.2, 0, 0, 1),
      border-color .2s cubic-bezier(.2, 0, 0, 1),
      background-color .2s cubic-bezier(.2, 0, 0, 1),
      box-shadow .2s cubic-bezier(.2, 0, 0, 1),
      opacity .15s linear;
  }

  /* Sichtbar erst, wenn die Maus das Fenster wirklich berührt hat */
  .cursor-ring-el.is-visible {
    opacity: 1;
  }

  .cursor-ring-el svg {
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s cubic-bezier(.2, 0, 0, 1), transform .2s cubic-bezier(.2, 0, 0, 1);
  }

  /* Verweise: Ring füllt sich leicht, Pfeil erscheint */
  .cursor-ring-el.is-link {
    width: 3.25rem;
    height: 3.25rem;
    background: var(--cursor-fill-link);
  }

  .cursor-ring-el.is-link svg {
    opacity: 1;
    transform: none;
  }

  /* Externe Verweise und Download-Links: Magenta als zweite Markenfarbe */
  .cursor-ring-el.is-external {
    border-color: var(--cursor-ring-ext);
    background: var(--cursor-fill-ext);
    box-shadow: var(--cursor-glow-ext);
    color: var(--wp--preset--color--magenta);
  }

  /* Bilder und Video: größerer Ring, damit das Motiv sichtbar bleibt.
     Im Kopfbereich wird dieser Zustand nicht gesetzt (siehe cursor.js). */
  .cursor-ring-el.is-media {
    width: 5rem;
    height: 5rem;
    background: var(--cursor-fill-media);
  }

  /* Über Fließtext zurückhaltend – der Ring soll nicht beim Lesen stören */
  .cursor-ring-el.is-reading {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--cursor-fill-read);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Maustaste gedrückt */
  .cursor-ring-el.is-press {
    --cs: .82;
  }
}

/* Wer Bewegung abbestellt hat, behält den Systemzeiger */
@media (prefers-reduced-motion: reduce) {
  .cursor-ring-el {
    display: none;
  }

  html.cursor-ring,
  html.cursor-ring body,
  html.cursor-ring a,
  html.cursor-ring button {
    cursor: auto;
  }
}