:root{
  --xsp-glow: 0.30;
  --xsp-bg: 0.12;
  --xsp-shine: 0.26; /* maradhat, de már nincs használva */
  --xsp-lights: 1;
  --xsp-garland: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%2290%22%20viewBox%3D%220%200%20400%2090%22%3E%0A%3Cpath%20d%3D%22M0%2025%20C%20100%2070%2C%20300%20-20%2C%20400%2025%22%20fill%3D%22none%22%20stroke%3D%22%230b5%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.95%22%2F%3E%0A%3Cg%20opacity%3D%220.98%22%3E%0A%3Ccircle%20cx%3D%2240%22%20cy%3D%2255%22%20r%3D%227%22%20fill%3D%22%23e11d48%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2240%22%20r%3D%226%22%20fill%3D%22%23f59e0b%22%2F%3E%0A%3Ccircle%20cx%3D%22140%22%20cy%3D%2260%22%20r%3D%227%22%20fill%3D%22%230ea5e9%22%2F%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%2238%22%20r%3D%226%22%20fill%3D%22%2322c55e%22%2F%3E%0A%3Ccircle%20cx%3D%22240%22%20cy%3D%2262%22%20r%3D%227%22%20fill%3D%22%23e11d48%22%2F%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%2240%22%20r%3D%226%22%20fill%3D%22%23f59e0b%22%2F%3E%0A%3Ccircle%20cx%3D%22340%22%20cy%3D%2255%22%20r%3D%227%22%20fill%3D%22%230ea5e9%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

#xsp-top-decor{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  pointer-events: none;
  z-index: 9999;
}
body.admin-bar #xsp-top-decor{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar #xsp-top-decor{ top: 46px; }
}

#xsp-garland{
  height: 90px;
  width: 100%;
  background-image: var(--xsp-garland);
  background-repeat: repeat-x;
  background-size: 400px 90px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,calc(var(--xsp-glow) * 0.35)));
}

/* blinking lights overlay bar */
@keyframes xspTwinkle {
  0%,100% { opacity: 0.65; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%     { opacity: 1.00; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.14)); }
}
@keyframes xspDrift {
  from { background-position: 0 0; }
  to   { background-position: 220px 0; }
}

#xsp-lights{
  height: 20px;
  margin-top: -18px;
  opacity: calc(var(--xsp-lights) * 1);
  background-image:
    radial-gradient(circle, rgba(225,29,72,0.95) 0 7px, transparent 8px),
    radial-gradient(circle, rgba(245,158,11,0.95) 0 7px, transparent 8px),
    radial-gradient(circle, rgba(22,163,74,0.95) 0 7px, transparent 8px),
    radial-gradient(circle, rgba(14,165,233,0.95) 0 7px, transparent 8px);
  background-size: 120px 20px, 120px 20px, 120px 20px, 120px 20px;
  background-position: 0 0, 30px 0, 60px 0, 90px 0;
  background-repeat: repeat-x;
  animation: xspTwinkle 1.2s ease-in-out infinite, xspDrift 2.6s linear infinite;
}

@media (max-width: 768px){
  #xsp-garland{ height: 70px; background-size: 400px 70px; }
  #xsp-lights{ height: 16px; margin-top:-14px; background-size: 110px 16px,110px 16px,110px 16px,110px 16px; }
}

/* background texture - apply to wrappers as well */
html, body, .ct-site, .ct-site-container, .site, #page, .site-content, .ct-container{
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,var(--xsp-bg)) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,calc(var(--xsp-bg) * 0.9)) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 72%, rgba(255,255,255,calc(var(--xsp-bg) * 0.7)) 0 2px, transparent 3px);
  background-size: 260px 260px;
  background-attachment: fixed;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #xsp-lights{ animation: none !important; }
}