/* ============================================================
   EVERTWIN - site.css
   Tokens: Ink #0A0A0A - Marble #F5F2EE - Cyan #7FE7FF
           Oxblood #6B1A1A - Burgundy #A53939 - Gray #8A8A8A
   Fonty: assets/css/fonts.css (self-host, tools/fetch_fonts.py)
   ============================================================ */

:root{
  --ink:#0A0A0A;
  --marble:#F5F2EE;
  --cyan:#7FE7FF;
  --burgundy:#A53939;
  --burgundy-lit:#D65C5C; /* tekst na inku: 5.2:1 (AA); --burgundy zostaje na ramki/wypelnienia */
  --oxblood:#6B1A1A;
  --gray:#8A8A8A;
  --serif:'Cormorant Garamond', serif;
  --mono:'Space Mono', monospace;
  --body:'Inter', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{background:var(--ink);overflow-x:hidden;}
body{
  background:var(--ink);
  color:var(--marble);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--cyan);color:var(--ink);}

/* ---------- atmosphere: grain + vignette, constant ---------- */
.grain, .vignette{
  position:fixed;inset:0;pointer-events:none;z-index:90;
}
.grain{
  opacity:.07;
  /* kafelek 128x128 z tools/make_grain.py; raster jest cache'owany, filtr SVG nie */
  background-image:url("../img/grain.png");
  background-size:128px 128px;
  will-change:transform;
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-2%,1%);}
  50%{transform:translate(1%,-2%);}
  75%{transform:translate(-1%,2%);}
  100%{transform:translate(0,0);}
}
.vignette{
  background:radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:34px;
  transition:opacity .8s ease;
}
.loader.done{opacity:0;pointer-events:none;}
.loader-mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px,4vw,55px);
  letter-spacing:.28em;
  padding-left:.28em;
  color:var(--marble);
}
.loader-line{
  width:min(233px,50vw);height:1px;background:rgba(245,242,238,.12);
  position:relative;overflow:hidden;
}
.loader-line i{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(127,231,255,.8);
}

/* ---------- shared layout ---------- */
.screen{
  min-height:100vh;
  min-height:100svh;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.screen, .beat, footer{position:relative;z-index:1;}

/* tekst tylko dla czytnikow ekranu / botow: prawdziwa tresc kinetycznych naglowkow */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gray);
}

/* ---------- ekran 1 · hero ---------- */
.hero{flex-direction:column;gap:0;}
.hero-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* 3D canvas layer */
.bust3d{
  position:fixed;inset:0;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.bust3d.on{opacity:1;}
.bust3d canvas{display:block;width:100%;height:100%;}
/* static fallback: render popiersia, gdy WebGL wylaczony, FPS spada lub reduced motion */
.bust-ph{
  /* desktop: tam, gdzie stoi model 3D (srodek w 71% szerokosci, ~86vh wysokosci) */
  position:absolute;left:71%;top:50%;
  transform:translate(-50%,-48%);
  height:min(86vh,900px);
  aspect-ratio:3/4;
  display:none;
}
.bust-ph.show{display:block;}
.bust-ph img{display:block;width:100%;height:100%;object-fit:contain;}
.hero-copy{
  position:absolute;z-index:2;
  left:8vw;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:21px;
  text-align:left;
  pointer-events:none;
}
/* scrim: zabezpieczenie kontrastu, niewidoczne jako efekt */
.hero-copy::before{
  content:"";position:absolute;top:28%;bottom:28%;left:-40%;right:-40%;z-index:-1;
  background:radial-gradient(ellipse 60% 60% at 45% 50%, rgba(10,10,10,.8), rgba(10,10,10,.3) 55%, transparent 78%);
}
/* wejscie tytulu: glify mono w marmurze, bez cyjanu */
.hero-title .ch{display:inline-block;position:relative;white-space:pre;}
.hero-title .ch .g-serif{display:inline-block;}
.hero-title .ch .g-mono{
  position:absolute;inset:0;
  font-family:var(--mono);font-weight:400;font-size:.68em;
  display:flex;align-items:center;justify-content:center;
  color:rgba(245,242,238,.75);
  opacity:0;
}
/* warstwa wizualna rysowana z atrybutow: litery, glify i spacje nie trafiaja do tekstu DOM,
   wiec textContent naglowka = dokladnie tresc z .sr-only (SEO, czytniki, kopiowanie) */
.kin .g-serif::before{content:attr(data-ch);}
.kin .g-mono::before{content:attr(data-glyph);}
.kin .ch.sp::before{content:"\00a0";}
.hero-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(44px,7.4vw,110px);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--marble);
}
.hero-sub{
  font-family:var(--body);font-size:clamp(15px,1.3vw,18px);line-height:1.6;
  color:rgba(245,242,238,.72);max-width:38ch;
}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;pointer-events:auto;}
.hero-cta{
  pointer-events:auto;
  background:transparent;cursor:pointer;
  border:1px solid rgba(165,57,57,.55);
  color:var(--burgundy-lit);
  font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  padding:13px 21px;
  transition:color .3s ease, border-color .3s ease, background-color .3s ease;
}
.hero-cta:hover{color:var(--marble);border-color:var(--burgundy);background:var(--burgundy);}
.hero-cta:focus-visible{outline:1px solid var(--burgundy);outline-offset:4px;}

.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:13px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gray);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:.9;}}

/* ---------- ekran 2 · kinetic beats ---------- */
.beat{
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:0 8vw;
}
.beat-line{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,6.4vw,89px);
  line-height:1.12;
  text-align:center;
  max-width:18ch;
}
.beat-line .ch{
  display:inline-block;
  position:relative;
  white-space:pre;
}
.beat-line .ch .g-serif{display:inline-block;}
.beat-line .ch .g-mono{
  position:absolute;inset:0;
  font-family:var(--mono);
  font-weight:400;
  font-size:.72em;
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);
  opacity:0;
}

/* ---------- ekran 3 · reveal ---------- */
.reveal{flex-direction:column;}
.reveal-wrap{
  display:flex;align-items:center;justify-content:center;gap:34px;
  max-width:95vw;
}
@media (max-width:900px){
  .reveal-wrap{flex-direction:column;gap:21px;}
}
.reveal-frame{
  position:relative;
  height:min(78vh,860px);
  aspect-ratio:9/16;
  max-width:88vw;
  border:1px solid rgba(245,242,238,.1);
  overflow:hidden;
  background:#0d0d0d;
}
.reveal-frame video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.reveal-ph-label{
  position:absolute;top:13px;left:13px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gray);opacity:.7;
}
.reveal-figure{
  display:none;
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 24% 42% at 50% 46%, rgba(245,242,238,.18), rgba(245,242,238,.04) 60%, transparent 75%);
}
.reveal-figure.show{display:block;}
.reveal-wire{
  position:absolute;inset:0;z-index:2;
  background:
    repeating-linear-gradient(0deg, rgba(127,231,255,.13) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(127,231,255,.13) 0 1px, transparent 1px 13px),
    radial-gradient(ellipse 40% 46% at 50% 42%, rgba(127,231,255,.10), transparent 72%),
    linear-gradient(rgba(10,10,10,.92), rgba(10,10,10,.92));
  clip-path:inset(0 0 55% 0);
}
.js-anim .reveal-wire{clip-path:inset(0 0 100% 0);}
.scanline{
  position:absolute;left:0;right:0;top:0;height:2px;z-index:4;
  background:var(--cyan);
  box-shadow:
    0 0 6px rgba(127,231,255,.9),
    0 0 21px rgba(127,231,255,.55),
    0 0 55px rgba(127,231,255,.3);
  opacity:1;top:45%;
}
.js-anim .scanline{opacity:0;top:0;}
.reveal-copy{
  position:absolute;z-index:5;
  left:8%;bottom:12%;
  display:flex;flex-direction:column;gap:8px;
}
.js-anim .reveal-copy{opacity:0;}
.reveal-copy .rc-1{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(21px,3vw,34px);
  letter-spacing:.18em;color:var(--marble);
}
.reveal-copy .rc-2{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--gray);
}
.consent{
  position:relative;z-index:5;
  flex:0 0 auto;
  width:min(320px,86vw);
  border:1px solid rgba(127,231,255,.25);
  background:rgba(10,10,10,.82);
  padding:21px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.9;
  letter-spacing:.08em;
  color:var(--marble);
}
.js-anim .consent{opacity:0;}
.consent-h{
  color:var(--gray);letter-spacing:.32em;font-size:11px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(245,242,238,.1);
  padding-bottom:8px;margin-bottom:13px;
}
.consent-row{display:flex;justify-content:space-between;gap:13px;}
.js-anim .consent-row{opacity:0;transform:translateY(6px);}
.consent-row b{font-weight:400;color:var(--gray);}
.consent-row .ok{color:var(--cyan);}
.consent-hash{
  margin-top:13px;padding-top:8px;
  border-top:1px solid rgba(245,242,238,.1);
  color:var(--gray);font-size:11px;
  word-break:break-all;
}
.js-anim .consent-hash{opacity:0;transform:translateY(6px);}

/* ---------- ekrany 4-5 · for brands / for creators ---------- */
.aud{flex-direction:column;gap:0;padding:13vh 8vw;}
.aud-inner{position:relative;display:flex;flex-direction:column;gap:34px;max-width:900px;width:100%;}
.aud-inner .eyebrow{margin-bottom:13px;}
.aud-line{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px,4.2vw,50px);
  line-height:1.2;
  color:var(--marble);
}
.aud-proof{
  margin-top:21px;padding-top:21px;
  border-top:1px solid rgba(245,242,238,.1);
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;line-height:2;
  color:var(--gray);max-width:56ch;
}
.aud-proof b{color:var(--cyan);font-weight:400;}
/* wejscie w kadr (IntersectionObserver dodaje .in); bez JS wszystko widoczne */
.js-anim .aud-line, .js-anim .aud-proof, .js-anim .lic-item{
  opacity:0;transform:translateY(21px);
  transition:opacity .9s ease, transform .9s ease;
}
.js-anim .in > .aud-line, .js-anim .in > .aud-proof, .js-anim .in > .lic-item{opacity:1;transform:none;}
.js-anim .in > :nth-child(2){transition-delay:.1s;}
.js-anim .in > :nth-child(3){transition-delay:.2s;}
.js-anim .in > :nth-child(4){transition-delay:.3s;}
.js-anim .in > :nth-child(5){transition-delay:.4s;}
.js-anim .in > :nth-child(6){transition-delay:.5s;}

/* ---------- ekran 6 · the license ---------- */
.lic{flex-direction:column;padding:13vh 8vw;}
.lic-inner{position:relative;display:flex;flex-direction:column;gap:34px;max-width:760px;width:100%;}
.lic-list{list-style:none;display:flex;flex-direction:column;gap:21px;}
.lic-item{
  display:grid;grid-template-columns:44px 1fr;gap:13px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;line-height:1.9;
  color:var(--marble);
  padding-top:21px;border-top:1px solid rgba(245,242,238,.1);
}
.lic-item b{color:var(--cyan);font-weight:400;}
.lic-item em{font-style:normal;color:var(--gray);}

/* ---------- ekran 5 · waitlist ---------- */
.waitlist{flex-direction:column;gap:34px;text-align:center;padding:0 8vw;}
.wl-bust{
  width:110px;aspect-ratio:3/4;
  margin-bottom:13px;
  /* spacer: w tym miejscu montuje sie popiersie 3D; bez 3D - statyczny render */
}
.no3d .wl-bust{background:url("../img/bust-fallback.webp") center/contain no-repeat;}
.wl-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,7vw,89px);
  line-height:1.05;
}
.wl-form{display:flex;flex-direction:column;gap:21px;width:min(480px,86vw);}
.wl-row{
  display:flex;gap:0;align-items:stretch;
  border-bottom:1px solid rgba(245,242,238,.25);
}
.wl-role{display:flex;border:1px solid rgba(245,242,238,.18);padding:0;margin:0;}
.wl-role label{flex:1;position:relative;cursor:pointer;}
.wl-role input{position:absolute;opacity:0;width:1px;height:1px;}
.wl-role span{
  display:block;padding:11px 8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);transition:color .3s ease, background-color .3s ease;
}
.wl-role input:checked + span{color:var(--ink);background:var(--marble);}
.wl-role input:focus-visible + span{outline:1px solid var(--burgundy);outline-offset:-4px;}
.wl-consent{
  display:flex;gap:13px;align-items:flex-start;text-align:left;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.7;
  color:var(--gray);cursor:pointer;
}
.wl-consent input{margin-top:3px;accent-color:var(--cyan);flex:0 0 auto;}
.wl-consent a{color:var(--marble);}
/* honeypot: poza ekranem, nie display:none (boty sprawdzaja) */
.wl-hp{position:absolute;left:-9999px;top:-9999px;}
.wl-input{
  flex:1;
  background:transparent;border:none;outline:none;
  font-family:var(--mono);font-size:16px;letter-spacing:.06em;
  color:var(--marble);
  padding:13px 8px 13px 0;
}
.wl-input::placeholder{color:var(--gray);opacity:.7;}
.wl-btn{
  background:transparent;border:none;cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--burgundy-lit);
  padding:13px 0 13px 13px;
  transition:color .3s ease;
  white-space:nowrap;
}
.wl-btn:hover{color:var(--marble);}
.wl-btn:focus-visible, .wl-input:focus-visible{
  outline:1px solid var(--burgundy);outline-offset:4px;
}
.wl-confirm{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;line-height:2;
  color:var(--gray);
  max-width:44ch;
  min-height:52px;
  opacity:0;transition:opacity .6s ease;
}
.wl-confirm.show{opacity:1;}
.wl-confirm b{color:var(--burgundy-lit);font-weight:700;letter-spacing:.24em;}
.wl-error{color:var(--burgundy-lit);}
.wl-error a{color:var(--marble);}

/* ---------- footer ---------- */
footer{
  padding:55px 8vw 34px;
  display:flex;justify-content:space-between;align-items:baseline;gap:21px;
  flex-wrap:wrap;
  border-top:1px solid rgba(245,242,238,.06);
}
.f-mark{
  font-family:var(--serif);font-weight:500;
  font-size:21px;letter-spacing:.28em;
}
.f-copy{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gray);margin-left:13px;}
.f-links{display:flex;gap:34px;}
.f-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray);text-decoration:none;
  transition:color .3s ease;
}
.f-links a:hover{color:var(--marble);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .grain{animation:none;}
  .hero-scroll{animation:none;opacity:.6;}
  .loader{display:none;}
  .beat-line .ch .g-mono, .hero-title .ch .g-mono{display:none;}
  .bust3d{display:none;}
  .bust-ph{display:flex;}
}

/* uklad pionowy: telefony oraz tablety w portrecie (nie: wysokie okna desktopowe) */
@media (max-width:640px), (max-width:900px) and (orientation:portrait){
  .hero-copy{left:0;right:0;top:0;bottom:0;padding:9vh 6vw 0;align-items:center;text-align:center;justify-content:flex-start;gap:17px;}
  .hero-copy::before{top:3vh;bottom:auto;height:54vh;left:-13%;right:-13%;}
  .hero-sub{max-width:32ch;}
  .hero-ctas{justify-content:center;}
  /* popiersie (3D lub fallback) schodzi pod copy i CTA */
  .hero-stage{align-items:flex-end;padding-bottom:14vh;}
  .bust-ph{position:relative;left:auto;top:auto;transform:none;height:auto;width:clamp(220px,62vw,340px);}
  .hero-scroll{bottom:21px;}
}

@media (max-width:640px){
  .consent{width:min(320px,88vw);padding:13px;font-size:11px;}
  .reveal-copy{left:6%;bottom:8%;}
  .wl-row{flex-direction:column;border-bottom:none;}
  .wl-input{border-bottom:1px solid rgba(245,242,238,.25);padding:13px 0;}
  .wl-btn{padding:21px 0 0;text-align:center;white-space:normal;}
  .f-links{gap:21px;}
}

/* ---------- privacy.html ---------- */
.doc{max-width:720px;margin:0 auto;padding:21vh 8vw 13vh;position:relative;z-index:1;}
.doc .back{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);text-decoration:none;}
.doc .back:hover{color:var(--marble);}
.doc h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,55px);line-height:1.1;margin:21px 0 34px;}
.doc h2{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray);margin:44px 0 13px;}
.doc p, .doc li{font-family:var(--body);font-size:16px;line-height:1.7;color:rgba(245,242,238,.85);margin:0 0 13px;}
.doc ul{padding-left:21px;}
.doc a{color:var(--marble);}
.doc mark{background:rgba(214,92,92,.25);color:var(--marble);padding:0 4px;}

/* scrim pod sekcjami na kratownicy 3D: czytelnosc eyebrow i tekstu mono */
.aud-inner::before, .lic-inner::before{
  content:"";position:absolute;z-index:-1;
  top:-13%;bottom:-13%;left:-20%;right:-20%;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(10,10,10,.82), rgba(10,10,10,.45) 60%, transparent 85%);
  pointer-events:none;
}