/*!
 * Glow Border - cienka, kolorowa, swiecaca obwodka biegnaca wokol elementu.
 * Odwzorowanie 1:1 z nagrania: kolejnosc barw (niebieski -> czerwony -> zolty
 * -> zielony), grubosc rdzenia linii, zasieg poswiaty i czas okrazenia
 * zmierzone piksel po pikselu z materialu zrodlowego.
 *
 * Uzycie:
 *   <div class="glow-border">
 *     <div class="glow-border__panel"> ...tresc... </div>
 *   </div>
 */

@property --gb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.glow-border {
  /* --- pokretla --- */
  --gb-radius: 24px;        /* promien zaokraglenia (zrodlo: 70px na 1206px szer. ekranu) */
  --gb-width: 1.6px;        /* rdzen linii - w zrodle ostry, ok. 2.5 px CSS */
  --gb-duration: 1.6s;      /* czas okrazenia; 1s = tempo dokladnie jak w zrodle */
  --gb-bloom: 11px;         /* zasieg poswiaty na zewnatrz */
  --gb-bloom-scale: 2;      /* ile razy grubsza jest warstwa poswiaty */
  --gb-bloom-opacity: 0.7;
  --gb-bg: #0c0d11;         /* tlo wnetrza okienka */
  --gb-idle: rgba(255, 255, 255, 0.09);  /* statyczna ramka pod obwodka */

  /* --- zmierzone barwy (znormalizowane do pelnej jasnosci) --- */
  --gb-blue:   #165eff;
  --gb-red:    #ff2438;
  --gb-yellow: #ffd400;
  --gb-green:  #00e650;

  position: relative;
  display: block;
  padding: var(--gb-width);
  border-radius: var(--gb-radius);
  background: var(--gb-idle);
  isolation: isolate;
}

/* Wspolny wzor: kometa. Czolo (niebieskie) prowadzi, ogon gasnie przez
   czerwien i zolc do zieleni. Ok. 45% obwodu swieci, reszta jest ciemna. */
.glow-border::before,
.glow-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--gb-angle) at 50% 50%,
    transparent 0deg,
    transparent 246deg,
    color-mix(in srgb, var(--gb-green) 0%, transparent) 252deg,
    var(--gb-green) 280deg,
    var(--gb-yellow) 300deg,
    var(--gb-red) 320deg,
    var(--gb-blue) 344deg,
    var(--gb-blue) 353deg,
    transparent 358deg,
    transparent 360deg
  );
  animation: gb-spin var(--gb-duration) linear infinite;
  will-change: transform;
}

/* warstwa 1: ostry rdzen linii - widac tylko obwodke szerokosci --gb-width */
.glow-border::before {
  z-index: 1;
}

/* warstwa 2: rozmyta poswiata. Wyciety srodek (maska obreczy) sprawia, ze
   blask idzie na zewnatrz, a nie rozlewa sie po wnetrzu okienka. */
.glow-border::after {
  z-index: 0;
  inset: calc(var(--gb-width) * -1 * var(--gb-bloom-scale));
  border-radius: calc(var(--gb-radius) + var(--gb-width) * var(--gb-bloom-scale));
  padding: calc(var(--gb-width) * var(--gb-bloom-scale) * 1.6);
  filter: blur(var(--gb-bloom));
  opacity: var(--gb-bloom-opacity);
  -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;
}

/* wnetrze zaslania srodek gradientu, zostawiajac cienka obrecz */
.glow-border__panel {
  position: relative;
  z-index: 2;
  border-radius: calc(var(--gb-radius) - var(--gb-width));
  background: var(--gb-bg);
  overflow: hidden;
}

@keyframes gb-spin {
  to { --gb-angle: 360deg; }
}

/* --- wariant: pojedynczy przebieg jak w zrodle (0.65 s, potem gasnie) ---
   dodaj klase .is-flash zeby odpalic; usun i dodaj ponownie zeby powtorzyc  */
.glow-border--once::before,
.glow-border--once::after {
  animation: none;
  opacity: 0;
}
.glow-border--once.is-flash::before {
  animation: gb-spin 0.96s linear 1, gb-fade 0.96s ease-out 1;
}
.glow-border--once.is-flash::after {
  animation: gb-spin 0.96s linear 1, gb-fade 0.96s ease-out 1;
  opacity: 0;
}
@keyframes gb-fade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-border::before,
  .glow-border::after { animation: none; }
}