.tlo { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 86% 24%,#112a24 0,transparent 47%),#0b1516; }
.aura { position:absolute; border-radius:50%; will-change:transform; pointer-events:none; }
.aura-1 { width:760px; height:760px; right:-180px; top:-120px; background:radial-gradient(circle,rgba(87,171,111,.08),transparent 67%); animation:aura 24s ease-in-out infinite alternate; }
.aura-2 { width:740px; height:740px; left:-470px; top:450px; background:radial-gradient(circle,rgba(96,178,143,.06),transparent 65%); animation:aura 28s ease-in-out infinite alternate-reverse; }
/* v15 - siatka jest rasteryzowana raz i przesuwana przez GPU zamiast przemalowywania tła co klatkę. */
.siatka { position:absolute; inset:-100px; background-image:linear-gradient(rgba(148,202,166,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(148,202,166,.026) 1px,transparent 1px); background-size:83px 83px; -webkit-mask-image:linear-gradient(transparent,black 28%,black 72%,transparent 92%); mask-image:linear-gradient(transparent,black 28%,black 72%,transparent 92%); transform:translate3d(0,0,0); will-change:transform; }
.przycisk-efekty[aria-pressed="true"] .ikona { animation:obrot 18s linear infinite; }
.przycisk-efekty[aria-pressed="false"] { opacity:.65; }
.glowny:before { content:""; position:absolute; inset:-30px; z-index:-1; background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.4) 48%,transparent 60%); transform:translateX(-110%); transition:transform .65s ease; }
.glowny:hover:before { transform:translateX(110%); }
.dymek-1 { animation:plywanie-1 7s ease-in-out infinite; }
.dymek-2 { animation:plywanie-2 8s ease-in-out infinite; }
.karta-przegladarki { animation:karta 9s ease-in-out infinite; }
.gwiazdka-1 { animation:gwiazda 6s ease-in-out infinite; }
.gwiazdka-2 { animation:gwiazda 7s ease-in-out infinite reverse; }
.znaczek .ikona { animation:obrot 26s linear infinite; }
.kursor { animation:kursor 1.8s ease-in-out infinite; }
.kula-poswiata { animation:oddech 9s ease-in-out infinite; }
/* v15 - nieprzerwany pasek: sześć identycznych grup, przesuw o dokładnie jedną grupę. */
.pas-ruch { animation:przesuwanie 54s linear infinite; will-change:transform; transform:translate3d(0,0,0); }
[data-swiatlo]:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(180,249,202,.075),transparent 68%); opacity:0; transition:opacity .4s; }
[data-swiatlo]:hover:before { opacity:1; }
[data-swiatlo]>form,[data-swiatlo]>* { position:relative; }
.fala { position:absolute; width:var(--rozmiar); height:var(--rozmiar); left:var(--lewo); top:var(--gora); border-radius:50%; background:rgba(30,93,50,.16); pointer-events:none; animation:fala .65s ease-out forwards; }
.gotowe .odkryj { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.2,1); }
.gotowe .odkryj.odkryte { opacity:1; transform:translateY(0); }
.gotowe .krok:nth-child(2) { transition-delay:.08s; }
.gotowe .krok:nth-child(3) { transition-delay:.16s; }
@keyframes aura { from { transform:translate(-25px,-15px); } to { transform:translate(70px,70px); } }
@keyframes obrot { to { transform:rotate(360deg); } }
@keyframes oddech { 0%,100% { opacity:.65; transform:scale(.96); } 50% { opacity:1; transform:scale(1.03); } }
@keyframes plywanie-1 { 0%,100% { transform:translateY(0) rotate(7deg); } 50% { transform:translateY(-10px) rotate(4deg); } }
@keyframes plywanie-2 { 0%,100% { transform:translateY(0) rotate(-7deg); } 50% { transform:translateY(11px) rotate(-4deg); } }
@keyframes karta { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-7px) rotate(-4deg); } }
@keyframes gwiazda { 0%,100% { opacity:.6; transform:scale(.9) rotate(0); } 50% { opacity:1; transform:scale(1.05) rotate(10deg); } }
@keyframes kursor { 0%,100% { opacity:1; } 50% { opacity:.15; } }
@keyframes przesuwanie { to { transform:translate3d(-16.6666667%,0,0); } }
@keyframes fala { from { transform:scale(0); opacity:1; } to { transform:scale(1); opacity:0; } }
@media(hover:none) { [data-swiatlo]:before { display:none; } }

/* v14 - animacje działają stale, niezależnie od ustawienia redukcji ruchu w systemie. */
.siatka { animation:siatka-plynnie 34s linear infinite; }
.orbita-linia { animation:orbita-puls 6.5s ease-in-out infinite; }
.orbita-b { animation-delay:-3.2s; }
.kula-baza { animation:kula-oddech 10s ease-in-out infinite; }
.faq-odpowiedz { overflow:hidden; transform-origin:top; }
.faq-lista details:not([open]) .faq-odpowiedz { height:0; opacity:0; }
@keyframes siatka-plynnie { from { transform:translate3d(0,0,0); } to { transform:translate3d(83px,83px,0); } }
@keyframes orbita-puls { 0%,100% { opacity:.62; filter:drop-shadow(0 0 0 rgba(180,249,202,0)); } 50% { opacity:1; filter:drop-shadow(0 0 7px rgba(180,249,202,.18)); } }
@keyframes kula-oddech { 0%,100% { box-shadow:inset 3px 2px 14px rgba(160,251,183,.1),inset -18px -9px 24px rgba(0,0,0,.4),0 0 1px 1px rgba(144,220,161,.22); } 50% { box-shadow:inset 3px 2px 18px rgba(160,251,183,.16),inset -18px -9px 24px rgba(0,0,0,.4),0 0 34px rgba(128,237,166,.08); } }