*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Egységes eltartás: a padding és a belső térközök ezzel egyenlők. */
    --pad: clamp(40px, 8vw, 96px);

    /* h1 a hero számára, h2 a slide role-okhoz (valamivel kisebb). */
    --h1: clamp(3rem, 8vw, 7rem);
    --h2: clamp(2rem, 5vw, 4rem);
    --role-size: clamp(6rem, 16vw, 14rem);
    --card-label: clamp(0.75rem, 1.4vw, 1.15rem);
    --card-title: clamp(2rem, 4vw, 4.5rem);

    /* A landing tartalom-hasábjának szélessége (landing.lua: containerWidth =
       0.75). Ez a hero szélessége is – a csempék ugyanezt töltik ki. */
    --landing-w: min(75vw, 1100px);

    /* Film grain (lásd .film-grain): a szemcse erőssége, a zajcsempe mérete
       és egy teljes szemcse-ciklus hossza. A ciklus 8 lépésből áll, tehát
       0.6s ≈ 13 szemcse-váltás másodpercenként – ez a filmes ütem.
       A fedés az egyetlen hangoló: 0.04-nél a szemcse ±4 kódérték (finom),
       0.08-nál már jól látható, de a fekete/fehér is kétszer annyit tompul. */
    --grain-opacity: 0.04;
    --grain-tile: 200px;
    --grain-cycle: 0.6s;

    /* A kártyaképek NÉGYZET alakú médiadoboza. Az oldala a hero NAGYOBB
       oldala, és ez az érték érvényes a kártyán, a repülő klónon és a heroban
       is – így a kép mindháromban UGYANAKKORA méretben renderelődik.
       A landing megnyitásakor ezért nincs nagyítás: a kép a helyén marad, csak
       a körülötte lévő doboz (a látható kivágás) nő. */
    --media-size: max(var(--landing-w), 100vh);
}

/* Desktopon kisebb eltartás. */
@media (orientation: landscape) {
    :root {
        --pad: clamp(10px, 2vw, 24px);
    }
}

/* Állóban a kártya és a hero is a SZÉLESSÉGET tölti ki. */
@media (orientation: portrait) {
    :root {
        --landing-w: 100vw;
    }
}

html {
    font-family: "Mona Sans", sans-serif;
    background: #000;
    color: #fff;
    height: 100%;
    overflow: hidden;
}

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    background: #000;
    color: #fff;
}

.sequence-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}

.sequence-background canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
}

/* Film grain az EGÉSZ site fölött (a landing és a nagyító fölött is – innen
   a z-index: 100). A textúra egy csempézhető SVG-zaj (feTurbulence,
   stitchTiles), a mozgást pedig NEM folyamatos csúszás adja, hanem
   lépésenkénti ugrás: a folyamatosan úszó zaj fátyolnak látszana, nem
   szemcsének. Ezért steps(1, end) – így minden kulcskocka kitart a
   következőig, és ott ugrik.

   A réteg a viewportnál nagyobb (130%), így az eltolás sosem lóg ki a képből:
   a legnagyobb kitérés 9%, a ráhagyás minden oldalon 15%. Pont ennyivel, mert
   ez egy külön compositor-textúra: 200%-os mérettel a viewport NÉGYSZERESÉT
   kellene a GPU-n tartani (2× DPR-en több tíz MB), így viszont 1.69-szeresét.
   Csak transformot animálunk, tehát a compositoron marad: nincs se layout, se
   újrafestés.

   Szándékosan NINCS mix-blend-mode: a site két meghatározó felülete a TISZTA
   fehér (.stage.cards-active) és a TISZTA fekete (landing) – overlay/soft-light
   mindkettőn pontosan nullát ad, tehát ott, ahol a legtöbb tartalom van, nem
   látszana semmi. Normál keveréssel a szemcse mindenhol ott van, cserébe
   0.04-es fedésnél a fekete #050505-re, a fehér #fafafa-ra tompul.

   A zaj a turbulencia ALFA-csatornájából készül (feColorMatrix 4. oszlopa),
   6-os meredekséggel és -2.7 eltolással: így a szemcse átlaga pont 0.5 (nem
   világosít/sötétít összességében), a szórása viszont nagy (0.39) – ezért
   marad a fedés ilyen alacsonyan, és mégis látszik a szemcse. */
.film-grain {
    position: fixed;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    z-index: 100;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='200'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 6 -2.7 0 0 0 6 -2.7 0 0 0 6 -2.7 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--grain-tile) var(--grain-tile);
    will-change: transform;
    animation: film-grain var(--grain-cycle) steps(1, end) infinite;
}

@keyframes film-grain {
    0% {
        transform: translate3d(0, 0, 0);
    }

    12.5% {
        transform: translate3d(-7%, -4%, 0);
    }

    25% {
        transform: translate3d(5%, -8%, 0);
    }

    37.5% {
        transform: translate3d(-9%, 6%, 0);
    }

    50% {
        transform: translate3d(8%, 3%, 0);
    }

    62.5% {
        transform: translate3d(-3%, 9%, 0);
    }

    75% {
        transform: translate3d(6%, -6%, 0);
    }

    87.5% {
        transform: translate3d(-5%, 2%, 0);
    }
}

/* Csökkentett mozgás mellett a szemcse marad, csak áll (nem villódzik). */
@media (prefers-reduced-motion: reduce) {
    .film-grain {
        animation: none;
    }
}

.scroll-track {
    position: relative;
    z-index: 1;
    height: 100vh;
}

/* A stage fixen kitölti a viewportot (nincs natív görgetés). */
.stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Amint az animáció a fehér frame-re ér, garantáltan fehér háttér. */
.stage.cards-active {
    background: #fff;
}

.hero {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
}

/* Kártyafázisban a hero szöveg már nem látszik (fehéren fehér). Ugyanez a
   szabály rejti el a záró feliratot is a fehér kockán: a kettő egy hero-
   dobozban ül, és mindig csak az egyik látszik (lásd script.js: updateCards). */
.stage.cards-active .hero {
    opacity: 0;
}

h1 {
    margin: 0;
    font-size: var(--h1);
    font-weight: 600;
    line-height: 1;
}

.hero-title .word {
    display: inline-block;
}

/* JS aktív: a szöveg rejtve indul, amíg el nem dől, kell-e introanimáció. */
html.js .hero-title .word {
    opacity: 0;
    transform: translateY(0.18em);
    filter: blur(0.06em);
    will-change: opacity, transform, filter;
}

/* Introanimáció lefuttatása (csak ha a scroll legfelül van). */
html.intro .hero-title .word {
    animation: hero-word-in var(--duration, 1000ms)
        cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms) forwards;
}

/* Intro kihagyása: a szöveg azonnal a végállapotban jelenik meg. */
html.no-intro .hero-title .word {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
}

@keyframes hero-word-in {
    0% {
        opacity: 0;
        transform: translateY(0.18em);
        filter: blur(0.06em);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js .hero-title .word,
    html.intro .hero-title .word {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}

#divHi {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--pad);
    box-sizing: border-box;
    text-align: left;
}

/* A kártyák kattinthatók, de csak abban a jelenetben, ami épp látszik
   (a többi card-scene pointer-events: none marad). */
.card-scene.is-interactive {
    pointer-events: auto;
}

.card-scene.is-interactive .role-card {
    cursor: pointer;
}

.role-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* A landing megnyitásakor a role-szövegek azonnal eltűnnek (a háttér is
   azonnal feketére vált), záráskor ugyanígy jönnek vissza. */
.stage.landing-active .slide-texts {
    opacity: 0 !important;
}

/* Slide-réteg: minden slide a teljes képet kitölti, egymásra rétegezve.
   Az aktív slide középen áll; a kép és a szöveg ellentétes irányból
   úszik be, a transform viszi ki a képből. A stage overflow:hidden vág. */
.cards {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity;
}

/* A slide-ok csak a kártyafázisban látszanak (azonnali váltás, transition nélkül). */
.stage.cards-active .cards {
    opacity: 1;
}

/* Az SVG szűrő-definíció ne foglaljon helyet. */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}

/* Mozgás közbeni (irányított) motion blur a teljes slide-rétegre. */
.cards.is-blurring {
    filter: none;
}

.slide {
    position: absolute;
    inset: 0;
}

/* Thumbnail – a képernyő felét foglalja el, kifutóan. */
.slide-thumb {
    position: absolute;
    overflow: hidden;
    background: #ccc;
    will-change: transform;
}

/* A kép középre igazítva kitölti a keretet (a lényeg a kép közepén van).
   Kicsit nagyítva, hogy a kereten belüli parallax ne mutasson üres szélt. */
.slide-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    will-change: transform;
}

/* A szövegek közös rétege – ezt mozgatjuk a képpel ellentétesen. */
.slide-texts {
    position: absolute;
    inset: 0;
    color: #000;
    pointer-events: none;
}

.slide-text {
    position: absolute;
    margin: 0;
    will-change: transform;
}

.slide-text--title {
    font-size: var(--h1);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap; /* csak a kézi <br> tördel; a JS méretre illeszt */
}

.slide-text--body {
    font-size: max(calc(var(--h2) / 2), 13pt); /* sosem kisebb 13pt-nél */
    font-weight: 600;
    line-height: 1.2;
}

/* Desktop / fekvő: három hasáb.
   - kép: az ablak felétől a jobb széléig
   - középső hasáb (role): az ablak negyedétől a kép - paddingig, jobbra igazítva
   - bal hasáb (description): paddingtől az ablak negyedéig, balra igazítva */
@media (orientation: landscape) {
    .slide-thumb {
        top: var(--pad);
        right: var(--pad);
        bottom: var(--pad);
        width: calc(50vw - 2 * var(--pad));
    }

    .slide-text--title {
        left: 25vw;
        right: calc(50vw + var(--pad));
        bottom: calc(50vh + var(--pad) / 2);
        text-align: right;
    }

    .slide-text--body {
        left: calc(var(--pad) * 2);
        right: 75vw;
        top: calc(50vh + var(--pad) / 2);
        text-align: left;
    }
}

/* Mobil / álló: thumbnail a felső fél; a szövegek alatta, balra igazítva. */
@media (orientation: portrait) {
    .slide-thumb {
        top: var(--pad);
        left: var(--pad);
        width: calc(100vw - 2 * var(--pad));
        height: calc(50vh - var(--pad));
    }

    .slide-text--title {
        top: calc(50vh + var(--pad));
        left: var(--pad);
        right: var(--pad);
        text-align: left;
    }

    .slide-text--body {
        bottom: var(--pad);
        left: var(--pad);
        right: var(--pad);
        text-align: left;
    }
}

/* Role/text + card phases */
.slide-texts,
.card-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slide-texts {
    opacity: 1;
    z-index: 1;
    will-change: opacity;
}

.slide-text--title {
    font-size: var(--role-size);
    line-height: 0.86;
}

.card-scene {
    opacity: 0;
    z-index: 2;
    overflow: hidden;
    will-change: opacity;
}

.role-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35em;
    overflow: hidden;
    padding: var(--pad);
    background: var(--card-bg);
    color: var(--card-fg);
    isolation: isolate;
    will-change: transform;
}

/* A média egy NÉGYZET (--media-size), ami a kártya mindkét oldalán túllóg (ez
   a "slack"), középre igazítva; ezt a túllógást használjuk parallaxra.
   Az oldala NEM a kártyához, hanem a heroéhoz igazodik (lásd :root), hogy a
   landing megnyitásakor a kép mérete változatlan maradjon. */
.role-card-media {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--media-size);
    height: var(--media-size);
    /* Pontosan a kártya közepére, negatív margóval (a transform a parallaxé). */
    margin-left: calc(var(--media-size) * -0.5);
    margin-top: calc(var(--media-size) * -0.5);
    z-index: 0;
    will-change: transform;
}

.role-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.role-card-content {
    position: relative;
    z-index: 1;
}

.role-card-content span,
.role-card-content strong {
    display: block;
    max-width: 10ch;
}

.role-card-content span {
    font-size: var(--card-label);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.role-card-content strong {
    font-size: var(--card-title);
    font-weight: 700;
    line-height: 0.95;
}

@media (orientation: landscape) {
    .slide-texts {
        --role-text-width: calc(50vw - var(--pad) * 1.5);
        --description-text-width: calc(var(--role-text-width) / 2);
        display: grid;
        grid-template-columns: var(--role-text-width) var(--description-text-width);
        grid-template-rows: auto auto;
        column-gap: var(--pad);
        row-gap: var(--pad);
        place-content: center;
    }

    .slide-text--title {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        width: var(--role-text-width);
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        text-align: right;
    }

    .slide-text--body {
        position: relative;
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        width: var(--description-text-width);
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        text-align: left;
    }

    .role-card {
        top: 0;
        bottom: 0;
        left: calc(var(--card-index) * 100% / var(--card-count));
        /* +1px átfedés: a subpixel-kerekítésből adódó varratot eltünteti. */
        width: calc(100% / var(--card-count) + 1px);
    }
}

@media (orientation: portrait) {
    .slide-texts {
        display: grid;
        grid-template-columns: calc(100vw - 2 * var(--pad));
        grid-template-rows: auto auto;
        row-gap: var(--pad);
        place-content: center;
    }

    .slide-text--title {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        text-align: left;
    }

    .slide-text--body {
        position: relative;
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        text-align: left;
    }

    .role-card {
        left: 0;
        right: 0;
        top: calc(var(--card-index) * 100% / var(--card-count));
        /* +1px átfedés: a subpixel-kerekítésből adódó varratot eltünteti. */
        height: calc(100% / var(--card-count) + 1px);
        justify-content: center;
    }

    .role-card-content span,
    .role-card-content strong {
        max-width: 12ch;
    }
}

/* ---------------------------------------------------------------------------
   Landing (galéria) nézet
   Egy kártyára kattintva a kártya a képernyő közepére animálódik (FLIP-klón:
   .landing-flip), a többi kártya kiúszik, és megnyílik alatta ez a fekete
   hátterű, hagyományosan görgethető galéria (modell: examples/landing.lua).
   --------------------------------------------------------------------------- */

.landing {
    /* A csempék közti hézag (0-ra állítva összeérnek). */
    --tile-gap: clamp(1px, 0.9vw, 1px);

    position: fixed;
    inset: 0;
    z-index: 50;
    background: #000;
    color: #fff;

    /* A landing saját görgetéssel megy (a body-n nincs natív scroll).
       A scroll-anchoring ki van kapcsolva: a görgetéshez kötött csempe-
       mozgás mellett nem szabad, hogy a böngésző utólag igazítson. */
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    touch-action: pan-y;
    scrollbar-width: none;

    /* A fekete háttér AZONNAL vált (nincs fade) – a kiúszó kártyák ezért a
       landing FÖLÉ emelve animálnak (lásd .scroll-track.is-over-landing). */
    visibility: hidden;
    pointer-events: none;
}

.landing::-webkit-scrollbar {
    display: none;
}

.landing.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Átmenet alatt a landing nem fogad inputot – a kártyaréteg van fölötte.
   Nyitáskor (is-transitioning) a tartalom is rejtve van, visszalépéskor
   (is-returning) viszont VÉGIG látszik: a beúszó kártyák takarják ki. */
.landing.is-transitioning,
.landing.is-returning {
    pointer-events: none;
}

/* Az átmenet idejére a kártyaréteg a fekete landing FÖLÉ kerül, a stage
   fehér háttere nélkül – így a kiúszás feketén látszik. */
.scroll-track.is-over-landing {
    z-index: 55;
    pointer-events: none;
}

.scroll-track.is-over-landing .stage,
.scroll-track.is-over-landing .stage.cards-active {
    background: transparent;
}

/* A színpad: ragadósan a viewport tetején áll, és minden réteget ő vág.
   A rétegek (hero, csempeoszlop) abszolút pozícióban ülnek benne, és
   KIZÁRÓLAG transformmal mozognak – a görgetés csak bemenet hozzá. */
.landing-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* A görgetési hosszt ez az üres blokk adja (magasságát a JS állítja). */
.landing-scroll {
    width: 100%;
}

/* A hero doboz pontosan a viewport közepén áll (scrollTop = 0-nál): ide
   érkezik a FLIP-klón, és itt veszi át a helyét a valódi kép.
   Z-ben a csempék FÖLÖTT van (tömör háttérrel), így az átfedő szakaszon a
   csempék mögötte haladnak, és a hero alsó éle alól bukkannak elő. */
.landing-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 100vh;
    display: grid;
    place-items: center;
    background: #000;
    will-change: transform;
}

/* A hero – akárcsak a kártya – a viewport KISEBB dimenzióját tölti ki
   (fekvőben a magasságot), és csak a hosszabb oldala változik. Így az
   átmenet egytengelyű: itt csak vízszintesen nyílik szét. */
.landing-hero-media {
    width: var(--landing-w);
    height: 100vh;
    overflow: hidden;
    background: #0a0a0a;
}

.landing-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Amíg a klón repül, a valódi hero-kép rejtve van (nincs dupla kép). */
.landing.is-transitioning .landing-hero-media {
    opacity: 0;
}

/* Csempe-galéria: sorokba rendezett elemek, amik együtt PONTOSAN kitöltik
   a hero szélességét (--landing-w). A sor magassága a hasáb szélességének
   aránya (--row-h), az elemek szélessége pedig egymáshoz képest arányos
   (--item-w) – a hézagokat a flex vonja le.

   Az oszlop FORDÍTOTT sorrendben áll (column-reverse), és a görgetéssel
   ellentétesen, lefelé mozog (a transformot a JS írja): így a csempék
   felülről, a hero alól úsznak be, DOM-sorrendben. */
.landing-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: var(--landing-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--tile-gap);
    opacity: 0;
    will-change: transform;
}

.landing-row {
    display: flex;
    gap: var(--tile-gap);
    width: 100%;
    height: calc(var(--landing-w) * var(--row-h, 0.35));
}

/* A tartalom rejtett kiindulása; a beúszást (opacitás + eltolás) az átmenet
   lefutása után a landing.js hurka rajzolja ki, ugyanazon a limitált
   képkockasebességen. */

/* Egy csempe: a soron belül arányosan osztozik a helyen. */
.landing-item {
    flex: var(--item-w, 1) 1 0;
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #0d0d0d;
}

.landing-item img,
.landing-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Placeholder: amíg nincs valódi média, csak egy jelölt doboz. */
.landing-item-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(
        135deg,
        #0d0d0d 0 14px,
        #111 14px 28px
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--card-label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* A landing mozgásait NEM CSS-tranzíció hajtja: a landing.js saját, a
   főoldallal azonos ütemre (TARGET_FPS) limitált hurka rajzolja ki őket,
   és képkockánként méri az elmozdulást a motion blurhöz. */
.landing-flip {
    position: fixed;
    z-index: 60;
    overflow: hidden;
    background: #0a0a0a;
    pointer-events: none;
    will-change: left, top, width, height;
}

/* A klón képe NEM a dobozt tölti ki (az `object-fit: cover` a doboz méretével
   együtt nagyítaná), hanem ugyanaz a fix méretű, középre igazított négyzet,
   mint a kártyán és a heroban. Így a repülés alatt a kép mérete VÁLTOZATLAN:
   csak a doboz nő körülötte, tehát a kivágás nyílik ki. */
.landing-flip-media {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--media-size);
    height: var(--media-size);
    margin-left: calc(var(--media-size) * -0.5);
    margin-top: calc(var(--media-size) * -0.5);
}

.landing-flip-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------------------------------
   Nagyító (viewer)
   Egy csempére kattintva a landing feketébe úszik, és a kiválasztott elem itt
   jelenik meg a lehető legnagyobb méretben – videónál vezérlőkkel. A landing
   közben VÁLTOZATLANUL a helyén marad (a görgetési állásával együtt), csak
   átlátszó: a visszalépés így pontosan ugyanoda úszik vissza.
   --------------------------------------------------------------------------- */

/* Kattinthatóság: csak ott, ahol tényleg van mit mutatni (a placeholderen
   nincs média, így az nem kap mutatót). */
.landing-item img,
.landing-item video {
    cursor: pointer;
}

/* Amíg a nagyító nyitva van, a landing nem görgethető: a visszalépésnek
   ugyanoda kell érkeznie, ahonnan indult. (Az `overflow: hidden` doboz
   megtartja a görgetési állását, csak a felhasználó nem mozgathatja.) */
.landing.is-viewing {
    overflow: hidden;
}

.landing-viewer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: #000;

    /* A be- és kiúszást – a landing többi mozgásához hasonlóan – a landing.js
       limitált ütemű hurka rajzolja, nem CSS-tranzíció. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-viewer.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* "A lehető legnagyobb méret": a viewportba írt, arányos befoglalás – a média
   sosem vágódik le és nem torzul. */
.landing-viewer img,
.landing-viewer video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
}

@media (orientation: portrait) {
    /* A hero magasságát nem korlátozzuk: az alapszabály 100vh-ja marad, így a
       kártya TELJES KÉPERNYŐRE (100vw × 100vh) nyílik szét, és az átmenet itt
       függőlegesen egytengelyű (a szélesség végig 100vw).

       Állóban a csempék egymás alá kerülnek, de megtartják a fekvőben
       felvett oldalarányukat (--item-aspect). A sorrend itt is fordított,
       hogy a soron belül is a DOM-sorrend szerint ússzanak be. */
    .landing-row {
        flex-direction: column-reverse;
        height: auto;
    }

    .landing-item {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: var(--item-aspect, 1.6);
    }
}