/* Seasonal decoration (SeasonalTheme.effect): snowfall and a string of lights.
   Kept subtle: thin, slow, no layout shift, nothing clickable covered. */

/* ---- Snow ---- */
.seasonal-snow {
  position: fixed;
  inset: 0;
  z-index: 800;              /* above the page, below the menu, dialogs and cookie banner */
  pointer-events: none;
}
.seasonal-snow[hidden] { display: none; }

.snow-toggle {
  position: fixed;
  left: 18px;
  bottom: 20px;
  z-index: 999;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(75, 60, 45, 0.78);   /* --nav-bg, slightly see-through */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  opacity: 0.8;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.snow-toggle[hidden] { display: none; }
.snow-toggle:hover,
.snow-toggle:focus-visible { opacity: 1; background: var(--accent-warm, #ae5c40); }
.snow-toggle:focus-visible { outline: 3px solid var(--accent-gold, #c9954e); outline-offset: 2px; }
.snow-toggle.is-off { opacity: 0.55; }
.snow-toggle.is-off::after {   /* diagonal "off" line */
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* ---- String of lights along the bottom of the header ----
   Drawn with repeating CSS gradients: one static layer (wire + sockets) and
   four colour layers that each fade in and out as a whole. Four animated
   layers instead of one per bulb keeps it cheap even on slow phones. */
.holiday-lights {
  --spacing: 38px;                 /* distance between bulbs */
  --period: calc(var(--spacing) * 4);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 30px;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  /* wire */
  background: linear-gradient(rgba(40, 30, 20, 0.75), rgba(40, 30, 20, 0.75)) 0 5px / 100% 2px no-repeat;
}
.holiday-lights::before {          /* sockets, one above every bulb */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #8a7660 0 6px, transparent 6px) calc(var(--spacing) * 0.5 - 3px) 6px / calc(var(--spacing) * 2) 4px repeat-x,
    linear-gradient(to right, #8a7660 0 6px, transparent 6px) calc(var(--spacing) * 1.5 - 3px) 9px / calc(var(--spacing) * 2) 4px repeat-x;
}
.holiday-lights span {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: var(--period) 30px;
  will-change: opacity;
  animation: holiday-twinkle 3.2s ease-in-out infinite;
  /* bulb (ellipse) + soft glow around it; --c is the colour, --x / --y its spot */
  background-image:
    radial-gradient(4.5px 7px at var(--x) var(--y), var(--c) 0 82%, transparent 100%),
    radial-gradient(11px 12px at var(--x) var(--y), var(--glow) 0, transparent 100%);
}
.holiday-lights span:nth-child(1) { --c: #e8574d; --glow: rgba(232, 87, 77, 0.45);   --x: calc(var(--spacing) * 0.5); --y: 16px; animation-delay: -0.4s; }
.holiday-lights span:nth-child(2) { --c: #ffd88a; --glow: rgba(255, 216, 138, 0.5);  --x: calc(var(--spacing) * 1.5); --y: 19px; animation-delay: -1.6s; animation-duration: 4.1s; }
.holiday-lights span:nth-child(3) { --c: #6fbf73; --glow: rgba(111, 191, 115, 0.45); --x: calc(var(--spacing) * 2.5); --y: 16px; animation-delay: -2.3s; }
.holiday-lights span:nth-child(4) { --c: #fff4dc; --glow: rgba(255, 244, 220, 0.55); --x: calc(var(--spacing) * 3.5); --y: 19px; animation-delay: -0.9s; animation-duration: 3.7s; }

@keyframes holiday-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

@media (max-width: 640px) {
  .holiday-lights { --spacing: 30px; }
  .snow-toggle { left: 12px; bottom: 16px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .holiday-lights span { animation: none; }
}

@media print {
  .seasonal-snow, .snow-toggle, .holiday-lights { display: none !important; }
}