/* ══════════════════════════════════════════════════════════════════════════
   SMARTSOLVEN — MOZGÁSRÉTEG (2026-09-25)
   ──────────────────────────────────────────────────────────────────────────
   A MŰHELY arculatra ÉPÜL, nem írja át: színek, betűk, méretvonal, modul-jel
   ugyanaz. Csak a `html.mozgas` alatt hat (a mu/layout-mozgas váz adja).

   A mu.css három szabálya itt is érvényes:
   1. JS NÉLKÜL MINDEN LÁTSZIK. Rejtett kiinduló állapot csak `.js.mozgas` alatt,
      és csak `prefers-reduced-motion: no-preference` mellett.
   2. Csökkentett mozgásnál a réteg KIKAPCSOL (a jelenet végállapotban áll).
   3. Csak `transform` és `opacity` mozog.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Lenis (finom görgetés) ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── A SplitText maszkja ne vágja le a nagybetűs ékezetet (Á, É, Ő) ─── */
.mozgas h1 > div, .mozgas h2 > div { padding-top: .16em; margin-top: -.16em; padding-bottom: .05em; margin-bottom: -.05em; }

/* ─── A főcím addig rejtve, amíg a betűkre bontás el nem készül (villanás ellen).
       Ha a JS nem fut le, 2,5 s múlva MAGÁTÓL megjelenik. ─── */
@media (prefers-reduced-motion: no-preference) {
  .js.mozgas .hero h1 { visibility: hidden; animation: mutat 0s 2.5s forwards; }
  .js.mozgas .hero h1.kesz { visibility: visible; animation: none; }
}
@keyframes mutat { to { visibility: visible; } }

/* ─── HERO: élő rendszerháló ─── */
.hero > .halo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(120% 110% at 72% 42%, #000 35%, transparent 88%);
          mask-image: radial-gradient(120% 110% at 72% 42%, #000 35%, transparent 88%);
}
.hero > .tart { z-index: 1; }

/* ─── 04 · A JELENET ─── */
.folyamat--jelenet { padding: 0; }
.jelenet__pin { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--fejm) + 28px) 0 36px; }
.jelenet__racs { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4.4vw, 64px); align-items: center; }
.jelenet__racs > * { min-width: 0; }
.jelenet__szoveg h2 { font-size: clamp(30px, 3.8vw, 52px); margin-top: var(--t2); }
.jlepesek { list-style: none; margin: var(--t4) 0 0; padding: 0; display: grid; }
.jlepes { padding: var(--t2) 0; border-top: 2px solid var(--vonal-2); }
.jlepes__sz { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lang-vil); }
.jlepes h3 { font-size: clamp(22px, 2.4vw, 32px); margin-top: 10px; }
.jlepes p { margin-top: 10px; color: var(--halk); max-width: 42ch; }
.jsavok { display: none; gap: 8px; margin-top: var(--t3); }
.jsavok i { flex: 1; height: 3px; background: var(--vonal-2); position: relative; overflow: hidden; }
.jsavok i::after { content: ""; position: absolute; inset: 0; background: var(--lang); transform: scaleX(var(--p, 0)); transform-origin: left; }
.szinpad { border: 1px solid var(--vonal-2); background: var(--tus-2); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
.szinpad svg { display: block; width: 100%; height: auto; }
.gepel { transform-box: fill-box; transform-origin: center; animation: gepel 1.1s ease-in-out infinite; }
@keyframes gepel { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* JS-sel (és normál mozgásnál) a lépések EGYMÁS HELYÉN váltanak; JS nélkül sima lista. */
.van-jelenet .jlepesek { grid-template-areas: "l"; }
.van-jelenet .jlepes { grid-area: l; opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .45s var(--gorbe), transform .55s var(--gorbe), visibility .45s; }
.van-jelenet .jlepes.be { opacity: 1; visibility: visible; transform: none; }
.van-jelenet .jsavok { display: flex; }

@media (max-width: 900px) {
  .jelenet__pin { align-items: flex-start; padding-top: calc(var(--fejm) + 14px); }
  .jelenet__racs { grid-template-columns: 1fr; gap: 16px; }
  .szinpad { order: -1; }
  .jelenet__szoveg h2 { font-size: clamp(26px, 7.4vw, 36px); margin-top: 10px; }
  .jlepesek { margin-top: 12px; }
  .jlepes { padding: 12px 0; }
  .jlepes h3 { font-size: 24px; margin-top: 6px; }
  .jlepes p { font-size: 15px; margin-top: 6px; }
}

/* ─── Futósor: vékony, sötét, kis betűs — a mondatok a hero tényeiből. (A user kérésére
       a korábbi nagy narancs szalag helyett: „szolidabban”.) ─── */
.sav { background: var(--tus); border-block: 1px solid var(--vonal); overflow: hidden; padding: 16px 0; }
.sav__sor { display: flex; width: max-content; will-change: transform; }
.sav__sor span {
  display: block; padding-right: 22px; white-space: nowrap;
  font: 500 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--halk);
}
.sav__sor .u { color: var(--szoveg); }
.sav__sor .k { color: var(--lang); }

/* ─── Munkák: a kép kinyílik, a fotó lassabban mozog ─── */
.mozgas .munka__kep img { will-change: transform; }

/* ─── Ársávok: finom térbeli döntés egérrel ─── */
.mozgas .arak__racs { perspective: 1200px; }
.mozgas .ar { will-change: transform; }

/* ─── Lábléc: óriás márkanév ─── */
.lablec__orias {
  display: flex; justify-content: center; overflow: hidden; white-space: nowrap; user-select: none;
  font: 900 clamp(44px, 12.6vw, 196px)/.82 var(--kijelzo); letter-spacing: -.045em;
  color: var(--szoveg); padding: var(--t4) 0 var(--t6);
}
.lablec__orias em { font-style: normal; color: var(--lang); }

@media (prefers-reduced-motion: reduce) {
  .gepel { animation: none; }
}