/* MVM karácsonyi kulcsvizuál: görgethető bemutató (a kormany.prezentacio.com szerkezetére).
   Színek és betűk a kézikönyvből: Berlini kék, Napsárga, Sora MVM ExtraBold, Nunito Sans. A KV-k mindig egészben, keretben látszanak. */
@font-face { font-family: 'Sora MVM'; src: url('fonts/SoraMVMExtraBold.otf') format('opentype'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-latinext.woff2') format('woff2'); font-weight: 200 1000; unicode-range: U+0100-02AF; }

:root {
  --kek: #1C2B39;        /* Berlini kék */
  --mely: #14202B;
  --nap: #F0B323;        /* Napsárga */
  --krem: #FFF8EC;
  --papir: #FBEBD3;
  --tinta: #1C2B39;
  --tinta2: #4A5866;
  --gutter: clamp(16px, 5vw, 80px);
  --fejlec: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--kek); color: var(--krem); font-family: 'Nunito Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--nap); outline-offset: 3px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: 'Sora MVM', sans-serif; font-weight: 800; letter-spacing: -.01em; line-height: 1.06; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- töltőkép: a lénia egyszer kirajzolódik ---------- */
.tolto-kep { position: fixed; inset: 0; z-index: 50; background: var(--kek); transition: opacity .7s ease, visibility .7s; }
.tolto-kep i { position: absolute; left: 58%; top: 0; width: 3px; height: calc(100vh / .917); background: var(--nap); transform-origin: 50% 0;
  transform: rotate(23.5deg) scaleY(0); animation: rajzol 1.3s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
@keyframes rajzol { to { transform: rotate(23.5deg) scaleY(1); } }
.tolto-kep.kesz { opacity: 0; visibility: hidden; }

/* ---------- fejléc ---------- */
.fejlec { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--fejlec); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter); background: linear-gradient(180deg, rgba(20,32,43,.78), rgba(20,32,43,.4));
  -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); }
.fejlec-logo img { height: 30px; width: auto; }
.fejlec-menu { display: flex; gap: clamp(16px, 2.4vw, 36px); margin-left: auto; }
.fejlec-menu a { position: relative; color: var(--krem); text-decoration: none; font-size: 15px; font-weight: 700; opacity: .72; transition: opacity .2s; padding: 6px 0; }
.fejlec-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--nap); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.fejlec-menu a:hover, .fejlec-menu a.aktiv { opacity: 1; }
.fejlec-menu a.aktiv::after { transform: none; }
@media (max-width: 720px) { .fejlec-menu { display: none; } .fejlec { height: 64px; } :root { --fejlec: 64px; } }

/* ---------- belépő mozgás: csak címek és keretek, a KV egészben ---------- */
.beuszo .szo { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.beuszo.lat .szo { opacity: 1; transform: none; }
.beerkezo { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.lat .beerkezo, .beerkezo.lat { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .beuszo .szo, .beerkezo { opacity: 1; transform: none; transition: none; } }

/* ---------- KV-keret: a mű egészben, árnyékkal, hogy a saját színén is kiváljon ---------- */
.mu { position: relative; cursor: zoom-in; border-radius: 3px; overflow: hidden; background: #0003;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 34px 70px -30px rgba(0,0,0,.55), 0 8px 18px -10px rgba(0,0,0,.35); }
.mu img, .mu video { width: 100%; height: 100%; object-fit: cover; }
.mu.fekvo { aspect-ratio: 16 / 9; }
.mu.allo { aspect-ratio: 4 / 5; }
.mu::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; pointer-events: none; }
.mu:hover img { transform: scale(1.012); }
.mu img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

/* ---------- jelenetek ---------- */
.jelenet { height: var(--h, 300vh); position: relative; }
.szinpad { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* nyitás */
.j-nyitas .szinpad { background: radial-gradient(120% 90% at 50% 100%, #24384A 0, var(--kek) 60%); }
.fokv-cim { position: absolute; left: 0; right: 0; top: calc(var(--fejlec) + 4vh); text-align: center; font-family: 'Sora MVM', sans-serif; font-size: clamp(22px, 2vw, 34px); opacity: .9; }
.nyitas-cim { position: absolute; left: 0; right: 0; top: calc(var(--fejlec) + 7vh); text-align: center; padding: 0 var(--gutter); will-change: transform, opacity; }
.nyitas-cim h1 { font-size: clamp(36px, 6.2vw, 112px); }
.nyitas-cim p { margin-top: 14px; font-size: clamp(16px, 1.4vw, 22px); font-weight: 700; color: var(--nap); letter-spacing: .02em; }
.nyitas-kv { position: absolute; left: 50%; top: 50%; width: min(78vw, 120svh); transform-origin: 50% 50%; will-change: transform; }
.gorgess { position: absolute; left: 50%; bottom: 26px; width: 14px; height: 14px; margin-left: -7px; border-right: 2px solid rgba(255,248,236,.7);
  border-bottom: 2px solid rgba(255,248,236,.7); transform: rotate(45deg); animation: lebeg 2.2s ease-in-out infinite; }
@keyframes lebeg { 50% { translate: 0 6px; } }

/* szekciók közös rendje */
.allitas { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.allitas h2, .szinek-fej h2, .fal-fej h2 { font-size: clamp(36px, 5vw, 84px); }
.allitas p, .szinek-fej p, .fal-fej p { margin-top: 20px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; max-width: 34em; opacity: .85; }

/* alapgondolat: papíron */
.papir { background: var(--papir) url(tex/02.webp) center / cover; color: var(--tinta); }
.alap { padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); }
.alap .allitas p { color: var(--tinta2); opacity: 1; }
.harom { max-width: 1320px; margin: clamp(48px, 8vh, 90px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.harom > div { border-top: 3px solid var(--tinta); padding-top: 18px; }
.harom b { display: block; font-family: 'Sora MVM', sans-serif; font-weight: 800; font-size: clamp(22px, 2vw, 32px); }
.harom p { margin-top: 10px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--tinta2); }
@media (max-width: 760px) { .harom { grid-template-columns: 1fr; } }

/* három háttér */
.szinek { padding: clamp(100px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); background: var(--mely); }
.szinek-fej { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.szin-sor { max-width: 1320px; margin: clamp(40px, 7vh, 80px) auto 0; padding: 0 var(--gutter); display: grid; gap: clamp(10px, 1.2vw, 18px); }
.szin { position: relative; border-radius: 4px; overflow: hidden; padding: clamp(18px, 2vw, 30px); display: grid; grid-template-columns: minmax(180px, 1fr) 3.4fr; gap: clamp(16px, 3vw, 48px); align-items: center;
  background: var(--sz) var(--tex) center / cover; color: var(--szt); }
.szin h3 { font-size: clamp(22px, 2vw, 32px); }
.szin small { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; opacity: .7; }
.szin-kepek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.szin-kepek .mu { box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
@media (max-width: 900px) { .szin { grid-template-columns: 1fr; } .szin-kepek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* változatok: saját háttérszín és textúra; balra ragadó szöveges oszlop, jobbra a képek. A név Nunito, hogy ne keveredjen a KV saját (Sora) címével. */
.valtozat { position: relative; padding: clamp(110px, 16vh, 170px) var(--gutter) clamp(90px, 14vh, 160px); background: var(--sz) var(--tex) center / cover; color: var(--szt); }
.valtozat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), transparent 30%, rgba(0,0,0,.1)); pointer-events: none; }
.v-belso { position: relative; max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.v-fej { position: sticky; top: calc(var(--fejlec) + 6vh); }
.v-szam { display: block; font-family: 'Sora MVM', sans-serif; font-weight: 800; font-size: clamp(56px, 6vw, 104px); line-height: .9; letter-spacing: -.02em; color: var(--szam); }
.v-nev { margin-top: 22px; padding-top: 22px; border-top: 2px solid currentColor; font-family: 'Nunito Sans', sans-serif; font-weight: 800; letter-spacing: -.005em;
  font-size: clamp(24px, 2.1vw, 36px); line-height: 1.2; text-wrap: balance; }
.v-leiras { margin-top: 16px; }
.v-leiras p { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; opacity: .82; max-width: 26em; }
.v-leiras .v-meta { display: none; }
.v-kepek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vh, 72px) clamp(16px, 2vw, 32px); align-items: end; }
.v-kepek .fekvo { grid-column: 1 / -1; }
.v-kepek figure { position: relative; }
.v-kepek .mu::before { content: attr(data-cimke); position: absolute; left: 0; top: 100%; margin-top: 12px; font-size: 13px; font-weight: 700; opacity: .7; color: var(--szt); }
.v-kepek .mu { overflow: visible; }
.v-kepek .mu img { border-radius: 3px; }
@media (max-width: 900px) { .v-belso { grid-template-columns: 1fr; } .v-fej { position: static; } .v-kepek { grid-template-columns: 1fr; } .v-kepek .allo { width: 70%; } }

/* állóban: úszó oszlopok */
.allo-fal { position: relative; padding: clamp(110px, 16vh, 170px) 0 0; background: var(--mely); overflow: hidden; }
.fal-fej { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.fal { height: min(120vh, 1200px); margin-top: clamp(40px, 6vh, 70px); padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 85%, transparent); }
.fal-oszlop { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 22px); animation: fut var(--ido, 70s) linear infinite; will-change: transform; }
.fal-oszlop:nth-child(even) { animation-direction: reverse; }
@keyframes fut { to { transform: translateY(calc(-50% - clamp(6px, .7vw, 11px))); } }
@media (max-width: 820px) { .fal { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fal-oszlop:nth-child(n+4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .fal-oszlop { animation: none; } }

/* mozgásban */
.mozgas { padding: clamp(110px, 16vh, 170px) 0 clamp(90px, 14vh, 160px); background: var(--kek); }
.mozgas-kv { max-width: 1320px; margin: clamp(40px, 6vh, 70px) auto 0; width: calc(100% - 2 * var(--gutter)); aspect-ratio: 16 / 9; position: relative; cursor: default; }
.mozgas-kv > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mozgas-kv canvas { pointer-events: none; }
.m-ujra { display: block; margin: 18px auto 0; padding: 9px 22px; border-radius: 999px; border: 1px solid rgba(255,248,236,.35); background: none; color: var(--krem); font-weight: 700; font-size: 15px; opacity: .8; }
.m-ujra:hover { opacity: 1; border-color: var(--nap); }

/* zárás */
.zaras { min-height: 80svh; display: grid; place-content: center; justify-items: center; gap: 26px; text-align: center; padding: 80px var(--gutter);
  background: radial-gradient(90% 70% at 50% 100%, #24384A 0, var(--kek) 65%); }
.zaras-logo { width: min(260px, 50vw); }
.zaras p { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; opacity: .85; }

/* nagyító */
.nagyito { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12,20,28,.94); color: var(--krem); }
.nagyito[open] { display: grid; place-items: center; }
.nagyito::backdrop { background: transparent; }
.nagyito img { max-width: min(92vw, 1700px); max-height: 84vh; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
.nagyito button { position: absolute; border: 0; background: none; font-size: 44px; line-height: 1; padding: 14px 20px; opacity: .75; }
.nagyito button:hover { opacity: 1; }
.ny-zar { right: 12px; top: 8px; }
.ny-elozo { left: 8px; top: 50%; transform: translateY(-50%); }
.ny-kov { right: 8px; top: 50%; transform: translateY(-50%); }
.ny-felirat { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; font-weight: 700; font-size: 15px; opacity: .8; }
html.zarolt { overflow: hidden; }
@media (orientation: portrait) { .nyitas-kv { width: calc(100vw - 2 * var(--gutter)); } }

/* ---------- filmszerű nyitás ---------- */
.fejlec { transition: opacity .6s ease, transform .6s ease; }
html.filmen .fejlec { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.film { background: #070D13; isolation: isolate; }
.film-hatter { position: absolute; inset: -6%; background:
    radial-gradient(60% 55% at 50% 52%, #1F3447 0, #14222F 45%, #0A121A 78%, #070D13 100%);
  will-change: transform; }
.bokeh { position: absolute; inset: 0; }
.bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--b) 0, transparent 68%); filter: blur(var(--bl)); opacity: 0; will-change: transform, opacity; }   /* életlen, lágy fényfolt */
.film-lenia { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.film-lenia line { stroke: var(--nap); stroke-width: 3; stroke-linecap: butt; filter: drop-shadow(0 0 10px rgba(240,179,35,.55)); }
.film-logo { position: absolute; left: 50%; top: 47%; width: min(32vw, 56svh, 540px); transform: translate(-50%, -50%); will-change: transform, opacity, filter; }
.film-logo svg { width: 100%; height: auto; display: block; overflow: hidden; }
.film-logo .vonal { fill: none; stroke: var(--krem); stroke-width: 41; stroke-linecap: round; stroke-linejoin: round; }
.film-logo .fenycsik { mix-blend-mode: overlay; }
.film-al { position: absolute; left: 0; right: 0; top: calc(47% + min(32vw, 56svh, 540px) * .24 / 2 + 5svh); text-align: center;
  font-size: clamp(18px, 1.7vw, 30px); font-weight: 600; letter-spacing: .04em; color: rgba(255,248,236,.82); opacity: 0; }
.szemcse { display: none; }
.film-fekete { position: absolute; inset: 0; background: #000; pointer-events: none; }
.film::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.28) 100%); }
.film .gorgess { opacity: 0; z-index: 2; }

/* ---------- bevezető: szöveghely ---------- */
.bevezeto { position: relative; padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(110px, 18vh, 200px); background: linear-gradient(180deg, #070D13 0, var(--kek) 38%); }
.bev-belso { max-width: 1320px; margin: 0 auto; }
.bev-cimke { font-size: 15px; font-weight: 800; color: var(--nap); margin-bottom: 26px; }
.bev-lead { font-size: clamp(34px, 4.6vw, 80px); line-height: 1.08; max-width: 17em; }
.bev-ket { margin-top: clamp(48px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 140px); align-items: start; }
.bev-szoveg p { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.6; color: rgba(255,248,236,.82); max-width: 34em; }
.bev-szoveg p + p { margin-top: 1.1em; }
.bev-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,248,236,.18); }
.bev-lista li { border-bottom: 1px solid rgba(255,248,236,.18); }
.bev-lista a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; color: var(--krem); text-decoration: none; font-family: 'Sora MVM', sans-serif; font-size: clamp(19px, 1.6vw, 26px); transition: padding .3s ease, color .3s; }
.bev-lista a b { font-size: .62em; color: var(--nap); min-width: 2.2em; font-variant-numeric: tabular-nums; }
.bev-lista a:hover { padding-left: 10px; color: #fff; }
@media (max-width: 820px) { .bev-ket { grid-template-columns: 1fr; } }
.j-fokv .szinpad { background: radial-gradient(120% 90% at 50% 100%, #24384A 0, var(--kek) 60%); }

/* ---------- hanggomb: mint a kormány-prezinél, MVM-színű hullámokkal ---------- */
.hang-gomb { display: grid; place-items: center; width: 46px; height: 46px; margin-left: clamp(10px, 1.6vw, 24px); border: 0; border-radius: 50%; background: none; color: rgba(255,248,236,.5); transition: color .2s ease, background .2s ease; }
.hang-gomb svg { width: 30px; height: 30px; overflow: visible; }
.hang-gomb .hang-test { transition: fill .2s ease; }
.hang-gomb .hang-iv { opacity: 0; transform-origin: 9px 14px; transform: scale(.7); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.hang-gomb .hang-iv2 { transition-delay: .03s; } .hang-gomb .hang-iv3 { transition-delay: .06s; }
.hang-gomb:hover { color: rgba(255,248,236,.85); background: rgba(255,248,236,.08); }
.hang-gomb[aria-pressed="true"] { color: var(--krem); }
.hang-gomb[aria-pressed="true"] .hang-test { fill: currentColor; }
.hang-gomb[aria-pressed="true"] .hang-iv { opacity: 1; transform: scale(1); animation: hang-pulzal 1.8s ease-in-out infinite; }
.hang-gomb[aria-pressed="true"] .hang-iv2 { animation-delay: .15s; } .hang-gomb[aria-pressed="true"] .hang-iv3 { animation-delay: .3s; }
@keyframes hang-pulzal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hang-gomb .hang-iv { animation: none !important; } }
/* a nyitáson a fejléc rejtve, de a hanggomb látszik */
html.filmen .fejlec { opacity: 1; transform: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
html.filmen .fejlec > :not(.hang-gomb) { opacity: 0; }
html.filmen .hang-gomb { pointer-events: auto; }
.fejlec > * { transition: opacity .6s ease; }

/* élő KV: a rétegek egymáson; belépés előtt rejtve (az animáció hozza be őket) */
.mu.elo > img, .mu.elo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.mu.elo > img { opacity: 0; }
.mu.elo > img.e-hatter { opacity: 1; }
.mu.elo { background: var(--sz); }
.mu.elo > img.e-lenia { opacity: 1; clip-path: inset(0 0 100% 0); }
.mu.elo > canvas { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mu.elo > img { opacity: 1 !important; clip-path: none; } }

/* irány-nyitó: a két irány bevezetője (szöveghely) */
.irany { padding: clamp(130px, 22vh, 240px) var(--gutter) clamp(110px, 18vh, 200px); background: linear-gradient(180deg, var(--mely), var(--kek)); }
.irany-belso { max-width: 1320px; margin: 0 auto; }
.irany-cimke { font-size: 15px; font-weight: 800; color: var(--nap); margin-bottom: 22px; }
.irany-cim { font-size: clamp(40px, 6vw, 104px); line-height: 1.04; max-width: 14em; }
.irany-szoveg { margin-top: clamp(28px, 4vh, 44px); font-size: clamp(18px, 1.45vw, 23px); line-height: 1.6; color: rgba(255,248,236,.82); max-width: 36em; }
/* egyetlen kép (második irány): a saját arányában */
.v-kepek.egy { grid-template-columns: 1fr; }
.v-kepek.egy .mu.allo { width: min(100%, 58vh); aspect-ratio: auto; }
.v-kepek.egy .mu.fekvo { aspect-ratio: auto; }
.mu.elo.egykep > img { object-fit: fill; }

.mu.elo > img.e-csill { position: absolute; inset: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 0 4px rgba(255,248,236,.6)); }

/* figura (Rudi): enyhe papírárnyék, hogy ne lebegjen; izzó orr: meleg napsárga fény, a hóra is rávetül */
.mu.elo > img.e-fig { position: absolute; inset: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 .6vh .5vh rgba(8,20,32,.35)); }
.mu.elo > .e-orr { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,226,120,.85) 0, rgba(240,179,35,.45) 18%, rgba(240,179,35,.12) 42%, transparent 70%); mix-blend-mode: screen; }

/* Rudi díszítőelemek */
.irany.van-rudi { position: relative; overflow: hidden; }
.irany.van-rudi .irany-belso { position: relative; z-index: 1; }
.rudi-szembe { position: absolute; right: clamp(0px, 3vw, 80px); bottom: 0; height: min(100%, 760px); aspect-ratio: 1; pointer-events: none; }
.rudi-szembe img { height: 100%; width: auto; margin-left: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }   /* Safari: állókép */
@keyframes rudi-leg { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-1.2deg) translateY(-4px); } }
@media (max-width: 900px) { .rudi-szembe { opacity: .25; height: 60%; } }
.rudi-sav { position: relative; height: 0; z-index: 3; pointer-events: none; }
.rudi-dekor video, .rudi-dekor img { display: block; width: 100%; height: auto; }
.rudi-kukucskal { position: absolute; right: 0; top: 0; width: min(30vw, 420px); transform: translateY(-62%); }
.rudi-sav-ugro { height: auto; background: linear-gradient(180deg, #002944, var(--mely)); }   /* a Papírtáj színéből a következő irány-nyitóba */
.rudi-ugrik { width: 100%; }
.rudi-ugrik video, .rudi-ugrik img { height: clamp(220px, 34vh, 380px); width: 100%; object-fit: contain; }

/* Rudi átrepül a Rudi-csoport végén */
.irany.van-repulo { position: relative; padding-top: clamp(260px, 40vh, 420px); overflow-x: clip; }   /* vízszintesen ne görgessen, függőlegesen ne vágjon */
.rudi-repul { position: absolute; left: 0; top: clamp(20px, 5vh, 60px); z-index: 3; width: clamp(180px, 20vw, 320px); transform: translate(-30vw, 30%); pointer-events: none; }

.film-szikra { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* ---------- egységes típusskála: minden szakasz ugyanazt a négy szintet használja ---------- */
:root {
  --t-cimke: clamp(17px, 1.35vw, 23px);   /* sárga címke a cím fölött (Bevezető, Első irány, …) */
  --t-cim: clamp(40px, 5.6vw, 100px);      /* szakaszcím (irány, alapgondolat, állóban) */
  --t-lead: clamp(28px, 3.4vw, 58px);      /* vezérmondat (bevezető) */
  --t-szoveg: clamp(18px, 1.45vw, 23px);   /* folyószöveg */
}
.bev-cimke, .irany-cimke { font-size: var(--t-cimke); font-weight: 800; letter-spacing: .01em; margin-bottom: clamp(18px, 2.4vh, 30px); }
.irany-cim, .allitas h2, .fal-fej h2 { font-size: var(--t-cim); line-height: 1.04; }
.bev-lead { font-size: var(--t-lead); line-height: 1.12; max-width: 20em; }
.bev-szoveg p, .irany-szoveg, .allitas p, .fal-fej p, .zaras p { font-size: var(--t-szoveg); line-height: 1.6; }
.v-leiras p { font-size: clamp(16px, 1.2vw, 20px); }
.v-nev { font-size: clamp(26px, 2.3vw, 40px); }
.v-kepek .mu::before { font-size: 14px; }
/* a nyitás fényei képernyő-keveréssel: a sárga a sötétkéken melegen izzik, nem zöldül */
.bokeh i { mix-blend-mode: plus-lighter; }   /* hozzáadó keverés: a meleg fény a sötétkéken aranyként izzik, nem szürkül */

/* változat-elrendezés: fent a fekvő (képből mozgásba), alatta három álló: kép, mozgásban, szöveggel */
.v-kepek { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }
.v-kepek:has(> .allo:nth-of-type(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }   /* ha van szöveges álló is: hárman egy sorban */
.v-kepek .fekvo { grid-column: 1 / -1; }
.v-kepek .mu.allo { width: 100% !important; }
.v-kepek.egy .mu.allo { width: 100% !important; }
@media (max-width: 900px) { .v-kepek { grid-template-columns: 1fr !important; } }

/* nyitójelenetek az irányok elején: filmszerű, teljes képernyős illusztráció, KV-tipó nélkül; alul az irány címe */
.irany.j-irany { padding: 0; }
.j-szinpad { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--mely); }
.j-szinpad .jelenet-kep { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; cursor: default; border-radius: 0; box-shadow: none; }
.jelenet-kep > :is(.e-sor, .e-logo, .e-lenia, .e-kenyer) { display: none !important; }   /* csak a kép mozog */
.j-szinpad .jelenet-kep > video.e-jvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-jelenet > .e-orr { display: none; }
.j-szinpad::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,13,19,.0) 30%, rgba(7,13,19,.85) 100%), rgba(7,13,19,var(--sotet, .2)); }
.j-szinpad .irany-belso { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 9vh, 110px); z-index: 2; max-width: 1320px; margin: 0; }
.j-szinpad .irany-cim { font-size: clamp(44px, 6.4vw, 120px); text-shadow: 0 4px 40px rgba(0,0,0,.45); }
.j-szinpad .irany-cimke { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.j-szinpad .irany-szoveg { opacity: 0; max-width: 40em; }
@media (max-width: 899px) { .j-szinpad .irany-szoveg { opacity: 1 !important; transform: none !important; } }



/* kép, rá a mozgás: a kép megáll, a mozgó változat alulról rácsúszik */
.v-kepek .csere { grid-column: 1 / -1; display: grid; }
.csere > .mu:first-child { position: sticky; z-index: 1; transform-origin: 50% 40%; will-change: transform, filter; }
.csere > .mu:first-child::before { opacity: var(--felirat, 1); }
.csere > .mu.elo { position: relative; z-index: 2; margin-top: clamp(120px, 24vh, 260px); box-shadow: 0 -28px 70px -20px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) { .csere > .mu:first-child { position: relative; } }