/* ==========================================================================
   WILCZY ŁUP — PRÓBKA WIZUALNA HUBU, koncepcja B „ALFA MÓWI”
   Materiał roboczy do wyboru kierunku (noindex). Nie jest to build produkcyjny.

   Tokeny, fonty i geometria: kopia 1:1 z wilczylup-site/src/css/site.css
   (sekcje 1–3 tamtego pliku). Repo strony NIE jest edytowane.

   PARTYTURA CHOREOGRAFII (co, kiedy, skąd, jaką krzywą) — wg
   KONCEPCJA_NARRACJI_hub.md §B2. Zasada: scroll steruje, nie przejmuje.
   Narracja (teksty, wejścia Alfy) = TRIGGER przez IntersectionObserver (czas).
   Jedyna rzecz podpięta pod POZYCJĘ scrolla = poziomy pas polowania w S3
   (metafora przestrzenna) — CSS scroll-driven animations, fallback rAF.

   S1 SPOTKANIE   0 ms   Alfa 09 SIEDZI: opacity 0→1 + scale .94→1 (600 ms, expo-out)
                          — na czerni widać najpierw same białe oczy i zęby
                  520 ms  biała płaszczyzna: scaleY 0→1 od dołu (620 ms) — sylwetka
                          „wychodzi z czerni” i czyta się jako czerń na bieli
                  820 ms  display: opacity + translateY 18→0 (560 ms)
   S2 DOWÓD       0 ms   KV sklejka pełnoekranowo: scale 1.06→1 + opacity (640 ms)
                          — „siada” na stronie. JEDEN beat, bo scena ma teraz jeden
                          komunikat: sam kadr. Display „NIE ŻARTUJĘ…” usunięty
                          (brand-guardian poz. 10), więc nie ma czego staggerować.
   S3 POLOWANIE   scroll  pas SKRADA→BIEG→ŁAPIE: translateX 0→-62% (linear, scrub)
                          (BIEG podmieniony na hi-res z rastra kanonicznego
                          wilk_rysunkowy_06, 900 px; SKRADA i ŁAPIE nadal z arkusza
                          keyed 600/507 px — brak źródła >600 px, patrz raport)
                  scroll  linia 1 gaśnie 50–60 %, linia 2 wchodzi 55–66 % (przełącznik,
                          nie smuga); ŁAPIE: scale 1→1.35 na 70–92 % = „jedno uderzenie”
                          UWAGA: do 2026-09-08 ta oś w ogóle nie grała (zastygała na
                          100 %) przez `overflow-x:hidden` na html/body — patrz §4.
                          Zmierzone po naprawie: pas 0→-488 px, hit 1→1,35.
   S4 TWOJA CZĘŚĆ 0 ms   Alfa 01 STOI opacity (600 ms)
                  520 ms  biała płaszczyzna: scaleX 0→1 od lewej (620 ms)
                  820 ms  display, 960 ms podpis (stagger 140 ms)
   S5 MISKA       0 ms   fotografia scale 1.04→1 + opacity; 200 ms display;
                  320/420/520 ms trzy linie faktów (stagger 100 ms — fala)
                          Pieczęć 100/0 USUNIĘTA z tej sceny (compliance poz. 2).
   S6 WYZWANIE    0 ms   Alfa 10 TROP opacity + translateY 22→0 (600 ms)
                  340 ms  display (560 ms)
                  480 ms  pieczęć 100/0 (nowy, trzeci beat sceny; stagger 140 ms —
                          ten sam krok co para display+podpis w S4). Pełne brzmienie,
                          szerokość min(78vw,320px) ⇒ wysokość liter ≥15 px na 375 px.
   MANIFEST/KAFLE trigger, stagger 90 ms; stopka bez animacji.

   Budżet: wyłącznie transform + opacity. Zero animacji właściwości layoutu.
   prefers-reduced-motion i brak JS: wszystko widoczne, statyczne, kompletne.
   ========================================================================== */

/* ---------- 1. FONTY SELF-HOSTED (kopia 1:1 z wilczylup-site) ---------- */

@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('../fonts/bigshouldersdisplay-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('../fonts/bigshouldersdisplay-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/worksans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/worksans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 2. TOKENY (1:1) ---------- */

:root{
  --wl-orange:#F1611F;
  --wl-lime:#9ABF38;
  --wl-sky:#59B1DA;
  --wl-magenta:#D787B0;
  --wl-black:#000000;
  --wl-white:#FFFFFF;
  --wl-muted:#8A857B;
  --wl-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --wl-body:"Work Sans",system-ui,-apple-system,sans-serif;
  --wl-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wl-rule:2px solid #000000;
  --wl-accent:var(--wl-orange);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

/* ---------- 3. KANON: promień 0 wszędzie, bez cieni/blasków ---------- */

*,*::before,*::after{border-radius:0 !important;box-sizing:border-box;}
body *:not(:focus-visible){box-shadow:none;text-shadow:none;}
:focus-visible{outline:3px solid var(--wl-accent);outline-offset:2px;}
img{border-radius:0 !important;max-width:100%;display:block;}

/* ---------- 4. BAZA ---------- */

html{-webkit-text-size-adjust:100%;overflow-anchor:none;}
/* `clip`, nie `hidden`: `overflow-x:hidden` robi z <html>/<body> KONTENER
   SCROLLA, a wtedy view-timeline w S3 mierzy postęp względem czegoś, co się
   nie przewija — oś zastyga na 100% i pas polowania nigdy nie rusza
   (zdiagnozowane 2026-09-08 w Chrome 140). `overflow-x:clip` przycina bez
   tworzenia scrollportu. */
html,body{overflow-x:clip;}
body{
  margin:0;background:var(--wl-white);color:var(--wl-white);
  font-family:var(--wl-body);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--wl-white);color:var(--wl-black);
  padding:12px 16px;font-family:var(--wl-mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
}
.skip:focus{left:0;}

.display{
  font-family:var(--wl-display);font-weight:900;text-transform:uppercase;
  line-height:0.92;letter-spacing:-0.01em;margin:0;overflow-wrap:break-word;
  font-size:clamp(2.5rem,1.5rem + 4.6vw,5rem);
  max-width:13ch;
}
.sub{
  font-size:1.0625rem;line-height:1.45;max-width:32ch;margin-top:14px;
}

/* plakietka w rogu — jedyny stały element marki (Koncepcja §7).
   Sticky w obrębie sekwencji scen: znika, gdy zaczyna się manifest, żeby nie
   nachodziła na tekst. Kontener ma wysokość 0 — nie zajmuje miejsca w układzie. */
.mark-holder{position:sticky;top:0;height:0;z-index:40;}
.mark{position:absolute;top:12px;left:12px;background:var(--wl-white);padding:6px;}
.mark img{width:34px;height:auto;}

/* ---------- 5. SCENA ---------- */

.scene{
  position:relative;min-height:100svh;overflow:clip;
  display:grid;align-content:center;
  padding:74px 20px 64px;
}
.scene__inner{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;}

/* biała płaszczyzna, która „zapala światło” w scenach czarnych */
.veil{position:absolute;inset:0;background:var(--wl-white);z-index:0;transform-origin:bottom center;}
.veil--x{transform-origin:left center;}

/* wejścia narracyjne (trigger, nie scrub) */
.js .fx{
  transition:opacity .58s var(--ease-out) var(--d,0ms), transform .58s var(--ease-out) var(--d,0ms);
}
.js .scene:not(.on) .fx,
.js .manifest:not(.on) .fx,
.js .tiles:not(.on) .fx{opacity:0;transform:translate3d(0,18px,0);}
.js .scene:not(.on) .alfa{transform:translate3d(0,10px,0) scale(0.94);}
.js .scene:not(.on) .kv,
.js .scene:not(.on) .bowl{transform:scale(1.05);}
.js .scene:not(.on) .veil{transform:scaleY(0);}
.js .scene:not(.on) .veil--x{transform:scaleX(0);}
.js .veil{transition:transform .62s var(--ease-out) 520ms;}

/* ---------- 6. B/S1 — SPOTKANIE ---------- */

.scene--meet{background:var(--wl-black);}
.scene--meet .scene__inner{display:grid;justify-items:center;gap:26px;}
.scene--meet .display{color:var(--wl-black);text-align:center;max-width:11ch;}
.alfa{margin:0;}
.alfa--sit img{width:min(64vw,300px);height:auto;}

/* ---------- 7. B/S2 — DOWÓD ---------- */

.scene--proof{background:var(--wl-black);padding:0;align-content:stretch;}
.scene--proof .scene__inner{display:grid;height:100svh;max-width:none;}
.display--onblack{color:var(--wl-white);}
.kv{margin:0;min-height:0;overflow:clip;display:grid;align-content:center;}
/* Odkąd scena nie ma nagłówka, KV jest JEDYNYM komunikatem — nie wolno go
   przyciąć. Na wąskim ekranie kadr pionowy (900×1358) przy `cover` ucinał
   dymek „ŚNI, ŻE JEST MNĄ”. Stąd `contain` na czerni sceny. */
.kv img{width:100%;height:100%;object-fit:contain;object-position:center;}

/* ---------- 8. B/S3 — CO MU SIĘ ŚNI (jedyny scrub) ---------- */

.scene--hunt{background:var(--wl-orange);color:var(--wl-black);padding:0;}
.js .scene--hunt{height:180svh;}
.hunt-sticky{
  position:relative;top:0;height:auto;min-height:100svh;
  display:grid;align-content:center;overflow:clip;padding:74px 0 64px;
}
.js .hunt-sticky{position:sticky;height:100svh;}
.scene--hunt .scene__inner{display:grid;gap:24px;padding:0 20px;}
.hunt-lines{display:block;}                 /* bez JS: dwie linie jedna pod drugą */
.js .hunt-lines{display:grid;}               /* z JS: nakładają się i podmieniają scrollem */
.hunt-line{color:var(--wl-black);max-width:12ch;}
.js .hunt-line{grid-area:1/1;}
html:not(.js) .hunt-line--2{margin-top:14px;}
html:not(.js) .hunt-band{flex-wrap:wrap;justify-content:center;}
.hunt-line--2{max-width:16ch;}
.hunt-band{display:flex;align-items:center;gap:min(9vw,64px);will-change:transform;}
.hunt-pose{width:min(64vw,320px);height:auto;flex:none;}
.hunt-pose--hit{transform-origin:center center;}

/* fallback: pozycja scrolla podana przez JS jako --p (0..1) */
.js .hunt-band{transform:translate3d(calc(var(--p,0) * -62%),0,0);}
.js .hunt-line--1{opacity:clamp(0,calc((0.60 - var(--p,0)) * 10),1);}
.js .hunt-line--2{opacity:clamp(0,calc((var(--p,0) - 0.55) * 10),1);}
.js .hunt-pose--hit{transform:scale(calc(1 + clamp(0,(var(--p,0) - 0.70) * 1.60,0.35)));}

/* progressive enhancement: natywna oś scrolla (Chrome/Edge 115+, Safari 26+) */
@supports (animation-timeline:view()){
  .js:not(.reveal) .scene--hunt{view-timeline-name:--hunt;view-timeline-axis:block;}
  .js:not(.reveal) .hunt-band{
    transform:none;animation:band-slide linear both;animation-timeline:--hunt;animation-range:contain 0% contain 100%;
  }
  .js:not(.reveal) .hunt-line--1{
    opacity:1;animation:line-out linear both;animation-timeline:--hunt;animation-range:contain 0% contain 100%;
  }
  .js:not(.reveal) .hunt-line--2{
    opacity:0;animation:line-in linear both;animation-timeline:--hunt;animation-range:contain 0% contain 100%;
  }
  .js:not(.reveal) .hunt-pose--hit{
    transform:none;animation:hit linear both;animation-timeline:--hunt;animation-range:contain 0% contain 100%;
  }
}
@keyframes band-slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-62%,0,0);}}
@keyframes line-out{0%,50%{opacity:1;}60%,100%{opacity:0;}}
@keyframes line-in{0%,55%{opacity:0;}66%,100%{opacity:1;}}
@keyframes hit{0%,70%{transform:scale(1);}92%,100%{transform:scale(1.35);}}

/* ---------- 9. B/S4 — TWOJA CZĘŚĆ ---------- */

.scene--yours{background:var(--wl-black);}
.scene--yours .scene__inner{display:grid;gap:28px;}
.scene--yours .display,.scene--yours .sub{color:var(--wl-black);}
.alfa--stand img{width:min(86vw,520px);height:auto;}
.stack{max-width:24ch;}

/* ---------- 10. B/S5 — CO JEST W MISCE ---------- */

.scene--bowl{background:var(--wl-black);}
.scene--bowl .scene__inner{display:grid;gap:22px;max-width:620px;}
.bowl{position:relative;margin:0;width:max-content;max-width:100%;}
.bowl > picture > img{width:auto;height:auto;max-height:40svh;max-width:100%;}
.bowl__alfa{position:absolute;left:8%;bottom:3%;width:30%;height:auto;}
.scene--bowl .display{max-width:12ch;}
.facts{display:grid;gap:10px;}
.facts li{
  font-size:0.9375rem;line-height:1.45;max-width:40ch;
  border-left:3px solid var(--wl-orange);padding-left:12px;color:var(--wl-white);
}

/* ---------- 11. B/S6 — WYZWANIE ---------- */

.scene--dare{background:var(--wl-orange);}
.scene--dare .scene__inner{display:grid;justify-items:start;gap:24px;}
.scene--dare .display{color:var(--wl-black);max-width:12ch;}
.alfa--trop img{width:min(92vw,620px);height:auto;}
.dare-stack{display:grid;justify-items:start;gap:26px;}

/* Pieczęć 100/0 — przeniesiona z S5. Szerokość dobrana pod warunek compliance:
   litery w rastrze mają 38/385 wysokości kadru, więc przy 292 px szerokości
   (78vw na 375 px) wychodzi ~15 px — powyżej wymaganych 13 px. */
.dare-seal{width:min(78vw,320px);height:auto;}

/* PRZEŁĄCZNIK ZAIMKA — sterowany atrybutem data-pronoun na <html> (patrz
   komentarz w index.html). Oba warianty są w DOM; display:none wycina
   niewybrany także z drzewa dostępności i z zaznaczania tekstu. */
:root[data-pronoun="mi"] .pr-nam,
:root[data-pronoun="nam"] .pr-mi{display:none;}

/* ---------- 12. MANIFEST ---------- */

.manifest{background:var(--wl-white);color:var(--wl-black);padding:64px 20px 60px;}
.manifest__inner{max-width:1120px;margin:0 auto;}
.manifest__text{
  font-family:var(--wl-body);font-weight:300;font-size:1.1875rem;line-height:1.5;
  max-width:34ch;margin:0 auto 0 0;
}

/* ---------- 13. KAFLE SEKCJI ---------- */

.tiles{
  background:var(--wl-white);color:var(--wl-black);
  padding:0 20px 56px;display:grid;gap:14px;max-width:1120px;margin:0 auto;
}
.tile{
  display:grid;gap:6px;text-decoration:none;
  border:var(--wl-rule);border-left:8px solid var(--wl-orange);
  padding:20px 18px 22px;background:var(--wl-white);
  transition:background .18s ease-out,color .18s ease-out;
}
.tile__name{
  font-family:var(--wl-display);font-weight:900;text-transform:uppercase;
  font-size:2rem;line-height:0.92;
}
.tile__sub{font-size:0.9375rem;line-height:1.45;max-width:36ch;}
.tile:hover,.tile:focus-visible{background:var(--wl-black);color:var(--wl-white);}

/* ---------- 14. STOPKA — sklep, jedna cicha linia ---------- */

.foot{background:var(--wl-white);border-top:1px solid #E4E0D8;padding:22px 20px 40px;}
.foot__shop{
  max-width:1120px;margin:0 auto;
  font-family:var(--wl-body);font-size:0.8125rem;color:var(--wl-muted);
}

/* ---------- 15. DESKTOP (żeby nie było brzydko) ---------- */

@media (min-width:800px){
  .scene{padding:96px 40px;}
  .mark{top:20px;left:20px;}
  .scene--meet .scene__inner{gap:34px;}
  .alfa--sit img{width:min(30vw,340px);}
  /* na szerokim ekranie kadr poziomy wypełnia scenę bez utraty dymka */
  .kv img{object-fit:cover;object-position:center 40%;}
  .scene--hunt .scene__inner,.hunt-sticky{padding-left:40px;padding-right:40px;}
  .hunt-pose{width:min(30vw,420px);}
  .scene--yours .scene__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;
  }
  .alfa--stand img{width:100%;max-width:560px;}
  .scene--yours .display{font-size:clamp(2.5rem,1.2rem + 3vw,3.75rem);max-width:none;}
  .stack{max-width:none;}
  .scene--bowl .scene__inner{
    max-width:1000px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;column-gap:48px;
  }
  .scene--bowl .bowl{grid-row:1/3;}
  .scene--bowl .bowl > picture > img{max-height:58svh;}
  .scene--bowl .display{align-self:end;}
  .scene--dare .scene__inner{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px;
  }
  .alfa--trop img{width:100%;max-width:620px;}
  .manifest{padding:96px 40px;}
  .manifest__text{font-size:1.375rem;max-width:44ch;}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 40px 88px;gap:18px;}
  .foot{padding:26px 40px 56px;}
}

/* ---------- 16. DOSTĘPNOŚĆ: reduced motion = kompletna strona statyczna ---------- */

@media (prefers-reduced-motion:reduce){
  .js .fx,
  .js .scene:not(.on) .fx,
  .js .manifest:not(.on) .fx,
  .js .tiles:not(.on) .fx,
  .js .scene:not(.on) .alfa,
  .js .scene:not(.on) .kv,
  .js .scene:not(.on) .bowl{opacity:1 !important;transform:none !important;transition:none !important;}
  .js .veil,.js .scene:not(.on) .veil,.js .scene:not(.on) .veil--x{transform:none !important;transition:none !important;}
  .js .scene--hunt{height:auto !important;}
  .js .hunt-sticky{position:static !important;height:auto !important;}
  .js .hunt-band{transform:none !important;flex-wrap:wrap;justify-content:center;}
  .js .hunt-line{opacity:1 !important;transform:none !important;}
  .js .hunt-lines{display:block;}
  .js .hunt-line--2{margin-top:14px;}
  .js .hunt-pose--hit{transform:none !important;}
  *,*::before,*::after{animation:none !important;scroll-behavior:auto !important;}
}

/* ---------- 17. HAK PODGLĄDU (?reveal=1) — tylko do zrzutów ekranu ---------- */

.reveal .fx{opacity:1 !important;transform:none !important;transition:none !important;}
.reveal .veil{transform:none !important;transition:none !important;}