/* ENERSTORE v2 — dark cinematic.
Tokeny i typografia wg briefu koncept_cinematic (decyzja MTR 2026-07-28).
Jeden plik: strona ma kilkanascie sekcji, a rozbicie na moduly bez bundlera
oznaczaloby kilkanascie zadan HTTP na starcie. */
:root{
--bg:#070b0a;
--graphite:#131817;
--panel:#0d1210;
--ink:#eef2ee;
--dim:#aeb8b2;
--mut:#858f8a; /* było #5c6662 (~3:1 na tle) — drobne etykiety 11 px były poniżej 4,5:1; audyt czytelności 19.09 */
--amber:#E6A93A;
--hi:#F7D774;
--teal:#2E6F95;
--line:rgba(238,242,238,.10);
--line-soft:rgba(238,242,238,.06);
--disp:'Montserrat',system-ui,sans-serif;
--body:'Lato',system-ui,sans-serif;
--mono:ui-monospace,'Cascadia Mono','Consolas','JetBrains Mono',monospace;
--pad:clamp(20px,5vw,64px);
--maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior MUSI byc auto, kiedy dziala Lenis: Lenis przewija przez
window.scrollTo, a przegladarka animowalaby kazde takie wywolanie drugi raz.
Efekt to scroll, ktory lapie wheel i nie rusza z miejsca.
Gdy Lenis nie wstal (brak pliku, prefers-reduced-motion, wylaczony JS),
klasy .lenis nie ma i wraca natywne wygladzanie. */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html:not(.lenis){scroll-behavior:auto}}
/* Kotwice maja ladowac pod przyklejona nawigacja, takze bez JS. */
section[id],main[id]{scroll-margin-top:84px}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--body);
font-size:16px;
line-height:1.7;
/* clip, nie hidden: overflow-x:hidden robi z kontener przewijania,
a wtedy position:sticky w sekcjach forge i model potrafi przestac trzymac.
clip obcina tak samo, ale nie tworzy scrollportu. */
overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--bg)}
/* Sekcje ponizej folda nie musza byc liczone przy pierwszym renderze.
contain-intrinsic-size trzyma zarezerwowana wysokosc, zeby pasek przewijania
nie skakal przy dojezdzaniu do nich. */
.lazy-sec{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* ---------------------------------------------------------------- warstwy */
/* width/height sa konieczne: canvas to element zastepowany, wiec samo inset:0
go nie rozciaga — bez nich ma rozmiar bufora (okno x DPR) i przy skali
ekranu innej niz 100% nie pokrywa okna albo z niego wystaje.
100lvh (najwiekszy viewport): na iOS pasek adresu chowa sie przy przewijaniu
i wysokosc okna skacze — przy 100% canvas bylby za kazdym razem czyszczony
i przeliczany (field.js pomija resize, gdy jego wymiar sie nie zmienil). */
canvas#field{position:fixed;inset:0;width:100%;height:100%;height:100lvh;display:block;z-index:0;transition:opacity .3s linear}
.vignette{
position:fixed;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(130% 100% at 50% 45%,transparent 40%,rgba(2,4,3,.78) 100%);
}
.grain{
position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,var(--amber),var(--hi))}
section{position:relative;z-index:10}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* ------------------------------------------------------------- nawigacja */
.nav{
position:fixed;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:18px var(--pad);
font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut);
transition:background .4s,backdrop-filter .4s,border-color .4s;
border-bottom:.5px solid transparent;
}
.nav.stuck{background:rgba(7,11,10,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-logo{color:var(--ink);display:flex;align-items:center;transition:color .3s}
.nav-logo:hover{color:var(--hi)}
.nav-links{display:flex;gap:26px;text-transform:uppercase}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--amber);transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-status{display:flex;align-items:center;gap:8px;text-transform:uppercase}
.nav-status i{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
.nav-cta{
color:var(--bg);background:var(--amber);border-radius:40px;
padding:9px 18px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
transition:box-shadow .3s,transform .3s;
}
.nav-cta:hover{box-shadow:0 0 34px rgba(230,169,58,.5);transform:translateY(-1px)}
/* ------------------------------------------------------- wspolne elementy */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--hi);margin-bottom:22px;
}
.eyebrow .mark{width:12px;height:12px;color:var(--amber);flex:none}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
h2{font-size:clamp(28px,3.6vw,50px)}
h2 em,h3 em{font-style:normal;color:var(--hi)}
.lead{color:var(--dim);font-size:17px;max-width:56ch;margin-top:18px}
.lead b{color:var(--ink);font-weight:700}
.note{font-family:var(--mono);font-size:11px;line-height:1.8;letter-spacing:.04em;color:var(--mut);margin-top:26px;max-width:80ch}
.btn{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
color:var(--bg);background:var(--amber);padding:19px 36px;border-radius:60px;
border:0;cursor:pointer;transition:box-shadow .35s;will-change:transform;
}
.btn:hover{box-shadow:0 0 70px rgba(230,169,58,.55)}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(5px)}
.btn-ghost{
background:transparent;color:var(--ink);border:1px solid var(--line);
box-shadow:none;transition:border-color .3s,color .3s;
}
.btn-ghost:hover{border-color:var(--hi);color:var(--hi);box-shadow:none}
/* Tresc wylacznie dla czytnikow ekranu (podpisy tabel, etykiety pomocnicze). */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Stan wyjsciowy TYLKO pod html.js. Bez tej bramki strona z wylaczonym
skryptem zostawala pusta ponizej hero: klase `on` dopina obserwator z ui.js,
wiec bez JS-a nic nigdy nie wychodzilo z opacity 0. */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
/* UWAGA NA SPECYFICZNOSC: regula odslaniajaca MUSI byc w tym samym kontekscie
`html.js`. Samo `.reveal.on` to (0,2,0) i przegrywa z bramka (0,2,1) — cala
tresc zostaje wtedy na opacity 0 mimo poprawnie dopietej klasy `on`.
Wariant bez `html.js` zostaje dla porzadku: przy wylaczonym skrypcie stan
wyjsciowy i tak nie obowiazuje. */
html.js .reveal.on,.reveal.on{opacity:1;transform:none}
.sec{padding:clamp(80px,10vh,140px) 0;background:var(--graphite);border-top:.5px solid var(--line-soft)}
.sec--void{background:transparent;border-top:0}
.sec--deep{background:var(--panel)}
/* -------------------------------------------------------------- 01 hero */
.hero{
min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:120px var(--pad) 130px;
}
.hero .tag{font-family:var(--mono);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--amber);margin-bottom:26px}
.hero h1{font-size:clamp(42px,8.2vw,124px);line-height:.95;letter-spacing:-.015em}
.hero h1 .row{display:block}
/* Odslanianie naglowka (ui.js): komorka litery. .scr-f to znak docelowy —
trzyma szerokosc i zawijanie wiersza; .scr-r (losowy) lezy nad nim poza
przeplywem, wiec mieszanka nie moze zawinac wiersza ani przesunac hero. */
.scr-c{position:relative}
.scr-c .scr-f{visibility:hidden}
.scr-c .scr-r{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.scr-c.is-set .scr-f{visibility:visible}
.scr-c.is-set .scr-r{display:none}
.hero h1 .ghost{color:transparent;-webkit-text-stroke:1px rgba(238,242,238,.35)}
.hero h1 .solid em{font-style:normal;color:var(--hi);text-shadow:0 0 46px rgba(247,215,116,.45)}
.hero .sub{margin-top:28px;max-width:540px;color:var(--dim);font-size:17px}
.hero .sub b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.hud-row{
position:absolute;bottom:26px;left:var(--pad);right:var(--pad);
display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut);
}
.hud{display:flex;flex-direction:column;gap:6px;text-align:left}
.hud .l{display:flex;gap:10px}
.hud .k{color:#7d8a83}
.hud .v{color:var(--ink)}
.hud .v.a{color:var(--amber)}
.hint{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.22em}
.hint .pulse{width:26px;height:1px;background:var(--mut);position:relative;overflow:hidden}
.hint .pulse::after{content:"";position:absolute;inset:0;background:var(--hi);transform:translateX(-100%);animation:sw 1.8s infinite}
@keyframes sw{50%{transform:translateX(0)}100%{transform:translateX(100%)}}
/* ------------------------------------------------------------- 02 forge */
.forge{height:190vh}
.forge .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center}
/* width jawnie: kroki są absolute, więc jako element flex blok miał szerokość 0 — a na jego obrysie
stoją podkład pod tekstem i strefa ciszy pola cząstek (field.js). */
.forge-copy{position:relative;isolation:isolate;margin-left:clamp(20px,7vw,110px);width:min(360px,40vw);max-width:360px;height:240px}
.forge-copy .step{position:absolute;top:0;left:0;opacity:0;will-change:opacity,transform}
/* Podkład pod tekstem kroków — pole cząstek płynie obok, nie przez tekst (zgłoszenie testera 19.09). */
.forge-copy::before{content:"";position:absolute;inset:-70px -90px -90px -70px;z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,rgba(7,11,10,.82),rgba(7,11,10,.55) 60%,rgba(7,11,10,0))}
.forge-copy .num{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--amber);margin-bottom:14px}
.forge-copy h3{font-size:clamp(24px,2.6vw,38px);font-weight:700;margin-bottom:14px}
.forge-copy p{color:var(--dim);font-size:15px}
.forge-copy p b{color:var(--ink);font-weight:700}
/* ------------------------------------------------------------- 03 model */
.model{height:260vh;background:transparent}
.model .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:0 var(--pad)}
.model-stage{position:relative;height:min(78svh,680px)}
.model-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.model-fallback{position:absolute;inset:0;margin:auto;object-fit:contain;opacity:0;transition:opacity .6s}
.model-stage.is-static .model-fallback{opacity:1}
.model-stage.is-static canvas{display:none}
.model-info h2{margin-bottom:18px}
.model-layers{margin-top:34px;display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:.5px solid var(--line-soft);border-radius:14px;overflow:hidden}
.model-layer{
background:var(--graphite);padding:18px 22px;display:flex;gap:16px;align-items:baseline;
transition:background .4s,color .4s;
}
.model-layer.active{background:#19211e}
.model-layer .idx{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--amber);flex:none;width:34px}
.model-layer .nm{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.model-layer .ds{color:var(--mut);font-size:13px;margin-left:auto;text-align:right;font-family:var(--mono)}
.model-hint{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:22px}
/* ------------------------------------------------- 03b prezentacja produktu */
.prezentacja .lead{max-width:64ch}
.shot{margin-top:40px}
.shot-frame{
/* --seq-max: szerokosc kadru sekwencji w CSS. Zrodlo ma 1280 px, wiec przy
640 px i DPR 2 rysujemy 1:1 — na retinie bez miekkosci. */
--seq-max:640px;
position:relative;max-width:980px;margin:0 auto;
/* Wciecie z bokow to miejsce na spec-tagi: bez niego znaczniki po prawej
ladowaly NA renderze, bo obraz siegal do krawedzi kadru. */
padding-inline:clamp(60px,13%,150px);
/* Poswiata pod produktem — ten sam zabieg co w kadrze Open Graph. */
background:radial-gradient(50% 55% at 50% 55%,rgba(230,169,58,.12),transparent 70%);
}
.shot-frame img{width:100%;height:auto}
.shot figcaption{
margin-top:18px;text-align:center;
font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut);
}
/* Spec-tagi wokol renderu. Pozycja pionowa wchodzi stylem z PHP, bo to jedyna
rzecz, ktora sie rozni miedzy nimi — reszta jest wspolna. */
.spec-tag{
position:absolute;display:flex;flex-direction:column;gap:2px;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--mut);white-space:nowrap;
}
.spec-tag .v{color:var(--ink);font-size:13px;letter-spacing:.06em}
.spec-tag--left{left:0;text-align:right;align-items:flex-end}
.spec-tag--right{right:0;text-align:left;align-items:flex-start}
/* Linia-leader biegnie od znacznika w strone produktu. */
.spec-tag .lead-line{
position:absolute;top:50%;width:34px;height:1px;background:var(--line);
}
.spec-tag--left .lead-line{left:100%;margin-left:10px}
.spec-tag--right .lead-line{right:100%;margin-right:10px}
.spec-tag .lead-line::after{
content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
background:var(--amber);
}
.spec-tag--left .lead-line::after{right:-2px}
.spec-tag--right .lead-line::after{left:-2px}
.stage-note{
margin-top:20px;text-align:center;color:var(--mut);font-size:14px;
}
.stage-note a{color:var(--ink);border-bottom:1px solid var(--line)}
/* ------------------------------------------------- scena: sekwencja klatek
WARSTWA PODSTAWOWA (bez JS-a): canvas znika, zostaje z