/* ============================================================================
   css-v102: MAŁPA ASCII v4 + LICZNIK NAŁADOWANIA + POŚWIATA
   v102 (2026-09-20): nagroda 100% (`rm-surge`) ma w jasnym motywie własną wersję
   (`rm-surge-light`) — bez dociągania do czerni (patrz komentarz przy keyframes);
   licznik `is-full` w light = czerwony sygnałowy, nie `--fg` (czerń).
   v101 (2026-09-20): kolory ładowania i oczu przeszły na tokeny motyw-zależne
   (`--mk-hot` / `--mk-peak` / `--mk-eye` w tokens.css) — w jasnym motywie
   ładowanie szło w CZERŃ (--fg), a oczy były prawie czarne; teraz ładowanie
   idzie w żar (czerwień → ciepły brzoskwin), oczy są białe.
   Źródło 1:1: Open Design `brand/86f3dcf6-9d6d-4333-8b54-3ccbec7fdc6a/index-webgl-v4.html`
   (art w `partials/ascii-monkey.hbs`, silnik w `assets/js/ascii-monkey.js`).
   Mapowanie tokenów OD → witryna: --red → --accent, --red-bright → --accent-bright,
   --mon → --fg, --rm-scale → --mk-scale.
   Zmiany względem źródła: brak przesunięcia `left:3.6em` (w OD centruje małpę pod
   wordmarkiem — u nas nie ma wordmarku), jedno źródło poświaty dla wszystkich kontekstów.
   ============================================================================ */

.monkey-stage {
  --mk-scale: clamp(0.16rem, min(0.98vw, 0.65vh), 0.65rem);
  position: relative; min-width: 0;
  display: flex; justify-content: center;
  font-size: var(--mk-scale);
  transform: translate3d(0, 0, 0);
}
.art-wrap {
  position: relative; width: max-content; min-width: 0;
  will-change: transform;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.monkey-stage .ascii-monkey {
  position: relative; left: 0;
  margin: 0; font-family: var(--font-mono); font-weight: 700;
  font-size: 1em; line-height: 1.04; white-space: pre; text-align: left;
  width: max-content; flex-shrink: 0; user-select: none;
  background-image: linear-gradient(180deg,
    var(--accent-bright) 0%,
    var(--accent) 55%,
    color-mix(in oklch, var(--accent) 78%, black) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent-bright) 36%, transparent));
}
/* Oczy: tylko one zostają jasne (reszta twarzy w gradiencie marki).
   --mk-eye = motyw-zależne (dark: --fg/krem, light: biel — w light --fg jest
   czarne i oczy gasły). Fallback dla plików bez tokenów (kopia zaślepki). */
.monkey-stage .ascii-monkey .e {
  background-image: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--mk-eye, var(--fg)); -webkit-text-fill-color: var(--mk-eye, var(--fg));
}
/* Bez `transition` na glifach — celowe: 3639 glifów w ciągłym przemalowaniu (pomiar OD:
   hover 116,9% → 81,1% rdzenia CPU). Kolor stopnia zmienia się skokowo i tak. */
.monkey-stage .ascii-monkey .g { transition: none; }

/* ── Poświata pod małpą (rdzeń na wysokości oczu, ~42% sylwetki) — jedno źródło ─────── */
.monkey-stage .ascii-monkey::before {
  content: "";
  position: absolute; z-index: -1;
  top: 42%; left: 52%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side at 50% 50%,
    color-mix(in oklch, var(--accent) 24%, transparent) 0%,
    color-mix(in oklch, var(--accent) 16%, transparent) 24%,
    color-mix(in oklch, var(--accent) 9%, transparent) 44%,
    color-mix(in oklch, var(--accent) 4%, transparent) 62%,
    transparent 80%);
  pointer-events: none;
}

/* ── Licznik naładowania `// %` ─────────────────────────────────────────────────────── */
.monkey-stage .fx-meter {
  position: absolute; right: 0; top: -1.7em;
  font-family: var(--font-mono);
  /* Witryna: licznik mniejszy i wyrównany do małpy — mnożnik 1,5 (było 2,1) sprawia, że przy
     14 klockach paska LEWA krawędź wpada w czubek 3. kosmyka (kolumna ~118 ze 158 szerokości
     artu), a prawa zostaje przy krawędzi artu. `right: 0` bez zmian. */
  font-size: calc(var(--mk-scale) * 1.5);
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none; user-select: none; white-space: pre;
  text-shadow: 0 0 10px color-mix(in oklch, var(--accent-bright) 35%, transparent);
}
/* Licznik: przy 0% niewidoczny, pojawia się, gdy wartość rośnie lub opada (`is-on` z silnika,
   `is-full` = 100% z podświetleniem). Miękkie wejście/wyjście daje `transition: opacity`. */
.monkey-stage .fx-meter.is-on { opacity: 0.72; }
.monkey-stage .fx-meter.is-full {
  opacity: 1; color: var(--fg);
  text-shadow: 0 0 12px color-mix(in oklch, var(--accent-bright) 75%, transparent),
               0 0 28px color-mix(in oklch, var(--accent-bright) 45%, transparent);
}
/* Jasny motyw: przy 100% licznik nie może lecieć w `--fg` — w light to CZARŃ
   (#1f1e1c), czyli ten sam błąd co błysk bryły. „Pełny" czytamy mocną czerwienią
   sygnałową (--accent-bright = #cc1c0b, AA) + istniejącą poświatą. */
[data-theme="light"] .monkey-stage .fx-meter.is-full { color: var(--accent-bright); }

/* ── Nagroda 100%: dociągnięcie → błysk → osiadanie (kontrast, nie jasność) ─────────── */
.art-wrap.is-reward > #art { animation: rm-surge 2400ms var(--ease-out) 1; }
@keyframes rm-surge {
  0%   { filter: brightness(1); }
  11%  { filter: brightness(0.45); }
  26%  { filter: brightness(0.50); }
  36%  { filter: brightness(2.10); }
  52%  { filter: brightness(1.38); }
  70%  { filter: brightness(1.10); }
  100% { filter: brightness(1); }
}
/* Jasny motyw: TEN SAM rytm (wyciszenie → błysk → osiadanie), ale bez CZERNI
   (Konrad 20.09.2026: „małpa błyska na kolor czarny"). Na papierze `brightness(0,45)`
   to duża ciemna plama — zmierzone na klatce 264 ms: glify schodziły do Oklab L 0,28–0,35,
   czyli CIEMNIEJ niż najciemniejszy odcień korpusu w spoczynku (~0,42). Tu wyciszenie jest
   płytkie (0,88) i ODbarwione (saturate 0,70) — odcień „odpuszcza" zamiast czernieć
   (min 0,39 / p1 0,47, czyli w zakresie kolorów spoczynku), a błysk idzie w biel jak
   w dark (36% = 1,90). Głębiej NIE schodzimy również dlatego, że od 20.09 szczyt ładowania
   w light to głęboki karmazyn #B00000 (soczysta czerwień) — mocniejsze przygaszenie
   zepchnęłoby go w okolice 0,30, czyli w to, co Konrad zgłaszał jako „błysk na czarno".
   Testowane i odrzucone: brak wyciszenia (sam rozbłysk = gubi pierwszą fazę rytmu,
   która jest sygnaturą dark) i przygaszenie bez odbarwienia (masa dalej ciemna). */
[data-theme="light"] .art-wrap.is-reward > #art { animation: rm-surge-light 2400ms var(--ease-out) 1; }
@keyframes rm-surge-light {
  0%   { filter: brightness(1) saturate(1); }
  11%  { filter: brightness(0.88) saturate(0.70); }
  26%  { filter: brightness(0.90) saturate(0.76); }
  36%  { filter: brightness(1.90) saturate(1.15); }
  52%  { filter: brightness(1.42) saturate(1.08); }
  70%  { filter: brightness(1.12) saturate(1.03); }
  100% { filter: brightness(1) saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
  .monkey-stage .ascii-monkey .g { transition: none !important; }
  .monkey-stage .fx-meter { display: none !important; }
  .art-wrap.is-full > #art, .art-wrap.is-reward > #art { animation: none !important; }
}

/* Mobile: art v4 jest szerszy (204 znaki) niż poprzedni (189) — przy 320/390 px
   przelewał stronę 404 o 4-9 px (pomiar: box 362 px przy viewport 358 px). */
@media (max-width: 640px) {
  .monkey-stage { --mk-scale: clamp(0.14rem, min(0.9vw, 0.62vh), 0.36rem); }
}

/* ── Miejsce na licznik nad małpą ───────────────────────────────────────────────────────
   Wrappery małpy na /oferta/ i /o-nas/ mają `overflow: hidden` (chroni przed przelewem
   szerokiego artu), a licznik wisi `top: -1.7em` NAD artem — bez paddingu był obcinany
   (zmierzone: rect licznika istniał na -20 px, ale nie był widoczny). */
.oferta-v2 .oferta-ascii, .dlaczego-ascii,
.pd-feature .oferta-ascii, .pd-feature .dlaczego-ascii { padding-top: 2.6rem; }
@media (max-width: 640px) { .oferta-v2 .oferta-ascii, .dlaczego-ascii { padding-top: 2rem; } }

/* ── Skala per kontekst = DOKŁADNIE ta sama wartość, co font-size artu ────────────────────
   Art na /oferta/ i /o-nas/ jest skalowany własnymi clampami z product.css, a bazowe
   `--mk-scale` (5,85 px @1440) jest wtedy za duże — licznik wychodził 1,77× artu zamiast 1,5×.
   Te bliźniaki trzymają `--mk-scale` równo z rozmiarem artu, więc licznik (1,5 em) jest
   zawsze 1,5× artu, a `right: 0` + 14 klocków daje lewą krawędź w czubku 3. kosmyka (kol. ~118/158). */
.oferta-ascii .monkey-stage, .dlaczego-ascii .monkey-stage {
  --mk-scale: clamp(0.24rem, min(0.55vw, 0.62vh), 0.44rem);
}
.pd-feature .oferta-ascii .monkey-stage, .pd-feature .dlaczego-ascii .monkey-stage {
  --mk-scale: clamp(0.2rem, min(0.5vw, 0.55vh), 0.4rem);
}
@media (max-width: 640px) {
  .oferta-v2 .oferta-ascii .monkey-stage { --mk-scale: 0.2rem; }
}