/* /css/header-garland.css */

/* Стили для горизонтальной гирлянды в хедере */
.header-garland {
  position: absolute;
  top: calc(100% - 9px);
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 100;
  pointer-events: none;
  opacity: 0.9;
}

/* Огоньки */
.hg-light {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  z-index: 2;
  top: 8px;
  opacity: 0.2;
  animation: correct-blink 6s infinite ease-in-out;
  animation-play-state: paused;
}

.hg-light::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  animation: correct-glow 8s infinite ease-in-out;
  animation-play-state: paused;
}

.hg-light::after {
  content: '';
  position: absolute;
  width: 800%;
  height: 800%;
  border-radius: 50%;
  top: -350%;
  left: -350%;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle, currentColor 39%, transparent 10%);
  filter: blur(5px);
  animation: correct-glow 5s infinite ease-in-out;
  animation-play-state: paused;
}

/* Цвета огоньков */
.hg-light-green {
  background-color: #00cd6e;
  color: #00cd6e;
  box-shadow: 0 0 12px #00cd6e;
}

.hg-light-yellow {
  background-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 12px #ffd700;
}

.hg-light-red {
  background-color: #ff4444;
  color: #ff4444;
  box-shadow: 0 0 12px #ff4444;
}

.hg-light-blue {
  background-color: #029cf2;
  color: #029cf2;
  box-shadow: 0 0 12px #029cf2;
}

/* Анимации */
@keyframes correct-blink {
  0%   { opacity: 0.2; transform: scale(0.9); }
  20%  { opacity: 0.5; transform: scale(1.05); }
  40%  { opacity: 0.9; transform: scale(1.15); }
  60%  { opacity: 0.6; transform: scale(1.05); }
  80%  { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 0.2; transform: scale(0.9); }
}

@keyframes correct-glow {
  0%   { opacity: 0.3; transform: scale(0.8); }
  30%  { opacity: 0.8; transform: scale(1.8); }
  50%  { opacity: 1.0; transform: scale(4.5); }
  70%  { opacity: 0.5; transform: scale(2.5); }
  100% { opacity: 0.3; transform: scale(0.8); }
}