/* ═══════════════════════════════════════════════════════════
   Burcsibro — Karácsonyi dekorációs réteg (overlay)
   Teljesen különálló. Minden szabály `xmas-` prefixszel.
   Eltávolítás: töröld az index.html 2 sorát + e fájlt + xmas.js.
   ═══════════════════════════════════════════════════════════ */

/* ── Hó — pure-CSS parallax (3 réteg) ──
   navbar (z-index:100) alatt, pointer-events:none.
   A mozgást a fall + drift keyframe-ek hajtják. */
#xmas-snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  overflow: hidden;
}

.xmas-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0); /* kompozitor-hint */
}

/* egy pehely: a szülő esik (Y), a ::before sodródik + pörög (X + rotate) */
.xmas-flake {
  position: absolute;
  top: -14vh;
  left: calc(var(--x, 50) * 1%);
  animation: xmas-fall var(--fall, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.xmas-flake::before {
  content: "\2744"; /* ❄ */
  display: block;
  font-size: var(--size, 18px);
  line-height: 1;
  color: #fff;
  opacity: var(--opacity, 0.6);
  filter: blur(var(--blur, 0px));
  transform-origin: 50% 50%;
  will-change: transform;
  animation: xmas-drift var(--driftDur, 6s) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) * 0.5);
  text-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

/* glyph-változatosság extra markup nélkül */
.xmas-flake:nth-child(3n)::before   { content: "\2746"; } /* ❆ */
.xmas-flake:nth-child(3n+2)::before { content: "\2745"; } /* ❅ */

/* parallax-presetek */
.xmas-snow--far .xmas-flake {
  --size: clamp(9px, 1vw, 13px);
  --opacity: 0.22;
  --blur: 1.2px;
  --driftDur: 10s;
}
.xmas-snow--mid .xmas-flake {
  --size: clamp(12px, 1.4vw, 18px);
  --opacity: 0.42;
  --blur: 0.55px;
  --driftDur: 8s;
}
.xmas-snow--near .xmas-flake {
  --size: clamp(16px, 2vw, 28px);
  --opacity: 0.7;
  --blur: 0px;
  --driftDur: 6s;
}

@keyframes xmas-fall {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 132vh, 0); }
}

/* természetes libbenés: oldalra sodródás + forgás (amplitúdó: --drift) */
@keyframes xmas-drift {
  0%   { transform: translateX(0) rotate(0turn); }
  35%  { transform: translateX(calc(var(--drift, 40px) * -0.6)) rotate(0.35turn); }
  70%  { transform: translateX(var(--drift, 40px)) rotate(0.75turn); }
  100% { transform: translateX(0) rotate(1turn); }
}

/* kis képernyőn ritkítjuk a pelyheket (teljesítmény + tisztaság) */
@media (max-width: 480px) {
  .xmas-snow--far .xmas-flake:nth-child(n + 11),
  .xmas-snow--mid .xmas-flake:nth-child(n + 11),
  .xmas-snow--near .xmas-flake:nth-child(n + 11) {
    display: none;
  }
}

/* ── Repülő Mikulás ── a hó fölött, de interakciót nem fog el ── */
#xmas-santa {
  position: fixed;
  top: 0;
  left: 0;
  width: 190px;
  height: auto;
  pointer-events: none;
  z-index: 96;
  will-change: transform;
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

#xmas-santa.xmas-santa--flying {
  /* a repülést JS inline transition + transform vezérli */
  opacity: 1;
}

/* enyhe fel-le ringás, a vízszintes mozgás külön (JS transform) */
#xmas-santa .xmas-santa-inner {
  display: block;
  animation: xmas-bob 3.2s ease-in-out infinite;
}

@keyframes xmas-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-9px) rotate(1deg); }
}

/* a szán mögötti csillámcsóva pislákol */
#xmas-santa .xmas-santa-trail {
  animation: xmas-trail 1.1s ease-in-out infinite;
  transform-origin: right center;
}

@keyframes xmas-trail {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

/* ── Meleg-arany égősor a Séf Ajánlata köré ── */
.xmas-lights {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  z-index: 3;
  border-radius: 22px;
}

.xmas-lights .xmas-bulb {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dd 0%, #ffd37a 45%, #ffb547 100%);
  box-shadow:
    0 0 6px 2px rgba(255, 183, 71, 0.75),
    0 0 12px 4px rgba(255, 211, 122, 0.45);
  transform: translate(-50%, -50%);
  animation: xmas-twinkle 3.2s ease-in-out infinite;
}

@keyframes xmas-twinkle {
  0%, 100% {
    opacity: 0.55;
    box-shadow:
      0 0 4px 1px rgba(255, 183, 71, 0.55),
      0 0 8px 2px rgba(255, 211, 122, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 8px 3px rgba(255, 183, 71, 0.9),
      0 0 16px 6px rgba(255, 211, 122, 0.55);
  }
}

/* ═══════════════════════════════════════════════════════════
   Csillogó karácsonyfa — bal alsó sarok, diszkrét
   Rajzolódó körvonal (stroke-dashoffset) + körbefutó
   szikracsóva (canvas) + lágyan megjelenő felirat.
   z-index 94 → a hó (95) ELŐTTE esik = mélység.
   ═══════════════════════════════════════════════════════════ */
#xmas-tree {
  position: fixed;
  right: 8px;
  bottom: 70px;
  width: 210px;
  height: 285px;
  pointer-events: none;
  z-index: 94;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

#xmas-tree.xmas-tree--in { opacity: 0.92; }

#xmas-tree canvas,
#xmas-tree svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* a felirat finoman pislákol */
#xmas-tree .xmas-tree-caption {
  animation: xmas-cap-glow 3.6s ease-in-out infinite;
}

@keyframes xmas-cap-glow {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* kisebb képernyőn a fa zsugorodik, hogy ne legyen tolakodó */
@media (max-width: 640px) {
  #xmas-tree { width: 140px; height: 190px; right: 4px; bottom: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   Villódzó égősor — fixed csík a navbar alá ÉS az oldal aljára
   Görgetéskor a helyén marad (position:fixed). Menős, színes,
   aszinkron villódzással (nem egyszerre kapcsol minden izzó).
   pointer-events:none → nem fogja el a kattintást.
   ═══════════════════════════════════════════════════════════ */
.xmas-string {
  position: fixed;
  left: 0;
  width: 100%;
  height: 26px;
  pointer-events: none;
  z-index: 101;            /* a navbar (100) fölött, de modál (2000) alatt */
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  overflow: visible;
}

/* a vezeték: finom ívelt vonal az izzók mögött */
.xmas-string::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(60,40,20,0) 0%, rgba(90,60,30,0.55) 8%,
    rgba(90,60,30,0.55) 92%, rgba(60,40,20,0) 100%);
}

.xmas-string--top    { top: 64px; }   /* közvetlenül a navbar alatt (JS pontosítja) */
.xmas-string--bottom { bottom: 0; transform: scaleY(-1); } /* izzók fölfelé lógnak */

/* egy izzó: kis körte, erős glow, lógó vezetékkel */
.xmas-string .xmas-sbulb {
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff 0%, var(--c, #ffd37a) 55%, var(--c2, #ffb547) 100%);
  box-shadow:
    0 0 7px 2px var(--glow, rgba(255,183,71,0.8)),
    0 0 15px 5px var(--glow2, rgba(255,211,122,0.45));
  animation: xmas-flicker var(--dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* kis „foglalat" az izzó tetején, hogy a vezetékről lógjon */
.xmas-string .xmas-sbulb::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 3px; height: 5px;
  background: #6e4a26;
  transform: translateX(-50%);
  border-radius: 1px;
}

/* egységes meleg-arany izzók (mint a Séf ajánlata) */
.xmas-string .xmas-sbulb {
  --c: #ffd37a; --c2: #ffb547;
  --glow: rgba(255,183,71,0.85); --glow2: rgba(255,211,122,0.5);
}

@keyframes xmas-flicker {
  0%, 100% { opacity: 0.45; filter: brightness(0.7); }
  25%      { opacity: 1;    filter: brightness(1.3); }
  40%      { opacity: 0.6;  filter: brightness(0.85); }
  60%      { opacity: 1;    filter: brightness(1.25); }
  80%      { opacity: 0.55; filter: brightness(0.8); }
}

/* ── Akadálymentesség: mozgáscsökkentés ── */
@media (prefers-reduced-motion: reduce) {
  #xmas-snow { display: none; }
  #xmas-santa { display: none; }
  #xmas-tree { display: none; }
  .xmas-lights .xmas-bulb { animation: none; opacity: 0.85; }
  .xmas-string .xmas-sbulb { animation: none; opacity: 0.9; }
}