/*
 * PaperOffice „laufender Rand“ (po-rb) – gemeinsame Optik für Website, App, PDF Reader und MCP-Dialog.
 * Nur für den EINEN Hauptknopf je Ansicht. Der Effekt liegt als Überlagerung im Randbereich des Knopfes:
 * kein Einfluss auf Layout, Klickfläche, Fokusring oder Schriftkontrast.
 *
 * Andocken an bestehende Knöpfe: Klasse .po-run-border (oder Attribut data-po-rb) setzen, das JS-Modul legt Ring und
 * Lichtpunkt selbst an. Vorgerendertes Markup (Website/Astro) ist ebenfalls möglich:
 *   <a class="… po-rb" data-po-rb href="…">
 *     <span class="po-rb__ring" aria-hidden="true"><span class="po-rb__beam"></span></span>
 *     Text
 *   </a>
 *
 * Ablauf: Der Lichtpunkt läuft dauerhaft und ruhig (Entscheidung Daniel 25.10.), pausiert außerhalb des Bildes.
 * Bei prefers-reduced-motion bleibt nur der ruhige, statische Verlaufsrand.
 * Ohne JS oder ohne offset-path: keine Animation, Knopf unverändert.
 */

.po-rb {
  --po-rb-w: 2px;                 /* Randbreite */
  --po-rb-dur: 4s;                /* eine Runde */
  --po-rb-size: 96px;             /* Durchmesser des Lichtpunkts */
  --po-rb-rest: linear-gradient(90deg, rgba(22, 184, 166, 0.42), rgba(37, 99, 235, 0.42));
  --po-rb-beam: radial-gradient(circle, #ffffff 0%, #5eead4 14%, #16b8a6 30%, rgba(37, 99, 235, 0.75) 46%, rgba(37, 99, 235, 0) 66%);
}

/* Dunkle Fassung: hellerer Punkt, etwas kräftigerer Ruherand.
   Fest: .po-rb--dark / .po-rb--light. Aus dem Umfeld: [data-theme="dark"], .dark, .dark-mode, .theme-dark.
   Systemabhängig (Reader „auto“): .po-rb--auto bzw. [data-theme="auto"]. */
.po-rb.po-rb--dark,
[data-theme="dark"] .po-rb:not(.po-rb--light),
.dark .po-rb:not(.po-rb--light),
.dark-mode .po-rb:not(.po-rb--light),
.theme-dark .po-rb:not(.po-rb--light) {
  --po-rb-rest: linear-gradient(90deg, rgba(94, 234, 212, 0.38), rgba(96, 165, 250, 0.38));
  --po-rb-beam: radial-gradient(circle, #ffffff 0%, #99f6e4 14%, #2dd4bf 30%, rgba(96, 165, 250, 0.8) 46%, rgba(96, 165, 250, 0) 66%);
}

@media (prefers-color-scheme: dark) {
  .po-rb.po-rb--auto,
  [data-theme="auto"] .po-rb:not(.po-rb--light) {
    --po-rb-rest: linear-gradient(90deg, rgba(94, 234, 212, 0.38), rgba(96, 165, 250, 0.38));
    --po-rb-beam: radial-gradient(circle, #ffffff 0%, #99f6e4 14%, #2dd4bf 30%, rgba(96, 165, 250, 0.8) 46%, rgba(96, 165, 250, 0) 66%);
  }
}

.po-rb__ring {
  display: none;
}

/* Aktiv erst, wenn das JS den Pfad gesetzt hat (Klasse is-po-rb-ready) */
.po-rb.is-po-rb-ready {
  isolation: isolate;
}

.po-rb.is-po-rb-ready > .po-rb__ring {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--po-rb-w);
  border-radius: inherit;
  background: var(--po-rb-rest);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  overflow: hidden;
  pointer-events: none;
}

.po-rb__beam {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--po-rb-size);
  height: var(--po-rb-size);
  border-radius: 50%;
  background: var(--po-rb-beam);
  offset-anchor: center;
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  pointer-events: none;
}

@keyframes po-rb-run {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* Läuft dauerhaft; außer Sicht (data-po-rb-off) pausiert */
.po-rb.is-po-rb-ready .po-rb__beam {
  opacity: 1;
  animation: po-rb-run var(--po-rb-dur) linear infinite;
}

.po-rb[data-po-rb-off] .po-rb__beam {
  animation-play-state: paused;
}

@supports not (offset-path: path("M 0 0 H 1")) {
  .po-rb__beam { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .po-rb .po-rb__beam,
  .po-rb.is-po-rb-ready .po-rb__beam {
    animation: none;
    opacity: 0;
  }
}

@media (forced-colors: active) {
  .po-rb .po-rb__ring { display: none; }
}