/* =========================================================
   IMEN — landing
   Paleta wyłącznie monochromatyczna. Kolor pojawia się
   tylko w kreacjach klientów (sekcja WORK).
   ========================================================= */

:root{
  --ink:      #0a0a0a;
  --ink-70:   #4a4a4a;
  --ink-45:   #7b7b7b;
  --paper:    #fafafa;
  --white:    #ffffff;
  --line:     #e4e4e4;
  --line-soft:#efefef;

  --sans: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;

  --gut: clamp(10px, 2.5vw, 40px);
  --sec: clamp(88px, 12vw, 190px);
  --max: 1440px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:14px 22px; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ============================ NAV ============================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(250,250,250,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }

.nav__inner{
  max-width:var(--max); margin-inline:auto;
  padding:0 var(--gut);
  height:74px;
  display:flex; align-items:center; gap:clamp(18px,4vw,64px);
}

.nav__logo{ flex:none; display:block; }
.nav__logo img{ width:78px; height:auto; }

.nav__links{
  display:flex; align-items:center; gap:clamp(16px,3vw,46px);
  margin-inline:auto;
}
.nav__links a{
  position:relative;
  color:var(--ink); text-decoration:none;
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 0;
  white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__brief{
  flex:none;
  font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45);
  white-space:nowrap;
  text-decoration:none;
}
.nav__brief span{
  color:var(--ink);
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .35s var(--ease);
}
.nav__brief:hover span{ box-shadow:inset 0 -1px 0 var(--ink); }

@media (max-width:1080px){ .nav__brief{ display:none; } }
@media (max-width:520px){
  .nav__inner{ height:64px; gap:14px; }
  .nav__logo img{ width:62px; }
  .nav__links{ gap:14px; }
  .nav__links a{ font-size:10.5px; letter-spacing:.1em; }
}

/* ============================ HERO ============================ */

/* hero rozciąga się na pełną szerokość okna, żeby fala płynęła
   od krawędzi przeglądarki; treść nadal trzyma siatkę strony */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:120px 96px;
  padding-inline:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  overflow:hidden;
}

/* fala rysowana proceduralnie — bez obrazu w tle */
.hero__canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}

.hero__body{ position:relative; z-index:1; max-width:min(80ch, 76%); }

.hero__title{
  margin:0;
  font-size:clamp(44px, 7.4vw, 116px);
  line-height:.92;
  letter-spacing:-.035em;
  font-weight:800;
  text-transform:uppercase;
}
/* każda linia to okno maskujące — tekst wjeżdża spod krawędzi.
   Stan początkowy siedzi w keyframes (fill: both), więc gdyby animacja
   nie wystartowała, nagłówek i tak jest widoczny. */
/* clip-path zamiast overflow:hidden — przycina tylko w pionie,
   więc szeroki wyraz nigdy nie zostanie obcięty z prawej */
.hero__title .line{ display:block; clip-path:inset(0 -25% 0 0); padding-bottom:.06em; }
.hero__title .line i{ display:block; font-style:normal; }

/* animacja wchodzi dopiero, gdy dokument ją potwierdzi — bez skryptu
   nagłówek po prostu stoi na miejscu, nigdy nie zostaje ukryty */
@media (prefers-reduced-motion:no-preference){
  .is-ready .hero__title .line i{
    animation:lineIn 1.05s var(--ease) both;
    animation-delay:calc(var(--i) * 110ms + 120ms);
  }
}
@keyframes lineIn{ from{ translate:0 105%; } to{ translate:0 0; } }

/* łamanie steruje <br> w treści — miara nie może go wyprzedzić */
.hero__lead{
  margin-top:clamp(26px,3.4vw,42px);
  max-width:none;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.72;
  color:var(--ink-70);
}
@media (prefers-reduced-motion:no-preference){
  .is-ready .hero__lead{ animation:fadeUp .9s var(--ease) .48s both; }
}
@keyframes fadeUp{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }

.hero__scroll{
  position:relative; z-index:1;
  margin-top:clamp(46px,7vw,90px);
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45);
}
.hero__scrollline{
  width:48px; height:1px; background:var(--ink-45);
  transform-origin:left; animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{
  0%,100%{ transform:scaleX(.35); opacity:.4; }
  50%    { transform:scaleX(1);   opacity:1;  }
}

@media (max-width:860px){
  .hero{ min-height:auto; padding-top:132px; padding-bottom:70px; }
  .hero__body{ max-width:100%; }
}

/* ============================ SECTIONS ============================ */

.section{ padding-block:var(--sec); position:relative; }
.section--who,
.section--funnel,
.section--clients{ background:var(--white); }
.section--who,
.section--what,
.section--funnel,
.section--channels,
.section--work,
.section--clients{ border-top:1px solid var(--line-soft); }

.eyebrow{
  font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-45);
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(24px,3vw,38px);
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:var(--line); max-width:220px;
}

.h2{
  margin:0;
  font-size:clamp(30px,4.6vw,64px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
  text-transform:uppercase;
}
.h2--display{ font-size:clamp(34px,6.4vw,92px); }

/* dłuższe zdanie w wersalikach — musi zmieścić się w dwóch liniach */
.h2--mid{ font-size:clamp(24px,3.4vw,48px); line-height:1.06; }

/* -------- WHO -------- */

.who__copy{
  margin-top:clamp(26px,3.2vw,44px);
  display:grid; gap:clamp(18px,2.4vw,30px);
  max-width:none;
}
.who__copy p{
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.78;
  color:var(--ink-70);
}

/* -------- CARDS -------- */

.cards{
  margin-top:clamp(42px,5.4vw,78px);
  display:grid; gap:clamp(16px,2vw,28px);
}
.cards--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%,290px), 1fr)); }

.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(28px,3.2vw,44px);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.section--who + .section--what .card,
.section--what .card{ background:var(--white); }

.card:hover{
  transform:translateY(-6px);
  border-color:var(--ink);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.5);
}

.card__icon{ width:72px; height:72px; color:var(--ink); margin-bottom:clamp(24px,3vw,38px); }
.card__icon svg{ width:100%; height:100%; }

.card__title{
  margin:0 0 16px;
  font-size:clamp(19px,1.75vw,25px);
  line-height:1.14;
  letter-spacing:-.015em;
  font-weight:800;
  text-transform:uppercase;
}

.card__body{
  font-size:15px; line-height:1.72; color:var(--ink-70);
  margin-top:auto;
}

/* dark variant — funnel */
.card--dark{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.card--dark .card__title{ color:var(--paper); }
.card--dark .card__body{ color:rgba(250,250,250,.68); }
.card--dark .card__icon{ color:var(--paper); }
.card--dark:hover{ box-shadow:0 18px 44px -26px rgba(0,0,0,.75); }

/* -------- CHANNELS -------- */

.channels{
  margin-top:clamp(42px,5.4vw,72px);
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.channels li{
  flex:1 1 200px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:clamp(26px,3.4vw,44px) clamp(18px,2vw,28px);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.channels li:last-child{ border-right:0; }
.channels li span{
  font-size:clamp(15px,1.5vw,21px);
  font-weight:800; letter-spacing:-.01em; text-transform:uppercase;
  white-space:nowrap;
}
.channels li:hover{ background:var(--ink); color:var(--paper); }

@media (max-width:760px){
  .channels li{ flex:1 1 50%; }
  .channels li:nth-child(2n){ border-right:0; }
  .channels li:last-child{ flex-basis:100%; }
}

.models{
  margin-top:clamp(46px,5.6vw,80px);
  padding:clamp(34px,4.4vw,64px);
  background:var(--ink); color:var(--paper);
  text-align:center;
}
.models__lead{
  font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(250,250,250,.55);
}
.models__list{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,3vw,42px);
  margin-top:clamp(16px,2vw,26px);
}
.models__list b{
  font-size:clamp(30px,5.4vw,72px);
  font-weight:800; letter-spacing:-.03em; line-height:1;
}
.models__list i{
  font-style:normal; font-weight:400;
  font-size:clamp(20px,3.4vw,46px); line-height:1;
  color:rgba(250,250,250,.4);
}

/* -------- WORK -------- */

.section--work{ padding-bottom:clamp(70px,9vw,140px); }

/* 20 kafelków — siatka 4/2/1 dzieli się bez reszty, żaden rząd nie zostaje niepełny */
.grid{
  --gap:clamp(10px,1.4vw,20px);
  --cols:4;
  margin-top:clamp(38px,4.6vw,62px);
  padding-inline:var(--gut);
  max-width:var(--max); margin-inline:auto;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(var(--cols), 1fr);
  /* punkt odniesienia dla kafelka szerokiego na dwie kolumny */
  container-type:inline-size;
}
@media (max-width:1100px){ .grid{ --cols:2; } }
@media (max-width:560px){  .grid{ --cols:1; } }

.tile{ margin:0; position:relative; }
.tile img{
  width:100%; aspect-ratio:4/5;
  /* contain, nie cover — kreacja klienta musi być widoczna w całości */
  object-fit:contain; object-position:center;
  background:var(--white);
  border:1px solid var(--line);
  padding:10px;
  transition:transform .6s var(--ease), border-color .6s var(--ease);
}
.tile figcaption{
  margin-top:12px;
  font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
  transition:color .4s var(--ease);
}
.tile:hover img{ transform:scale(1.015); border-color:var(--ink); }
.tile:hover figcaption{ color:var(--ink); }

/* kafelek na dwie kolumny — wysokość liczona z szerokości pojedynczej
   kolumny, żeby stał równo z sąsiadami i podpisy leżały w jednej linii */
.tile--wide{ grid-column:span 2; }
.tile--wide img{
  aspect-ratio:auto;
  height:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * 1.25);
}
@media (max-width:560px){
  .tile--wide{ grid-column:auto; }
  .tile--wide img{ aspect-ratio:4/5; height:auto; }
}

/* -------- CLIENTS -------- */

.section--clients{
  padding-block:clamp(64px,8vw,120px);
  overflow:hidden;
}
.section--clients .eyebrow{ margin-bottom:clamp(14px,1.6vw,22px); }

.marquee{
  position:relative;
  margin-top:clamp(36px,4.4vw,64px);
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 62s linear infinite;
}
.marquee + .marquee{ margin-top:18px; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }

.marquee__set{
  display:flex; align-items:center;
  gap:clamp(30px,4vw,68px);
  padding-right:clamp(30px,4vw,68px);
}
.marquee__set img{
  width:clamp(84px,7vw,124px); height:auto;
  flex:none;
  filter:grayscale(1) contrast(1.06);
  opacity:.62;
  mix-blend-mode:multiply;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.marquee__set img:hover{ filter:grayscale(0); opacity:1; }

@keyframes slide{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* -------- BRIEF -------- */

.section--brief{
  position:relative;
  overflow:hidden;
  padding-block:clamp(76px,10.5vw,154px);
  background:var(--paper);
  border-top:1px solid var(--line-soft);
}
/* ta sama murmuracja co w hero — rysowana proceduralnie na canvasie,
   panel dostaje własne stado (mesh.js obsługuje każdy [data-mesh]) */
.brief__canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
@media (max-width:760px){
  .brief__canvas{ opacity:.8; }
}

.brief{ position:relative; z-index:1; text-align:center; }
.brief__logo{
  width:clamp(180px,26vw,380px); height:auto;
  margin-inline:auto;
}
.brief__line{
  margin-top:clamp(20px,2.6vw,34px);
  font-size:clamp(10px,0.64vw,19px);
  font-weight:700; font-style:normal;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-70);
  opacity:.6;
}
.brief__line a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--ink), var(--ink));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:background-size .4s var(--ease);
}
.brief__line a:hover{ background-size:0 1px; }

/* ============================ FOOTER ============================ */

.foot{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(36px,4.2vw,59px);
}
.foot__copy{
  text-align:center;
  font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
}

/* ============================ REVEAL ============================ */

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   Warstwa wykończeniowa
   ========================================================= */

/* ---- pasek postępu czytania, sterowany natywnie osią scrolla ---- */
.nav__progress{
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
}
@supports (animation-timeline: scroll()){
  .nav__progress{
    animation:progress linear;
    animation-timeline:scroll(root block);
  }
  @keyframes progress{ to{ transform:scaleX(1); } }
}

/* ---- reveal na natywnej osi widoku; JS zostaje tylko jako zapas ---- */
@supports (animation-timeline: view()){
  [data-reveal]{
    opacity:1; transform:none; transition:none;
    animation:revealIn linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 26%;
  }
  @keyframes revealIn{
    from{ opacity:0; transform:translateY(26px); filter:blur(6px); }
    to  { opacity:1; transform:none;             filter:blur(0);   }
  }
}

/* ---- galeria: najechany kafelek wychodzi na wierzch, reszta ustępuje ---- */
.grid:has(.tile:hover) .tile:not(:hover){
  opacity:.42;
  filter:grayscale(.55);
}
.tile{
  transition:opacity .45s var(--ease), filter .45s var(--ease);
  transform-style:preserve-3d;
}
.tile:hover{ z-index:2; }
.tile img{ will-change:transform; }
@media (hover:hover) and (pointer:fine){
  .tile:hover img{
    transform:perspective(900px)
              rotateX(calc(var(--ty, 0) * -3.2deg))
              rotateY(calc(var(--tx, 0) * 3.2deg))
              translateZ(14px) scale(1.02);
    box-shadow:0 30px 60px -34px rgba(0,0,0,.55);
  }
}

/* ---- kanały: wypełnienie wjeżdża od dołu ---- */
.channels li{ position:relative; overflow:hidden; isolation:isolate; }
.channels li::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.channels li:hover::before{ transform:scaleY(1); }
.channels li:hover{ background:transparent; }

/* ---- ziarno: bardzo cienka warstwa, zdejmuje cyfrową płaskość ---- */
.grain{
  position:fixed; inset:-120px; z-index:90;
  pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%  { transform:translate(0,0); }
  20% { transform:translate(-6%,4%); }
  40% { transform:translate(4%,-6%); }
  60% { transform:translate(-4%,-4%); }
  80% { transform:translate(6%,6%); }
  100%{ transform:translate(0,0); }
}

/* ---- łamanie wierszy ----
   nagłówki i akapity mają twarde <br> z copy; balance/pretty tylko tam,
   gdzie tekst nadal łamie się sam */
.card__title, .hero__title{ text-wrap:balance; }
.card__body{ text-wrap:pretty; }

/* na wąskich ekranach twarde łamania ustępują naturalnemu zawijaniu */
@media (max-width:860px){
  .hero__lead br,
  .who__copy br,
  .card__body br{ display:none; }
}

/* =========================================================
   Ograniczony ruch — wyłączamy wszystko, co się rusza
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__title .line i{ translate:0 0 !important; }
  .hero__lead{ opacity:1 !important; }
  .marquee__track,
  .grain{ animation:none !important; }
  .nav__progress{ display:none; }
  .tile:hover img{ transform:none !important; }
}