/* =============================================================================
   PrintPont — „Egy nyomdai fájl útja”: GÖRGETÉS-VEZÉRELT 3D réteg-torony (wwwroot/js/torony/landing-torony.js).
   A `.pp-gorget.is-gorget` (a JS teszi rá) magas görgető-tartály, benne a `.pp-sav` kártya `position: sticky`: a görgetés rakja egymásra a rétegeket.
   Mozgáscsökkentésnél, WebGL és JS nélkül nincs `.is-gorget`: se magas tartály, se sticky, csak a CSS-torony.
   A szerveroldali CSS-torony a TARTALÉK: JS, WebGL és mozgáscsökkentés nélkül is áll egy egymásra rakott, feliratozott kép.
   Ha a three.js-színpad elindul, a konténer megkapja a .has-webgl osztályt: a CSS-réteg és -pecsét elrejtődik, a canvas veszi át.
   Vetítés: rotateX(60deg) rotateZ(45deg), a lap saját (8px, 8px) árnyéka = vastagság. A formaszínek alatt sötét szöveg áll.
   ============================================================================= */
.pp-torony { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; margin: 0; }
.pp-torony__cim { font-family: var(--f-font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-ink); }
.pp-torony__kep {
    position: relative; height: clamp(300px, 34vw, 440px); overflow: hidden;
    border-radius: var(--f-radius-tile); background: var(--f-hero); border: 1px solid var(--f-border);
}
.stage__canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.pp-torony__kep.has-webgl .pp-torony__szint, .pp-torony__kep.has-webgl .pp-torony__pecset { display: none; }

/* --- CSS-tartalék: egymásra rakott lapok ---------------------------------------------------- */
.pp-torony__szint { position: absolute; left: 34%; bottom: 12%; width: 0; height: 0; --lap: clamp(112px, 13vw, 176px); }
.pp-reteg { --c: var(--f-white); position: absolute; left: 0; bottom: calc(var(--i) * var(--lap) * 0.22); width: var(--lap); height: var(--lap); margin-left: calc(var(--lap) / -2); z-index: calc(10 + var(--i)); }
.pp-reteg--0 { --i: 0; } .pp-reteg--1 { --i: 1; } .pp-reteg--2 { --i: 2; } .pp-reteg--3 { --i: 3; } .pp-reteg--4 { --i: 4; }
.pp-reteg--sky { --c: var(--f-sky); } .pp-reteg--mint { --c: var(--f-mint); } .pp-reteg--mustard { --c: var(--f-mustard); }
.pp-reteg--coral { --c: var(--f-coral); } .pp-reteg--primary { --c: var(--f-primary); }
.pp-reteg__lap {
    position: absolute; inset: 0; display: grid; place-content: center; border-radius: 22%;
    background: var(--c); border: 1px solid rgba(16, 16, 16, 0.22);
    box-shadow: 8px 8px 0 rgba(16, 16, 16, 0.18), 14px 14px 22px rgba(16, 16, 16, 0.12);
    transform: rotateX(60deg) rotateZ(45deg);
}
.pp-reteg__szam { font-family: var(--f-font-mono); font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-weight: 500; color: var(--f-ink); }
.pp-reteg--ember .pp-reteg__szam { color: var(--f-white); }
.pp-reteg__felirat {
    position: absolute; left: calc(100% + var(--lap) * 0.21 + 0.4rem); top: calc(50% - 0.7em); display: flex; align-items: center; gap: 0.45rem;
    white-space: nowrap; font-size: clamp(0.78rem, 1.2vw, 0.95rem); font-weight: 600; color: var(--f-ink);
}
.pp-reteg__felirat::before { content: ""; width: 0.8rem; height: 2px; background: var(--f-grey-light); }
.pp-torony__pecset {
    position: absolute; right: 6%; top: 8%; z-index: 40; display: grid; place-content: center; gap: 1px; width: clamp(78px, 9vw, 108px); aspect-ratio: 1;
    border-radius: 50%; background: var(--f-mustard); color: var(--f-ink); border: 2px dashed rgba(16, 16, 16, 0.55); box-shadow: 0 0 0 5px var(--f-mustard);
    transform: rotate(-12deg); text-align: center; font-family: var(--f-font-mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.pp-torony__pecset b { font-family: var(--f-font); font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: -0.02em; }

/* --- Állomás-jelvények a torony alatt ------------------------------------------------------- */
.pp-torony__lepesek { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pp-torony__lepesek li {
    display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.25rem 0.7rem; border-radius: var(--f-radius-btn);
    border: 1px solid rgba(16, 16, 16, 0.3); background: transparent; color: var(--f-ink); font-size: 0.8rem;
    transition: background-color var(--f-dur) var(--f-ease), color var(--f-dur) var(--f-ease);
}
.pp-torony__lepesek b { font-family: var(--f-font-mono); font-weight: 500; }
.pp-torony__lepesek li.is-done { background: var(--f-white); }
.pp-torony__lepesek li.is-now { background: var(--f-ink); color: var(--f-white); }
.pp-torony__lepesek li.is-now[data-ember] { background: var(--f-primary); }
/* --- Görgetés-vezérelt szekció: magas tartály + ragadós kártya -------------------------------------------------- */
:root { --pp-fejlec: 5.25rem; } /* a lebegő fejléc magassága; a landing-torony.js a valós értékre állítja */
.pp-gorget.is-gorget { min-height: 320vh; }
.pp-gorget.is-gorget .pp-sav {
    position: sticky; top: calc(var(--pp-fejlec) + 0.25rem); z-index: 1; display: grid; align-content: center;
    height: calc(100svh - var(--pp-fejlec) - 1.25rem); min-height: 28rem; max-height: 46rem;
}
.is-gorget .pp-torony__kep { height: clamp(260px, calc(100svh - var(--pp-fejlec) - 15rem), 460px); }
.pp-sav__haladas { display: none; }
.is-gorget .pp-sav__haladas { display: block; width: min(100%, 16rem); height: 4px; margin-top: 0.8rem; border-radius: 2px; background: rgba(16, 16, 16, 0.16); overflow: hidden; }
.pp-sav__haladas i { display: block; height: 100%; background: var(--f-ink); transform-origin: left center; transform: scaleX(var(--haladas, 0)); }

/* A 3 lépés doboza: a hozzá tartozó rétegnél kiemelkedik, az előzők kész állapotúak, a többi halvány */
.is-gorget .pp-lepes { border: 2px solid transparent; opacity: 0.55; transition: opacity var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease); }
.is-gorget .pp-lepes.is-kesz { opacity: 0.8; }
.is-gorget .pp-lepes.is-aktiv { opacity: 1; border-color: var(--f-primary); transform: translateX(0.4rem); box-shadow: 0 6px 18px rgba(16, 16, 16, 0.12); }
.is-gorget .pp-lepes.is-kesz .pp-lepes__sorszam { background: var(--f-ink); }

@media (max-width: 860px) {
    .pp-gorget.is-gorget { min-height: 260vh; }
    .pp-gorget.is-gorget .pp-sav { min-height: 0; max-height: 40rem; padding: 0.9rem 1rem; }
    .is-gorget .pp-sav__racs { gap: 0.6rem; }
    .is-gorget .pp-sav__fej h2 { font-size: 1.5rem; }
    .is-gorget .pp-sav__haladas { margin-top: 0.5rem; }
    .is-gorget .pp-torony { gap: 0.35rem; }
    .is-gorget .pp-torony__kep { height: clamp(170px, calc(100svh - var(--pp-fejlec) - 22rem), 260px); }
    .is-gorget .pp-torony__lepesek { display: none; }
    .is-gorget .pp-lepesek { gap: 0.4rem; }
    .is-gorget .pp-lepes { gap: 0.7rem; align-items: center; padding: 0.45rem 0.75rem; }
    .is-gorget .pp-lepes__sorszam { width: 2rem; height: 2rem; }
    .is-gorget .pp-lepes h3 { margin: 0; font-size: 0.98rem; }
    .is-gorget .pp-lepes p { display: none; }
    .is-gorget .pp-lepes.is-aktiv p { display: block; margin-top: 0.15rem; font-size: 0.84rem; line-height: 1.35; }
    .is-gorget .pp-lepes.is-aktiv { transform: none; }
}

@media (max-width: 480px) {
    .pp-torony__kep { height: 320px; }
    .pp-torony__lepesek li { font-size: 0.74rem; padding: 0.2rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-torony__lepesek li, .is-gorget .pp-lepes { transition: none; }
}