:root {
  --bg: #000000;
  --ink: #EDEBE6;
  --dim: #7C7B84;
  --line: #2A2A31;
  --acc: #EDEBE6;
  --mono: "Kode Mono", ui-monospace, monospace;
  --disp: "Saira", "Kode Mono", sans-serif;
  --pad: clamp(16px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font: 400 14px/1.6 var(--mono); background: var(--bg); overflow-x: hidden; }
body.locked { overflow: hidden; height: 100svh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--acc); outline-offset: 4px; }
::selection { background: var(--acc); color: #000; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* nagłówek */
.top { position: fixed; inset: 0 0 auto 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: var(--pad); pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { font: 500 13px/1 var(--disp); font-variation-settings: "wdth" 125; letter-spacing: .32em; }
.snd { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); padding: 6px 0; transition: color .3s; }
.snd:hover, .snd[aria-pressed="true"] { color: var(--ink); }
.snd .dot { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.snd[aria-pressed="true"] .dot { background: var(--acc); border-color: var(--acc); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* spis rozdziałów */
.idx { position: fixed; right: var(--pad); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 12; }
.idx button { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 10px; padding: 3px 0; transition: color .3s; }
.idx button::after { content: ""; width: 10px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.idx button:hover { color: var(--ink); }
.idx button.on { color: var(--ink); }
.idx button.on::after { width: 28px; background: var(--acc); }

/* bramka */
.gate { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; padding: var(--pad) var(--pad) calc(var(--pad) * 2.4); transition: opacity .8s var(--ease), visibility .8s; }
.gate.off { opacity: 0; visibility: hidden; }
.gate-in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.gate-k { font-size: 12px; color: var(--dim); min-height: 1.6em; }
.gate-k::after { content: "_"; animation: blink 1s steps(2) infinite; margin-left: 2px; }
.gate-b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.gate.ready .gate-b { opacity: 1; transform: none; }
.gate-n { font-size: 11px; color: var(--dim); opacity: 0; transition: opacity 1s .3s; }
.gate.ready .gate-n { opacity: 1; }

.btn { font-size: 13px; padding: 14px 22px; border: 1px solid var(--line); background: #000; transition: border-color .3s, background .3s, color .3s; }
.btn:hover { border-color: var(--ink); }
.btn-main { background: var(--ink); color: #000; border-color: var(--ink); }
.btn-main:hover { background: var(--acc); border-color: var(--acc); }

/* sekcje */
main { position: relative; z-index: 2; transition: opacity 1s .2s; }
body.locked main, body.locked .idx { opacity: 0; }
.sec { position: relative; }
#s-face { height: 170svh; }
#s-city { height: 270svh; }
.loc { height: 260svh; }
#s-out { height: 180svh; }
.stick { position: sticky; top: 0; height: 100svh; padding: calc(var(--pad) * 3) var(--pad) calc(var(--pad) + 64px); pointer-events: none; }
.stick a, .stick button { pointer-events: auto; }

.hero { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 56px); }
.word { font: 200 clamp(60px, 17.5vw, 340px)/.78 var(--disp); font-variation-settings: "wdth" 125; letter-spacing: -.01em; margin-left: -.04em; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 22px; }
.lead { max-width: 38ch; color: var(--ink); font-size: 13px; }
.hint { font-size: 11px; color: var(--dim); display: inline-flex; align-items: center; gap: 10px; }
.hint::before { content: ""; width: 1px; height: 28px; background: var(--dim); animation: drop 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.city-t { font: 250 clamp(40px, 7vw, 120px)/.9 var(--disp); font-variation-settings: "wdth" 118; max-width: 9ch; }
.city-s { margin-top: 18px; max-width: 34ch; font-size: 13px; color: var(--ink); }

.loc-h { position: absolute; left: var(--pad); bottom: calc(var(--pad) + 64px); max-width: min(56vw, 900px); }
.loc-k { font-size: 11px; color: var(--acc); letter-spacing: .12em; display: flex; gap: 14px; align-items: center; }
.loc-k .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: blink 1.2s steps(2) infinite; }
.loc-n { font: 250 clamp(56px, 12vw, 230px)/.8 var(--disp); font-variation-settings: "wdth" 125; margin: 14px 0 0 -.04em; }
.loc-d { margin-top: 20px; max-width: 40ch; font-size: 13px; background: rgba(0,0,0,.72); padding: 2px 0; box-shadow: 0 0 0 6px rgba(0,0,0,.72); }

.tl { position: absolute; right: var(--pad); bottom: calc(var(--pad) + 64px); width: min(400px, 36vw); list-style: none; background: rgba(0,0,0,.8); border-top: 1px solid var(--line); }
.tl li { border-bottom: 1px solid var(--line); }
.tl button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 13px 4px; text-align: left; font-size: 13px; transition: color .25s, padding .4s var(--ease); }
.tl .n { color: var(--dim); font-size: 11px; }
.tl .d { color: var(--dim); font-size: 11px; }
.tl button:hover { padding-left: 12px; }
.tl button:hover .n, .tl button.on .n { color: var(--acc); }
.tl button.on { color: var(--acc); }
.tl .eq { display: none; gap: 2px; align-items: flex-end; height: 11px; }
.tl button.on .eq { display: inline-flex; }
.tl button.on .d { display: none; }
.tl .eq i { width: 2px; background: var(--acc); animation: eq .9s ease-in-out infinite; }
.tl .eq i:nth-child(2) { animation-delay: -.3s; } .tl .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 2px; } 50% { height: 11px; } }
body.paused .tl .eq i { animation-play-state: paused; }

.out { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 64px); }
.out-t { font: 250 clamp(44px, 9vw, 170px)/.84 var(--disp); font-variation-settings: "wdth" 125; max-width: 10ch; }
.out-s { margin-top: 22px; max-width: 46ch; font-size: 13px; }
.out-b { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.credits { margin-top: 34px; font-size: 11px; color: var(--dim); max-width: 70ch; }

/* etykiety kamer na mapie */
.labels { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.lab { position: absolute; left: 0; top: 0; font-size: 11px; line-height: 1.3; padding: 4px 8px; background: #000; border-left: 1px solid var(--c); pointer-events: auto; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.lab b { font-weight: 400; color: var(--c); margin-right: 8px; }
.lab.on { opacity: 1; }
.lab:hover { background: var(--c); color: #000; } .lab:hover b { color: #000; }

/* odtwarzacz */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; height: 56px; display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 2fr) 54px 56px; align-items: center; background: #000; border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .7s var(--ease); }
.player.on { transform: none; }
.pp, .nx { height: 100%; display: grid; place-items: center; font-size: 12px; color: var(--dim); transition: color .3s; }
.pp:hover, .nx:hover { color: var(--ink); }
.pp .ic { width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.pp.on .ic { width: 9px; height: 12px; border: 0; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.pl-t { display: flex; flex-direction: column; min-width: 0; padding-right: 16px; line-height: 1.35; }
.pl-n { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-l { font-size: 11px; color: var(--acc); }
.pl-bar { display: flex; gap: 3px; align-items: center; height: 100%; cursor: pointer; padding-right: 16px; }
.pl-bar i { flex: 1; height: 9px; background: var(--line); transition: background .2s; }
.pl-bar i.f { background: var(--ink); }
.pl-bar i.h { background: var(--acc); }
.pl-time { font-size: 11px; color: var(--dim); text-align: right; }

.nojs { position: fixed; inset: auto 0 40% 0; text-align: center; z-index: 30; }

@media (max-width: 760px) {
  .idx { display: none; }
  .logo { font-size: 12px; letter-spacing: .26em; }
  .word { font-size: 19vw; }
  .hero { bottom: calc(var(--pad) + 60px); }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .loc-h { right: var(--pad); max-width: none; bottom: auto; top: calc(var(--pad) * 3.6); }
  .loc-n { font-size: 17vw; }
  .loc-d { font-size: 12px; }
  .tl { left: var(--pad); right: var(--pad); width: auto; bottom: calc(var(--pad) + 60px); }
  .tl button { padding: 12px 4px; }
  .player { grid-template-columns: 48px minmax(0, 1fr) 46px 48px; height: 58px; }
  .pl-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; padding: 0; gap: 0; }
  .pl-bar i { height: 2px; }
  .out { bottom: calc(var(--pad) + 64px); }
}
@media (max-height: 520px) and (min-width: 761px) {
  .loc-n { font-size: 15vh; }
  .tl button { padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}