/* Évszakos díszítés: karácsony (html[data-season="xmas"], a boot.js állítja be dec. 1. és jan. 6. között, vagy a ?xmas címmel).
   Minden szabály az évszak jelzőjéhez kötött, kivéve a díszek elemeit, amelyeket csak az app.js hoz létre ilyenkor. */

:root {
  --xmas-red: #d6202e;
  --xmas-snow: #f4f1ea;
  --santa-hat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'><path d='M9 36C12 16 26 6 43 9c4 1 8 4 10 8l5 19z' fill='%23d6202e'/><rect x='3' y='33' width='56' height='11' rx='5.5' fill='%23f4f1ea'/><circle cx='52' cy='9' r='6.5' fill='%23f4f1ea'/></svg>");
}

/* --- Mikulássapka a logón és a csapat tagjain --------------------------------------------------------- */

html[data-season="xmas"] .brand {
  position: relative;
}

html[data-season="xmas"] .brand::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -13px;
  width: 30px;
  height: 23px;
  background: var(--santa-hat) center / contain no-repeat;
  transform: rotate(-16deg);
  pointer-events: none;
}

html[data-season="xmas"] .member::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 7%;
  width: 52%;
  aspect-ratio: 64 / 48;
  background: var(--santa-hat) center / contain no-repeat;
  transform: rotate(-9deg);
  pointer-events: none;
}

html[data-season="xmas"] .member--you::after {
  left: 24%;
  transform: rotate(-9deg) translateY(0);
}

/* --- Finálé: cukorbot-csík, piros-zöld fény -------------------------------------------------------------- */

html[data-season="xmas"] .finale {
  background:
    radial-gradient(ellipse 42% 62% at 0% 100%, rgba(206, 58, 70, 0.24), transparent 70%),
    radial-gradient(ellipse 42% 62% at 100% 100%, rgba(63, 143, 95, 0.26), transparent 70%),
    radial-gradient(ellipse 70% 70% at 50% 108%, rgba(255, 150, 30, 0.22), transparent 70%),
    linear-gradient(180deg, var(--bg), #0b0e13 70%);
}

html[data-season="xmas"] .finale::before {
  background: repeating-linear-gradient(135deg, var(--xmas-red) 0 16px, var(--xmas-snow) 16px 32px);
}

.footer__season {
  margin: 22px 0 0;
  font: 600 18px/1.3 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd98a;
}

/* --- Égősor a hero tetején ---------------------------------------------------------------------------------- */

.garland {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-h) - 12px);
  left: 0;
  right: 0;
  height: 70px;
  pointer-events: none;
  opacity: calc(1 - var(--hp, 0) * 1.4);
  animation: garland-in 1.4s var(--ease) 2.2s both;
}

@keyframes garland-in {
  from {
    opacity: 0;
    translate: 0 -24px;
  }
}

.garland__wire {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.garland__wire path {
  fill: none;
  stroke: #1d2a20;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.bulb {
  --c: #ff4a5a;
  --g: 255, 74, 90;
  position: absolute;
  width: 11px;
  height: 16px;
  margin-left: -5.5px;
  border-radius: 50% 50% 46% 46% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 38% 30%, #fff 0 8%, var(--c) 46%);
  box-shadow: 0 0 10px 2px rgba(var(--g), 0.75), 0 0 34px 8px rgba(var(--g), 0.32);
  animation: bulb-twinkle var(--t, 3.4s) ease-in-out var(--d, 0s) infinite;
  transition: filter 0.4s, box-shadow 0.4s, background-color 0.4s;
}

.bulb::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -4px;
  width: 7px;
  height: 6px;
  border-radius: 1.5px;
  background: #1d2a20;
}

.bulb.c1 { --c: #ffc247; --g: 255, 194, 71; }
.bulb.c2 { --c: #43d27f; --g: 67, 210, 127; }
.bulb.c3 { --c: #55b8ff; --g: 85, 184, 255; }

@keyframes bulb-twinkle {
  0%, 100% {
    filter: brightness(1.08);
  }
  50% {
    filter: brightness(0.62);
  }
}

/* Lelőtt izzó: elalszik, pár másodperc múlva újra kigyullad. */
.bulb.is-broken {
  animation: none;
  filter: brightness(0.25) saturate(0.3);
  box-shadow: none;
}

.bulb.is-pop {
  animation: bulb-pop 0.45s ease-out;
}

@keyframes bulb-pop {
  0% {
    filter: brightness(3.2);
    box-shadow: 0 0 40px 18px rgba(var(--g), 0.95), 0 0 90px 30px rgba(var(--g), 0.5);
    transform: scale(1.5);
  }
  100% {
    filter: brightness(0.25) saturate(0.3);
    box-shadow: none;
    transform: scale(1);
  }
}

html[data-calm="on"] .bulb {
  animation: none;
}

html[data-motion="off"] .garland,
html[data-motion="off"] .bulb {
  animation: none !important;
}

@media (max-width: 860px) {
  .garland {
    top: calc(var(--nav-h) - 14px);
  }

  html[data-season="xmas"] .hero {
    padding-top: calc(var(--nav-h) + 52px);
  }

  .bulb {
    width: 9px;
    height: 13px;
    margin-left: -4.5px;
  }
}