/* ════════════════════════════════════════════ NeuralWeb · ALOLDALI ÉLŐ HÁTTÉR ──────────────────────────────────────────── A főoldal háttér-rendszerének (style.css) megosztott, egyszerűsített változata az aloldalakhoz. Két különbség a főoldalhoz képest: 1) Itt nincs hero-canvas, amitől "átvenné a stafétát", ezért a rétegek AZONNAL láthatók (nincs scroll-fade). 2) Egyetlen szín él az egész oldalon — nincs szekciónkénti színváltás, így IntersectionObserver sem kell. A színt a / data-hue-2 attribútumból a js/page-bg.js olvassa ki, és a --bgnet-c1 / --bgnet-c2 változókba írja. Az itteni alapértékek biztosítják, hogy JS nélkül is helyes legyen a kép. ════════════════════════════════════════════ */ :root { --bgnet-c1: rgba(2,100,223,0.34); --bgnet-c2: rgba(56,189,248,0.24); } /* ── Réteg 1: színes mosás (CSS-only, GPU-kompozitált) ── */ .bg-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-wash-blob { position: absolute; border-radius: 50%; filter: blur(110px); } .bg-wash-a { width: 52vw; height: 52vw; top: -16%; left: -10%; background: radial-gradient(circle, var(--bgnet-c1) 0%, transparent 66%); animation: bgWashDriftA 42s ease-in-out infinite; } .bg-wash-b { width: 44vw; height: 44vw; top: 42%; right: -12%; background: radial-gradient(circle, var(--bgnet-c2) 0%, transparent 66%); animation: bgWashDriftB 48s ease-in-out infinite 4s; } /* Harmadik folt: a másik kettő keveréke, más ütemben sodródik — sűrűbben tarkítja a hosszú aloldalt, új szín bevezetése nélkül. */ .bg-wash-c { width: 38vw; height: 38vw; top: 66%; left: 20%; background: radial-gradient(circle, color-mix(in srgb, var(--bgnet-c1) 55%, var(--bgnet-c2) 45%) 0%, transparent 68%); animation: bgWashDriftC 54s ease-in-out infinite 8s; } /* Széles, több megállós útvonalak — a foltok ténylegesen bebarangolják a nézetablakot, nem csak egy ponton rezegnek. */ @keyframes bgWashDriftA { 0% { transform: translate(0,0) scale(1); } 22% { transform: translate(9vw, 5vh) scale(1.1); } 48% { transform: translate(4vw, 16vh) scale(1.22); } 74% { transform: translate(-7vw, 9vh) scale(1.05); } 100% { transform: translate(0,0) scale(1); } } @keyframes bgWashDriftB { 0% { transform: translate(0,0) scale(1); } 30% { transform: translate(-8vw, -10vh) scale(0.9); } 58% { transform: translate(-3vw, -18vh) scale(1.05); } 82% { transform: translate(6vw, -6vh) scale(0.85); } 100% { transform: translate(0,0) scale(1); } } @keyframes bgWashDriftC { 0% { transform: translate(0,0) scale(1); } 26% { transform: translate(-7vw, 8vh) scale(1.12); } 55% { transform: translate(5vw, 15vh) scale(0.96); } 80% { transform: translate(8vw, -4vh) scale(1.08); } 100% { transform: translate(0,0) scale(1); } } /* ── Réteg 2: hálózat-canvas — a NÉZETABLAKHOZ rögzítve, nem a dokumentum magasságához, így a költsége független attól, milyen hosszú az oldal. Lásd js/page-bg.js. ── */ #bg-network-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* ── Finom vignetta: a lap szélei enyhén sötétebbek ── A háttér-rétegekkel egy szinten (z-index:0), tehát a tényleges tartalom (a .pg-section/.sub-hero mind z-index:1) fölötte marad. */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 60%, rgba(0,0,0,0.32) 100%); } /* ── Mobil: a hálózat MEGMARAD, csak olcsóbban fut ── Korábban a canvas teljesen kikapcsolt telefonon (display:none), ezért ott élettelen volt a háttér, miközben asztali gépen mozgott. A költséget nem kikapcsolással fogjuk vissza, hanem kevesebb ponttal és korlátozott pixelaránnyal — lásd js/page-bg.js. A lebegő színfoltok DRIFT-animációja marad kikapcsolva: egy 110px-es blur mozgatása a legdrágább tétel, és alig látszik. A színváltás nem ettől függ, hanem a --bgnet-c1/c2 változóktól, így az megmarad. ── */ @media (max-width: 768px) { .bg-wash-blob { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .bg-wash-blob { animation: none !important; } } /* Mobil — GPU-memória: lásd a style.css végén lévő részletes indoklást. A blur(110px) egy 52vw-s színátmenet-folton több megabájtnyi GPU-puffer, miközben a radial-gradient önmagában is lágy. */ @media (max-width: 768px) { .bg-wash-blob { filter: none !important; } }