/* ============================================================================
   WojtekAI — site layout layer (na tokenach z colors_and_type.css + components.css)
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--fg-1);
  background:
    radial-gradient(120% 80% at 50% -5%, rgba(207,77,146,.05), transparent 55%),
    var(--bg-base);
}
/* clip horizontal bleed bez robienia z body kontenera scrolla */
html{overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wai-grad-text{font-weight:inherit}

/* subtelny retro scanline veil */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.4;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}

/* lucide icons: rozmiar dziedziczony z kontenera */
[data-lucide]{display:inline-block}
svg.lucide{width:1em;height:1em;stroke-width:1.75}

/* ░ NAV ░ */
/* fixed → wideo zaczyna stronę od samej góry, nav floatuje nad nim (zero pustej przestrzeni) */
.topbar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:center;
  padding:18px 20px;pointer-events:none}
.nav{pointer-events:auto;gap:26px;max-width:100%}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--magenta);box-shadow:var(--glow-magenta)}
.nav__word{font-weight:var(--w-extrabold);letter-spacing:-.02em;color:var(--fg-1);font-size:16px}
.nav__links{display:flex;gap:24px;margin-left:8px}
.nav__cta{padding:9px 18px;font-size:13px}
.nav__burger{display:none;background:none;border:0;color:var(--fg-1);cursor:pointer;font-size:22px;line-height:0}
.nav__burger svg.lucide{width:22px;height:22px}

/* ░ HERO ░ */
.hero{position:relative;overflow:hidden;padding:40px 0 64px}
.hero__bloom{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 16%, rgba(207,77,146,.08), transparent 60%),
    radial-gradient(55% 50% at 10% 72%, rgba(63,176,204,.06), transparent 60%);
  animation:drift 18s var(--ease-float) infinite alternate}
@keyframes drift{to{transform:translate3d(0,-2%,0) scale(1.04)}}
.hero__grid{position:relative;max-width:1180px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero__h1{font-size:clamp(2.6rem,6.4vw,4.6rem);margin-top:18px;color:var(--fg-1)}
.hero__lead{margin-top:22px;max-width:30rem}
.hero__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero__cta .wai-btn svg.lucide{width:17px;height:17px}
.hero__stats{display:flex;gap:44px;margin-top:48px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__n{font-size:clamp(1.3rem,2vw,2rem);font-weight:var(--w-semibold);color:var(--fg-1);line-height:1}
.stat__l{color:var(--fg-3)}
.hero__portrait{position:relative;justify-self:center}
.portrait__bloom{position:absolute;inset:-20px;background:var(--grad-neon);filter:blur(40px);opacity:.20;border-radius:24px}
.portrait__img{position:relative;width:min(360px,80vw);aspect-ratio:36/44;object-fit:cover;border-radius:var(--r-xl);
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,var(--grad-neon) border-box;
  box-shadow:var(--shadow-lg)}
.portrait__chip{position:absolute;bottom:18px;left:-22px;padding:12px 16px;display:flex;align-items:center;gap:10px}
.portrait__chiptext{font-size:12px;color:var(--fg-2)}
.float{animation:floaty 6s var(--ease-float) infinite}
@keyframes floaty{50%{transform:translateY(-9px)}}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  max-width:1180px;margin:48px auto 0;padding:18px 40px 0;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);border-top:1px solid var(--border-faint)}

/* ░ SECTIONS ░ */
.section{max-width:1180px;margin:0 auto;padding:96px 40px}
.section--void{max-width:none;background:var(--bg-void);border-top:1px solid var(--border-faint);border-bottom:1px solid var(--border-faint)}
.section--void>*{max-width:1180px;margin-left:auto;margin-right:auto}
.section--proc{position:relative;max-width:none;background:var(--bg-void);border-top:1px solid var(--border-faint);border-bottom:1px solid var(--border-faint);overflow:hidden}
.section--proc>*{max-width:1180px;margin-left:auto;margin-right:auto}
.proc__bloom{position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 0%,rgba(138,90,158,.07),transparent 60%);pointer-events:none}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head h2{margin-top:14px}
.sec-lead{margin-top:14px;font-size:var(--fs-body-lg)}

/* ░ GRID-4 (levers + steps) ░ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lever{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lever__icon{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--glass-mag);border:1px solid var(--border-magenta);color:var(--magenta-bright)}
.lever__icon svg.lucide{width:22px;height:22px}
.lever h3{color:var(--fg-1)}
.lever .wai-p{font-size:var(--fs-small)}
.lever__case{font-size:12px;color:var(--cyan);margin-top:auto;padding-top:6px}

/* ░ PROCES steps ░ */
.step{position:relative;padding:24px 22px;border-radius:var(--r-lg);background:var(--glass-1);border:1px solid var(--border-soft);
  transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.step:hover{transform:translateY(-3px);border-color:var(--border-cyan)}
.step__n{font-size:13px;color:var(--cyan)}
.step__icon{margin-top:14px;color:var(--cyan-bright)}
.step__icon svg.lucide{width:26px;height:26px}
.step h3{margin-top:14px;color:var(--fg-1)}
.step .wai-p{font-size:14px;margin-top:6px}

/* ░ PORTFOLIO ░ */
.case{margin-bottom:56px}
.case:last-child{margin-bottom:0}
.case__head{margin-bottom:20px;border-left:2px solid transparent;
  border-image:var(--grad-neon) 1;padding-left:16px}
.case__meta{font-size:var(--fs-small);color:var(--fg-3);margin-top:8px;letter-spacing:.04em}
/* gallery — równa wysokość rzędu, każdy klip we własnym aspect ratio (--ar):
   szerokość = wysokość × ar, więc karta = kadr wideo → pełna klatka, ZERO kadrowania.
   Poziome i pionowe spasowane wspólną wysokością, rzędy wyśrodkowane. */
.gallery{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start;--row-h:540px}
.clip{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-inset);border:1px solid var(--border-soft);cursor:pointer;
  flex:0 0 auto;height:var(--row-h);aspect-ratio:var(--ar,1.7778);max-width:100%;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base)}
.clip[data-orient="portrait"]{--ar:.5625}     /* 9:16  */
.clip[data-orient="portrait45"]{--ar:.8055}   /* ~4:5  */
.clip[data-orient="landscape"]{--ar:1.7778}   /* 16:9  */
.clip:hover{transform:translateY(-3px);border-color:var(--border-cyan);box-shadow:var(--glow-cyan);z-index:2}
.clip--feature{flex-basis:100%;width:100%;height:auto}
.clip__vid{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-inset)}
/* cały kafelek = jeden duży przycisk „odpal" (wygodny na mobile i desktop).
   Po starcie overlay znika → przejmują natywne kontrolki wideo (pauza/scrub/dźwięk). */
.clip__play{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;
  cursor:pointer;background:transparent;display:grid;place-items:center;
  transition:opacity var(--t-base) var(--ease-out)}
.clip__playdisc{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:var(--fg-on-neon);
  background:var(--magenta);box-shadow:0 6px 20px rgba(7,6,13,.6);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.clip__play svg.lucide{width:30px;height:30px;fill:var(--fg-on-neon)}
.clip__play:hover .clip__playdisc{transform:scale(1.08);background:var(--magenta-bright);box-shadow:0 8px 26px rgba(7,6,13,.7),var(--edge-cyan)}
.clip.is-playing .clip__play{opacity:0;pointer-events:none}
.clip.is-playing .clip__snd--off{opacity:0;pointer-events:none}
.clip__cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .6rem;font-size:11px;letter-spacing:.04em;
  color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);pointer-events:none}
/* wskaźnik dźwięku — sam napis (bez otoczki), jaskrawy kolor + cień dla czytelności */
.clip__snd{position:absolute;top:10px;left:11px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--w-bold);
  letter-spacing:.12em;text-transform:uppercase;line-height:1;cursor:help;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.75)}
.clip__snd svg.lucide{width:14px;height:14px}
.clip__snd--on{color:var(--cyan-bright);cursor:pointer}
.clip__snd--on:hover{color:#fff}
.clip__snd--off{color:#fff}

/* ░ DYNAMIC FRAME GRID — interaktywna mozaika portfolio (pion+poziom spasowane wspólną wysokością) ░
   Port efektu „dynamic frame layout": najazd rozsuwa/powiększa kafelek, reszta przygasa.
   Bazuje na .clip (ta sama logika wideo/dźwięku/lazy-poster). */
.dframe{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-start;--row-h:340px}
.dframe .clip{height:var(--row-h);
  transition:transform .4s var(--ease-out),opacity .4s var(--ease-out),
             filter .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color var(--t-base)}
.dframe .clip__playdisc{width:56px;height:56px}
.dframe .clip__play svg.lucide{width:24px;height:24px}
.dframe .clip__cap{display:flex;flex-direction:column;gap:4px;padding:.95rem .95rem .82rem;
  background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.42) 56%,transparent)}
/* linia 1 — tytuł (zawsze) */
.dframe .clip__capttl{font-weight:var(--w-bold);letter-spacing:.11em;text-transform:uppercase;font-size:11px;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
/* linia 2 — opis (reszta; na desktopie odsłania się na najeździe) */
.dframe .clip__desc{font-family:var(--font-sans);font-size:13px;line-height:1.42;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.92)}
/* hover-expand — tylko urządzenia z kursorem (desktop). Touch dostaje statyczną mozaikę z opisami. */
@media (hover:hover) and (pointer:fine){
  .dframe:hover .clip{opacity:.4;filter:saturate(.6) brightness(.7)}
  .dframe .clip:hover{opacity:1;filter:none;transform:scale(1.12);z-index:5;
    border-color:var(--border-cyan);box-shadow:0 18px 52px rgba(7,6,13,.72),var(--glow-cyan)}
  /* najazd = podgląd leci → chowamy dysk „PLAY" (kafelek dalej klikalny: przycisk zostaje, tylko niewidoczny) */
  .dframe .clip:hover .clip__play{opacity:0}
  /* opis pojawia się dopiero na focusie → czysty grid w spoczynku */
  .dframe .clip__desc{max-height:0;opacity:0;overflow:hidden;
    transition:max-height .4s var(--ease-out),opacity .3s var(--ease-out)}
  .dframe .clip:hover .clip__desc{max-height:6em;opacity:1}
}

/* ░ PROOF band ░ */
.proof-wrap{padding-top:0}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:48px 40px}
.proof__item{display:flex;flex-direction:column;gap:8px}
.proof__n{font-size:clamp(2rem,4vw,3rem);font-weight:var(--w-semibold);line-height:1}
.proof__l{font-size:14px}

/* ░ STACK ░ */
.stackgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stackcol .wai-micro{display:block;margin-bottom:12px;color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .wai-badge{transition:transform var(--t-fast) var(--ease-out),border-color var(--t-base)}
.chips .wai-badge:hover{transform:translateY(-2px)}

/* ░ AI card ░ */
.ai{display:grid;place-items:center}
.ai__card{max-width:680px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 40px}
.ai__card h2{color:var(--fg-1)}
.ai__pulse{display:grid;place-items:center}
.ai__pulse .dot{width:16px;height:16px;border-radius:50%;background:var(--magenta);position:relative}
.ai__pulse .dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--magenta);animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.ai__btn{margin-top:8px}
.ai__btn svg.lucide{width:17px;height:17px}
.ai__note{margin-top:4px}

/* ░ KONTAKT ░ */
.kontakt{position:relative;overflow:hidden}
.kontakt__bloom{position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 50%,rgba(207,77,146,.07),transparent 60%);pointer-events:none}
/* jedna wyśrodkowana kolumna: brief + wyślij */
.kontakt__wrap{position:relative;max-width:560px;margin:0 auto;text-align:center}
.kontakt__h{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-top:14px}
.kontakt__lead{margin-top:16px;max-width:42rem;margin-left:auto;margin-right:auto}
.kontakt__form{display:flex;flex-direction:column;gap:12px;margin-top:28px;text-align:left}
.kontakt__form .wai-input{text-align:left}
.kontakt__brief{resize:vertical;min-height:104px;line-height:1.5;font-family:var(--font-sans)}
.kontakt__form .wai-btn{align-self:flex-start}
.kontakt__alt{margin-top:16px}
.kontakt__alt a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease-out)}
.kontakt__alt a:hover{border-color:currentColor;color:var(--cyan-bright)}

/* ░ FOOTER ░ */
.footer{border-top:1px solid var(--border-faint);background:var(--bg-void);padding:40px;
  max-width:none;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--magenta)}
.footer__word{font-weight:var(--w-extrabold);color:var(--fg-1)}
.footer__tag{color:var(--fg-4)}

/* ░ REVEAL (no-JS = widoczne) ░ */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}

/* ░ RESPONSIVE ░ */
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr}
  .hero__portrait{grid-row:1;width:min(240px,62vw)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stackgrid{grid-template-columns:repeat(2,1fr)}
  .proof{grid-template-columns:repeat(2,1fr)}
  .gallery{--row-h:460px}
  .dframe{--row-h:260px}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav.is-open{flex-wrap:wrap}
  .nav.is-open .nav__links{display:flex;flex-direction:column;width:100%;gap:14px;margin:8px 0 0;order:3}
  .nav.is-open .nav__cta{display:inline-flex;order:4}
}
@media(max-width:560px){
  .section{padding:64px 22px}
  .hero__grid{padding:0 22px}
  .trust{padding-left:22px;padding-right:22px}
  .grid-4,.stackgrid,.proof{grid-template-columns:1fr}
  /* mobile: jedna kolumna, wyśrodkowana — każdy klip duży i łatwy w kliknięciu.
     Poziome na całą szerokość, pionowe zwężone (żeby nie były absurdalnie wysokie). */
  .gallery{display:flex;flex-direction:column;align-items:center;gap:14px}
  .clip{height:auto;max-width:100%}
  .clip[data-orient="landscape"],.clip--feature{width:100%}
  .clip[data-orient="portrait"]{width:68%}
  .clip[data-orient="portrait45"]{width:82%}
  /* dynamic frame grid → na mobile jedna kolumna, opisy zawsze widoczne, tap = odpal */
  .dframe{flex-direction:column;align-items:center;gap:14px;--row-h:auto}
  .dframe .clip{height:auto;max-width:100%}
  .dframe .clip[data-orient="landscape"]{width:100%}
  .dframe .clip[data-orient="portrait"]{width:74%}
  .dframe .clip[data-orient="portrait45"]{width:86%}
  /* bez najazdu: opisy zawsze widoczne, brak przygaszania/skalowania */
  .dframe .clip__desc{max-height:none;opacity:1;overflow:visible}
  .dframe:hover .clip{opacity:1;filter:none}
  .dframe .clip:hover{transform:none;box-shadow:var(--shadow-md)}
  .footer{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
}