/* ========================================================================== veiki – judesio sluoksnis Viskas čia veikia TIK su .portal-ready klase ant (desktop + leidžiamas judesys). Be JS arba su reduced-motion puslapis lieka statinis ir pilnai skaitomas. ========================================================================== */ /* --- Fono 3D scena -------------------------------------------------------- Sušvelninta 2026-07-25: mažiau ir mažesnių fragmentų, giliau fone. */ .v-bg3d { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; } .portal-ready .v-bg3d { display: block; } .v-bg3d canvas { width: 100%; height: 100%; display: block; } .v-bg3d__glow { position: absolute; left: 0; top: 0; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(157, 140, 255, 0.14), rgba(157, 140, 255, 0.04) 45%, transparent 70%); filter: blur(34px); transform: translate(-1000px, -1000px); } /* Tamsios sekcijos permatomos, kad scena matytųsi pro jas; šviesios – ne. */ .portal-ready .v-hero, .portal-ready .v-work { background: transparent; } /* Tamsus body reikalingas TIK pagrindiniame – ten pro permatomas sekcijas matosi 3D scena. Kituose puslapiuose (anketa, darbai, privatumo politika) turinys šviesus, o tamsus body išlįsdavo tempiant puslapį telefone. */ .portal-ready body.home { background: var(--c-ink); } /* --- Hero turinys pin režime ---------------------------------------------- Pradinė būsena prieš pirmą JS kadrą – paslėptas, kaip prototipe. JS kiekvieną kadrą perrašo opacity/transform. TELEFONE (.portal-lite) hero turinys NEslepiamas. Priežastis – greitis: `opacity: 0` elemento Chrome neskaito kaip LCP kandidato, o mobilus LCP jau buvo 2300 ms iš 2500 leistinų. Atsidarymo įspūdį ten sukuria pati besiplečianti portalo skylė, pro kurią hero ir pasirodo. */ .portal-ready:not(.portal-lite) [data-hero-inner] { opacity: 0; } /* ========================================================================== Atsiradimai – vienkartiniai, per .is-in klasę (IntersectionObserver) ========================================================================== */ [data-slide] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } [data-slide="left"] { transform: translate(-32px, 0); } [data-slide="right"] { transform: translate(32px, 0); } [data-slide].is-in { opacity: 1; transform: none; } /* Be JS – viskas matoma (JS uždeda .js ant sinchroniškai ) */ html:not(.js) [data-slide] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-slide] { opacity: 1; transform: none; transition: none; } }