/* ==========================================================================
   CC Star Border - ein Lichtpunkt wandert am Rand des Buttons entlang:
   unten laeuft er nach rechts, oben gegenlaeufig nach links. Beide Bahnen
   sind um eine halbe Runde versetzt, damit immer eine der beiden Kanten
   leuchtet und keine Ruhepause entsteht.

   Injizierbare Klassen-Variante der Star-Border aus mm-rb.css: dort braucht
   der Effekt eine feste Huelle aus drei Spans, die man um den Inhalt bauen
   muss. Hier bekommt ein bestehender Button NUR die Klasse .ccx-starborder,
   die beiden Deko-Spans legt ccx-star.js zur Laufzeit an. Der Button bleibt
   damit in Elementor unveraendert und voll pflegbar.

   Bewusst echte KIND-Spans statt ::before/::after: die beiden Pseudo-Elemente
   des Buttons gehoeren bereits dem Specular-Effekt (.mmrb-specbtn, Glanzlicht
   + Annaeherungs-Ring). Da der Star Border eigene Knoten benutzt, liegen
   beide Effekte kollisionsfrei uebereinander - genau so ist es gewollt.

   Stapelung: die Spans liegen auf z-index -1. Der Host ist durch
   `isolation: isolate` eine eigene Stapel-Ebene, deshalb landet der Schein
   UEBER der Button-Flaeche und UNTER Text und Icon. Die Beschriftung bleibt
   dadurch immer vollstaendig lesbar.

   Stellschrauben (global, pro Button oder pro Button-Gruppe setzbar):
     --ccx-star-color      Farbe des Lichtpunkts
     --ccx-star-core       Farbe des hellen Kerns. Der Kern ist bewusst
                           heller als die Grundfarbe, sonst verschwindet der
                           Punkt auf den orangenen Buttons im eigenen Ton
     --ccx-star-halo       Farbe des weichen Hofs drumherum (folgt in
                           modernen Browsern automatisch --ccx-star-color)
     --ccx-star-speed      Dauer einer Runde
     --ccx-star-thickness  Hoehe des Lichtbands. Die Haelfte davon liegt
                           sichtbar auf der Kante, die andere Haelfte
                           schneidet der Host ab - so klebt der Schein am Rand
     --ccx-star-spread     Breite des Scheins, in Prozent der Button-Breite
     --ccx-star-opacity    Gesamt-Deckkraft beider Bahnen
   ========================================================================== */

.ccx-starborder {
  --ccx-star-color: #ffb765;
  --ccx-star-core: #fff4e4;
  --ccx-star-halo: rgba(255, 183, 101, 0.45);
  --ccx-star-speed: 5s;
  --ccx-star-thickness: 14px;
  --ccx-star-spread: 30%;
  --ccx-star-opacity: 1;
  /* eigene Stapel-Ebene, damit der Schein unter dem Text bleibt und nicht
     hinter die Button-Flaeche rutscht */
  isolation: isolate;
  /* schneidet die Bahn an Kante und Rundung ab: der Punkt laeuft an den
     Ecken sanft aus, statt neben dem Button weiterzufliegen */
  overflow: hidden;
}

/* Der Hof uebernimmt in modernen Browsern die eingestellte Farbe von selbst;
   der rgba-Wert oben bleibt als Rueckfall fuer aeltere Browser stehen. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .ccx-starborder {
    --ccx-star-halo: color-mix(in srgb, var(--ccx-star-color) 42%, transparent);
  }
}

.ccx-starborder > .ccx-starborder__b,
.ccx-starborder > .ccx-starborder__t {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--ccx-star-thickness);
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--ccx-star-opacity);
  /* drei Lagen von innen nach aussen: heller Kern, farbiger Punkt, weicher
     Hof. Die Reihenfolge ist wichtig - die erste Lage liegt oben. */
  background-image:
    radial-gradient(ellipse calc(var(--ccx-star-spread) / 5) 34% at 50% 50%,
      var(--ccx-star-core) 0%, transparent 78%),
    radial-gradient(ellipse calc(var(--ccx-star-spread) / 2.2) 52% at 50% 50%,
      var(--ccx-star-color) 0%, transparent 76%),
    radial-gradient(ellipse var(--ccx-star-spread) 64% at 50% 50%,
      var(--ccx-star-halo) 0%, transparent 76%);
  background-repeat: no-repeat;
  animation-duration: var(--ccx-star-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Untere Bahn: laeuft von links nach rechts. */
.ccx-starborder > .ccx-starborder__b {
  bottom: calc(var(--ccx-star-thickness) / -2);
  animation-name: ccx-star-bottom;
}

/* Obere Bahn: laeuft gegenlaeufig nach links und startet eine halbe Runde
   spaeter (negativer Vorlauf), damit sich die beiden Punkte abwechseln. */
.ccx-starborder > .ccx-starborder__t {
  top: calc(var(--ccx-star-thickness) / -2);
  animation-name: ccx-star-top;
  animation-delay: calc(var(--ccx-star-speed) / -2);
}

/* Weg der Bahnen: 90 % der Button-Breite links ausserhalb bis 90 % rechts
   ausserhalb. In den Endlagen steht der Schein komplett neben dem Button und
   wird vom Host abgeschnitten - es gibt also kein Aufblitzen am Rand. */
@keyframes ccx-star-bottom {
  from { transform: translateX(-90%); }
  to   { transform: translateX(90%); }
}
@keyframes ccx-star-top {
  from { transform: translateX(90%); }
  to   { transform: translateX(-90%); }
}

/* Zusatzklasse fuer Hosts, deren sichtbare Flaeche NICHT am Host selbst,
   sondern an einem inneren Element haengt: dort wuerde der Schein hinter
   dieser Flaeche verschwinden. Mit ccx-star-front laufen die Bahnen ueber
   dem Inhalt - nur dann sinnvoll, weil der Punkt dabei kurz ueber die
   Beschriftung streift. */
.ccx-starborder.ccx-star-front > .ccx-starborder__b,
.ccx-starborder.ccx-star-front > .ccx-starborder__t { z-index: 1; }

/* Zusatzklasse fuer runde Hosts (Icon- und Pfeil-Buttons): dort trifft die
   waagerechte Bahn die Kreiskante nur in einem schmalen Fenster. Das Band
   rutscht deshalb ganz nach innen und wird etwas hoeher, damit der Punkt
   laenger sichtbar bleibt. */
.ccx-starborder.ccx-star-round {
  --ccx-star-thickness: 12px;
  --ccx-star-spread: 30%;
}
.ccx-starborder.ccx-star-round > .ccx-starborder__b { bottom: 0; }
.ccx-starborder.ccx-star-round > .ccx-starborder__t { top: 0; }

@media (prefers-reduced-motion: reduce) {
  .ccx-starborder > .ccx-starborder__b,
  .ccx-starborder > .ccx-starborder__t { display: none; }
}