/* ==========================================================================
   Halloweeni szezonális díszek – IDEIGLENES (lásd README „Szezonális díszítés: Halloween”)
   --------------------------------------------------------------------------
   Minden szabály a <html class="halloween"> osztályhoz kötött: az osztály
   nélkül ez a fájl semmit sem csinál. A díszeket a halloween.js teszi be.
   ========================================================================== */

/* Szívecske-füst a kéményből: őszi színekben (narancs, lila, zöld – mint a lufik a házikónál) */
.halloween .smoke--1 { color: #F28C28; }
.halloween .smoke--2 { color: #8A4FD8; }
.halloween .smoke--3 { color: #8CC63F; }

/* A nyitó „Kézműves alkotóház gyerekeknek” előtt a rózsaszín vonalka helyett egy kis tök */
.halloween .hero .eyebrow::before {
  width: 20px;
  height: 18px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 58'%3E%3Cpath d='M31 13c-1-5 1-9 5-11l3 2c-3 2-4 5-3 9z' fill='%236b7a2e'/%3E%3Cellipse cx='20' cy='35' rx='15' ry='19' fill='%23e2691a'/%3E%3Cellipse cx='44' cy='35' rx='15' ry='19' fill='%23e2691a'/%3E%3Cellipse cx='32' cy='35' rx='15' ry='21' fill='%23f58a24'/%3E%3Cpath d='M20 31l5-7 5 7zM34 31l5-7 5 7zM19 38q13 10 26 0q-3 9-13 9t-13-9z' fill='%235a2606'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- közös ---- */
.hw {
  position: absolute;
  z-index: var(--z-art);
  display: block;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.hw svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- denevérek ---- */
.hw-bat { width: clamp(30px, 3.4vw, 48px); }
.hw-bat--1 { top: 4%; left: 8%; }
.hw-bat--2 { top: 14%; right: 2%; width: clamp(24px, 2.6vw, 36px); }
.hw-bat--3 { top: -2%; left: 44%; width: clamp(20px, 2.2vw, 30px); }
.hw-bat--cta1 { top: -3.2rem; left: 8%; }
.hw-bat--cta2 { top: -1.9rem; left: calc(8% + 64px); width: clamp(22px, 2.4vw, 32px); }

.hw-bat__path { display: block; }
.hw-wing { transform-box: view-box; transform-origin: 40px 20px; }

/* ---- lelógó pók a fejléc alól (a nyitó szöveg és a házikó közti résben) ---- */
.hw-spider {
  top: 0;
  left: 47%;
  width: 26px;
  display: none;
}

@media (min-width: 960px) {
  .hw-spider { display: block; }
}

/* ---- szellem a Programjaink fölött ---- */
.hw-ghost {
  top: -4.2rem;
  left: 38%;
  width: clamp(54px, 5.5vw, 78px);
  rotate: -6deg;
}

/* ---- tökcsalád a Galéria címe mellett ---- */
.hw-pumpkins { display: flex; align-items: flex-end; gap: 2px; }
.hw-pumpkins svg { width: auto; }
.hw-pumpkins svg:nth-child(1) { height: clamp(34px, 3.4vw, 46px); }
.hw-pumpkins svg:nth-child(2) { height: clamp(24px, 2.4vw, 32px); margin-inline: -4px; }
.hw-pumpkins svg:nth-child(3) { height: clamp(28px, 2.8vw, 38px); }

.wonders .hw-pumpkins { top: 0.25rem; right: calc(4.5rem + clamp(78px, 6.5vw, 100px) + 1rem); }

.hw-pumpkins--footer { top: -2.1rem; left: 42%; }

/* ---- pókháló a „Miért minket?” doboz sarkában ---- */
.hw-web {
  top: 0;
  left: 0;
  width: clamp(64px, 7vw, 104px);
  color: var(--ink-400);
  opacity: 0.45;
  border-top-left-radius: inherit;
  overflow: hidden;
}

@media (max-width: 899.98px) {
  .wonders .hw-pumpkins { right: calc(var(--s-2) + 100px + 0.5rem); top: 0.5rem; }
}

@media (max-width: 719.98px) {
  .hw-ghost { top: -3.4rem; left: auto; right: 34%; }
  .hw-bat--3 { display: none; }
  .wonders .hw-pumpkins { right: var(--s-2); top: -0.75rem; }
  .hw-pumpkins--footer { left: auto; right: 38%; }
  .hw-bat--cta1 { left: 6%; }
  .hw-bat--cta2 { left: calc(6% + 52px); }
}

/* ---- vándor denevérek: a képernyő fölött repülnek át (a fejléc és a lebegő gomb alatt) ---- */
.hw-sky {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.hw-wander {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 0;
  translate: -50% -50%;
  will-change: transform;
}

.hw-wander svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- mozgás ---- */
@media (prefers-reduced-motion: no-preference) {
  .hw-wing--r { animation: hw-flap-r 0.34s ease-in-out infinite alternate; }
  .hw-wing--l { animation: hw-flap-l 0.34s ease-in-out infinite alternate; }
  .hw-bat__path { animation: hw-flit 9s ease-in-out infinite; }
  .hw-bat--2 .hw-bat__path { animation-duration: 11s; animation-delay: -4s; }
  .hw-bat--2 .hw-wing { animation-duration: 0.28s; }
  .hw-bat--3 .hw-bat__path { animation-duration: 13s; animation-delay: -7s; }
  .hw-bat--cta2 .hw-bat__path { animation-delay: -3s; }

  .hw-spider { animation: hw-dangle 5.5s ease-in-out infinite; transform-origin: 50% 0; }
  .hw-ghost { animation: hw-hover 4.2s ease-in-out infinite alternate; }

  .hero.is-offscreen .hw-bat__path,
  .hero.is-offscreen .hw-wing,
  .hero.is-offscreen .hw-spider { animation-play-state: paused; }
}

@keyframes hw-flap-r { from { transform: rotate(-10deg); } to { transform: rotate(24deg) scaleY(0.7); } }
@keyframes hw-flap-l { from { transform: rotate(10deg); } to { transform: rotate(-24deg) scaleY(0.7); } }

/* szabálytalan, csapongó kör – a denevér a helye körül röpköd */
@keyframes hw-flit {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  20% { translate: 26px -14px; rotate: 8deg; }
  45% { translate: 44px 10px; rotate: -4deg; }
  70% { translate: 12px 22px; rotate: -10deg; }
  85% { translate: -14px 6px; rotate: 4deg; }
}

@keyframes hw-dangle {
  0%, 100% { translate: 0 -34px; rotate: 0deg; }
  35% { translate: 0 0; rotate: 3deg; }
  60% { translate: 0 -12px; rotate: -3deg; }
}

@keyframes hw-hover {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

@media print {
  .hw, .hw-sky { display: none !important; }
}