:root {
  --seasonal-wire-height: 3px;
  --seasonal-wire-offset: 12px;
  --seasonal-bulb-size: 14px;
  --seasonal-bulb-glow: 14px;
  --seasonal-lights-opacity: 0.95;
  --seasonal-wire: #5a4636;
  --seasonal-bulb: #8b5a3c;
}

:root[data-season="winter"] { --seasonal-bulb: #7fb7ff; }
:root[data-season="spring"] { --seasonal-bulb: #7ac48f; }
:root[data-season="blossom"] { --seasonal-bulb: #f5a6c7; }
:root[data-season="summer"] { --seasonal-bulb: #f7b733; }
:root[data-season="halloween"] { --seasonal-bulb: #f4a460; }
:root[data-season="christmas"] { --seasonal-bulb: #e74c3c; }

#seasonal-lights {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 84px;
  pointer-events: none;
  z-index: 8;
  opacity: var(--seasonal-lights-opacity);
}

#seasonal-lights svg.light-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 84px;
}

#seasonal-lights .wire-path {
  fill: none;
  stroke: var(--seasonal-wire);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
  opacity: 0.9;
}

#seasonal-lights .light-bulb {
  position: absolute;
  width: var(--seasonal-bulb-size);
  height: var(--seasonal-bulb-size);
  border-radius: 999px;
  background: var(--bulb-color, var(--seasonal-bulb));
  color: var(--bulb-color, var(--seasonal-bulb));
  box-shadow:
    0 0 var(--seasonal-bulb-glow) currentColor,
    0 4px 10px rgba(0, 0, 0, 0.18);
  transform-origin: center top;
  animation: twinkle 3.4s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

#seasonal-lights .light-bulb::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: calc(var(--seasonal-bulb-size) - 8px);
  height: 5px;
  background: var(--seasonal-wire);
  border-radius: 3px;
}

#seasonal-lights.reduce-motion .light-bulb { animation: none; opacity: 0.75; }

@keyframes twinkle {
  0%, 100% { opacity: 0.9; transform: translateY(0) scale(1); }
  50% { opacity: 0.55; transform: translateY(1px) scale(0.96); }
}