/* ========================================================================== gasparandras.hu — mozgás-réteg (scroll-reveal és bekapcsolási szekvencia) ========================================================================== MIÉRT KÜLÖN FÁJL A lapon eddig nem volt scroll-animáció: az IntersectionObserver csak a navigáció aktív zónáját követte. Ez a réteg tisztán hozzáad, nem ír felül semmit a site.css-ből. BIZTONSÁGI TULAJDONSÁG — minden szabály a html[data-motion] alá van zárva, és a "0" értéket kizárja. A data-motion attribútumot a -ben futó rövid szkript teszi fel, még az első festés előtt. Ebből következik: - JS nélkül egyetlen szabály sem érvényesül, a teljes tartalom látszik; - data-motion nélkül (vagy "0"-nál) a lap pixelre a mai éles állapot. FONTOS: a rejtett alapállapot VALÓDI szelektorokra épül, nem JS-sel felrakott attribútumra. Ha az utóbbi lenne, az elemek előbb láthatóan kirenderelődnének, majd eltűnnének — felvillanás. A JS csak az .is-in osztályt és a lépcsőzés késleltetését adja hozzá. HÁROM SZINT 1 — visszafogott: egységes felúszás, finom lépcsőzéssel 2 — mozgalmasabb: a lap saját formanyelve mozdul (tábla beül, patch panel portjai sorban bekapcsolnak, pálya-sor oldalról érkezik) 3 — karakteres: a 2-es, plusz hero bekapcsolási szekvencia, LED-lüktetés, gyűrű-berajzolás és finom parallax a portrén A prefers-reduced-motion ágat a -szkript kezeli: ott a data-motion sosem kerül fel, tehát ez a fájl teljes egészében inaktív marad. A CÉLELEMEK LISTÁJA a js/motion.js REVEAL_SELECTOR konstansával azonos — ha itt módosul, ott is módosítani kell. ========================================================================== */ html[data-motion]:not([data-motion='0']) { /* A site.css nem tartalmaz mozgás-tokeneket, ezért itt vezetjük be őket. Az easing szándékosan erős kicsengésű: a mozgás gyorsan indul és lágyan áll meg, ami "beülő tábla" érzetet ad, nem lebegést. */ --m-ease: cubic-bezier(0.22, 1, 0.36, 1); --m-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --m-dur: 520ms; --m-rise: 14px; } html[data-motion='2'] { --m-dur: 620ms; --m-rise: 22px; } html[data-motion='3'] { --m-dur: 700ms; --m-rise: 26px; } /* -------------------------------------------------------------------------- Alapállapot — minden szinten közös -------------------------------------------------------------------------- */ html[data-motion]:not([data-motion='0']) :is( .zone-head, .thesis-list > *, .method-contrast, .services-grid > *, .port-frame-note, .port-rack > li, .path-item, .personal-grid > *, .hand-quals, .contact-grid > * ) { opacity: 0; transform: translateY(var(--m-rise)); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay: var(--m-delay, 0ms); } html[data-motion]:not([data-motion='0']) :is( .zone-head, .thesis-list > *, .method-contrast, .services-grid > *, .port-frame-note, .port-rack > li, .path-item, .personal-grid > *, .hand-quals, .contact-grid > * ).is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 2. szint — a lap formanyelve mozdul -------------------------------------------------------------------------- */ /* Gravírozott tábla: a betűköz tágabbról húzódik össze, mintha a felirat most marródna a lemezbe. A .t-plate ritka és nagy elem, ezért a letter-spacing okozta újratördelés itt nem érzékelhető költség. */ html[data-motion='2'] .zone-head .t-plate, html[data-motion='3'] .zone-head .t-plate { letter-spacing: 0.14em; transition: letter-spacing var(--m-dur) var(--m-ease-soft); transition-delay: calc(var(--m-delay, 0ms) + 60ms); } html[data-motion='2'] .zone-head.is-in .t-plate, html[data-motion='3'] .zone-head.is-in .t-plate { letter-spacing: 0.06em; /* = a site.css .t-plate értéke */ } /* Patch panel: a portok sorban kapcsolnak be. A vezetékvonal felülről rajzolódik ki (a .port-leader::before egy 1px-es függőleges vonal), a LED pedig utána gyullad fel, rövid felnagyításból. */ html[data-motion='2'] .port-rack > li .port-leader::before, html[data-motion='3'] .port-rack > li .port-leader::before { transform: scaleY(0); transform-origin: top center; transition: transform 380ms var(--m-ease); transition-delay: calc(var(--m-delay, 0ms) + 160ms); } html[data-motion='2'] .port-rack > li.is-in .port-leader::before, html[data-motion='3'] .port-rack > li.is-in .port-leader::before { transform: scaleY(1); } html[data-motion='2'] .port-rack > li .port-hole .led, html[data-motion='3'] .port-rack > li .port-hole .led { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 240ms var(--m-ease-soft), transform 240ms var(--m-ease); transition-delay: calc(var(--m-delay, 0ms) + 420ms); } html[data-motion='2'] .port-rack > li.is-in .port-hole .led, html[data-motion='3'] .port-rack > li.is-in .port-hole .led { opacity: 1; transform: scale(1); } /* Pálya és végzettség: az idővonal mentén oldalról érkeznek a sorok, nem alulról — így a kronológia iránya is olvasható a mozgásból. */ html[data-motion='2'] .path-item, html[data-motion='3'] .path-item { transform: translateX(-18px); } html[data-motion='2'] .path-item.is-in, html[data-motion='3'] .path-item.is-in { transform: none; } /* A korábbi "Fotórács" szint-2 közelítő-effekt (.photo-grid > *) 2026-08-01-én megszűnt a .photo-grid törlésével együtt (ld. css/site.css) — a Z-06 fotói mostantól a saját essay-panel-jük része, a Z-05 fotói a saját path-item-ük része, egyik sem önálló, külön animálandó rácselem. */ /* -------------------------------------------------------------------------- 3. szint — karakteres -------------------------------------------------------------------------- */ /* Hero bekapcsolási szekvencia: betöltéskor egyszer fut le, felülről lefelé. Nem scroll-függő, mert a hero már a nyitóképen látszik. */ html[data-motion='3'] .hero-copy > * { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--m-ease), transform 620ms var(--m-ease); transition-delay: var(--m-delay, 0ms); } html[data-motion='3'] .hero-copy > *.is-in { opacity: 1; transform: none; } /* A portok gyűrűje berajzolódik. A kerület 2*pi*9 ≈ 56.5, ez a dash-hossz. */ html[data-motion='3'] .port-rack > li .port-hole .ring { stroke-dasharray: 56.5; stroke-dashoffset: 56.5; transition: stroke-dashoffset 520ms var(--m-ease); transition-delay: calc(var(--m-delay, 0ms) + 120ms); } html[data-motion='3'] .port-rack > li.is-in .port-hole .ring { stroke-dashoffset: 0; } /* Foglalt portok LED-jének lassú, alig észrevehető lüktetése — a "működik, figyel" érzet. Csak a felgyulladás után indul (a JS teszi fel az osztályt), különben a bekapcsolással versenyezne. */ @keyframes m-led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } html[data-motion='3'] .port:not(.port--empty) .port-hole .led.is-live { animation: m-led-breathe 3.4s var(--m-ease-soft) infinite; } /* Parallax: a portré finoman késik a görgetéshez képest. Az eltolást a JS számolja és CSS-változóban adja át, hogy a stílus itt maradjon. */ html[data-motion='3'] .portrait-panel { transform: translate3d(0, var(--m-parallax, 0px), 0); will-change: transform; } /* -------------------------------------------------------------------------- Előnézeti kapcsoló — csak akkor kerül a DOM-ba, ha a ?motion= paraméter szerepel az URL-ben. Éles használatban tehát nem létezik. -------------------------------------------------------------------------- */ .motion-switch { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; gap: 6px; align-items: center; padding: 8px 10px; /* 3. fázis (Andras diagnózisa, 2026-08-01): 10px a DESIGN.md derékszögű rendszerének 2-4px-es plafonja fölött volt — a látogató sosem látja ezt a fejlesztői eszközt, de ez volt az egyetlen hely, ahol a rendszer nem érvényes a saját szerszámára. */ border-radius: 4px; background: var(--rack-navy, #1c2740); border: 1px solid var(--rack-border-strong, #37456a); box-shadow: 0 6px 24px rgb(0 0 0 / 35%); font-family: var(--font-data, monospace); font-size: 11px; color: var(--plate-incised, #f2f4f6); } .motion-switch__label { opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 2px; } .motion-switch button { font: inherit; min-width: 30px; min-height: 30px; padding: 0 8px; cursor: pointer; color: inherit; border-radius: 4px; border: 1px solid var(--rack-border-strong, #37456a); background: transparent; } .motion-switch button:hover { border-color: var(--patch-blue, #1f6fd0); } .motion-switch button[aria-pressed='true'] { background: var(--patch-blue, #1f6fd0); border-color: var(--patch-blue, #1f6fd0); color: var(--on-accent, #fff); } .motion-switch button:focus-visible { outline: 2px solid var(--safety-yellow, #f2c400); outline-offset: 2px; } .motion-switch__note { max-width: 15rem; opacity: 0.8; line-height: 1.35; } @media (max-width: 520px) { .motion-switch { right: 8px; bottom: 8px; } .motion-switch__label { display: none; } }