/* ============================================================
   Hello Biztonság — BIZTONSÁGOS SZÓRAKOZÁS aloldal stílus
   Minden szabály .bsz alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .bsz wrappert (ld. szekció-fájl).
   A dinamikus listákat (alkohol-szimulátor, királyfi-kihívások,
   segíts-lépések) a bsz-page.js építi fel — a belső stílus ott,
   inline van.
   ============================================================ */

.bsz{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
.bsz *{box-sizing:border-box}
.bsz img{display:block}
.bsz a{text-decoration:none}
.bsz button{font-family:inherit}
.bsz .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bsz .i svg{width:100%;height:100%;display:block}

/* ---- Interaktív elemek ---- */
.bsz-step{cursor:pointer;transition:background .2s,border-color .2s}

/* ---- Marquee tétel. Azért osztály és nem inline stílus, mert az üzenetek
   félenként háromszor ismétlődnek (ld. a szekció HTML magyarázatát), és
   36 db inline stílusos span olvashatatlanná tenné a beillesztendő blokkot. */
.bsz-marq-item{font:700 13px 'Space Mono',monospace;color:#fff;padding:0 22px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

/* ---- Animációk ---- */
@keyframes bszfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes bszpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,90,0)}}
@keyframes bszpulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes bszmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bszrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes bszpop{from{opacity:0;transform:translateY(20px) scale(.96)}60%{transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bszshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes bszbreath{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,90,90,.45)}50%{transform:scale(1.025);box-shadow:0 14px 34px -6px rgba(255,90,90,.5)}}
.bsz-pop{animation:bszpop .5s cubic-bezier(.2,.9,.3,1.2) backwards}

/* ---- HERO jelenet: poharak úsznak be az asztalra, majd gépelt üzenet ----
   A bsz-page.js (initHeroScene) teszi rá a .bsz-run osztályt, amikor a
   jelenet a képernyőre kerül — enélkül semmi nem indul el, így a látogató
   nem egy már lefutott animációt talál. Az id-t (#bsz-hero-scene) ne írd át. */
.bsz-scene-stage{position:relative;overflow:hidden;padding-top:16px}
.bsz-scene-cups{display:flex;align-items:flex-end;justify-content:center;gap:16px;height:58px}
.bsz-cup{position:relative;flex:none;width:42px;height:42px;opacity:0}
.bsz-cup .i{width:42px;height:42px}
/* asztallap: a poharak ezen állnak */
.bsz-tabletop{height:8px;border-radius:4px;background:linear-gradient(180deg,rgba(247,245,240,.34),rgba(247,245,240,.13));box-shadow:0 8px 22px -8px rgba(0,0,0,.7)}
/* a 3. pohárra rajzolódó X */
.bsz-cup-x{position:absolute;inset:-4px;opacity:0;pointer-events:none}
.bsz-cup-x line{stroke:#FF5A5A;stroke-width:4;stroke-linecap:round;stroke-dasharray:56;stroke-dashoffset:56}

/* 230px: az 1. pohár alaphelyzete ~53px-nél van a 264px-es színpadon, tehát
   ennyi kell, hogy induláskor MINDHÁROM pohár a dobozon kívül legyen és
   tényleg beússzon — 190px-nél az első már a szélén látszana. */
@keyframes bszcupin{from{opacity:0;transform:translateX(230px)}to{opacity:1;transform:translateX(0)}}
@keyframes bszxshow{to{opacity:1}}
@keyframes bszxdraw{to{stroke-dashoffset:0}}

.bsz-run .bsz-cup{animation:bszcupin .65s cubic-bezier(.2,.85,.3,1) both}
.bsz-run .bsz-cup1{animation-delay:.25s}
.bsz-run .bsz-cup2{animation-delay:.6s}
.bsz-run .bsz-cup3{animation-delay:1s}
.bsz-run .bsz-cup-x{animation:bszxshow .01s linear 1.75s both}
.bsz-run .bsz-cup-x line{animation:bszxdraw .4s ease-out 1.75s both}
.bsz-run .bsz-cup-x line:nth-child(2){animation-delay:2s}

/* Az asztal alatti záró blokk: piros „Ne legyen harmadik." gomb + idézet —
   ugyanaz a pár, mint az „01 A pohár-teszt" lebegő kártyájának alján.
   A poharak után úszik be (2,1s: ekkorra a 3. pohárra rákerült az X),
   de a helyét induláskor is elfoglalja, így a kártya nem ugrik meg. */
.bsz-hero-verdict{margin-top:16px;opacity:0}
.bsz-run .bsz-hero-verdict{animation:bszrise .5s ease-out 2.1s both}
.bsz-hero-stop{background:var(--danger);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;animation:bszpulse 2.4s infinite}
.bsz-hero-stop-txt{font:800 15px var(--f-head);line-height:1.2;color:#fff}
.bsz-hero-quote{background:#0a3a5c;border-left:3px solid var(--danger);border-radius:0 12px 12px 0;padding:13px 15px;margin-top:12px}
.bsz-hero-quote p{font-size:13px;line-height:1.5;color:rgba(247,245,240,.85);margin:0;font-style:italic}

/* Aki kikapcsolta az animációkat: mutassuk a végállapotot, ne a semmit. */
@media(prefers-reduced-motion:reduce){
  .bsz-cup{opacity:1!important;animation:none!important;transform:none!important}
  .bsz-cup-x{opacity:1!important;animation:none!important}
  .bsz-cup-x line{stroke-dashoffset:0!important;animation:none!important}
  .bsz-hero-verdict{opacity:1!important;animation:none!important}
  .bsz-hero-stop{animation:none!important}
}

/* ---- 03 „Ha baj van" lépések: animált vonalrajzok ----
   Maguk az SVG-k a bsz-page.js HELP tömbjében vannak (art mező), itt csak a
   mozgás. A transform-box:view-box kell ahhoz, hogy a transform-origin a
   viewBox koordinátáiban (0..64) értelmeződjön, ne az elem saját dobozában —
   enélkül a kar a saját közepe, nem a váll körül forogna. */
.bsz-art{width:100%;height:100%;display:block}
.bsz-art g,.bsz-art path,.bsz-art circle,.bsz-art line{transform-box:view-box}

/* 1 · Maradj vele: a guggoló alak lassan ráhajol a fekvőre */
@keyframes bszartstay{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
.bsz-art-stay{animation:bszartstay 2.8s ease-in-out infinite}

/* 2 · Oldalfekvés: a fekvő alak átfordul az oldalára, majd vissza */
@keyframes bszartroll{0%,40%{transform:rotate(0deg)}75%,100%{transform:rotate(-20deg)}}
.bsz-art-roll{animation:bszartroll 2.6s ease-in-out infinite alternate;transform-origin:32px 48px}

/* 2 · a fordulást jelző nyíl velük együtt lüktet */
@keyframes bszartarc{0%,100%{opacity:.25}50%{opacity:1}}
.bsz-art-arc{animation:bszartarc 2.6s ease-in-out infinite}

/* 3 · Beszélj hozzá: a hanghullámok egymás után lüktetnek kifelé.
   Alap-átlátszóság .22 — NEM nullára megy: különben az anim ciklus egy
   szakaszában mindhárom hullám eltűnne, és az ikon csak egy fej lenne. */
@keyframes bszartwave{0%,100%{opacity:.22}45%{opacity:1}}
.bsz-art-w1{animation:bszartwave 2.1s ease-in-out infinite}
.bsz-art-w2{animation:bszartwave 2.1s ease-in-out .25s infinite}
.bsz-art-w3{animation:bszartwave 2.1s ease-in-out .5s infinite}

/* 4 · Hívd a 112-t: a telefon rázkódik, a gyűrűk kifelé tágulnak */
@keyframes bszartshake{0%,100%{transform:rotate(0deg)}15%{transform:rotate(-10deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-7deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-3deg)}}
.bsz-art-shake{animation:bszartshake 1.7s ease-in-out infinite;transform-origin:28px 36px}
@keyframes bszartring{0%{opacity:0;transform:scale(.55)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
.bsz-art-ring{animation:bszartring 1.7s ease-out infinite;transform-origin:30px 34px}
.bsz-art-ring2{animation-delay:.4s}

/* 5 · Szólj valakinek: integető kar a váll körül */
@keyframes bszartarm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-28deg)}}
.bsz-art-arm{animation:bszartarm 1.3s ease-in-out infinite;transform-origin:22px 30px}

/* Aki kikapcsolta az animációkat: álljon meg minden, de látszódjon. */
@media(prefers-reduced-motion:reduce){
  .bsz-art *{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- 04 · Ha baj van — a feltöltött SVG ikonok mozgása ----
   Ezek <img>-ek (ld. bsz-page.js artFor()), ezért csak az EGÉSZ ikon
   mozgatható: a rajz belsejéhez nem férünk hozzá, mert külön dokumentum.
   Ezért kap mindegyik a jelentéséhez illő, egész-ikonos mozgást. Az
   osztályt a bsz-page.js teszi az <img>-re a HELP[].anim mezőből.
   A 3. lépésnek („Beszélj hozzá") nincs feltöltött SVG-je — az a régi
   inline vonalrajz, azt fentebb a .bsz-art-w1/2/3 mozgatja. */
.bsz-ico{will-change:transform}

/* 1 · Maradj vele — „állj!": a tenyér kétszer előrenyomódik, majd pihen */
@keyframes bszicostop{0%,58%,100%{transform:scale(1)}64%{transform:scale(1.13)}72%{transform:scale(1)}80%{transform:scale(1.09)}88%{transform:scale(1)}}
.bsz-ico-stop{animation:bszicostop 3.2s ease-in-out infinite}

/* 2 · Oldalfekvés: a körkörös nyíl egy teljes fordulatot tesz, majd megáll.
   A rajz körbe van írva a négyzetbe, ezért forgás közben sem lóg ki a
   csempéből, hiába nő a kép DOBOZÁNAK befoglalója. */
@keyframes bszicoturn{0%,18%{transform:rotate(0deg)}70%,100%{transform:rotate(360deg)}}
.bsz-ico-turn{animation:bszicoturn 3s cubic-bezier(.5,0,.2,1) infinite}

/* 4 · Hívd a 112-t: csörgés — gyors kilengések, aztán szünet */
@keyframes bszicoring{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-12deg)}70%{transform:rotate(12deg)}74%{transform:rotate(-9deg)}78%{transform:rotate(9deg)}82%{transform:rotate(-5deg)}86%{transform:rotate(5deg)}}
.bsz-ico-ring{animation:bszicoring 2.6s ease-in-out infinite}

/* 5 · Szólj valakinek: odafordulás — enyhe billenés + előrelépés */
@keyframes bszicocall{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-7deg) translateY(-2px)}60%{transform:rotate(5deg) translateY(0)}}
.bsz-ico-call{animation:bszicocall 2.4s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .bsz-ico{animation:none!important;transform:none!important}
}

/* ---- Reszponzív ---- */
/* 901–1180px között a hero még kéthasábos, de a bal oszlop már keskenyebb
   581px-nél, ezért a 70px-es H1 „Ne legyen harmadik." sora megint törne.
   A vw-hez kötött méret végig egy sorban tartja; 1180px fölött a hasáb
   szélessége már nem nő (max-width), ott a 70px marad. */
@media(min-width:901px) and (max-width:1180px){
  .bsz-hero-grid h1{font-size:5.9vw!important}
}
@media(max-width:900px){
  .bsz-hero-grid{grid-template-columns:1fr!important}
  .bsz-este-grid{grid-template-columns:1fr!important}
  .bsz-help-grid{grid-template-columns:1fr!important}
  .bsz h1{font-size:56px!important}
}
@media(max-width:600px){
  .bsz-nav-links{display:none!important}
  .bsz h1{font-size:46px!important}
  .bsz h2{font-size:32px!important}
}