/* =====================================================================
   WARSTWA ANIMACJI — CSS
   Wklej na koniec arkusza strony (albo w <style> tuż przed </head>).
   Wszystko, co chowa treść, wisi pod klasą html.anim-ready — a tę klasę
   dokłada JS dopiero wtedy, gdy GSAP realnie wstał. Bez JS / z zablokowanym
   CDN strona jest po prostu widoczna, nie pusta.
   ===================================================================== */

:root{
  --ag-ease:    cubic-bezier(.16,1,.3,1);   /* „expo out” — długi wybieg, krótki start */
  --ag-ease-io: cubic-bezier(.65,.05,.36,1);
  --ag-fast:    .35s;
  --ag-slow:    .85s;
}

/* ---------------------------------------------------------------------
   0. Lenis — arkusz wymagany przez bibliotekę.
   Bez tego natywne `scroll-behavior:smooth` z CSS bije się z Lenisem
   i kotwice potrafią „dygotać”.
   --------------------------------------------------------------------- */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }
.lenis.lenis-smooth iframe{ pointer-events:none }

/* ---------------------------------------------------------------------
   1. Nagłówki dzielone na linie (własny zamiennik płatnego SplitText)
   --------------------------------------------------------------------- */
.ag-w{ display:inline-block }        /* słowo — tylko na czas pomiaru złamań */

/* padding + ujemny margin: maska `overflow:hidden` inaczej ścina ogonki
   w „ą”, „ę”, „g” — w polskich nagłówkach widać to natychmiast */
.ag-line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em }
.ag-line-i{ display:block; will-change:transform }

html.anim-ready .ag-line-i{ transform:translateY(120%) }

/* ---------------------------------------------------------------------
   2. Wjazdy bloków
   --------------------------------------------------------------------- */
.rise{ will-change:transform,opacity }
html.anim-ready .rise{ opacity:0; transform:translateY(28px) }
html.anim-ready .rise--sm{ transform:translateY(14px) }
html.anim-ready .rise--lg{ transform:translateY(46px) }

/* Bezpiecznik: gdy JS uzna, że animacje nie ruszyły, dokłada .anim-off
   i to musi przebić wszystko, łącznie z inline’ami po GSAP-ie. */
html.anim-off .rise{ opacity:1 !important; transform:none !important }
html.anim-off .ag-line-i{ transform:none !important }

/* ---------------------------------------------------------------------
   3. Liczniki — tabelaryczne cyfry, żeby liczba nie „drgała” w trakcie
      odliczania (w proporcjonalnym kroju „1” jest węższe od „8”)
   --------------------------------------------------------------------- */
[data-count]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

/* ---------------------------------------------------------------------
   4. Marquee — pasek przewijany
   Animacja siedzi dopiero na .is-ready, którą dokłada JS PO zduplikowaniu
   zawartości. Bez JS pasek jest statyczny zamiast skakać w miejscu pętli.
   Dystans (--ag-mq-w) to dokładna szerokość jednego zestawu razem z odstępem
   — dlatego liczy go JS, a nie sztywne -50%.
   --------------------------------------------------------------------- */
.marquee{ overflow:hidden }
.marquee__track{ display:flex; width:max-content; align-items:center }
.marquee__track.is-ready{
  animation:ag-marquee var(--ag-mq-dur,40s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused }

@keyframes ag-marquee{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(calc(var(--ag-mq-w,50%) * -1),0,0) }
}

/* ---------------------------------------------------------------------
   5. Przycisk z podmianą etykiety
   Druga etykieta leży na pierwszej (position:absolute), więc wysokość
   pudełka nie zależy od tego, która jest dłuższa.
   --------------------------------------------------------------------- */
.btn-t{ display:block; position:relative; overflow:hidden; line-height:1.15 }
.btn-t__a,
.btn-t__b{ display:block; white-space:nowrap; transition:transform .45s var(--ag-ease) }
.btn-t__b{ position:absolute; left:0; top:0; width:100%; transform:translateY(105%) }

.btn:hover  .btn-t__a,
.btn:focus-visible .btn-t__a{ transform:translateY(-105%) }
.btn:hover  .btn-t__b,
.btn:focus-visible .btn-t__b{ transform:translateY(0) }

.btn .arrow{ transition:transform .45s var(--ag-ease) }
.btn:hover .arrow,
.btn:focus-visible .arrow{ transform:translateX(4px) }

/* ---------------------------------------------------------------------
   6. Slider realizacji
   touch-action:pan-y — pion oddajemy przeglądarce (strona ma się dalej
   przewijać palcem), poziom bierzemy my.
   --------------------------------------------------------------------- */
.work__viewport{ overflow:hidden }
.work__track{
  display:flex; gap:clamp(16px,2vw,28px);
  transition:transform var(--ag-slow) var(--ag-ease);
  will-change:transform; touch-action:pan-y;
}
.work.is-dragging .work__track{ transition:none; cursor:grabbing }
.work__btn[disabled]{ opacity:.32; cursor:not-allowed }
.work__count{ font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------------
   7. Nagłówek strony
   --------------------------------------------------------------------- */
.nav{
  transition:background .45s var(--ag-ease),
             border-color .45s var(--ag-ease),
             padding-block .45s var(--ag-ease),
             box-shadow .45s var(--ag-ease);
}
.nav.is-stuck{
  background:var(--bg,#FFF5E8);
  border-bottom:1px solid var(--line,rgba(29,29,29,.14));
  padding-block:11px;
  box-shadow:0 10px 30px -24px rgba(0,0,0,.45);
}
/* podmiana logo jasne/ciemne przy zmianie tła */
.nav .is-dark{ opacity:0 }
.nav.is-stuck .is-light{ opacity:0 }
.nav.is-stuck .is-dark{ opacity:1 }
.nav .is-light,.nav .is-dark{ transition:opacity .4s var(--ag-ease) }

/* ---------------------------------------------------------------------
   8. Hero — powolny najazd (Ken Burns)
   Skala startowa >1, żeby przy przesunięciu nie odsłonić krawędzi kadru.
   --------------------------------------------------------------------- */
.hero__media{ overflow:hidden }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:52% 45%;
  animation:ag-kenburns 28s var(--ag-ease-io) infinite alternate;
  will-change:transform;
}
@keyframes ag-kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to  { transform:scale(1.17) translate3d(-1.6%,-1.1%,0) }
}

/* ---------------------------------------------------------------------
   9. Akordeon FAQ
   Wysokość animuje JS (0 <-> px <-> auto). `visibility` przełączamy razem
   z nią, bo sama wysokość 0 + overflow:hidden NIE ukrywa treści przed
   czytnikiem ekranu — schowana odpowiedź nadal byłaby czytana.
   --------------------------------------------------------------------- */
.faq__item{ border-top:1px solid var(--line,rgba(29,29,29,.14)) }
.faq__item:last-child{ border-bottom:1px solid var(--line,rgba(29,29,29,.14)) }

.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; margin:0; padding:22px 0; border:0; background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:color var(--ag-fast) var(--ag-ease);
}
.faq__q:hover{ color:var(--accent,#FF4A2F) }
.faq__q:focus-visible{ outline:2px solid var(--accent,#FF4A2F); outline-offset:3px }

.faq__icon{
  position:relative; flex:0 0 14px; width:14px; height:14px;
  transition:transform .45s var(--ag-ease);
}
.faq__icon::before,.faq__icon::after{
  content:''; position:absolute; left:0; top:50%; width:14px; height:1.5px;
  background:currentColor; transform:translateY(-50%);
  transition:transform .45s var(--ag-ease), opacity .3s linear;
}
.faq__icon::after{ transform:translateY(-50%) rotate(90deg) }
.faq__item.is-open .faq__icon{ transform:rotate(180deg) }
.faq__item.is-open .faq__icon::after{ opacity:0; transform:translateY(-50%) rotate(0deg) }

.faq__a{
  height:0; overflow:hidden; visibility:hidden;
  transition:height .5s var(--ag-ease);
}
.faq__a-in{ padding:0 0 26px; max-width:64ch }

/* ---------------------------------------------------------------------
   10. „Przed / po” — dodatek spoza wzorca METRIC
   Warstwa „po” jest przycinana clip-path’em; --ba-cut to odcięcie z prawej
   (100% = widać wyłącznie stan surowy, 0% = widać wyłącznie odbiór).
   Sterowanie idzie przez natywny <input type=range> położony na zdjęciu:
   dostajemy za darmo przeciąganie, klawiaturę i obsługę czytnika ekranu.
   --------------------------------------------------------------------- */
.ba{ position:relative; overflow:hidden; --ba-cut:100% }
.ba__layer{ display:block; width:100%; height:auto }
.ba__after{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 var(--ba-cut) 0 0);
  will-change:clip-path;
}
.ba__handle{
  position:absolute; top:0; bottom:0;
  left:calc(100% - var(--ba-cut));
  width:2px; background:var(--bg,#FFF5E8); pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.ba__handle::after{
  content:''; position:absolute; top:50%; left:50%; width:46px; height:46px;
  transform:translate(-50%,-50%);
  border:2px solid var(--bg,#FFF5E8); border-radius:50%;
  background:rgba(0,0,0,.18); backdrop-filter:blur(2px);
}
.ba__tag{
  position:absolute; bottom:14px; z-index:2;
  padding:6px 12px; background:var(--bg,#FFF5E8); color:var(--ink,#1D1D1D);
  font-family:var(--f-mono,ui-monospace,monospace); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; pointer-events:none;
}
.ba__tag--before{ left:14px }
.ba__tag--after{ right:14px; background:var(--accent,#FF4A2F); color:#fff }

/* suwak: niewidoczny, ale w pełni funkcjonalny */
.ba__range{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100%; cursor:ew-resize }
.ba__range::-moz-range-thumb{ width:56px; height:100%; border:0; background:transparent; cursor:ew-resize }
.ba__range:focus-visible ~ .ba__handle{ box-shadow:0 0 0 2px var(--accent,#FF4A2F) }

/* ---------------------------------------------------------------------
   11. prefers-reduced-motion — pełne wyłączenie ruchu
   Kolejność ma znaczenie: ten blok musi być NA KOŃCU, żeby przebić
   deklaracje powyżej.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.anim-ready .ag-line-i,
  html.anim-ready .rise{ opacity:1 !important; transform:none !important }

  .marquee__track.is-ready,
  .hero__media img,
  .quotes__track{ animation:none !important }

  /* zdjęcie w hero i tak ma zostać w powiększeniu — inaczej zmieni kadr */
  .hero__media img{ transform:scale(1.06) }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =====================================================================
   NADPISANIE PALETY — pomarancz z logo zamiast niebieskiego
   Blok siedzi tutaj, a nie w index.html, bo plik strony jest trzymany
   przez proces na dysku sieciowym i nie da sie go nadpisac.
   Selektory maja podwyzszona szczegolowosc (html:root, html .klasa),
   zeby wygrac z regulami zadeklarowanymi pozniej w <style> strony.
   DOCELOWO: przeniesc do index.html i usunac stad.
   ===================================================================== */
html:root{
  --c-navy:       #16181C;   /* ciemne tlo sekcji zamiast granatu */
  --c-blue:       #FF4A2F;   /* AKCENT = pomarancz z logo */
  --c-light-blue: #FF8A6B;   /* jasniejszy pomarancz na ciemnych tlach */

  /* Czarny tekst na pomaranczu daje 6,19:1. Bialy dawalby 3,29:1,
     czyli za malo na etykiety przyciskow (10-11 px). */
  --on-accent:       var(--c-black);
  --on-accent-hover: var(--c-white);
  --icon: var(--c-blue);
}

/* na ciemnym tle hover rozjasnia sie do bieli, wiec tekst musi sczernieć */
html .sec--dark{ --on-accent: var(--c-black); --on-accent-hover: var(--c-black) }

/* tylko przyciski wypelnione — obrysowe maja wlasna logike hoveru */
html .btn:not(.btn--ghost):hover,
html .btn:not(.btn--ghost):focus-visible{ color:var(--on-accent-hover) }

html .nav .btn{ color:var(--c-black) }
html .nav .btn:hover{ color:var(--c-white) }
html .proj__badge{ color:var(--c-black) }

/* gradient hero mial granat wpisany na sztywno */
html .hero__media::after{
  background:linear-gradient(180deg, rgba(0,0,20,.74) 0%, rgba(22,24,28,.44) 45%, rgba(0,0,20,.88) 100%);
}

/* Suwak przed/po: odwrocony kierunek przyciecia.
   Teraz stan surowy zostaje po LEWEJ, a wykonczony wjezdza od PRAWEJ —
   zgodnie z podpisami i z konwencja "przed po lewej". */
html .ba__after{ clip-path:inset(0 0 0 var(--ba-cut)) }
html .ba__handle{ left:var(--ba-cut) }

/* Suwak przed/po: zdjecia maja rozne proporcje (rozbiorka jest pionowa,
   wykonczony korytarz poziomy). Bez wspolnej ramy kadru blok rozciagalby sie
   na wysokosc zdjecia pionowego. */
html .ba{ aspect-ratio:4/3; overflow:hidden }
html .ba__layer{ width:100%; height:100%; object-fit:cover; object-position:center }