/* ============ CEKAMA v3 — kinowa manufaktura ============
   Paleta:
   czern      #0A0D0B   tło główne
   wegiel     #10140F   sekcje naprzemienne / karty
   zloto      #C6A15B   akcent, podziałka, CTA
   zloto2     #E8D5A4   rozświetlenie
   porcelana  #F1EEE6   tekst główny
   mgla       #8E958C   tekst drugorzędny
   Typografia: Italiana (display) + Manrope (tekst)
   Sygnatura: złota podziałka postępu scrolla (prawa krawędź)
================================================================ */
:root{
  --czern:#0A0D0B;
  --wegiel:#10140F;
  --zloto:#C6A15B;
  --zloto2:#E8D5A4;
  --porcelana:#F1EEE6;
  --mgla:#8E958C;
  --display:"Italiana",serif;
  --tekst:"Manrope",system-ui,sans-serif;
  --hair:1px solid color-mix(in srgb,var(--zloto) 28%,transparent);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--czern);
  color:var(--porcelana);
  font-family:var(--tekst);
  font-weight:300;
  line-height:1.75;
}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.015em}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:28px 0 24px}
h3{font-size:1.3rem}
p{max-width:37rem}
.etykieta{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--zloto);font-weight:600;
}

/* ---------- sekwencja wejścia ---------- */
.wejscie{
  position:fixed;inset:0;z-index:300;background:var(--czern);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s ease,visibility .7s;
}
.wejscie__marka{
  font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.2rem);
  letter-spacing:.5em;text-indent:.5em;color:var(--porcelana);
  opacity:0;animation:wejdz 1s ease .15s forwards;
}
.wejscie__linia{
  width:0;height:1px;background:var(--zloto);
  animation:kreska 1s ease .5s forwards;
}
.wejscie--koniec{opacity:0;visibility:hidden;pointer-events:none}
@keyframes wejdz{to{opacity:1}}
@keyframes kreska{to{width:min(320px,60vw)}}

/* ---------- pasek górny ---------- */
.pasek{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 52px;
  transition:transform .5s ease,background .5s ease,padding .5s ease;
}
.pasek--tlo{
  background:color-mix(in srgb,var(--czern) 90%,transparent);
  backdrop-filter:blur(12px);
  padding:15px 52px;
  border-bottom:var(--hair);
}
.pasek--schowany{transform:translateY(-110%)}
.pasek--staly{position:sticky;background:var(--czern);border-bottom:var(--hair);padding:18px 52px}
.pasek__logo{
  font-family:var(--display);font-size:1.02rem;letter-spacing:.4em;
  color:var(--porcelana);text-decoration:none;white-space:nowrap;
}
.pasek__prawa{display:flex;align-items:center;gap:30px}
.pasek__jezyki{display:flex;gap:12px;font-size:.72rem;letter-spacing:.16em}
.pasek__jezyki a{color:var(--mgla);text-decoration:none;transition:color .25s}
.pasek__jezyki a:hover{color:var(--zloto2)}
.pasek__jezyki a[aria-current]{color:var(--zloto)}
.pasek__menu{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;color:var(--porcelana);
  font-family:var(--tekst);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
}
.pasek__menu span{width:26px;height:1px;background:var(--zloto);display:block;transition:width .3s}
.pasek__menu span+span{width:16px;position:absolute;transform:translateY(5px)}
.pasek__menu:hover span{width:26px}

/* ---------- menu pełnoekranowe ---------- */
.menu{
  position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--wegiel) 97%,var(--zloto));
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,10vw,140px);
}
.menu[hidden]{display:none}
.menu__zamknij{
  position:absolute;top:30px;right:52px;
  background:none;border:none;color:var(--mgla);cursor:pointer;
  font-family:var(--tekst);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
}
.menu__zamknij:hover{color:var(--zloto2)}
.menu__lista{list-style:none;display:grid;gap:clamp(8px,2.4vh,22px)}
.menu__lista a{
  font-family:var(--display);font-size:clamp(2rem,6vh,3.6rem);
  color:var(--porcelana);text-decoration:none;display:flex;align-items:baseline;gap:26px;
  transition:color .3s,letter-spacing .3s;
}
.menu__lista small{
  font-family:var(--tekst);font-size:.72rem;letter-spacing:.3em;color:var(--zloto);width:28px;
}
.menu__lista a:hover{color:var(--zloto2);letter-spacing:.03em}
.menu__stopka{
  position:absolute;bottom:34px;left:clamp(24px,10vw,140px);
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mgla);
}

/* ---------- podziałka (sygnatura) ---------- */
.podzialka{
  position:fixed;top:0;right:0;bottom:0;width:34px;z-index:90;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(10% - 1px),
      color-mix(in srgb,var(--zloto) 35%,transparent) calc(10% - 1px) 10%);
  background-size:12px 100%;background-position:right 12px top;background-repeat:no-repeat;
}
.podzialka::before{
  content:"";position:absolute;right:12px;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--zloto) 22%,transparent);
}
.podzialka__wskaznik{
  position:absolute;right:6px;top:0;width:13px;height:1px;
  background:var(--zloto2);box-shadow:0 0 12px var(--zloto);
}

/* ---------- hero ---------- */
.scena{
  position:relative;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.scena__wideo{
  position:absolute;inset:0;
  background:radial-gradient(85% 65% at 50% 32%,#1B2A1E 0%,var(--czern) 80%);
}
.scena__wideo::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scena__wideo::after{
  content:attr(data-media);
  position:absolute;right:56px;bottom:20px;
  font-size:.66rem;letter-spacing:.1em;color:var(--mgla);
  border:1px dashed color-mix(in srgb,var(--mgla) 40%,transparent);
  padding:7px 13px;
}
.scena__mgla{
  position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--czern) 60%,transparent),transparent 32%,transparent 62%,var(--czern));
}
.scena__tresc{position:relative;z-index:2;padding:0 24px}
.scena__tresc .etykieta{margin-bottom:34px}
.scena__tresc h1{margin-bottom:48px;white-space:pre-line}
.scena__dalej{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
}
.scena__dalej span{
  display:block;width:1px;height:58px;
  background:linear-gradient(var(--zloto),transparent);
  animation:opad 2.4s ease-in-out infinite;
}
@keyframes opad{
  0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- przyciski ---------- */
.przycisk{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;cursor:pointer;
  color:var(--czern);
  background:linear-gradient(115deg,var(--zloto),var(--zloto2));
  font-family:var(--tekst);font-weight:600;font-size:.82rem;
  letter-spacing:.22em;text-transform:uppercase;
  padding:19px 46px;border:none;
  transition:transform .25s,box-shadow .25s;
}
.przycisk small{font-weight:400;font-size:.62rem;letter-spacing:.08em;text-transform:none;opacity:.72}
.przycisk:hover{transform:translateY(-2px);box-shadow:0 14px 44px color-mix(in srgb,var(--zloto) 28%,transparent)}
.przycisk--linia{
  background:none;color:var(--zloto);padding:13px 2px;
  border-bottom:1px solid var(--zloto);
}
.przycisk--linia:hover{box-shadow:none;color:var(--zloto2);border-color:var(--zloto2)}
.przycisk--pelny{width:100%}

/* ---------- rozdziały ---------- */
.rozdzial{padding:150px 52px;max-width:1280px;margin:0 auto}
.rozdzial__glowa{
  display:flex;align-items:baseline;gap:20px;
  border-bottom:var(--hair);padding-bottom:14px;margin-bottom:16px;width:fit-content;
}
.rozdzial__numer{font-family:var(--display);font-size:1.6rem;color:var(--zloto)}
.rozdzial__tytul{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mgla)}

/* manifest */
.rozdzial--manifest{text-align:center;padding-top:180px}
.rozdzial--manifest .rozdzial__glowa{margin:0 auto 46px}
.manifest{
  font-family:var(--display);
  font-size:clamp(1.6rem,3.6vw,2.7rem);
  line-height:1.42;max-width:none;white-space:pre-line;
}
.manifest__dopisek{margin:38px auto 0;color:var(--mgla)}

/* produkt — sticky split */
.rozdzial--produkt{
  display:grid;grid-template-columns:1fr 1fr;gap:90px;
  max-width:1400px;align-items:start;
}
.produkt__obraz{
  position:sticky;top:0;height:100dvh;
  background:linear-gradient(160deg,#161F17,#0C110D);
}
.produkt__tekst{padding:16vh 0 12vh}
.produkt__tekst h2{white-space:pre-line}
.miary{margin:38px 0;display:grid}
.miary div{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:var(--hair);
}
.miary dt{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mgla);align-self:center}
.miary dd{font-family:var(--display);font-size:1.15rem;color:var(--zloto2)}

/* zastosowania — pozioma kolekcja */
.rozdzial--zastosowania{max-width:none;padding-right:0;background:var(--wegiel)}
.rozdzial--zastosowania .rozdzial__glowa,
.rozdzial--zastosowania h2{max-width:1176px;margin-left:auto;margin-right:auto}
.rozdzial--zastosowania h2{white-space:pre-line;margin-bottom:14px}
.kolekcja{
  display:flex;gap:34px;overflow-x:auto;padding:48px 52px 26px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--zloto) transparent;
}
.karta{flex:0 0 min(400px,78vw);scroll-snap-align:start}
.karta__obraz{height:300px;margin-bottom:20px}
.karta h3{margin-bottom:8px}
.karta p{font-size:.92rem;color:var(--mgla)}
.kolekcja__wskazowka{
  max-width:1176px;margin:6px auto 0;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mgla);
}

/* dowód */
.rozdzial--dowod{text-align:center;max-width:none;padding:130px 52px}
.dowod{display:flex;justify-content:center;gap:clamp(34px,7vw,120px);flex-wrap:wrap}
.dowod dd{font-family:var(--display);font-size:clamp(2.8rem,5.4vw,4.4rem);color:var(--zloto2);line-height:1}
.dowod dt{margin-top:14px;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mgla)}
.dowod__certy{
  margin:76px auto 0;max-width:none;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:color-mix(in srgb,var(--zloto) 60%,transparent);
}

/* journal */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px}
.wpis-karta{text-decoration:none;color:inherit;display:block}
.wpis-karta figure{height:240px;margin-bottom:20px;transition:opacity .3s}
.wpis-karta:hover figure{opacity:.75}
.wpis-karta:hover h3{color:var(--zloto2)}
.wpis-karta p{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mgla);margin-bottom:10px}
.wpis-karta h3{font-size:1.12rem;line-height:1.45;transition:color .3s}

/* kontakt */
.rozdzial--kontakt{max-width:800px;padding-bottom:0}
.kontakt__siatka{display:grid;grid-template-columns:1fr;align-items:start}
.kontakt__siatka h2{white-space:pre-line}
.kontakt__dane{font-style:normal;margin-top:36px;display:grid;gap:11px}
.kontakt__dane span{
  display:inline-block;width:92px;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--zloto);
}
.formularz{
  border:var(--hair);padding:46px;display:grid;gap:22px;
  background:color-mix(in srgb,var(--wegiel) 75%,transparent);
}
.formularz label{
  display:grid;gap:9px;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mgla);
}
.formularz input,.formularz textarea{
  font:inherit;color:var(--porcelana);letter-spacing:.02em;
  background:transparent;border:none;
  border-bottom:1px solid color-mix(in srgb,var(--mgla) 40%,transparent);
  padding:10px 2px;resize:vertical;
}
.formularz input:focus-visible,.formularz textarea:focus-visible{
  outline:none;border-bottom-color:var(--zloto);
}
.stopka{
  margin-top:130px;padding:36px 0 32px;border-top:var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.18em;color:var(--mgla);
}
.stopka nav{display:flex;gap:28px}
.stopka a{color:var(--mgla);text-decoration:none}
.stopka a:hover{color:var(--zloto2)}
.stopka--wpis{max-width:900px;margin:80px auto 0;padding:30px 24px;justify-content:center}
.stopka__link{
  background:none;border:none;font:inherit;letter-spacing:inherit;
  cursor:pointer;padding:0;color:inherit;
}
.stopka .stopka__link{color:var(--mgla)}
.stopka .stopka__link:hover{color:var(--zloto2)}
.wpis__tresc .stopka__link{color:var(--zloto2);text-decoration:underline}
.wpis__tresc .stopka__link:hover{color:var(--zloto)}

/* ---------- baner zgody na cookies ---------- */
.ciasteczka{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--wegiel);border-top:var(--hair);
  padding:26px 52px;
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .35s,transform .35s;
}
.ciasteczka.widoczny{opacity:1;transform:none;pointer-events:auto}
.ciasteczka__tresc{flex:1 1 420px;max-width:640px}
.ciasteczka__tresc p{color:var(--mgla);font-size:.86rem;line-height:1.6;max-width:none}
.ciasteczka__tresc a{color:var(--zloto)}
.ciasteczka__kategorie{margin-top:18px;display:grid;gap:14px}
.ciasteczka__kategorie label{
  display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--porcelana);cursor:pointer;
}
.ciasteczka__kategorie span{display:block;color:var(--mgla);font-size:.78rem;margin-top:2px}
.ciasteczka__kategorie input{margin-top:3px;accent-color:var(--zloto);flex-shrink:0}
.ciasteczka__przyciski{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.przycisk--mala{padding:13px 28px;font-size:.72rem}
@media (max-width:640px){
  .ciasteczka{padding:22px}
}

/* ---------- strona wpisu bloga ---------- */
.strona-wpisu{background:var(--czern)}
.wpis{max-width:760px;margin:0 auto;padding:90px 24px 0}
.wpis h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:22px 0 40px}
.wpis__tresc{display:grid;gap:18px}
.wpis__tresc h2{font-size:1.7rem;margin:26px 0 4px}
.wpis__tresc p{max-width:none}
.wpis__tresc img{max-width:100%;height:auto;display:block;margin:14px 0}
.wpis__tresc a{color:var(--zloto2)}
.wpis__powrot{
  color:var(--mgla);text-decoration:none;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;
}
.wpis__powrot:hover{color:var(--zloto2)}
.wpis__stopka{
  margin-top:70px;padding-top:34px;border-top:var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.wpis__stopka p{color:var(--mgla);font-size:.9rem}

/* ---------- zdjęcia w miejscach na media ---------- */
.foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.scena__wideo{background-size:cover;background-position:center}
.produkt__obraz:has(.foto)::after,
.karta__obraz:has(.foto)::after,
.scena__wideo:has(.foto)::after,
.wpis-karta figure:has(.foto)::after{display:none}
.produkt__obraz:has(.foto),
.karta__obraz:has(.foto),
.wpis-karta figure:has(.foto){border-style:solid;border-color:color-mix(in srgb,var(--zloto) 20%,transparent)}

/* ---------- placeholdery mediów ---------- */
.produkt__obraz,.karta__obraz,.wpis-karta figure{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#151E16,#0C110D);
  border:1px dashed color-mix(in srgb,var(--mgla) 26%,transparent);
}
.produkt__obraz::after,.karta__obraz::after,.wpis-karta figure::after{
  content:attr(data-media);
  position:absolute;left:16px;bottom:14px;right:16px;
  font-size:.62rem;letter-spacing:.08em;color:var(--mgla);
}

/* ---------- odsłanianie ---------- */
.odslon{
  opacity:0;transform:translateY(36px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
}
.odslon.widoczny{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .odslon{opacity:1;transform:none;transition:none}
  .scena__dalej span{animation:none}
  .wejscie{display:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--zloto);outline-offset:3px}

/* ---------- responsywność ---------- */
@media (max-width:1040px){
  .rozdzial{padding:100px 24px}
  .rozdzial--produkt,.kontakt__siatka{grid-template-columns:1fr;gap:46px}
  .produkt__obraz{position:static;height:44vh}
  .produkt__tekst{padding:0}
  .journal{grid-template-columns:1fr}
  .pasek,.pasek--tlo,.pasek--staly{padding:16px 20px}
  .menu__zamknij{right:20px}
  .podzialka{display:none}
  .kolekcja{padding:38px 24px 20px}
  .scena__wideo::after{right:20px}
  .formularz{padding:28px}
}