/* ============================================================================
   nav.css — górny HUD, logo, hamburger, szuflada menu, przełącznik języka, i18n-swap
   Część rozbitego css/style.css — kolejność wczytywania (ta sama na każdej
   podstronie) trzyma kaskadę identyczną jak w jednym pliku.
   ========================================================================== */

/* NAWIGACJA SEKCJI — prawy górny róg. Na
   KAŻDEJ sekcji SCHOWANA za górną krawędzią i wysuwana strefą hover (na hero
   dodatkowo widoczna przez pierwsze 5 s po wejściu, html.menu-flash) — patrz
   blok GLOBALNE UKRYTE MENU niżej. Domyślnie (bez JS) zostaje widoczna, patrz
   gate .slides-active-js, ten sam wzorzec co przy .reveal-blur. flex-wrap,
   żeby na wąskich telefonach długie słowa złożyły się w drugą linijkę zamiast
   wyjechać poza ekran albo się skleić. */
/* GÓRNY HUD — przełącznik języka + hamburger, ZAWSZE widoczne w prawym górnym
   rogu (od pierwszej klatki, bez hover/czekania), NAD szufladą i backdropem
   (z-index), żeby burger zawsze dało się kliknąć i zamknąć nim menu. */
.top-hud{
  position:fixed;z-index:130;
  /* Odsunięcie od krawędzi — świadomie większe niż minimalne, żeby HUD „oddychał"
     i nie kleił się do rogu ekranu (na życzenie). env() dokłada bezpieczny margines
     na iPhonie z notchem, gdyby był większy niż nasza wartość bazowa. */
  top:calc(28px + env(safe-area-inset-top));
  right:calc(30px + env(safe-area-inset-right));
  display:flex;align-items:center;gap:clamp(16px,2vw,24px);
}

/* LOGO W LEWYM GÓRNYM ROGU — lustro HUD-u z prawej: TE SAME wartości top i
   odsunięcia od krawędzi (28px / 30px + env()), ten sam z-index, więc oba rogi
   są symetryczne i logo zostaje klikalne także przy otwartej szufladzie.
   Prowadzi na Instagram artysty (target=_blank — wyjście z serwisu, crossfade
   w transition.js celowo tego nie przejmuje). */
.brand-logo{
  position:fixed;z-index:130;
  top:calc(28px + env(safe-area-inset-top));
  left:calc(30px + env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:center;
  line-height:0;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.brand-logo img{
  display:block;width:26px;height:26px;border-radius:5px;
  opacity:0.82;
  /* Powiększenie na hover — transform-origin w lewym górnym rogu, żeby logo
     „rosło" w głąb ekranu, a nie w stronę krawędzi. */
  transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
.brand-logo:hover img,
.brand-logo:focus-visible img{opacity:1;transform:scale(1.18)}
.brand-logo:active img{transform:scale(1.06)}
@media (prefers-reduced-motion: reduce){
  .brand-logo img{transition:opacity .2s ease}
  .brand-logo:hover img,.brand-logo:focus-visible img,.brand-logo:active img{transform:none}
}

/* BACKDROP — całoekranowe przyciemnienie + blur, gdy szuflada otwarta. */
.menu-backdrop{
  position:fixed;inset:0;z-index:110;
  background:rgba(0,0,0,0.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,visibility 0s linear .5s;
}
.nav-open .menu-backdrop{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .5s ease;
}

/* JĘZYK ZNIKA PRZY OTWARTYM MENU — w szufladzie zostaje sam × w rogu, bez
   niczego obok (na życzenie). Miękki fade, nie twarde display:none. */
.lang-switch{transition:opacity .25s ease,visibility 0s linear 0s}
.nav-open .lang-switch{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}

/* SZUFLADA — wysuwana z prawej krawędzi (html.nav-open). Linki od GÓRY (nie ze
   środka) i wyrównane do LEWEJ krawędzi szuflady. Sama szuflada to szklana tafla
   (blur + półprzezroczyste tło), więc krawędź nad treścią strony też rozmywa. */
.section-nav{
  position:fixed;z-index:115;top:0;right:0;bottom:0;
  width:min(82vw,340px);height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:clamp(18px,2.6vh,26px);
  /* padding-top odsuwa pierwszy link poniżej × w rogu (HUD 28px + ikona). */
  padding:calc(96px + env(safe-area-inset-top)) 32px calc(28px + env(safe-area-inset-bottom));
  background:rgba(10,10,12,0.72);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  /* (BEZ border-left — jasna kreska na lewej krawędzi szuflady USUNIĘTA na
     życzenie. Szuflada odcina się od tła samym rozmyciem i cieniem.) */
  box-shadow:-40px 0 100px rgba(0,0,0,0.5);
  transform:translateX(105%);pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.nav-open .section-nav{transform:translateX(0);pointer-events:auto}

/* COPYRIGHT NA DOLE SZUFLADY — margin-top:auto spycha go pod ostatnią pozycję,
   aż do dolnej krawędzi (szuflada to kolumna flex). Celowo bardzo delikatny:
   mniejszy krój, szerokie światło międzyliterowe i niska krycie, żeby był
   dyskretną stopką, a nie kolejną pozycją menu. Wchodzi razem z linkami,
   tylko odrobinę później (patrz opóźnienie niżej). */
.nav-copyright{
  margin-top:auto;
  font-family:var(--font-family);
  /* BEZ uppercase — marka „davc1u" jest wszędzie pisana małymi literami i ma
     tak zostać także w stopce (reszta menu jest wersalikami, to celowy kontrast). */
  font-size:10.5px;font-weight:600;letter-spacing:1.1px;
  color:rgba(255,255,255,0.32);
  line-height:1.5;
  opacity:0;transform:translateX(-22px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.nav-open .nav-copyright{opacity:1;transform:translateX(0);transition-delay:.36s}
/* Gdy nad copyrightem stoją sociale, to ONE przejmują dosuwanie do dołu
   (margin-top:auto), a copyright siada tuż pod nimi. Bez tego oba elementy
   walczyłyby o wolną przestrzeń i rozjechałyby się na dwa końce szuflady. */
.nav-socials ~ .nav-copyright{margin-top:14px}

/* SOCIALE W SZUFLADZIE — cztery ikonki w rzędzie, tuż nad copyrightem.
   Ikony są konturowe (stroke:currentColor w SVG), więc kolor bierze się stąd,
   z jednej reguły: spoczynek stonowany jak reszta menu, hover pełna biel.
   Wchodzą tym samym staggerem co linki, zaraz po ostatniej pozycji. */
.nav-socials{
  margin-top:auto;
  display:flex;align-items:center;
  gap:clamp(14px,2.4vw,20px);
}
.nav-social{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.55);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  /* Pole trafienia większe od samej ikonki (ujemny margines kompensuje padding),
     żeby nie trzeba było celować idealnie w kreski. */
  padding:6px;margin:-6px;
  opacity:0;transform:translateX(-22px);
  transition:color .2s ease,opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.nav-social svg{width:21px;height:21px;display:block}
.nav-social:hover,
.nav-social:focus-visible{color:#fff}
.nav-social:focus-visible{outline:2px solid rgba(255,255,255,0.35);outline-offset:4px;border-radius:4px}
/* Wjazd po ostatniej pozycji menu (.30s), przed copyrightem (.36s). */
.nav-open .nav-socials .nav-social{opacity:1;transform:translateX(0)}
.nav-open .nav-socials .nav-social:nth-child(1){transition-delay:.30s}
.nav-open .nav-socials .nav-social:nth-child(2){transition-delay:.33s}
.nav-open .nav-socials .nav-social:nth-child(3){transition-delay:.36s}
.nav-open .nav-socials .nav-social:nth-child(4){transition-delay:.39s}
.nav-open .nav-copyright{transition-delay:.45s}

/* HAMBURGER — TRZY RÓWNE paski (jednakowa szerokość, żaden nie ucięty),
   rozmiar dobrany pod sąsiedni napis 'POLSKI' (13px). Paski są pozycjonowane
   ABSOLUTNIE w stałym pudełku 20×14 i obracają się wokół WŁASNEGO środka —
   dzięki temu po otwarciu składają się w czyste ×, bez wystających końcówek
   i „kropki" z prawej (poprzednia wersja miała różne szerokości i flexowy
   gap, więc obrócone paski nie pokrywały się w idealny krzyżyk).
   Kolor jak reszta HUD-u (0.78) → hover rozjaśnia do bieli, tak jak linki. */
.menu-burger{
  position:relative;display:block;
  width:20px;height:14px;padding:0;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
/* POWIĘKSZONE POLE TRAFIENIA — sama ikonka zostaje 20×14, ale klikalna (i
   „hoverowalna") strefa sięga sporo poza nią, więc menu otwiera się też gdy
   nie trafisz idealnie w paski. Niewidzialna nakładka zamiast paddingu, bo
   padding rozpychałby układ HUD-u i psuł odstęp do napisu POLSKI.
   Od LEWEJ celowo mniej (-10px) niż z pozostałych stron: gap do przełącznika
   języka ma min. 16px, więc strefa nie podbiera mu kliknięć. */
.menu-burger::before{
  content:'';position:absolute;
  top:-16px;right:-18px;bottom:-16px;left:-10px;
}
.menu-burger span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:rgba(255,255,255,0.78);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s ease,background-color .2s ease;
}
.menu-burger span:nth-child(1){top:0}
.menu-burger span:nth-child(2){top:6px}
.menu-burger span:nth-child(3){top:12px}
.menu-burger:hover span,
.menu-burger:focus-visible span{background:#fff}
/* × — skrajne paski jadą do wspólnego środka (6px) i krzyżują się. */
.nav-open .menu-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .menu-burger span:nth-child(2){opacity:0}
.nav-open .menu-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* BIEŻĄCA SEKCJA — zostaje WIDOCZNA na liście (na życzenie), tylko wyróżniona:
   pełna biel + podkreślenie. Klasę .is-current-section wpisujemy na sztywno w
   każdym pliku HTML, więc nic nie miga po wczytaniu JS. */
.section-nav-link.is-current-section{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

/* PRZEŁĄCZNIK JĘZYKA — 'PL ▼' w górnym HUD; dropdown rozwija wyłącznie klik
   (klasa .open z JS), hover tylko podświetla przycisk. */
.lang-switch{position:relative;display:flex;align-items:center}
.lang-switch-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-family);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.78);transition:color .2s ease;
}
.lang-switch-btn:hover{color:#fff}
.lang-switch-caret{font-size:8px;line-height:1;transition:transform .25s ease}
.lang-switch.open .lang-switch-caret{transform:rotate(180deg)}
/* Dropdown — otwiera się WYŁĄCZNIE na klik (klasa .open z JS; od tego jest
   strzałka ▼ — hover na przycisku tylko go podświetla, jak każdą pozycję menu).
   ZERO tła, ZERO obramówki, ZERO pudełka: wysuwa się sama nazwa nieaktywnego
   języka, pochylona (kursywa) — czysty napis pod paskiem menu. */
.lang-switch-menu{
  position:absolute;top:calc(100% + 12px);right:0;
  display:flex;flex-direction:column;
  background:none;border:0;border-radius:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* visibility z opóźnieniem przy CHOWANIU (żeby fade-out był widoczny), bez
     opóźnienia przy pokazywaniu — nadpisane w regule .open niżej. */
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
}
.lang-switch.open .lang-switch-menu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease;
}
/* Opcja w dropdownie — ten sam krój co pozycje menu (13px/800/ls2px, uppercase),
   tylko POCHYLONA (italic; Inter nie wiezie osobnej odmiany italic, więc
   przeglądarka syntetyzuje skos — o to chodzi, ma być "przekrzywiona").
   Hover = samo rozjaśnienie tekstu do pełnej bieli, żadnych wypełnień. */
.lang-switch-option{
  background:none;border:0;border-radius:0;padding:4px 0;
  font-family:var(--font-family);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-style:italic;
  color:rgba(255,255,255,0.6);text-align:right;cursor:pointer;
  transition:color .15s ease;
}
.lang-switch-option:hover{color:#fff}
/* Dropdown pokazuje TYLKO nieaktywny język — opcja bieżącego znika (klasę
   .is-current przepina sync() w main.js): pasek 'PL ▼' → wysuwa się samo ENG. */
.lang-switch-option.is-current{display:none}

/* MIĘKKA PODMIANA tekstu przy zmianie języka (klasy nakłada I18n.softSwap w
   main.js): .i18n-swap trzyma transition przez cały cykl, .i18n-fading to faza
   zgaszenia (blur + fade) — jej zdjęcie wtapia nowy tekst z powrotem.
   !important celowo: elementy z .reveal-blur (cytat, nagłówek Spotify) mają
   własne, bardziej specyficzne reguły opacity/filter (sekcja SLAJDY), które
   inaczej wygrywałyby kaskadę i tekst nie gasłby wcale. */
.i18n-swap{transition:opacity .2s ease,filter .2s ease}
.i18n-swap.i18n-fading{opacity:0 !important;filter:blur(6px) !important}

/* (Dawny pionowy wskaźnik .side-nav przy lewej krawędzi USUNIĘTY — ODLICZANIE
   jest teraz zwykłym linkiem w górnym menu, pierwszym od lewej.) */
/* Cała strona w Inter (Google Fonts, patrz <link> w
   index.html) — dawna pikselowa Bitcount Single usunięta na życzenie;
   Helvetica/Arial to fallback na czas (nie)załadowania kitu Typekit. */
/* Linki w szufladzie — wyrównane do LEWEJ, ułożone od GÓRY. Startują
   przezroczyste i lekko odsunięte w lewo; po otwarciu (html.nav-open) wjeżdżają
   na miejsce ze staggerem (opóźnienia niżej) = eleganckie „rozłożenie" menu. */
.section-nav-link{
  font-family:var(--font-family);
  font-size:clamp(16px,2vw,18px);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.75);text-decoration:none;
  cursor:pointer;white-space:nowrap;text-align:left;
  opacity:0;transform:translateX(-22px);
  transition:color .2s ease,opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.section-nav-link:hover{color:#fff}
.nav-open .section-nav-link{opacity:1;transform:translateX(0)}
/* STAGGER — kolejne pozycje wchodzą minimalnie później. */
.nav-open .section-nav-link:nth-child(1){transition-delay:.06s}
.nav-open .section-nav-link:nth-child(2){transition-delay:.12s}
.nav-open .section-nav-link:nth-child(3){transition-delay:.18s}
.nav-open .section-nav-link:nth-child(4){transition-delay:.24s}
.nav-open .section-nav-link:nth-child(5){transition-delay:.30s}
/* PREORDER — przekreślony placeholder, na stałe czerwony; hover podświetla na
   złoto; klik celowo NIC nie robi (brak nawigacji, brak trwałej zmiany stanu). */
.section-nav-preorder{text-decoration:line-through;text-decoration-thickness:1.5px;color:#ff3b3b}
.section-nav-preorder:hover{color:#d4af37}
/* ===== WĄSKIE EKRANY — drobne dostrojenie szuflady (mechanika identyczna jak
   na desktopie; menu jest już wszędzie szufladą od hamburgera). ============= */
@media(max-width:520px){
  .section-nav{width:min(88vw,320px)}
  .section-nav-link{font-size:16px}
  .lang-switch-btn{font-size:12px;letter-spacing:1.6px}
  .lang-switch-option{font-size:12px;letter-spacing:1.6px}
}