@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/poppins-400.ttf') format('truetype')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/poppins-500.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/dm-500.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/dm-700.ttf') format('truetype')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('./assets/fonts/barlow-800.ttf') format('truetype')}
:root{color-scheme:dark;--ink:#eef1ed;--acid:#e3edb5;--navy:#050d23;--muted:#a3b3cb}
*{box-sizing:border-box}
html{background:var(--navy);scrollbar-color:#556079 var(--navy)}
body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--acid);outline-offset:6px}
[hidden]{display:none!important}

/* 12 ekranów przewijania; scena stoi w miejscu, a JS prowadzi oś czasu. */
#journey{height:1200vh;height:1200svh}
.scene{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--navy)}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video::-webkit-media-controls{display:none!important}
#film{transform-origin:50% 100%;will-change:transform}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#02071566,transparent 35%,transparent 78%,#030a2055)}

.site-header{position:fixed;z-index:20;top:0;left:0;padding:30px 4%;pointer-events:none;transition:opacity .45s}
.booting .site-header{opacity:0;visibility:hidden}
.brand{pointer-events:auto;color:var(--ink);text-decoration:none;font-size:28px;font-weight:700;letter-spacing:-1.8px;display:flex;gap:13px;align-items:center}
.brand svg{width:44px;fill:none;stroke:currentColor;stroke-width:1.4}
.brand sup{font-size:9px;vertical-align:top;line-height:2.5;margin-left:4px;letter-spacing:0}

.intro{position:absolute;z-index:2;left:5%;top:21%;width:90%;text-align:center;pointer-events:none;transform-origin:50% 20%;will-change:transform,opacity}
.intro h1{font-size:clamp(58px,7.5vw,124px);font-weight:500;letter-spacing:-.075em;line-height:.98;margin:0}
.intro h1 em{font-style:normal;color:#c6d2d3}

/* Granatowa kurtyna opada z nieba; dolne 37,5% to miękkie wtopienie, reszta to jednolity granat. */
.space-veil{position:absolute;z-index:3;left:0;top:0;width:100%;height:160%;pointer-events:none;visibility:hidden;will-change:transform;transform:translate3d(0,-100%,0);background:linear-gradient(to bottom,var(--navy) 62.5%,#050d23e0 70%,#050d2399 79%,#050d2340 90%,#050d2300)}
.space{position:absolute;z-index:4;inset:0;opacity:0;visibility:hidden;pointer-events:none;background:radial-gradient(ellipse 90% 70% at 50% 20%,#0c1f47,#071331 45%,#050d2300 85%)}
.nebula{position:absolute;inset:-10%;background:url('./assets/nebula-hubble.jpg') center/cover;opacity:.13;filter:saturate(.45);mix-blend-mode:screen;will-change:transform}
#stars{position:absolute;inset:0;width:100%;height:100%}

/* Napis jest kotwicą o zerowym rozmiarze; JS przesuwa ją w stronę punktu zbiegu. */
.final-scene{position:absolute;z-index:5;inset:0;overflow:hidden;visibility:hidden;pointer-events:none}
.crawl{position:absolute;left:50%;top:0;width:0;height:0;transform-origin:0 0;opacity:0;will-change:transform,opacity}
h2{position:absolute;left:0;top:0;width:max-content;margin:0;transform:translate(-50%,-50%);text-align:center;color:var(--acid);font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(84px,13vw,210px);font-weight:800;line-height:1.02;letter-spacing:-.01em;text-shadow:0 0 40px #d6e09c1c}
.title-row{display:block;white-space:nowrap}
.letter{display:inline-block}
.letter.hit{visibility:hidden}
.letter-space{display:inline-block;width:.22em}

#game{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;touch-action:pan-y;outline:0;-webkit-user-select:none;user-select:none}
.game-on #game{pointer-events:auto;cursor:crosshair}
#game:focus-visible{outline:1px solid #cfe8c060;outline-offset:-8px}
.game-hud{position:absolute;z-index:7;top:38px;right:4%;display:flex;gap:22px;align-items:center;font:500 12px/1 Poppins,sans-serif;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:#c5d7df;opacity:0;pointer-events:none;transition:opacity .5s}
.game-on .game-hud{opacity:.85}
.shield{display:flex;gap:6px}
.shield i{width:6px;height:6px;border-radius:50%;background:#cfe8c0;box-shadow:0 0 8px #bff5d080;transition:opacity .3s,transform .3s}
.shield i.off{opacity:.18;box-shadow:none;transform:scale(.8)}
.photo-credit{position:absolute;z-index:7;bottom:20px;right:4%;font:10px Poppins,sans-serif;letter-spacing:.2px;color:var(--muted);text-decoration:none;opacity:0;visibility:hidden;transition:opacity .5s}
[data-phase=space] .photo-credit{opacity:.55;visibility:visible}
.photo-credit:hover{opacity:.9}
.game-caption{position:absolute;z-index:7;left:50%;bottom:28px;width:max-content;max-width:90%;transform:translateX(-50%);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,visibility 0s .45s}
.game-caption.show{opacity:1;visibility:visible;transition:opacity .45s}
.game-caption p{margin:0;font:400 12px/1.5 Poppins,sans-serif;letter-spacing:.02em;color:#c7d3e1}
.game-caption button{pointer-events:auto;margin-top:12px;padding:10px 20px;border:1px solid #c6d7e540;border-radius:100px;background:#0d1a3699;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12px Poppins,sans-serif}
.game-caption button:hover{background:#1a294a}
.game-caption button span{margin-left:8px}

/* Ładowanie: duży napis, potem włączenie telewizora przechodzi w film. */
.loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#02040b;color:#b6c8d3;transition:opacity .5s,visibility 0s .5s}
.loading.done{opacity:0;visibility:hidden;pointer-events:none}
.loading-copy{position:relative;z-index:1;margin:0;padding:0 6vw;text-align:center;font:400 clamp(26px,3.4vw,52px)/1.2 Poppins,sans-serif;letter-spacing:-.03em;transition:opacity .2s}
.loading-dots{display:inline-flex;width:1.1em}
.loading-dots i{font-style:normal;animation:signalDot 1.2s infinite both}
.loading-dots i:nth-child(2){animation-delay:.18s}
.loading-dots i:nth-child(3){animation-delay:.36s}
.crt-video{opacity:0;filter:brightness(.8);pointer-events:none}
.loading.tuning{background:#000}
.loading.tuning .loading-copy{opacity:0}
.loading.tuning .crt-video{opacity:1}
@keyframes signalDot{0%,70%,100%{opacity:.15;transform:translateY(0)}35%{opacity:1;transform:translateY(-.12em)}}

@media(max-aspect-ratio:1/1){
#film{object-fit:cover;object-position:50% 50%}
.site-header{padding:23px 6%}
.brand{font-size:24px;gap:9px}
.brand svg{width:36px}
.intro{top:19%}
.intro h1{font-size:clamp(46px,10.5vw,90px)}
h2{font-size:19vw}
.game-hud{top:31px;right:6%;gap:14px;font-size:11px}
.game-caption{bottom:calc(40px + env(safe-area-inset-bottom))}
.game-caption p{font-size:11px}
.photo-credit{font-size:9px;right:6%;bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
.loading-dots i{animation:none;opacity:.8}
.loading,.game-caption,.game-hud,.site-header{transition:none}
}