/* ==========================================================================
   GRAND PRIX STREAMERÓW · SEZON II
   Zgodne z księgą znaku v1.0
   Kolory:  Czerwień GP #E10600 · Czerń Torowa #0B0B0F · Papier #EFEEEA
   Kroje:   Archivo Black (nagłówki) · Archivo (UI) · JetBrains Mono (dane)
   Zasada:  pochylenie skewX(-8deg) tylko w typogramach i hasłach
   ========================================================================== */

:root{
  --red:      #E10600;
  --black:    #0B0B0F;
  --paper:    #EFEEEA;
  --white:    #FFFFFF;
  --graphite: #55524B;
  --concrete: #DEDBD3;

  --skew: -8deg;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1280px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --nav-h: 68px;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* blokada scrolla na czas sekwencji startowej */
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:'Archivo Black', 'Archivo', sans-serif; font-weight:400; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

.mono{
  font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
}

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

::selection{ background:var(--red); color:var(--white); }

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


/* ==========================================================================
   1 · ŚWIATŁA STARTOWE (intro)
   Domyślnie ukryte — pokazywane wyłącznie przez JS (.is-running),
   dzięki czemu bez JS strona jest w pełni dostępna.
   ========================================================================== */

.lights{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:var(--black);
  place-items:center;
  cursor:pointer;
}
.lights.is-running{ display:grid; }

.lights__rig{
  display:flex; gap:clamp(10px, 2.4vw, 26px);
  padding:clamp(12px,2.4vw,22px);
  background:#000;
  border:1px solid #1b1b22;
  border-radius:4px;
  box-shadow:0 40px 120px rgba(0,0,0,.9);
}
.lights__col{ display:grid; gap:clamp(8px,1.6vw,16px); }
.lights__col i{
  display:block;
  width:clamp(30px, 6.6vw, 62px);
  aspect-ratio:1;
  border-radius:50%;
  background:#16161c;
  box-shadow:inset 0 0 0 2px #23232b;
  transition:background .09s linear, box-shadow .09s linear;
}
.lights__col.on i{
  background:var(--red);
  box-shadow:
    inset 0 0 0 2px #ff5a52,
    0 0 22px rgba(225,6,0,.95),
    0 0 70px rgba(225,6,0,.5);
}
.lights__hint{
  position:absolute; bottom:8vh; left:0; right:0;
  text-align:center;
  font-size:10px; color:#3c3c46;
}

/* moment "lights out" — czerwony błysk i zejście */
.lights.is-out{
  animation:lightsOut .55s var(--ease-in-out) forwards;
}
@keyframes lightsOut{
  0%   { opacity:1; }
  18%  { background:var(--red); }
  100% { opacity:0; visibility:hidden; }
}


/* ==========================================================================
   2 · NAWIGACJA
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; gap:24px;
  padding-inline:var(--pad);
  background:transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,15,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:#1c1c24;
}

.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__brand img{ width:26px; height:26px; }
.nav__brand-text{
  display:grid; line-height:1.06;   /* miejsce na „Ó” */
  transform:skewX(var(--skew));
  font-family:'Archivo Black', sans-serif;
  font-size:13px; letter-spacing:.005em;
}
.nav__brand-text b{ color:var(--white); font-weight:400; }
.nav__brand-text em{ color:var(--red); font-style:normal; }

.nav__links{ display:flex; gap:26px; font-size:11px; color:#8d8d97; }
.nav__links a{ position:relative; padding-block:6px; transition:color .2s ease; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__season{
  font-size:10px; color:var(--white);
  padding:5px 10px; border:1px solid #2a2a33; border-radius:2px;
}

/* Siedem pozycji mieści się dopiero od ~1000 px — niżej blok linków zaczyna
   napierać na znak. Pierwsze wypada „Powtórki": to archiwum poprzedniego
   sezonu, siedzi tuż nad stopką, więc dochodzi się do niego scrollem. */
@media (max-width:1040px){
  .nav__links a[href="#powtorki"]{ display:none; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
}


/* ==========================================================================
   3 · HERO
   ========================================================================== */

/* Rytm hero jest ściskany wysokością okna, nie tylko szerokością. Każda
   pionowa wartość idzie przez min(dotychczasowa, Nsvh): powyżej ~1290 px
   wysokości wygrywa pierwszy człon i nic się nie zmienia, niżej drugi
   zbija odstępy tak, żeby przyciski, odliczanie i pasek zmieściły się
   nad krawędzią. Bez tego 13-calowy laptop (790 px) urywał hero
   na przyciskach — treść potrzebowała 1067 px. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + min(24px, 1.9svh)) var(--pad) min(132px, 10.2svh);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(225,6,0,.20) 0%, rgba(225,6,0,0) 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(225,6,0,.10) 0%, rgba(225,6,0,0) 60%),
    var(--black);
  isolation:isolate;
}

/* --- canvas ze smugami prędkości --- */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* --- motyw sygnetu: trzy pochylone belki w tle --- */
.hero__bars{ position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:.5; }
.hero__bars .bar{
  position:absolute; left:-30%; width:160%;
  transform:skewX(var(--skew));
  will-change:transform, opacity;
}
.bar--1{ top:16%; height:clamp(34px,6.6vw,96px); background:rgba(255,255,255,.030); animation:barDrift 17s var(--ease-in-out) infinite; }
.bar--2{ top:38%; height:clamp(44px,8.4vw,124px); background:rgba(255,255,255,.022); animation:barDrift 23s var(--ease-in-out) infinite reverse; }
.bar--3{ top:63%; height:clamp(28px,5.2vw,76px);  background:rgba(225,6,0,.14);     animation:barDrift 19s var(--ease-in-out) infinite .8s; }

@keyframes barDrift{
  0%,100%{ transform:skewX(var(--skew)) translate3d(-3%,0,0); }
  50%    { transform:skewX(var(--skew)) translate3d(3%,0,0); }
}

/* --- siatka torowa --- */
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
  opacity:.55;
}

.hero__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,11,15,.75) 0%, transparent 26%, transparent 62%, var(--black) 100%),
    radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(11,11,15,.86) 100%);
}

.hero__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  container-type:inline-size;   /* typogram skalowany do szerokości kolumny */
}

/* --- kicker --- */
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; color:#a5a5af;
  margin-bottom:min(clamp(18px,3vw,30px), 2.4svh);
}
.hero__kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(225,6,0,.65);
  animation:pulse 2.4s ease-out infinite;
}
.hero__kicker .sep{ color:var(--red); }
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(225,6,0,.6); }
  70% { box-shadow:0 0 0 12px rgba(225,6,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(225,6,0,0); }
}

/* --- typogram --- */
.hero__title{
  font-family:'Archivo Black', sans-serif;
  /* Najdłuższa linia ("STREAMERÓW") ma po pochyleniu 7,64 em —
     stąd 12,9 cqw wypełnia kolumnę bez przycięcia. vw = fallback. */
  font-size:clamp(32px, 11.5vw, 146px);
  font-size:min(clamp(32px, 12.9cqw, 148px), 11.4svh);
  line-height:.88;
  letter-spacing:-.03em;
  text-transform:uppercase;
  transform:skewX(var(--skew));
  margin-bottom:min(clamp(20px,3vw,34px), 3svh);
}
.hero__title .line{
  display:block; overflow:hidden;
  padding-block:.03em;              /* miejsce na diakrytyki (Ó) */
  position:relative;
}
.hero__title .line__in{ display:block; will-change:transform; }
html.js .hero__title .line__in{ transform:translate3d(0,110%,0); }
.hero__title .line--red{ color:var(--red); }

/* czerwony przelot maskujący każdą linię */
.hero__title .line::after{
  content:''; position:absolute; inset:0;
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}

body.is-ready .hero__title .line__in{
  transition:transform 1.05s var(--ease-out) var(--d);
  transform:translate3d(0,0,0);
}
body.is-ready .hero__title .line::after{
  animation:wipe .85s var(--ease-in-out) var(--d) both;
}
@keyframes wipe{
  0%  { transform:scaleX(0); transform-origin:left; }
  45% { transform:scaleX(1); transform-origin:left; }
  46% { transform:scaleX(1); transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}

/* delikatny glitch co jakiś czas */
body.is-ready .hero__title .line--red .line__in{
  animation:glitch 7s steps(1,end) 2.4s infinite;
}
@keyframes glitch{
  0%,96%   { text-shadow:none; transform:translate3d(0,0,0); }
  96.6%    { text-shadow:-3px 0 rgba(0,229,255,.9), 3px 0 rgba(255,255,255,.7); transform:translate3d(3px,0,0); }
  97.2%    { text-shadow:4px 0 rgba(0,229,255,.9), -4px 0 rgba(255,255,255,.7); transform:translate3d(-3px,0,0); }
  97.8%    { text-shadow:none; transform:translate3d(0,0,0); }
  98.4%    { text-shadow:-2px 0 rgba(255,255,255,.6); transform:translate3d(2px,0,0); }
  99%,100% { text-shadow:none; transform:translate3d(0,0,0); }
}

/* --- belka sezonu (jak w znaku) --- */
.hero__rule{
  display:flex; align-items:center; gap:14px;
  margin-bottom:min(clamp(20px,3vw,30px), 2.4svh);
}
.hero__rule i{
  display:block; width:clamp(56px,9vw,110px); height:8px;
  background:var(--white); transform:skewX(var(--skew));
}
.hero__rule span{ font-size:11px; color:#c9c9d1; }

.hero__lead{
  font-size:min(clamp(16px,2vw,21px), 2.3svh);
  line-height:1.5;
  color:#c3c3cc;
  max-width:34ch;
  margin-bottom:min(clamp(26px,4vw,40px), 3.4svh);
}

/* --- przyciski (48px / radius 2px wg księgi znaku) --- */
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:min(clamp(34px,5vw,52px), 4.1svh); }

.btn{
  --bh:48px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--bh); padding-inline:26px;
  border-radius:2px;
  font-family:'Archivo', sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.10em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease-out), color .25s ease, border-color .25s ease;
}
.btn::before{
  content:''; position:absolute; inset:0;
  background:var(--white);
  transform:translate3d(0,101%,0);
  transition:transform .4s var(--ease-out);
  z-index:0;
}
.btn span{ position:relative; z-index:1; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::before{ transform:translate3d(0,0,0); }

.btn--red{ background:var(--red); color:var(--white); }
.btn--red:hover{ color:var(--black); }

.btn--ghost{ border:1px solid #3a3a44; color:var(--white); }
.btn--ghost:hover{ color:var(--black); border-color:var(--white); }

/* --- odliczanie --- */
.hero__count-label{ font-size:10px; color:#75757f; margin-bottom:10px; }

.clock{ display:flex; align-items:flex-end; gap:clamp(6px,1.4vw,14px); }
.clock__u{ display:grid; justify-items:center; gap:4px; }
.clock__u b{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:min(clamp(26px,4.4vw,44px), 4.6svh);
  line-height:1;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  min-width:1.9ch; text-align:center;
}
.clock__u span{ font-size:9px; letter-spacing:.16em; color:#6c6c76; text-transform:uppercase;
  font-family:'JetBrains Mono', monospace; }
.clock > em{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:clamp(20px,3.4vw,34px); color:var(--red);
  font-style:normal; line-height:1; padding-bottom:16px;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity:.18; } }

/* --- pasek przewijany --- */
.ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  border-top:1px solid #1c1c24;
  background:rgba(11,11,15,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  padding-block:13px;
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track{
  display:flex; width:max-content;
  animation:marquee 34s linear infinite;
}
.ticker__track:hover{ animation-play-state:paused; }
.ticker__item{
  display:inline-flex; align-items:center; gap:12px;
  padding-inline:22px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9a9aa4; white-space:nowrap;
}
.ticker__item b{ color:var(--white); font-weight:700; }
.ticker__item i{ width:6px; height:6px; background:var(--red); transform:skewX(var(--skew)); }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }

/* --- wejście elementów hero --- */
html.js .reveal{ opacity:0; transform:translate3d(0,18px,0); }
body.is-ready .reveal{
  transition:opacity .8s var(--ease-out) var(--d), transform .8s var(--ease-out) var(--d);
  opacity:1; transform:none;
}


/* ==========================================================================
   4 · SEKCJE — wspólne
   ========================================================================== */

.section{
  position:relative;
  padding-block:clamp(72px, 11vw, 148px);
}
.section--tight{ padding-block:clamp(48px,7vw,92px); }
/* dwie sąsiadujące ciemne sekcje czytają się jak jeden blok — mniej powietrza.
   Bez zmiany tła pełny odstęp z obu stron zlewa się w jedną pustą płachtę,
   więc na takim styku ścinamy go po obu stronach */
.section--flush-b{ padding-bottom:clamp(40px,6vw,76px); }
.section--flush-t{ padding-top:clamp(40px,6vw,76px); }
.section--dark{ background:var(--black); color:var(--paper); }
.section--paper{ background:var(--paper); color:var(--black); }

.shead{ margin-bottom:clamp(34px,5vw,60px); }
/* nagłówek, pod którym stoi jeszcze akapit — to on ma oddzielać nagłówek
   od treści, więc sam margines schodzi z drogi */
.shead--lead{ margin-bottom:clamp(18px,2.2vw,26px); }
.shead__num{
  display:block; font-size:11px; color:var(--red); margin-bottom:12px;
}
.shead__title{
  font-size:clamp(30px,5.4vw,60px);
  line-height:1.02; letter-spacing:-.02em;
  text-transform:uppercase;
  transform:skewX(var(--skew));
}
.shead__note{
  margin-top:12px; font-size:11px; color:var(--graphite);
}
.shead--on-dark .shead__note{ color:#75757f; }


/* ==========================================================================
   5 · TRANSMISJA
   ========================================================================== */

/* dwa kafle jak w terminarzu: ciemny niesie główny kanał, jasny POV-y.
   Proporcje idą za wagą — na główny kanał wchodzi się raz, POV-y są
   dopiskiem dla tych, którzy chcą jednego kierowcę */
.watch{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(10px,1.1vw,16px);
  align-items:stretch;
}

/* --- kafel głównego kanału --- */

.watch__main{
  position:relative; overflow:hidden;
  padding:clamp(28px,3.6vw,52px);
  background:var(--black); color:var(--paper);
  border-radius:3px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.watch__main:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(11,11,15,.22);
}
/* zieleń Kicka zamiast czerwonej poświaty — kafel ma mówić, na jakiej
   platformie się to dzieje, zanim ktoś doczyta adres */
.watch__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(72% 120% at 86% 0%, rgba(83,252,24,.15) 0%, transparent 60%),
    repeating-linear-gradient(
      var(--skew, -8deg),
      transparent 0 56px,
      rgba(255,255,255,.022) 56px 58px
    );
}
.watch__body{
  position:relative; z-index:1;
  display:grid; justify-items:start; align-content:start;
}

.watch__badge{
  display:inline-flex; align-items:center; gap:11px;
  font-size:10px; font-weight:700; color:var(--red);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.watch__badge::before{
  content:''; width:24px; height:5px; flex:none;
  background:var(--red); transform:skewX(var(--skew));
}

.watch__ch{
  display:flex; align-items:center; gap:clamp(10px,1.2vw,15px);
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(21px,3.1vw,40px);
  line-height:1.05; letter-spacing:-.02em;
  color:#8d8d97;
  transform:skewX(var(--skew)); transform-origin:left;
  margin-bottom:clamp(14px,1.8vw,20px);
  overflow-wrap:anywhere;
}
/* adres jednym kawałkiem — inaczej gap flexa rozjeżdża go w środku */
.watch__ch span{ min-width:0; }
.watch__ch b{ font-weight:400; color:var(--white); }
.watch__ch svg{
  width:clamp(20px,2.4vw,30px); height:clamp(20px,2.4vw,30px);
  flex:none; fill:#53FC18;
  transform:skewX(calc(var(--skew) * -1));   /* znaczek zostaje prosty */
}

.watch__txt{
  font-size:clamp(14px,1.5vw,17px);
  line-height:1.55; color:#9a9aa4;
  max-width:44ch;
  margin-bottom:clamp(24px,3vw,32px);
}

/* --- kafel POV-ów --- */

.watch__pov{
  display:grid; justify-items:start; align-content:start;
  padding:clamp(24px,3vw,44px);
  background:var(--white);
  border:1px solid var(--concrete);
  border-radius:3px;
}
.watch__k{
  font-size:10px; font-weight:700; color:var(--red);
  margin-bottom:clamp(16px,2vw,22px);
}
.watch__big{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(46px,5.6vw,74px);
  line-height:1; letter-spacing:-.03em;
  transform:skewX(var(--skew)); transform-origin:left;
  margin-bottom:clamp(14px,1.8vw,20px);
}
.watch__big i{
  font-style:normal; font-size:.3em; color:var(--graphite);
  margin-left:.18em; letter-spacing:.02em;
}
.watch__txt--pov{ color:var(--graphite); }

.watch__link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; font-weight:700; color:var(--black);
  padding-bottom:5px;
  border-bottom:1px solid rgba(11,11,15,.22);
  transition:color .25s ease, border-color .25s ease;
}
.watch__link i{ font-style:normal; transition:transform .25s var(--ease-out); }
.watch__link:hover{ color:var(--red); border-color:var(--red); }
.watch__link:hover i{ transform:translateY(3px); }   /* strzałka w dół, składy są niżej */

@media (max-width:900px){
  .watch{ grid-template-columns:minmax(0,1fr); }
}


/* ==========================================================================
   6 · FORMAT — karty
   ========================================================================== */

.cards{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  background:#1c1c24;
  border:1px solid #1c1c24;
}
.card{
  background:var(--black);
  padding:clamp(26px,3.4vw,44px);
  position:relative; overflow:hidden;
  transition:background .4s ease;
}
.card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  opacity:0;                                   /* bez tego zostaje 1 px przy scaleY(0) */
  transition:transform .5s var(--ease-out), opacity .2s ease .3s;
}
.card:hover{ background:#101017; }
.card:hover::before{
  transform:scaleY(1); transform-origin:top;
  opacity:1; transition:transform .5s var(--ease-out), opacity .1s ease;
}

/* etykieta pasa — ten sam nagłówek nad oba rzędy kafli, żeby czytały się
   jak dwa poziomy jednej sekcji, a nie dwa różne komponenty */
.band__head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.band__head--gap{ margin-top:clamp(40px,4.6vw,64px); }
.band__k{
  display:inline-flex; align-items:center; gap:11px;
  font-size:11px; font-weight:700; color:var(--paper);
}
.band__k::before{
  content:''; width:22px; height:5px; flex:none;
  background:var(--red); transform:skewX(var(--skew));
}
.band__note{ font-size:9px; color:#5e5e68; }

.card__k{ font-size:10px; color:#75757f; margin-bottom:18px; }
.card__big{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(38px,5.6vw,66px);
  line-height:1; letter-spacing:-.02em;
  transform:skewX(var(--skew));
  color:var(--white);
  margin-bottom:16px;
}
.card--red .card__big{ color:var(--red); }
.card__txt{ font-size:15px; color:#9a9aa4; line-height:1.55; max-width:30ch; }

/* sesje mają dłuższe wartości niż „04" czy „LAN" — ten sam kafel,
   o stopień mniejszy stopień pisma, żeby „Q1·Q2·Q3" mieściło się w kolumnie */
.card--step .card__big{ font-size:clamp(30px,3.6vw,44px); }
.card--step .card__big i{
  font-style:normal; font-size:.46em; color:var(--graphite);
  margin-left:.1em; letter-spacing:.02em;
}
.card--step .card__big .u{ margin-left:.22em; }   /* „30 min" — jednostka po spacji */
.card--step .card__big .s{ margin:0 .04em; }      /* „Q1·Q2·Q3" — kropka ciasno */

/* numer sesji w tle — jak numer startowy na karcie zespołu */
.card--step::after{
  content:attr(data-n);
  position:absolute; right:-.05em; bottom:-.34em;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(88px,9vw,132px); line-height:1;
  color:var(--paper); opacity:.045;
  transform:skewX(var(--skew));
  pointer-events:none; user-select:none;
}
.card--step.card--red::after{ color:var(--red); opacity:.08; }
.card--step > *{ position:relative; z-index:1; }


/* ==========================================================================
   7 · TERMINARZ — siatka rund (układ w duchu kalendarza F1)
   Cztery równe kafle rundowe + pełnowymiarowy kafel finału pod spodem.
   ========================================================================== */

.gpgrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);
}

/* --- kafel rundy --- */

.gp{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--concrete);
  border-radius:3px;
  padding:clamp(18px,1.9vw,26px);
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out),
             box-shadow .45s var(--ease-out),
             border-color .3s ease;
}
/* belka rundy — wjeżdża od dołu na hoverze */
.gp::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease-out);
}
.gp:hover{
  transform:translateY(-4px);
  border-color:#d4d1c8;
  box-shadow:0 18px 42px rgba(11,11,15,.14);
}
.gp:hover::before{ transform:scaleY(1); transform-origin:top; }

.gp__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-bottom:14px;
  border-bottom:1px solid var(--concrete);
}
.gp__no{ font-size:11px; font-weight:700; color:var(--red); }
.gp__day{ font-size:9px; color:var(--graphite); }
/* poniedziałek zamiast niedzieli — wyjątek ma prawo krzyczeć */
.gp__day--alt{ color:var(--red); font-weight:700; }

.gp__date{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(38px,4.2vw,54px);
  line-height:1; letter-spacing:-.03em;
  transform:skewX(var(--skew)); transform-origin:left;
  margin:clamp(16px,1.8vw,22px) 0 clamp(12px,1.4vw,16px);
}
.gp__date i{
  font-style:normal; font-size:.4em; color:var(--graphite);
  margin-left:.08em; letter-spacing:.02em;
}

.gp__where{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.gp__flag{
  width:24px; height:16px; flex:none;
  border-radius:1px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(11,11,15,.18);
}
.gp__flag svg{ display:block; width:100%; height:100%; }
.gp__flag--tba{
  display:grid; place-items:center;
  background:var(--concrete); box-shadow:none;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px; font-weight:700; color:var(--graphite);
}
.gp__country{ font-size:9px; color:var(--graphite); }

.gp__track{
  font-size:clamp(17px,1.7vw,22px);
  line-height:1.06; letter-spacing:-.02em;
  text-transform:uppercase;
  transform:skewX(var(--skew)); transform-origin:left;
}
.gp__track i{ font-style:normal; color:var(--graphite); }

/* obrys toru — kolor niesie currentColor, więc hover przestawia całość */
.gp__map{
  flex:1; min-height:116px; position:relative;
  display:grid; place-items:center;
  padding-block:clamp(12px,1.6vw,18px);
  color:#c9c5bb;
  transition:color .4s ease;
}
/* obrysy z pakietu maja wlasne viewBoxy (~500 jednostek szerokosci) i rozne
   proporcje, wiec svg dostaje pudelko o stalej wysokosci, a nie wysokosc z aspektu */
.gp__map svg{ width:100%; height:100%; max-width:210px; }
.trk{
  fill:none; stroke:currentColor; stroke-width:7.5;   /* ~3 px przy 200 px szerokosci */
  stroke-linecap:round; stroke-linejoin:round;
}

/* Czerwień nie zapala się na całej nitce naraz — przejeżdża po niej okrążenie.
   Druga ścieżka leży na szarej i jest schowana kreską przerywaną długości
   całego toru (pathLength="1" normalizuje ją niezależnie od tego, ile
   jednostek ma dany obrys), a hover zsuwa przesunięcie do zera. */
.trk--draw{
  stroke:var(--red);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.15s var(--ease-in-out);
}
.gp:hover .trk--draw{ stroke-dashoffset:0; }

/* zastepcza petla rysowana recznie ma wlasny, mniejszy uklad wspolrzednych */
.trk--tba{ stroke-width:3; stroke-dasharray:9 9; }
/* karta bez toru nie ma czego rysowac — zostaje samo przemalowanie */
.gp--tba:hover .gp__map,
.gp--tba:hover .gp__map::after{ color:var(--red); }

/* bez kursora (dotyk) okrążenie przejeżdża, gdy karta wjedzie na ekran */
@media (hover:none){
  html.js .gp.is-in .trk--draw{ stroke-dashoffset:0; }
}
/* znak zapytania w środku przerywanej pętli — tor jeszcze nie wybrany */
.gp--tba .gp__map::after{
  content:'?';
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:28px; font-weight:700; color:#c9c5bb;
}

.gp__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:14px;
  border-top:1px solid var(--concrete);
}
.gp__time{ font-size:14px; font-weight:700; letter-spacing:.06em; }
.gp__time--tba{ font-size:10px; font-weight:400; color:var(--graphite); }
.gp__tag{
  font-size:9px; font-weight:700;
  padding:6px 10px; border-radius:2px;
  border:1px solid var(--black); color:var(--black);
  white-space:nowrap;
}

/* runda bez potwierdzonego toru — przerywana rama mówi to bez słów */
.gp--tba{ border-style:dashed; border-color:#cbc7bd; }
.gp--tba .gp__track{ color:var(--graphite); }
.gp--tba .gp__track i{ color:var(--red); }

/* --- kafel finału --- */

.gpfinal{
  grid-column:1 / -1;
  margin-top:clamp(6px,1vw,14px);
  position:relative; overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center; gap:clamp(20px,3vw,48px);
  padding:clamp(28px,3.6vw,58px);
  background:var(--black); color:var(--paper);
  border-radius:3px;
}
.gpfinal__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(72% 120% at 80% 4%, rgba(225,6,0,.32) 0%, transparent 62%),
    repeating-linear-gradient(
      var(--skew, -8deg),
      transparent 0 56px,
      rgba(255,255,255,.022) 56px 58px
    );
}
.gpfinal__body, .gpfinal__map{ position:relative; z-index:1; }

.gpfinal__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid #1c1c24;
}
.gpfinal__badge{
  display:inline-flex; align-items:center; gap:11px;
  font-size:10px; font-weight:700; color:var(--red);
}
.gpfinal__badge::before{
  content:''; width:24px; height:5px; flex:none;
  background:var(--red); transform:skewX(var(--skew));
}
.gpfinal__topr{ display:inline-flex; align-items:center; gap:clamp(12px,1.6vw,20px); }
.gpfinal__tag{
  font-size:9px; font-weight:700;
  padding:7px 12px; border-radius:2px;
  border:1px solid var(--red); color:var(--red);
  white-space:nowrap;
}

.gpfinal__date{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(66px,10.5vw,136px);
  line-height:.86; letter-spacing:-.04em;
  color:var(--white);
  transform:skewX(var(--skew)); transform-origin:left;
  margin:clamp(18px,2.4vw,30px) 0 clamp(10px,1.4vw,16px);
}
/* w miejscu daty stoi „TBA" — trzy znaki nie potrzebują tyle stopnia
   co pełna data, a przy maksymalnym rozmiarze krzyczały głośniej niż tor */
.gpfinal__date--tba{ font-size:clamp(50px,7.6vw,98px); color:var(--red); }

.gpfinal__date i{
  font-style:normal; font-size:.34em; color:var(--red);
  margin-left:.06em; letter-spacing:.01em;
}

.gpfinal__track{
  font-size:clamp(24px,3.2vw,42px);
  line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--white);
  transform:skewX(var(--skew)); transform-origin:left;
}

.gpfinal__where{
  display:flex; align-items:center; gap:10px;
  margin-top:clamp(14px,1.8vw,20px);
}
.gpfinal__where .gp__flag{ box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.gpfinal__where .gp__country{ color:#9a9aa4; }

.gpfinal__txt{
  margin-top:clamp(16px,2vw,22px);
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.55; color:#9a9aa4; max-width:44ch;
}

.gpfinal__foot{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,28px);
  flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,32px);
}
.gpfinal__time{ font-size:11px; color:var(--white); }

/* obrys Spa — szeroka „nawierzchnia" pod cienką czerwoną linią */
.gpfinal__map{ display:grid; place-items:center; }
.gpfinal__map svg{ width:100%; max-width:440px; height:auto; }
.trk__bed{
  fill:none; stroke:rgba(255,255,255,.10); stroke-width:33;
  stroke-linecap:round; stroke-linejoin:round;
}
.trk__line{
  fill:none; stroke:var(--red); stroke-width:8;
  stroke-linecap:round; stroke-linejoin:round;
}
/* to samo okrążenie na finale — odpalane wjazdem kafla, nie hoverem.
   Reguła siedzi pod html.js, bo bez JS klasa .is-in nigdy nie przyjdzie
   i linia zostałaby schowana na zawsze. */
html.js .trk__line{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.1s var(--ease-in-out) .25s;
}
html.js .gpfinal.is-in .trk__line{ stroke-dashoffset:0; }

@media (max-width:1040px){
  .gpgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .gpfinal{ grid-template-columns:minmax(0,1fr); }
  .gpfinal__map{ order:-1; }
  .gpfinal__map svg{ max-width:300px; }
}
@media (max-width:560px){
  .gpgrid{ grid-template-columns:minmax(0,1fr); }
  .gp__map{ min-height:104px; }
  .gp__map svg{ max-width:190px; }
}


/* ==========================================================================
   8 · FINAŁ
   ========================================================================== */

.section--final{
  background:var(--black);
  color:var(--paper);
  overflow:hidden;
}
.final__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 70% at 88% 0%, rgba(225,6,0,.28) 0%, transparent 62%),
    repeating-linear-gradient(
      var(--skew, -8deg),
      transparent 0 62px,
      rgba(255,255,255,.018) 62px 64px
    );
}
.section--final .wrap{ position:relative; z-index:1; }

/* dwie kolumny: po lewej zdanie i zajawka, po prawej karta z danymi —
   inaczej treść siedzi na połowie szerokości, a druga połowa świeci pustką */
.final__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,88px);
  align-items:start;
}

/* nagłówek siedzi w lewej kolumnie, więc oddech pod nim jest mniejszy
   niż w sekcjach, gdzie ciągnie się przez całą szerokość */
.final__grid .shead{ margin-bottom:clamp(22px,2.8vw,34px); }

.final__lead{
  font-size:clamp(19px,2.4vw,30px);
  line-height:1.42;
  color:var(--white);
  margin-bottom:clamp(26px,3.4vw,38px);
}
.final__lead b{ color:var(--red); font-weight:700; }

/* karta danych — półprzezroczysta, żeby czerwona poświata sekcji przez nią szła */
.final__panel{
  border:1px solid #1c1c24;
  border-radius:3px;
  background:rgba(11,11,15,.6);
}
.final__panel-k{
  font-size:9px; color:var(--red); font-weight:700;
  padding:clamp(15px,1.8vw,19px) clamp(16px,2vw,24px);
  border-bottom:1px solid #1c1c24;
}
.final__row{
  display:grid;
  grid-template-columns:clamp(64px,7vw,88px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px); align-items:baseline;
  padding:clamp(13px,1.5vw,17px) clamp(16px,2vw,24px);
  border-bottom:1px solid #1c1c24;
}
.final__row:last-child{ border-bottom:0; }
.final__row dt{ font-size:9px; color:#75757f; }
.final__row dd{
  margin:0;
  font-size:clamp(14px,1.4vw,17px); font-weight:700;
  color:var(--white);
}
.final__row dd i{ font-style:normal; font-weight:400; color:#9a9aa4; }
.final__row dd.is-tba{ font-size:11px; font-weight:700; color:var(--red); }

.final__tease{
  display:inline-grid; gap:8px;
  padding:clamp(20px,2.6vw,28px) clamp(24px,3vw,36px);
  border:1px solid var(--red);
  border-radius:2px;
  background:linear-gradient(120deg, rgba(225,6,0,.16), rgba(225,6,0,0));
}
.final__tease span{ font-size:10px; color:var(--red); font-weight:700; }
.final__tease b{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:clamp(17px,2.2vw,24px);
  transform:skewX(var(--skew)); transform-origin:left;
  color:var(--white);
  text-transform:uppercase; letter-spacing:-.01em;
}


@media (max-width:900px){
  .final__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(28px,5vw,40px); }
}


/* ==========================================================================
   9 · ZESPOŁY
   ========================================================================== */

/* 11 zespołów nie wypełnia siatki równo — linie rysują same karty
   (box-shadow w szczelinie), więc pusta komórka zostaje czarna,
   zamiast świecić tłem kontenera. */
.teams{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  background:var(--black);
  border:1px solid #1c1c24;
}

.team{
  --tc:var(--red);                 /* barwa zespołu; nadpisywana niżej per [data-t] */
  background:var(--black);
  box-shadow:0 0 0 1px #1c1c24;
  padding:clamp(20px,2.4vw,28px);
  position:relative;
  overflow:hidden;                 /* przycina numer wystający poza kartę */
}

/* poświata w barwach zespołu — kolor niesie sam gradient,
   krycie trzyma go grubo poniżej progu, na którym zaczyna walczyć z czerwienią GP */
.team::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(115% 85% at 100% 0%, var(--tc) 0%, transparent 60%);
  opacity:.13;
  pointer-events:none;
}

/* numer startowy w tle zamiast logo zespołu — patrz uwaga w README */
.team::after{
  content:attr(data-n);
  position:absolute; right:-.04em; bottom:-.30em;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(92px,10vw,140px); line-height:1;
  color:var(--tc); opacity:.085;
  transform:skewX(var(--skew));
  pointer-events:none; user-select:none;
}

.team > *{ position:relative; z-index:1; }   /* treść nad tłem */

.team__head{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid #1c1c24;
}
.team__no{
  font-size:11px; font-weight:700; color:var(--tc);
  flex:none;
}

/* --------------------------------------------------------------
   Barwy zespołów sezonu 2026 — jedna wartość na zespół.
   Dobrane pod ciemne tło: liczy się rozpoznawalność i to, żeby
   sąsiadujące karty dało się od siebie odróżnić.
   -------------------------------------------------------------- */
.team[data-t="audi"]        { --tc:#8FA3B0; }  /* tytan — debiutant, do weryfikacji */
.team[data-t="ferrari"]     { --tc:#E8002D; }  /* Rosso Corsa */
.team[data-t="racingbulls"] { --tc:#6692FF; }
.team[data-t="williams"]    { --tc:#64C4FF; }
.team[data-t="alpine"]      { --tc:#FF87BC; }  /* róż mocniej odróżnia niż firmowy błękit */
.team[data-t="cadillac"]    { --tc:#C9A227; }  /* złoto — debiutant, źródła niezgodne */
.team[data-t="haas"]        { --tc:#D0D3D6; }
.team[data-t="mclaren"]     { --tc:#FF8000; }  /* papaya */
.team[data-t="redbull"]     { --tc:#3671C6; }
.team[data-t="astonmartin"] { --tc:#229971; }
.team[data-t="mercedes"]    { --tc:#27F4D2; }  /* Petronas teal */
.team__name{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:clamp(17px,2vw,22px);
  line-height:1.05; letter-spacing:-.02em;
  text-transform:uppercase;
  transform:skewX(var(--skew)); transform-origin:left;
  color:var(--white);
}
.team__line{ display:grid; gap:14px; }

/* --- zawodnik --- */
.drv{ display:flex; }

/* cały wiersz jest linkiem do kanału — klikalne jest zdjęcie, ksywka
   i podpis platformy, a nie sam tekścik pod spodem */
.drv__link{
  display:flex; align-items:center; gap:14px;
  width:100%; min-width:0;
}

.drv__ph{
  position:relative; flex:none;
  width:clamp(44px,5vw,54px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:#16161d;
  display:grid; place-items:center;
}
/* inicjały pod spodem — widoczne, gdy nie ma jeszcze zdjęcia */
.drv__ph::before{
  content:attr(data-i);
  font-family:'Archivo Black', sans-serif;
  font-size:14px; letter-spacing:.02em;
  color:#3d3d47;
  transform:skewX(var(--skew));
}
/* obwódka nad zdjęciem — inaczej ciemne kadry zlewają się z tłem karty */
.drv__ph::after{
  content:''; position:absolute; inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events:none;
  transition:box-shadow .25s ease;
}

.drv__ph img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;               /* Safari bywa nieszczelny na overflow+transform */
}

.drv__txt{ display:grid; gap:2px; min-width:0; }

.drv__nick{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:clamp(14px,1.5vw,17px);
  line-height:1.1; letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--white);
  transform:skewX(var(--skew)); transform-origin:left;
  justify-self:start;
  overflow-wrap:anywhere;
  transition:color .25s ease;
}

.drv__name{ font-size:12.5px; color:#8d8d97; line-height:1.3; }

/* kanał na żywo — mikro-podpis pod nazwiskiem. Barwa marki wchodzi dopiero
   na hover: przy 22 kafelkach stała zieleń Kicka i fiolet Twitcha biłyby się
   z barwami zespołów, a te niosą tu podział na drużyny */
.drv__live{
  display:inline-flex; align-items:center; gap:6px;
  justify-self:start;
  margin-top:3px;
  font-size:10px; letter-spacing:.12em;
  color:#6b6b76;
  transition:color .25s ease;
}
.drv__live svg{
  width:11px; height:11px; flex:none;
  fill:currentColor;
}

/* hover na dowolnym kawałku wiersza: ksywka na czerwień GP, podpis na barwę
   platformy, obwódka zdjęcia mocniej — jeden gest, trzy sygnały */
.drv__link:hover .drv__nick{ color:var(--red); }
.drv__link:hover .drv__live--tw{ color:#9146FF; }    /* Twitch purple */
.drv__link:hover .drv__live--kick{ color:#53FC18; }  /* Kick green */
.drv__link:hover .drv__ph::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

/* komplet <symbol> dla znaczków platform — nigdy nie rysuje się sam */
.sprite{ display:none; }


/* ==========================================================================
   10 · PATRONI
   ========================================================================== */

/* linie rysują same kafle (box-shadow w szczelinie) — przy pięciu patronach
   siatka zostawia wolne komórki, a te mają zostać czarne, nie świecić tłem */
.patrons{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  background:var(--black);
  border:1px solid #1c1c24;
}
.patron{
  background:var(--black);
  box-shadow:0 0 0 1px #1c1c24;
  min-height:150px;
  display:grid; place-items:center; align-content:center; gap:16px;
  grid-template-rows:48px auto;   /* wspólny pas na znak — podpisy stoją w jednej linii */
  padding:30px 24px;
  transition:background .4s ease;
}
.patron:hover{ background:#101017; }

.patron__logo{
  max-height:44px; width:auto;
  opacity:.82;
  transition:opacity .4s ease, transform .4s var(--ease-out);
}
.patron:hover .patron__logo{ opacity:1; transform:scale(1.05); }

/* wyrównanie wagi optycznej — każdy znak ma inne proporcje */
.patron__logo--igie{ max-height:46px; }
.patron__logo--logi{ max-height:26px; }
.patron__logo--mcl{ max-height:22px; }
.patron__logo--yumisu{ max-height:40px; }
.patron__logo--koler{ max-height:42px; }    /* w znaku siedzi jeszcze podpis „german design" */

/* znak słowny na czas braku logotypu — chowa się, gdy plik faktycznie wstanie */
.patron__word{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:clamp(20px,2.3vw,26px);
  line-height:1; letter-spacing:-.02em; text-transform:uppercase;
  transform:skewX(var(--skew));
  color:var(--paper); opacity:.82;
  transition:opacity .4s ease, transform .4s var(--ease-out);
}
.patron:hover .patron__word{ opacity:1; transform:skewX(var(--skew)) scale(1.05); }
.patron__logo + .patron__word{ display:none; }

/* kafel jest linkiem — podpis idzie w czerwień razem z rozjaśnieniem
   znaku, żeby hover czytał się jako jeden gest na całym kaflu */
.patron__k{ font-size:9px; color:#5e5e68; transition:color .3s ease; }
.patron:hover .patron__k{ color:var(--red); }


/* ==========================================================================
   11 · POWTÓRKI
   ========================================================================== */

/* ten sam kafel co w formacie, tylko klikalny — siatka, ramki i czerwona
   belka na hoverze lecą z .cards/.card. Czerwień YouTube (#FF0000) jest
   praktycznie czerwienią GP, więc znaczek nie dostaje własnej barwy jak
   Twitch i Kick przy zawodnikach: na hoverze idzie w kolor sekcji */
/* cztery rundy = cztery kolumny, tak jak w terminarzu i z tymi samymi
   progami. Auto-fit z .cards zostawiałby przy trzech kolumnach pustą
   czwartą komórkę — dokładnie ten przypadek, którego siatka rund unika */
.cards--replays{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1040px){
  .cards--replays{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .cards--replays{ grid-template-columns:minmax(0,1fr); }
}

.replays__lead{
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.55; color:#9a9aa4;
  max-width:52ch;
  margin-bottom:clamp(26px,3vw,38px);
}

.card--replay{
  display:grid; align-content:start;
  padding:0;                       /* miniatura idzie na całą szerokość kafla */
}
/* belka .card::before rysuje się przed miniaturą w drzewie, a ta jest
   pozycjonowana — bez z-index chowałaby się pod kadrem */
.card--replay::before{ z-index:2; }

.replay__thumb{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; background:#101017;
}
/* kadry z YouTube są głośne — na spoczynku przygaszone, pełny kolor
   dopiero pod kursorem, żeby cztery naraz nie rozbijały sekcji */
.replay__thumb img{
  width:100%; height:100%; object-fit:cover;
  opacity:.72;
  transition:opacity .4s ease, transform .6s var(--ease-out);
}
.card--replay:hover .replay__thumb img{ opacity:1; transform:scale(1.04); }
/* na dotyku nie ma czego odsłaniać hoverem — kadry od razu w pełnym kolorze */
@media (hover:none){
  .replay__thumb img{ opacity:1; }
}

.replay__play{
  position:absolute; inset:0; margin:auto;
  width:clamp(44px,4.4vw,54px); aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(11,11,15,.66);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background .3s ease, transform .35s var(--ease-out), box-shadow .3s ease;
}
.replay__play svg{
  width:38%; height:38%; fill:var(--white);
  margin-left:8%;                  /* trójkąt optycznie na środku koła */
}
.card--replay:hover .replay__play{
  background:var(--red); transform:scale(1.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}

.replay__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,24px);
}
.replay__foot .card__k{ margin-bottom:0; color:var(--white); }

.card__go{
  display:inline-flex; align-items:center; gap:9px;
  justify-self:start;
  font-size:10px; font-weight:700; color:#75757f;
  transition:color .25s ease;
}
.card__go svg{ width:14px; height:14px; flex:none; fill:currentColor; }
.card__go i{ font-style:normal; transition:transform .25s var(--ease-out); }
.card--replay:hover .card__go{ color:var(--red); }
.card--replay:hover .card__go i{ transform:translate(2px,-2px); }


/* ==========================================================================
   12 · STOPKA
   ========================================================================== */

.foot{
  border-top:1px solid #1c1c24;
  padding-block:clamp(44px,6vw,72px);
  background:var(--black);
}
.foot__inner{ display:grid; justify-items:center; gap:20px; text-align:center; }
.foot__logo{ width:min(320px, 70vw); opacity:.92; }
.foot__host{ font-size:10px; color:#75757f; }
.foot__host b{ color:var(--white); font-weight:700; }
.foot__note{ font-size:10px; color:#75757f; }
.foot__copy{ font-size:9px; color:#43434d; }
.foot__credit{ font-size:8px; color:#33333c; margin-top:10px; }


/* ==========================================================================
   13 · WEJŚCIA PRZY SCROLLU
   ========================================================================== */

html.js [data-io]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--io-d, 0ms);
}
html.js [data-io].is-in{ opacity:1; transform:none; }


/* ==========================================================================
   14 · OGRANICZONY RUCH
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .lights{ display:none !important; }

  .hero__title .line__in{ transform:none !important; }
  .hero__title .line::after{ display:none; }
  .reveal, [data-io]{ opacity:1 !important; transform:none !important; }
  .trk--draw{ display:none; }
  .gp:hover .gp__map{ color:var(--red); }
  html.js .trk__line{ stroke-dasharray:none; stroke-dashoffset:0; transition:none; }
  .hero__canvas{ display:none; }
  .ticker__track{ animation:none; }
}