/* ═══════════════════════════════════════════════════════════════════════════
   hatter.css — a lap háttere: szakaszonként más hangulat, és egy kis mozgó világ mögötte.

   Ki használja: az index.html (a landing.css és az oldalak.css UTÁN töltve).

   Három réteg, alulról felfelé:
     1) szakaszonkénti színfolt és motívum (.hatter::before / ::after, z-index:-2) — minden
        szakasz kicsit más hangulatú: más színek, más jelkép;
     2) a „kis animáció” vászna (.hatter-vaszon, z-index:-1; rajzolja a hatter.js): a főoldali
        hős hulló levelei ma az egész lapon végigmennek, és szakaszonként mást hullatnak
        (levél, hamvadó parázs, liliom, mancs, csillag, konfetti, buborék, szentjánosbogár);
     3) a tartalom (kártyák, szövegek) — a normál rétegben, felettük.

   Mit ne felejts:
    – A színfoltok és a vászon a <body> alatti NEGATÍV rétegben ülnek. Ez csak akkor működik, ha
      egyik szülőjük (body, main, .hatter) sem hoz létre „stacking context”-et: ne adj nekik
      z-index-et, opacity-t, transform-ot, filter-t, isolation-t, overflow-t.
    – Semmi nem lóghat ki oldalra. A mozgó motívumok SVG-fájlok (assets/motivumok/), amelyek a
      SAJÁT belsejükben forognak vagy ringatóznak: a doboz áll, ezért a lap szélessége nem nő,
      telefonon sem. (A szülők overflow-ja ráadásul a belépő animációkat is elrontaná — lásd a
      view-timeline jegyzetet.)
    – Minden mozgás kikapcsol, ha a látogató kevesebb mozgást kért: a motívum-SVG-k saját
      @media-szabályával, a vászon a hatter.js-ben, a többi az oldalak.css végi általános szabállyal.
   ═══════════════════════════════════════════════════════════════════════════ */

.hatter-vaszon{position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none}

.hatter{position:relative; padding-bottom:clamp(40px,6vw,88px)}
.hatter::before,.hatter::after{content:""; position:absolute; z-index:-2; pointer-events:none}
/* A színfolt kissé belelóg a szomszéd szakaszba, hogy ne legyen éles váltás. */
.hatter::before{
  left:0; right:0; top:-140px; bottom:-140px;
  /* A színfolt a bele-lógó 140 pxen elhalványul: nincs éles szél a szakaszok határán. */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}

/* ─── Cserkészet: égbolt és homok — lassan forgó iránytű-rózsa ─── */
.hatter--cserkeszet::before{
  background:
    radial-gradient(58rem 34rem at 94% 4%, rgba(94,147,184,.24), transparent 64%),
    radial-gradient(46rem 30rem at 0% 52%, rgba(244,184,96,.22), transparent 64%),
    radial-gradient(42rem 28rem at 76% 100%, rgba(127,168,140,.20), transparent 64%);
}
.hatter--cserkeszet::after{
  right:2%; top:5%; width:min(500px,64%); aspect-ratio:1;
  background:url("motivumok/iranytu.svg") center/contain no-repeat;
}

/* ─── Csapat: tábortűz-melegség — nagy, finoman ringó liliom ─── */
.hatter--csapat::before{
  background:
    radial-gradient(54rem 34rem at 6% 14%, rgba(164,40,31,.13), transparent 64%),
    radial-gradient(50rem 32rem at 96% 46%, rgba(224,138,60,.24), transparent 64%),
    radial-gradient(44rem 28rem at 30% 100%, rgba(244,184,96,.22), transparent 64%);
}
.hatter--csapat::after{
  content:"⚜"; right:6%; top:22%; font-size:clamp(200px,32vw,500px); line-height:1; color:rgba(164,40,31,.07);
  transform-origin:50% 100%; animation:ringat 9s ease-in-out infinite;
}

/* ─── Felépítés: erdőzöld, fenyősor az alján ─── */
.hatter--felepites::before{
  background:
    radial-gradient(58rem 34rem at 92% 12%, rgba(127,168,140,.32), transparent 64%),
    radial-gradient(44rem 28rem at 0% 70%, rgba(94,147,184,.18), transparent 64%),
    radial-gradient(40rem 26rem at 60% 100%, rgba(244,184,96,.18), transparent 64%);
}
.hatter--felepites::after{
  left:0; right:0; bottom:0; height:clamp(110px,18vw,210px);
  background:url("motivumok/fenyok.svg") center bottom/auto 100% repeat-x;
}

/* ─── Vezetőség: arany fény — napsugár-legyező a szakasz tetején ─── */
.hatter--vezetoseg::before{
  background:
    radial-gradient(56rem 34rem at 50% 6%, rgba(244,184,96,.32), transparent 66%),
    radial-gradient(44rem 28rem at 8% 80%, rgba(224,138,60,.15), transparent 64%),
    radial-gradient(44rem 28rem at 94% 70%, rgba(94,147,184,.16), transparent 64%);
}
.hatter--vezetoseg::after{
  left:50%; top:-20px; width:min(1000px,100%); aspect-ratio:4/1; translate:-50% 0;
  background:url("motivumok/napsugar.svg") center top/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(#000 35%, transparent); mask-image:linear-gradient(#000 35%, transparent);
}

/* ─── Programok: égszínkék, pontrács — mint egy naptár négyzethálója ─── */
.hatter--programok::before{
  background:
    radial-gradient(60rem 32rem at 10% 6%, rgba(94,147,184,.28), transparent 64%),
    radial-gradient(46rem 30rem at 96% 60%, rgba(127,168,140,.20), transparent 64%),
    radial-gradient(40rem 24rem at 40% 100%, rgba(246,196,83,.18), transparent 64%);
}
.hatter--programok::after{
  left:0; right:0; top:0; bottom:0;
  background-image:radial-gradient(rgba(62,92,72,.24) 1.6px, transparent 1.9px); background-size:34px 34px;
  -webkit-mask-image:linear-gradient(115deg, #000, transparent 42%); mask-image:linear-gradient(115deg, #000, transparent 42%);
}

/* ─── Galéria: barack és rózsa — egy lebegő, üres fotókeret ─── */
.hatter--galeria::before{
  background:
    radial-gradient(52rem 30rem at 88% 10%, rgba(240,160,140,.26), transparent 64%),
    radial-gradient(44rem 28rem at 4% 46%, rgba(246,196,83,.24), transparent 64%),
    radial-gradient(40rem 26rem at 70% 100%, rgba(94,147,184,.18), transparent 64%);
}
.hatter--galeria::after{
  left:5%; top:3%; width:min(280px,36%); aspect-ratio:4/5; rotate:-9deg;
  border:10px solid rgba(255,255,255,.62); border-bottom-width:44px; border-radius:6px; background:rgba(94,147,184,.12);
  box-shadow:0 14px 34px rgba(42,31,28,.09); animation:lebeg 11s ease-in-out infinite;
}

/* ─── Szülőknek: napsárga és ágyazott zöld — kanyargó ösvény ─── */
.hatter--szuloknek::before{
  background:
    radial-gradient(58rem 34rem at 92% 8%, rgba(246,196,83,.28), transparent 64%),
    radial-gradient(46rem 30rem at 2% 52%, rgba(127,168,140,.26), transparent 64%),
    radial-gradient(42rem 26rem at 66% 100%, rgba(224,138,60,.16), transparent 64%);
}
.hatter--szuloknek::after{
  left:0; top:4%; bottom:4%; width:min(360px,44%);
  background:url("motivumok/osveny.svg") left center/auto 100% no-repeat;
}

/* ─── Záró rész: meleg hajnal ─── */
.hatter--zaro::before{
  background:
    radial-gradient(56rem 30rem at 50% 0%, rgba(244,184,96,.24), transparent 66%),
    radial-gradient(44rem 26rem at 90% 100%, rgba(164,40,31,.10), transparent 64%);
}

@media (max-width:640px){
  .hatter--cserkeszet::after,.hatter--csapat::after,.hatter--galeria::after,.hatter--szuloknek::after{opacity:.6}
}
@media print{.hatter-vaszon,.hatter::before,.hatter::after{display:none}}