/*
  Festive Lights (Reusable)
  - SVG string lights overlay (wire + bulbs)
  - Never blocks interactions: pointer-events: none
  - Default stacking: below nav z-50 (z-index: 40)
*/

:root {
  /* Keep below nav z-50, but above most page content */
  --festive-lights-z-index: 49;
}

.festive-lights-root,
#festive-lights-root {
  position: fixed;
  top: 6px;
  left: 6px;
  width: var(--festive-lights-width, 520px);
  height: var(--festive-lights-height, 140px);
  pointer-events: none;
  z-index: var(--festive-lights-z-index);
  overflow: visible;
  contain: layout paint;
}

.festive-lights-root[hidden],
#festive-lights-root[hidden] {
  display: none !important;
}

.festive-lights-root .festive-lights-svg,
#festive-lights-root .festive-lights-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.festive-lights-root .fl-wire,
#festive-lights-root .fl-wire {
  stroke: rgba(15, 23, 42, 0.55);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}

.festive-lights-root .fl-drop,
#festive-lights-root .fl-drop {
  stroke: rgba(15, 23, 42, 0.45);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
}

.festive-lights-root .fl-socket,
#festive-lights-root .fl-socket {
  fill: rgba(15, 23, 42, 0.55);
}

.festive-lights-root .fl-bulb,
#festive-lights-root .fl-bulb {
  fill: var(--fl-color, rgba(255, 90, 90, 0.85));
  opacity: 0.75;
  filter: drop-shadow(0 0 6px var(--fl-color, rgba(255, 90, 90, 0.85)));
  animation: fl-blink var(--fl-duration, 2.8s) ease-in-out infinite;
  animation-delay: var(--fl-delay, 0s);
  will-change: opacity;
}

.festive-lights-root .fl-bulb-highlight,
#festive-lights-root .fl-bulb-highlight {
  fill: rgba(255, 255, 255, 0.55);
  opacity: 0.5;
}

@keyframes fl-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  18% {
    opacity: 0.9;
  }
  28% {
    opacity: 0.55;
  }
  42% {
    opacity: 0.95;
  }
  55% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .festive-lights-root .fl-bulb,
  #festive-lights-root .fl-bulb {
    animation: none !important;
    opacity: 0.72;
    filter: none;
  }

  .festive-lights-root .fl-wire,
  #festive-lights-root .fl-wire {
    filter: none;
    opacity: 0.78;
  }
}