/*
Theme Name: Jak głośna jest cisza
Theme URI: https://jakglosnajestcisza.pl
Template: evo-base
Author: EVO-CODE®
Description: Motyw potomny EVO Base dla bloga o psychologii i filozofii. Wnosi wyłącznie paletę „Świt", dwa kroje pisma i tło aurory; cała mechanika zostaje w motywie bazowym.
Requires at least: 6.4
Requires PHP: 8.1
Version: 2.1.0
Text Domain: jakglosnajestcisza
*/

/*
 * Ten plik zawiera wyłącznie to, czego theme.json nie potrafi wyrazić:
 * tło aurory, aureolę pod nagłówkami i kilka układów, które nie mają
 * odpowiednika w blokach.
 *
 * Wszystko, co da się opisać tokenami, siedzi w theme.json, bo tamten plik
 * przechodzi przez bramkę jakości EVO-WEB, a CSS nie.
 */

/* ===================================================================
   AURORA

   Siedem rozmytych plam na dwóch planach, mieszanych trybem mnożenia.
   Zmierzony koszt: 59,7 kl./s z aurorą, 60 bez. Blur rasteryzuje się raz,
   animowany jest wyłącznie transform, który idzie na kompozytor.

   Warstwa jest wstawiana przez functions.php, nie przez blok: to tło strony,
   a nie treść, i nie ma czego szukać w edytorze.
   =================================================================== */

:root {
  /* Chroma podniesiona o połowę wobec pierwszego przeniesienia palety.
     Przy 0,026-0,044 tło wychodziło prawie szare: kolor był w kodzie, ale nie
     na ekranie. Jasność zostaje wysoka, bo tekst ma być czytelny bez podkładu
     wszędzie poza nagłówkami, gdzie i tak działa aureola. */
  --jgjc-a1: oklch(0.780 0.115 248);
  --jgjc-a2: oklch(0.800 0.092 316);
  --jgjc-a3: oklch(0.790 0.104 232);
  --jgjc-a4: oklch(0.768 0.122 268);
  --jgjc-a5: oklch(0.812 0.098 30);
  --jgjc-a6: oklch(0.808 0.082 44);
  --jgjc-a7: oklch(0.776 0.110 280);
  /* Rozmycie i krycie aurory. To NIE jest miejsce na oszczędzanie: cała reszta
     strony jest cicha właśnie dlatego, że tło niesie kolor. */
  --jgjc-blur: 92px;
  --jgjc-aura-op: 1;
  --jgjc-e: cubic-bezier(.2, .85, .25, 1);
  --jgjc-cien: 0 1px 2px oklch(0.28 0.04 268 / .08), 0 10px 26px oklch(0.28 0.04 268 / .11);
  --jgjc-cien2: 0 2px 4px oklch(0.28 0.045 268 / .10), 0 22px 52px oklch(0.28 0.05 268 / .18);
  --jgjc-krawedz: inset 0 1px 0 oklch(1 0 0 / .80), inset 0 -1px 0 oklch(0.32 0.04 268 / .05);
}

/* clip, nie hidden: hidden na html tworzy kontekst przewijania i psuje
   position:sticky, a warstwa aurory celowo wychodzi poza kadr */
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }

.jgjc-aura {
  position: fixed;
  inset: -20% -10%;
  z-index: -2;
  pointer-events: none;
  filter: blur(var(--jgjc-blur)) saturate(1.12);

  /* AURORA WCHODZI PO TREŚCI, NIE PRZED NIĄ.

     Zmierzone: cała strona jest pobrana w 373 ms, a pierwsze rysowanie następuje
     dopiero po 1364 ms. Tysiąc milisekund, w których przeglądarka ma komplet
     danych i nic nie pokazuje.

     Powód: rozmycie o promieniu 92 px liczone na 1,8 megapiksela, czyli na
     powierzchni 1,4 raza większej od ekranu. Ta warstwa leży POD treścią, więc
     przeglądarka rasteryzuje ją, zanim namaluje pierwszą literę.

     Rozwiązanie nie polega na osłabieniu efektu, tylko na zmianie KOLEJNOŚCI:
     tekst pokazuje się natychmiast na czystym tle, a aurora dochodzi miękko
     w ciągu sekundy. Kto wchodzi, widzi stronę od razu i widzi, jak się
     rozświetla. To jest lepsze niż jedno i drugie naraz po sekundzie czekania. */
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1);
}
.jgjc-aura--gotowa {
  opacity: var(--jgjc-aura-op);
  /* Trzy rzeczy, bez których przewijanie szarpie:

     `translateZ(0)` wypycha warstwę na kompozytor, więc rozmycie rasteryzuje się
     RAZ, a nie przy każdej klatce przewijania. Bez tego przeglądarka traktuje
     blur jak zwykły efekt malowania i przelicza go w kółko.

     BEZ `isolation`. Zamknięcie trybu mnożenia wewnątrz warstwy odcina plamy
     od tła strony i zostają z nich zwykłe kółka: kolor jest w kodzie, a na
     ekranie tło robi się szare. Koszt przemalowania biorą na siebie
     `translateZ(0)` i `contain`, a nie odcięcie efektu.

     `contain: layout` mówi przeglądarce, że nic wewnątrz nie wpłynie na układ
     na zewnątrz. NIE `strict` i NIE `paint`: obie te wartości obcinają malowanie
     do prostokąta elementu, a plamy aurory celowo z niego wychodzą. Pierwsza
     wersja tej optymalizacji miała `strict` i zgasiła połowę tła. Oszczędzać
     wolno wszędzie poza miejscem, w którym mieszka cały efekt. */
  transform: translateZ(0);
  contain: layout;
}
.jgjc-aura i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
/* CZTERY SKALE, JEDEN MOTYW.

   Jedyna teza o fenomenologii DMT, która przeszła weryfikację adwersaryjną,
   to samopodobieństwo w SKOŃCZONEJ liczbie skal: praktycznie 3 do 5
   rozróżnialnych poziomów, nie nieskończoność. Stąd cztery, nie siedem
   przypadkowych plam.

   Każda skala jest około 2,3x mniejsza od poprzedniej i porusza się wolniej.
   Proporcja 2,3 jest decyzją estetyczną: krążąca w internecie wartość 2,5-3x
   nie ma potwierdzonego źródła i nie udaję, że ma.

   Ruch jest wolniejszy niż w pierwszej wersji (45-78 s zamiast 28-46 s), bo
   teza „ciągły ruch jest definicyjny" została ODRZUCONA. Struktura robi więcej
   niż ruch, a wolniejsze tło lepiej się czyta. */

/* skala 1: podstawa kadru */
.jgjc-aura .a { width: 62vw; height: 62vw; left: -14%; top: -18%;
  background: var(--jgjc-a1); animation: jgjc-d1 78s var(--jgjc-e) infinite alternate; }
.jgjc-aura .b { width: 58vw; height: 58vw; left: 54%;  top: -12%;
  background: var(--jgjc-a2); animation: jgjc-d2 71s var(--jgjc-e) infinite alternate; }

/* skala 2: /2,3 */
.jgjc-aura .c { width: 27vw; height: 27vw; left: 16%; top: 30%;
  background: var(--jgjc-a3); animation: jgjc-d3 62s var(--jgjc-e) infinite alternate; }
.jgjc-aura .d { width: 25vw; height: 25vw; left: 64%; top: 40%;
  background: var(--jgjc-a4); animation: jgjc-d4 58s var(--jgjc-e) infinite alternate; }

/* skala 3: /2,3 ponownie */
.jgjc-aura .e { width: 11vw; height: 11vw; left: 8%;  top: 66%;
  background: var(--jgjc-a5); animation: jgjc-d2 51s var(--jgjc-e) infinite alternate; }
.jgjc-aura .f { width: 10vw; height: 10vw; left: 78%; top: 22%;
  background: var(--jgjc-a6); animation: jgjc-d3 47s var(--jgjc-e) infinite alternate; }

/* skala 4: najmniejsza rozróżnialna */
.jgjc-aura .g { width: 4.5vw; height: 4.5vw; left: 40%; top: 54%;
  background: var(--jgjc-a7); animation: jgjc-d1 45s var(--jgjc-e) infinite alternate; }

/* Amplitudy ruchu też schodzą po skalach: mniejsza plama porusza się mniej,
   inaczej najmniejsza przelatywałaby przez pół ekranu i rozbijała wrażenie
   jednego motywu w kilku rozmiarach. */
@keyframes jgjc-d1 { to { transform: translate3d(7vw, 5vh, 0) scale(1.10); } }
@keyframes jgjc-d2 { to { transform: translate3d(-8vw, 6vh, 0) scale(1.08); } }
@keyframes jgjc-d3 { to { transform: translate3d(5vw, -5vh, 0) scale(1.12); } }
@keyframes jgjc-d4 { to { transform: translate3d(-4vw, -4vh, 0) scale(1.09); } }

/* Winieta i ziarno jako pseudoelementy body: trzy dodatkowe elementy w DOM
   nie były nikomu potrzebne. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background: radial-gradient(122% 92% at 50% 42%, transparent 40%,
    oklch(0.58 0.070 266 / .10) 70%,
    oklch(0.44 0.085 268 / .22) 100%);
}
body::after {
  /* BEZ `mix-blend-mode`. Tryb mieszania na warstwie `fixed` rozpiętej nad całą
     stroną zmusza przeglądarkę do trzymania całego dokumentu w jednej grupie
     blendowania i przemalowywania go przy każdej klatce przewijania. To był
     największy pojedynczy koszt w tym motywie.

     Efekt odtwarzamy kryciem dobranym tak, żeby ziarno było równie wyraźne jak
     przy mnożeniu. 0,05 było za mało i tło zrobiło się gładkie jak plastik;
     przy 0,11 wraca faktura, a koszt zostaje zerowy. */
  opacity: .11;
  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='0.42' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ===================================================================
   AUREOLA

   Rozmyty owal bieli pod nagłówkiem otwierającym. Bez niego tło pod tytułem
   bywa dowolnie ciemne, bo aurora się porusza, więc ten sam nagłówek raz
   czyta się dobrze, a raz ledwie.

   Zmierzone: bez aureoli podtytuł schodził do 3,39 przy progu 4,5, zależnie
   od fazy animacji. Z aureolą trzyma 5,68-5,81 niezależnie od fazy.

   Gradient MUSI wygasnąć wewnątrz pseudoelementu. Przy promieniu większym
   niż połowa pudełka tło urywa się na krawędzi i widać jasny prostokąt
   wklejony w aurorę.
   =================================================================== */

.jgjc-aureola {
  position: relative;
  isolation: isolate;
}
.jgjc-aureola::before {
  content: "";
  position: absolute;
  inset: var(--jgjc-au, -34% -42% -34%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44% 46% at 50% 50%,
    oklch(1 0 0 / .86) 0%,
    oklch(1 0 0 / .70) 42%,
    oklch(1 0 0 / .36) 70%,
    transparent 86%);
}

/* ===================================================================
   POWIERZCHNIE

   Karty są półprzezroczyste, żeby aurora przez nie prześwitywała. Biała płyta
   o pełnym kryciu wycina w tle dziurę i wygląda jak wklejka.
   =================================================================== */

.jgjc-karta {
  background: oklch(1 0 0 / .58);
  border: 1px solid var(--wp--preset--color--base-3);
  border-radius: 22px;
  box-shadow: var(--jgjc-cien), var(--jgjc-krawedz);
  transition: transform .35s var(--jgjc-e), box-shadow .35s var(--jgjc-e);
}
a.jgjc-karta:hover,
.jgjc-karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--jgjc-cien2), var(--jgjc-krawedz);
}

/* Zbliżenie zdjęcia w karcie: wejście długie i wytracające prędkość,
   powrót dwa razy szybszy. Ruch ma być zauważalny, ale nie nerwowy. */
.jgjc-karta figure,
.jgjc-karta .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 15px;
}
.jgjc-karta img {
  transition: transform 2.1s var(--jgjc-e);
}
.jgjc-karta:hover img {
  transform: scale(1.085);
  transition-duration: 1.05s;
}

/* ===================================================================
   TAGI

   Nie pigułki: trzy obwódki nad nagłówkiem zabierają uwagę temu, co w karcie
   najważniejsze. Same słowa, drobnym stopniem, rozdzielone kropką.
   =================================================================== */

.wp-block-post-terms {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast-2);
  font-weight: 560;
}
.wp-block-post-terms a {
  text-decoration: none;
  position: relative;
  transition: color .25s var(--jgjc-e);
}
.wp-block-post-terms a:hover {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wp-block-post-terms__separator {
  color: color-mix(in oklch, var(--wp--preset--color--contrast-2) 62%, transparent);
  margin: 0 5px;
}

/* ===================================================================
   REDUKCJA RUCHU

   Nie „mniej ruchu", tylko brak ruchu. Kto to włączył, zwykle ma powód
   medyczny, a nie estetyczny.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .jgjc-aura i {
    animation: none !important;
  }
  .jgjc-karta,
  .jgjc-karta img {
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ===================================================================
   TEMATY: ranking z paskami

   Nie chmura napisów o różnej wielkości: oko źle i wolno porównuje stopnie
   pisma. Pasek pokazuje proporcję od razu, liczba domyka ją dokładnie.
   =================================================================== */

.jgjc-tematy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 34px;
}
@media (max-width: 760px) {
  .jgjc-tematy { grid-template-columns: 1fr; }
}

.jgjc-temat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  padding: 10px 2px 11px 0;
  min-height: 26px;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.jgjc-temat__nazwa {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-2);
  transition: transform .3s var(--jgjc-e), color .22s var(--jgjc-e);
}
.jgjc-temat:hover .jgjc-temat__nazwa {
  transform: translateX(3px);
  color: var(--wp--preset--color--primary);
}
.jgjc-temat__liczba {
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  color: var(--wp--preset--color--contrast-2);
  font-variant-numeric: tabular-nums;
}
.jgjc-temat__tor {
  position: absolute;
  left: 0;
  right: 48px;
  bottom: -1px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in oklch, var(--wp--preset--color--base-3) 40%, transparent);
}
.jgjc-temat__pasek {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--wp--preset--color--primary),
    color-mix(in oklch, var(--wp--preset--color--primary) 52%, transparent));
  transform: scaleX(var(--u, 0));
  transform-origin: left;
  opacity: .9;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

/* Bez JS i przy redukcji ruchu paski stoją od razu w pełnej długości.
   Klasę --czekaja nadaje skrypt, więc jej brak znaczy „pokaż wszystko". */
.jgjc-tematy--czekaja .jgjc-temat__pasek { transform: scaleX(0); }
.jgjc-tematy--gotowe .jgjc-temat__pasek { transform: scaleX(var(--u, 0)); }

.jgjc-temat--rzadki { display: none; }
.jgjc-tematy--rozwinieta .jgjc-temat--rzadki { display: grid; }

.jgjc-tematy__wiecej {
  margin-top: 18px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--base-3);
  background: oklch(1 0 0 / .74);
  color: var(--wp--preset--color--contrast-2);
  font: 600 13px/1 var(--wp--preset--font-family--heading);
  cursor: pointer;
  min-height: 34px;
  box-shadow: var(--jgjc-krawedz);
  transition: color .22s var(--jgjc-e), border-color .22s var(--jgjc-e);
}
.jgjc-tematy__wiecej:hover {
  color: var(--wp--preset--color--primary);
  border-color: color-mix(in oklch, var(--wp--preset--color--primary) 32%, var(--wp--preset--color--base-3));
}

/* ===================================================================
   ODSŁANIANIE

   Domyślnie wszystko jest widoczne. Skrypt przyciemnia wyłącznie to,
   co przy wczytaniu leżało poza ekranem.
   =================================================================== */

.jgjc-odslon--czeka {
  opacity: 0;
  transform: translateY(14px);
}
.jgjc-odslon {
  transition: opacity .7s var(--jgjc-e), transform .7s var(--jgjc-e);
}

/* ===================================================================
   PASEK MENU
   =================================================================== */

.jgjc-pasek {
  position: sticky;
  top: 0;
  z-index: 70;
  background: oklch(1 0 0 / .78);
  /* Rozmycie tła przelicza się przy każdym pikselu przewijania i jest to
     najdroższa rzecz w pasku. Promień 18 px kosztował wyraźnie więcej niż 10,
     a różnicy między nimi nie widać pod paskiem o kryciu 78%. */
  backdrop-filter: blur(10px) saturate(1.3);
  transform: translateZ(0);
  border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--base-3) 70%, transparent);
  transition: transform .4s var(--jgjc-e), background .3s var(--jgjc-e);
}
.jgjc-pasek--schowany { transform: translateY(-100%); }
.jgjc-pasek--przy-gorze { background: oklch(1 0 0 / .55); }

/* ===================================================================
   ARCHIWUM I LISTA TAGU: wiersze zamiast kafli

   Kafel sprzedaje jeden tekst i dlatego stoi na stronie głównej. Archiwum
   ma pozwolić przejechać wzrokiem czterdzieści pozycji, więc zdjęcia
   zabierają tu miejsce potrzebne tytułom.
   =================================================================== */

.jgjc-wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 22px;
  align-items: baseline;
  padding: 15px 4px 15px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--base-3) 62%, transparent);
  transition: padding-left .3s var(--jgjc-e);
}
.jgjc-wiersz:hover { padding-left: 10px; }
.jgjc-wiersz .wp-block-post-title {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
}
.jgjc-wiersz .jgjc-prawa {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--wp--preset--color--contrast-3);
  font-variant-numeric: tabular-nums oldstyle-nums;
}
.jgjc-wiersz .wp-block-post-terms { grid-column: 1; margin-top: 2px; }

/* ===================================================================
   WIDOK NOTATKI

   Notatka to nie skrócony tekst, tylko inny format: bez zdjęcia wiodącego,
   bez spisu treści, bez inicjału. Jedna myśl w wąskiej kolumnie.
   =================================================================== */

.jgjc-notatka { width: min(660px, 94vw); margin-inline: auto; }
.jgjc-notatka .wp-block-post-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.014em;
}
.jgjc-notatka .wp-block-post-content > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

/* ===================================================================
   METADANE KARTY

   Czas czytania i data mają być cichsze od tytułu i od tagów. To informacja
   porządkowa, a nie powód, dla którego ktoś kliknie.
   =================================================================== */

.jgjc-czas {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--contrast-3);
  font-variant-numeric: tabular-nums oldstyle-nums;
}

/* Tagi w karcie NIE są w kolorze linku. Cała karta jest klikalna, więc niebieski
   tag udaje, że tylko on prowadzi gdzieś dalej. Akcent zapala się przy najechaniu
   i to wystarczy za sygnał. */
.jgjc-karta .wp-block-post-terms a,
.jgjc-wiersz .wp-block-post-terms a {
  color: var(--wp--preset--color--contrast-2);
}
.jgjc-karta .wp-block-post-terms a:hover,
.jgjc-wiersz .wp-block-post-terms a:hover {
  color: var(--wp--preset--color--primary);
}

/* ===================================================================
   STRONY BŁĘDU I O AUTORZE
   =================================================================== */

/* Numer błędu konturem, nie wypełnieniem: duży i cichy zarazem. */
.jgjc-numer {
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklch, var(--wp--preset--color--primary) 34%, transparent);
  margin-bottom: 0;
}
@supports not (-webkit-text-stroke: 1px red) {
  .jgjc-numer {
    color: color-mix(in oklch, var(--wp--preset--color--primary) 26%, transparent);
    -webkit-text-stroke: 0;
  }
}

.jgjc-awatar {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.375rem;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 750;
  box-shadow: var(--jgjc-cien2);
}

/* ===================================================================
   NEWSLETTER

   Cztery stany na atrybucie data-stan opakowania. Komunikat siedzi
   w obszarze aria-live, więc kto nie widzi zmiany koloru, ten ją usłyszy.
   =================================================================== */

.jgjc-nl__form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}
.jgjc-nl__pole {
  flex: 1 1 17rem;
  max-width: 22rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--base-3);
  background: oklch(1 0 0 / .74);
  font: 400 1rem/1 var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--contrast);
  min-height: 48px;
}
.jgjc-nl__pole:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
.jgjc-nl__przycisk {
  padding: 0.85rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  font: 650 0.8125rem/1 var(--wp--preset--font-family--heading);
  cursor: pointer;
  min-height: 48px;
  transition: background .22s var(--jgjc-e);
}
.jgjc-nl__przycisk:hover { background: var(--wp--preset--color--primary-2); }

.jgjc-nl__stan {
  margin-top: 0.875rem;
  min-height: 1.4em;
  font-size: 0.90625rem;
  text-align: center;
  color: var(--wp--preset--color--contrast-2);
}
.jgjc-nl[data-stan="blad"] .jgjc-nl__stan { color: var(--wp--preset--color--accent); }
.jgjc-nl[data-stan="blad"] .jgjc-nl__pole {
  border-color: color-mix(in oklch, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--base-3));
}
.jgjc-nl[data-stan="sukces"] .jgjc-nl__stan,
.jgjc-nl[data-stan="ponowiono"] .jgjc-nl__stan {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.jgjc-nl[data-stan="ladowanie"] .jgjc-nl__przycisk { opacity: .6; pointer-events: none; }

.jgjc-nl__drobne {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--wp--preset--color--contrast-3);
}

/* ===================================================================
   KOSZT PRZEWIJANIA

   `content-visibility: auto` pozwala przeglądarce pominąć renderowanie sekcji,
   które są poza kadrem. `contain-intrinsic-size` podaje jej wysokość zastępczą,
   żeby pasek przewijania nie skakał, gdy sekcja wchodzi w kadr i nagle dostaje
   prawdziwe wymiary.

   Nie stosujemy tego do sekcji otwierającej: ta jest widoczna od razu, a
   pominięcie renderowania opóźniłoby największy element strony.
   =================================================================== */

.jgjc-odslon {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* `will-change` tylko na czas czekania na odsłonięcie. Zostawione na stałe
   trzyma warstwę w pamięci karty graficznej dla każdej sekcji naraz, co jest
   dokładnie tym marnotrawstwem, przed którym ta właściwość miała chronić. */
.jgjc-odslon--czeka {
  will-change: opacity, transform;
}

/* Paski w sekcji Tematy animują wyłącznie `transform`, więc idą na kompozytor.
   `will-change` zdejmowane jest po zakończeniu animacji przez skrypt. */
.jgjc-tematy--czekaja .jgjc-temat__pasek {
  will-change: transform;
}
.jgjc-tematy--gotowe .jgjc-temat__pasek {
  will-change: auto;
}

/* Zdjęcia w kartach: zbliżenie tylko przy urządzeniu wskazującym. Na dotyku
   nie ma najechania, więc `transition` na obrazie to koszt bez efektu. */
@media (hover: none) {
  .jgjc-karta img { transition: none; }
}

/* Pasek w ruchu: bez rozmycia tła, za to gęstsze tło, żeby tekst pod spodem
   nie prześwitywał. Zmiana jest niewidoczna, bo trwa tylko podczas przewijania. */
.jgjc-pasek--w-ruchu {
  backdrop-filter: none;
  background: oklch(1 0 0 / .92);
}

/* ===================================================================
   GŁĘBIA

   Aurora ma dwa plany, ale przy nieruchomym kadrze oko po chwili przestaje je
   rozróżniać. Delikatne przesunięcie planów za kursorem przywraca wrażenie
   przestrzeni: bliższy plan idzie dalej niż daleki, dokładnie odwrotnie niż
   w naturze, bo tu bliżej jest to, co większe i jaśniejsze.

   Przesunięcie jest maksymalnie 18 px i idzie wyłącznie przez `transform`,
   więc siedzi na kompozytorze i nie kosztuje ani jednej klatki układu.
   Wyłączone przy dotyku (nie ma kursora) i przy redukcji ruchu.
   =================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jgjc-aura {
    transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  }
  .jgjc-aura i {
    transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
  }
  .jgjc-aura--zywa {
    transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px), 0);
  }
  .jgjc-aura--zywa .f,
  .jgjc-aura--zywa .g {
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0);
  }
}

/* Karty łapią światło mocniej, gdy kursor jest blisko. Nie animujemy cienia
   (to malowanie), tylko krycie warstwy, która już istnieje. */
.jgjc-karta {
  position: relative;
}
/* ŚWIATŁO NA KRAWĘDZI, NIE PLAMA NAD KARTĄ.

   Poprzednia wersja kładła nad kartą prostokątny gradient i wyglądało to jak
   rozlana plama, a nie jak światło. Teraz świeci sama KRAWĘDŹ: gradient wchodzi
   w obramowanie przez `border-image`, więc obrys karty zapala się po obwodzie,
   z przewagą u góry i po stronie, z której pada światło aurory.

   Rośnie też zasięg cienia i dostaje barwę akcentu: karta przestaje leżeć NA
   tle, a zaczyna się nad nim unosić. */
.jgjc-karta::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s var(--jgjc-e);
  background: conic-gradient(from 210deg,
    oklch(0.86 0.13 250 / .00) 0deg,
    oklch(0.92 0.16 250 / .85) 60deg,
    oklch(0.95 0.10 316 / .70) 130deg,
    oklch(0.90 0.14 32 / .55) 210deg,
    oklch(0.86 0.13 250 / .00) 320deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
}
.jgjc-karta:hover::after { opacity: 1; }

/* Poświata wokół całej karty, w barwie tła, a nie w szarości. Szary cień pod
   kolorowym tłem wygląda jak brud; barwny wygląda jak światło odbite. */
.jgjc-karta:hover {
  box-shadow:
    var(--jgjc-cien2),
    0 0 70px -18px oklch(0.72 0.17 252 / .55),
    0 0 140px -40px oklch(0.78 0.14 316 / .40),
    var(--jgjc-krawedz);
}

@media (prefers-reduced-motion: reduce) {
  .jgjc-karta::after { transition: none; }
}

/* ===================================================================
   POŚWIATA

   Krawędzie kart łapią światło od góry na stałe, nie tylko przy najechaniu.
   Na ciemniejszym tle karta bez tego wygląda jak wycięta dziura; z poświatą
   wygląda, jakby leżała nad tłem i coś przy niej świeciło.

   To jedna warstwa gradientu na pseudoelemencie, bez cienia i bez rozmycia,
   więc nie kosztuje ani jednej klatki przy przewijaniu.
   =================================================================== */

.jgjc-karta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(175deg,
    oklch(1 0 0 / .30) 0%,
    oklch(1 0 0 / .06) 32%,
    transparent 62%);
}

/* Nagłówki sekcji dostają własny, cichy blask. Na jasnym tle był niewidoczny,
   na tym już nie. */
.wp-block-heading {
  text-shadow: 0 1px 24px oklch(1 0 0 / .55);
}
.jgjc-karta .wp-block-heading,
.jgjc-notatka .wp-block-heading {
  text-shadow: none;
}

/* ===================================================================
   ODDECH

   Cała warstwa aurory bardzo powoli zmienia nasycenie i skalę. Cykl 54 sekundy
   to 0,019 Hz, czyli sto pięćdziesiąt razy poniżej sufitu 3 Hz z WCAG 2.3.2:
   ruchu nie widać, gdy się na niego patrzy, widać go dopiero, gdy się odejdzie
   i wróci. O to chodzi.
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .jgjc-aura {
    animation: jgjc-oddech 54s ease-in-out infinite alternate;
  }
}

/* ODDECH PRZEZ KRYCIE, NIE PRZEZ ROZMYCIE.

   Pierwsza wersja animowała `filter: blur()`. Zmierzone: z dziewięciu animacji
   na stronie to była JEDYNA, która nie idzie na kompozytor. Każda klatka
   wymuszała ponowne policzenie rozmycia o promieniu 92 px na powierzchni
   1,8 megapiksela, i tak w pętli, bez końca, przez całe odwiedziny.

   `opacity` daje ten sam efekt oddechu i jest właściwością kompozytorową:
   karta graficzna zmienia krycie gotowej warstwy, nie licząc jej od nowa.

   Nie animujemy tu `transform`, bo tę właściwość zajmuje już paralaksa. */
@keyframes jgjc-oddech {
  from { opacity: var(--jgjc-aura-op); }
  to   { opacity: calc(var(--jgjc-aura-op) * 0.84); }
}

/* ===================================================================
   TYTUŁY: BEZ PODKREŚLENIA

   Podkreślenie przy najechaniu to rozwiązanie z czasów, gdy link musiał się
   sam tłumaczyć. Tutaj cała karta jest klikalna, więc kreska pod tytułem niczego
   nie wyjaśnia, a psuje linię pisma.

   Zamiast niej: rozszczepienie barwne. Tytuł na ułamek sekundy rozdziela się
   na chłodną i ciepłą składową, jakby patrzyło się przez pryzmat. To ten sam
   ruch, który wykonuje oko przy zmęczeniu i przy rozszerzonych źrenicach,
   więc na tej stronie jest u siebie.

   Przesunięcie ma 0,5 px. Ma być odczuwalne, a nie widoczne.
   =================================================================== */

.wp-block-post-title a,
.jgjc-wiersz .wp-block-post-title,
.wp-block-post-title {
  text-decoration: none !important;
  transition: color .35s var(--jgjc-e), text-shadow .35s var(--jgjc-e);
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
  text-decoration: none !important;
}

.jgjc-karta:hover .wp-block-post-title,
.jgjc-karta:hover .wp-block-post-title a,
.jgjc-wiersz:hover .wp-block-post-title {
  text-shadow:
    -0.5px 0 0 oklch(0.72 0.20 232 / .42),
     0.5px 0 0 oklch(0.70 0.22 350 / .34);
}

/* Linki w treści zostają podkreślone: tam kreska NIESIE informację, bo akapit
   nie jest klikalny w całości i bez niej nie wiadomo, co jest odnośnikiem. */
.wp-block-post-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, var(--wp--preset--color--primary) 45%, transparent);
  transition: text-decoration-color .3s var(--jgjc-e);
}
.wp-block-post-content a:hover {
  text-decoration-color: var(--wp--preset--color--primary);
}

/* ===================================================================
   ZDJĘCIA: ODDECH KOLORU

   Przy najechaniu kadr nie tylko się przybliża, ale też budzi: nasycenie
   i kontrast idą w górę, a temperatura minimalnie w stronę chłodu, żeby
   zdjęcie zgrało się z aurorą zamiast z nią walczyć.
   =================================================================== */

.jgjc-karta img {
  transition:
    transform 2.1s var(--jgjc-e),
    filter 1.1s var(--jgjc-e);
  filter: saturate(.92) contrast(1.02);
}
.jgjc-karta:hover img {
  transform: scale(1.085);
  transition-duration: 1.05s, .7s;
  filter: saturate(1.16) contrast(1.06) brightness(1.03);
}

/* ===================================================================
   WIERSZE ARCHIWUM

   Ten sam język co karty: bez podkreślenia, ze światłem wchodzącym od lewej.
   =================================================================== */

.jgjc-wiersz {
  position: relative;
}
.jgjc-wiersz::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(.3);
  transform-origin: center;
  background: linear-gradient(180deg,
    oklch(0.72 0.17 252 / 0),
    oklch(0.72 0.19 252 / .9),
    oklch(0.74 0.16 316 / 0));
  transition: opacity .4s var(--jgjc-e), transform .5s var(--jgjc-e);
}
.jgjc-wiersz:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .jgjc-karta::after,
  .jgjc-wiersz::before,
  .jgjc-karta img,
  .wp-block-post-title { transition: none !important; }
  .jgjc-karta:hover .wp-block-post-title,
  .jgjc-karta:hover .wp-block-post-title a { text-shadow: none; }
}

/* ===================================================================
   PALETA WYSZUKIWANIA

   Wraca z prototypu, gdzie była jedną z mocniejszych rzeczy na stronie.
   Ctrl K albo kliknięcie w pole w pasku.
   =================================================================== */

.jgjc-pal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: start center;
  padding: clamp(4rem, 14vh, 9rem) 1.25rem 2rem;
}
.jgjc-pal--widoczna { display: grid; }
body.jgjc-pal-otwarta { overflow: hidden; }

.jgjc-pal__tlo {
  position: absolute;
  inset: 0;
  background: oklch(0.30 0.05 262 / .42);
  backdrop-filter: blur(14px) saturate(1.2);
  animation: jgjc-pal-tlo .35s var(--jgjc-e) both;
}
@keyframes jgjc-pal-tlo { from { opacity: 0; } to { opacity: 1; } }

.jgjc-pal__karta {
  position: relative;
  width: min(42rem, 100%);
  border-radius: 20px;
  overflow: hidden;
  background: oklch(1 0 0 / .86);
  border: 1px solid oklch(1 0 0 / .70);
  box-shadow:
    0 30px 90px -20px oklch(0.28 0.06 268 / .45),
    0 0 80px -24px oklch(0.72 0.17 252 / .55),
    var(--jgjc-krawedz);
  animation: jgjc-pal-karta .4s var(--jgjc-e) both;
}
@keyframes jgjc-pal-karta {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.jgjc-pal__gora {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid color-mix(in oklch, var(--wp--preset--color--base-3) 70%, transparent);
}
.jgjc-pal__lupa { color: var(--wp--preset--color--contrast-3); flex: none; }
.jgjc-pal__pole {
  flex: 1;
  border: 0;
  background: none;
  font: 400 1.0625rem/1.4 var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--contrast);
  min-height: 32px;
}
.jgjc-pal__pole:focus { outline: none; }
.jgjc-pal__pole::-webkit-search-cancel-button { display: none; }
.jgjc-pal__esc {
  flex: none;
  padding: .3rem .55rem;
  border-radius: 7px;
  border: 1px solid var(--wp--preset--color--base-3);
  background: oklch(1 0 0 / .6);
  color: var(--wp--preset--color--contrast-3);
  font: 600 11px/1 var(--wp--preset--font-family--heading);
  cursor: pointer;
  min-height: 26px;
}

.jgjc-pal__lista { max-height: min(52vh, 30rem); overflow-y: auto; padding: .5rem; }
.jgjc-pal__grupa {
  padding: .7rem .75rem .35rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-3);
}
.jgjc-pal__wynik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .75rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  transition: background .18s var(--jgjc-e);
}
.jgjc-pal__wynik:hover,
.jgjc-pal__wynik[aria-selected="true"] {
  background: oklch(0.72 0.17 252 / .13);
}
.jgjc-pal__tytul { font-size: .96rem; line-height: 1.35; }
.jgjc-pal__tytul mark {
  background: oklch(0.80 0.16 252 / .30);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.jgjc-pal__typ {
  flex: none;
  font-size: 11px;
  color: var(--wp--preset--color--contrast-3);
}
.jgjc-pal__stan {
  padding: 0 1.25rem 1.05rem;
  font-size: .875rem;
  color: var(--wp--preset--color--contrast-3);
}
.jgjc-pal__stan:empty { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .jgjc-pal__tlo, .jgjc-pal__karta { animation: none; }
}

/* Pole w pasku: szersze i z powietrzem. Poprzednie 180 px sprawiało, że wyglądało
   na ściśnięte między menu a przyciskiem. */
/* Pole szukania w pasku.

   Poprzednia wersja miała sztywne `min-width: 15rem` i przy pasku o stałej
   szerokości wypychała przycisk poza kadr. Teraz pole SIĘ KURCZY, gdy brakuje
   miejsca, ale nie schodzi poniżej rozmiaru, przy którym znów wygląda
   na ściśnięte. */
.jgjc-pasek .wp-block-search {
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 17rem;
}
.jgjc-pasek .wp-block-search__inside-wrapper {
  min-width: 0;
}
.jgjc-pasek .wp-block-search__input {
  min-width: 0;
  width: 100%;
  padding: .62rem 1.05rem;
  font-size: .9375rem;
}
.jgjc-pasek .wp-block-search__button {
  flex: none;
}
@media (max-width: 1180px) {
  .jgjc-pasek .wp-block-search { max-width: 12rem; }
}
@media (max-width: 860px) {
  .jgjc-pasek .wp-block-search { max-width: 3.2rem; }
  .jgjc-pasek .wp-block-search__input { padding-left: .5rem; padding-right: .5rem; }
}

/* Nagłówek rocznika w archiwum. `aria-hidden`, bo dla czytnika ekranu data
   przy każdym wpisie niesie tę samą informację, a powtórzony rok byłby szumem. */
.jgjc-rocznik {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  margin: clamp(1.6rem, 3vw, 2.25rem) 0 .25rem;
  list-style: none;
}
.jgjc-rocznik:first-child { margin-top: .375rem; }
.jgjc-rocznik b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--wp--preset--color--contrast-3);
  font-variant-numeric: tabular-nums;
}
.jgjc-rocznik i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--wp--preset--color--base-3),
    color-mix(in oklch, var(--wp--preset--color--base-3) 20%, transparent));
  display: block;
}

/* ===================================================================
   UJEDNOLICENIE BLOKÓW

   Do tej pory karty w sekcjach Najnowsze, Notatki, nota o autorze i newsletter
   miały wyściółki i promienie wpisane osobno w każdym szablonie. Efekt: cztery
   różne wysokości i cztery różne odstępy w miejscach, które mają wyglądać
   jak jedna rodzina.

   Teraz wszystkie biorą te same wartości stąd. Szablony podają już tylko treść.
   =================================================================== */

:root {
  --jgjc-karta-pad: clamp(1.05rem, 1.8vw, 1.5rem);
  --jgjc-karta-r: 18px;
}

.jgjc-karta {
  border-radius: var(--jgjc-karta-r);
  padding: var(--jgjc-karta-pad);
}

/* Siatki: równe wysokości niezależnie od długości tytułu i zajawki.
   Bez tego kafel z krótszym tytułem jest niższy i rząd wygląda na złożony
   z przypadkowych elementów. */
.wp-block-post-template.is-layout-grid {
  align-items: stretch;
}
.wp-block-post-template.is-layout-grid > li {
  display: flex;
}
.wp-block-post-template.is-layout-grid > li > .jgjc-karta {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Zajawka rozpycha się tak, żeby metadane usiadły na dole każdej karty
   w rzędzie, na tej samej wysokości. */
.jgjc-karta .wp-block-post-excerpt {
  flex: 1 0 auto;
}

/* Zdjęcie w kafelku: stały stosunek boków dla całego rzędu. */
.jgjc-karta .wp-block-post-featured-image {
  margin-bottom: .875rem;
}
.jgjc-karta .wp-block-post-featured-image img {
  border-radius: calc(var(--jgjc-karta-r) - 5px);
}

/* Notatki: bez zdjęć, więc same tytuły muszą wyrównać się do siebie.
   Minimalna wysokość zamiast rozpychania treścią. */
.wp-block-query .jgjc-karta:has(.wp-block-post-title.has-body-font-family) {
  min-height: 7.5rem;
  justify-content: space-between;
}

/* Bloki na stronie wpisu: nota o autorze, newsletter i sąsiednie teksty
   dostają tę samą wyściółkę i ten sam promień co karty na stronie głównej. */
.jgjc-karta,
.wp-block-post-content + * .jgjc-karta {
  box-sizing: border-box;
}

/* ===================================================================
   JEDNA SZEROKOŚĆ NA STRONIE WPISU

   Do tej pory kolumna czytania, nota o autorze i newsletter brały szerokość
   z trzech różnych miejsc: z `contentSize` w szablonie, z ustawienia bloku
   i z domyślnej wartości motywu. Wychodziły trzy różne krawędzie jedna pod
   drugą i strona wyglądała na złożoną z cudzych kawałków.

   Teraz decyduje jedna zmienna. Zdjęcie wiodące zostaje szersze, bo to jedyny
   element, który ma prawo wyjść poza kolumnę: obraz znosi większą szerokość,
   a tekst nie.
   =================================================================== */

.jgjc-wpis {
  --jgjc-kolumna: min(48rem, 94vw);
}
.jgjc-wpis--waski {
  --jgjc-kolumna: min(41rem, 94vw);
}

.jgjc-wpis > .wp-block-group,
.jgjc-wpis > .jgjc-karta,
.jgjc-wpis > .wp-block-buttons,
.jgjc-wpis > p {
  width: var(--jgjc-kolumna);
  margin-inline: auto;
  max-width: 100%;
}

/* Nagłówek wpisu bierze tę samą szerokość, więc tytuł, lid i pierwszy akapit
   zaczynają się w jednej pionowej linii. */
.jgjc-wpis > .jgjc-aureola,
.jgjc-wpis .art-head .in {
  width: var(--jgjc-kolumna);
  margin-inline: auto;
}

/* Zdjęcie wiodące: jedyny wyjątek. */
.jgjc-wpis > .wp-block-post-featured-image {
  width: min(62rem, 96vw);
  margin-inline: auto;
}

/* Kolumna czytania wewnątrz karty: węższa od karty o jej wyściółkę, żeby wiersz
   tekstu nie sięgał krawędzi. Wartość w znakach, nie w remach: o czytelności
   decyduje długość wiersza, a nie szerokość pudełka. */
.jgjc-wpis .wp-block-post-content {
  max-width: 68ch;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .jgjc-aura { transition: none; }
}

/* Zapas na wypadek, gdyby skrypt się nie wczytał: po dwóch sekundach aurora
   pojawia się sama, bez udziału JavaScriptu. Strona bez skryptu ma wyglądać
   tak samo, tylko bez płynnego wejścia. */
@keyframes jgjc-aura-zapas { to { opacity: var(--jgjc-aura-op); } }
.jgjc-aura {
  animation: jgjc-aura-zapas .01s linear 2s forwards,
             jgjc-oddech 54s ease-in-out 2s infinite alternate;
}