/* PLIK GENEROWANY — nie edytować ręcznie.
   Źródłem jest `zaslepka.html`; po zmianie wyglądu uruchom
   `python narzedzia/buduj-wtyczke.py`. */

/* ============================================================================
   ZAŚLEPKA — vending.rapa.pl
   Skąd co pochodzi (żeby nikt tego nie „poprawił" w oderwaniu od reszty):
   · obracające się sygnety w tle i winieta   → ekran logowania panelu (`.lg-petale`),
     a tam z ekranu attract kiosku. STALOWE, nie markowe — dokładnie ten odcień,
     który Damian zobaczył na zrzucie („te białe animacje"),
   · biały odblask sunący po szybach          → `.lg-odblask` z panelu („blik jasności"),
   · rysunek automatu i geometria             → `lgRysujAutomat()` + `GEO` z panelu,
     czyli milimetry z konfiguracji, a nie proporcje wymyślone w edytorze,
   · siatki skrytek                           → `Apka\dostawa\*\urzadzenie.json`,
   · karta                                    → `.lg-karta` z ekranu logowania,
   · ostre krawędzie 2 px, czarno-stalowe powierzchnie → decyzje z 3.08 i 11.08.

   RÓŻNICA WOBEC PANELU: tam rysunek automatu był WSKAŹNIKIEM stanu formularza.
   Tutaj jest wskaźnikiem PYTANIA — maszyna przebudowuje się razem ze słowem
   i na końcu przestaje wiedzieć, co ma w środku. To jest cała treść zaślepki.
   ========================================================================== */

/* TITILLIUM TYLKO DO 600 — decyzja z 12.08: „bold i black nie dajemy wcale".
   Wagi 700/900 nie są wczytane, więc żądanie 700 dobiera realną 600. */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/TitilliumWeb-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/TitilliumWeb-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/TitilliumWeb-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/TitilliumWeb-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/TitilliumWeb-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/TitilliumWeb-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("../fonts/OpenSans-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("../fonts/OpenSans-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --font:"Open Sans","Segoe UI",system-ui,sans-serif;
  --font-tyt:"Titillium Web","Titillium","Open Sans",system-ui,sans-serif;

  --page:#08080A;
  --surface:#16171A; --surface-2:#1E2023; --surface-3:#0D0E10;
  --stal:rgba(255,255,255,.05);

  --ink:#E7EAEF; --ink-muted:#C4C9D2; --ink-soft:#A6ACB7;
  --ink-faint:#8B929D; --ink-off:#70767F; --ink-empty:#52585F;

  --line:#2C2E31; --line-firm:#3D4045;

  /* ── BARWA RAPA — punkt wyjścia i stała całej strony ──────────────────────
     Firmowy kolor to #363C85 (podał Damian). Na czerni daje 2,0:1, więc jako
     TEKSTU nie da się go użyć — znika. Zostaje wypełnieniem, a do napisów
     i ikon idzie rozjaśniony wariant tej samej barwy: #8B92E0, 6,8:1 wobec tła.
     To ta sama zasada, którą marka klienta przechodzi na urządzeniu
     (`Apka\dostawa\ciastomat\marka.css`: „klient podaje JEDEN kolor,
     pozostałe wylicza algorytm i MUSI zwalidować kontrast").
     Znak producenta, karta i stopka trzymają się TEJ barwy zawsze — automaty
     przebierają kolory obok, RAPA nie. */
  --rapa:#363C85; --rapa-mid:#5A63C0; --rapa-ink:#8B92E0;

  /* ── BARWA AUTOMATU — wjeżdża ze stanem (patrz `.zs[data-stan]`) ────────── */
  --brand:var(--rapa); --brand-ink:var(--rapa-ink);

  /* ── BARWY TOWARU — każdy towar ma SWOJĄ i nie zmienia jej nigdy ──────────
     Dzięki temu stan „a jaki będzie Twój?" nie potrzebuje żadnej dodatkowej
     logiki: skrytki losują towar, a kolory mieszają się same.
     Kwiat i ciasto wprost z plików marki w `Apka\dostawa\` — kwiaciarnia
     #E5097F/#FF5FA8, cukiernia #A8541A/#F0A65C; te przeszły walidację
     kontrastu na urządzeniu. Mięso dobrane w tej samej regule (5,1:1). */
  --kwiat:#FF5FA8; --ciasto:#F0A65C; --mieso:#E05252; --warzywo:#5DBE6E;

  /* UWAGA: `--syg` NIE jest kolorem znaków w tle. Te biorą `--brand` (patrz
     `.zs-petal`) i właśnie dlatego tło przechodzi z magenty w karmel, czerwień
     i zieleń razem z maszyną — to jest ten „gradient", o który pytał Damian.
     Ten stalowy odcień został po wcześniejszej wersji i nic go dziś nie używa. */
  --syg:#8E8E93;

  --fs-micro:11px; --fs-meta:13px; --fs-body:14.5px;
  --fw-reg:400; --fw-med:600; --fw-bold:700;

  --r-card:2px;                 /* ostre krawędzie — ma czytać się jak przyrząd */
  color-scheme:dark;
}

/* BARWA AUTOMATU NA STAN. Stoi na `.zs`, nie na rysunku, żeby razem z maszyną
   przebierało się WSZYSTKO, co od niej zależy: wielkie słowo, poświata karty,
   klamki, dioda. Karta i znak producenta trzymają `--rapa` i nie ruszają się. */
.zs[data-stan="kwiat"] { --brand:#E5097F; --brand-ink:var(--kwiat)}
.zs[data-stan="ciasto"]{ --brand:#A8541A; --brand-ink:var(--ciasto)}
.zs[data-stan="mieso"] { --brand:#A82A2A; --brand-ink:var(--mieso)}
.zs[data-stan="warzywo"]{ --brand:#2F7D3E; --brand-ink:var(--warzywo)}
.zs[data-stan="twoj"]  { --brand:var(--rapa); --brand-ink:var(--rapa-ink)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);font-size:var(--fs-body);font-weight:var(--fw-reg);
  background:var(--page);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;    /* bez tego przeglądarka „pogrubia" brakującą wagę 700 */
}

/* ─────────────────────────── UKŁAD ───────────────────────────
   Kolumna, nie siatka z `place-items`. Stopka ma zostawać pod spodem także
   wtedy, gdy treść urośnie — przy `position:absolute` wchodziła na kartę
   (pułapka z ekranu logowania panelu, 12.08). */
.zs{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 22px 16px;
  /* Zapytania o KONTENER, nie o okno — ta sama plansza wjedzie później
     w kolumnę treści WordPressa i ma się łamać wobec niej, nie wobec ekranu. */
  container-type:inline-size;
  /* Poświata pod planszą (`.zs-plansza::before`) sięga 24% poza jej boki,
     a znaki w tle wychodzą poza kadr celowo. Przy szerokim oknie mieści się
     to z zapasem, ale poniżej ~815 px dokument robił się szerszy od okna
     i strona dawała się przeciągnąć w bok (przy 584 px o 108 px), odsłaniając
     czarną pustkę. Świadomie `clip`, a NIE `hidden`: `hidden` zrobiłby z `.zs`
     kontener przewijania i wróciłby stary kłopot ze zjadaną stopką. */
  overflow-x:clip;
}

/* ─── tło: sygnety RAPA obracające się w miejscu, całość dryfuje ─── */
/* Osobna warstwa przycinająca. Wcześniej przycinało je `overflow:hidden` na
   `.zs` — i przy dłuższej treści ta sama reguła zjadała stopkę. */
.zs-tlo{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
/* JEDNA WARSTWA — tak, jak bylo. Probowalem rozbic sygnety na trzy plany
   z paralaksa i rozmyciem; wyszla z tego tapeta pod trescia i Damian slusznie
   ja odrzucil. Gleboko ma byc w SAMYM RYSUNKU automatu, nie w tle. */
.zs-petale{position:absolute;inset:-30% -12%;z-index:0;pointer-events:none;
  animation:zs-drift 46s ease-in-out infinite alternate}
@keyframes zs-drift{0%{transform:translate(-3%,-2.5%)}100%{transform:translate(3%,2.5%)}}
/* PLATEK WPROST Z KIOSKU (`Apka\dostawa\prototyp-pelny-kwiatomat.html`,
   regula `.petal`). Przepisujac go wczesniej zgubilem trzy rzeczy i dlatego
   znaki wygladaly inaczej niz na ekranie automatu:

   1. `aspect-ratio:457/526` — sygnet NIE JEST kwadratem, jest wyzszy niz
      szerszy. Ustawialem bok rowny bokowi, wiec znak byl sciskany w pionie
      i tracil swoj ksztalt,
   2. obrys ma grubosc 3,2, nie 2,4 — cienszy gubil sie w tle,
   3. kolor to `--brand`, czyli barwa automatu, a nie stal. Stad „gradient"
      na platkach: znaki biora barwe tego, co akurat stoi w maszynie,
      i przy przemianie przechodza z magenty w karmel, czerwien i zielen.

   Nie usuwac `position:absolute` ani klatek kluczowych — bez nich `left`/`top`
   przestaja cokolwiek znaczyc, a obrot nie startuje. Cicho, bez bledu. */
.zs-petal{position:absolute;aspect-ratio:457/526;
  color:var(--brand);transition:color 900ms ease}
.zs-petal svg{width:100%;height:100%;display:block}
@keyframes zs-rot{to{transform:rotate(360deg)}}
@keyframes zs-rotr{to{transform:rotate(-360deg)}}

/* Horyzont — jedyne, co zostaje z proby pogłebienia tla. To nie sa zadne nowe
   ksztalty, tylko cien: rozjasnienie u gory i pociemnienie przy podlodze,
   zeby scena miala gore i dol. */
.zs-tlo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.018) 0%, rgba(255,255,255,.004) 22%,
    rgba(0,0,0,0) 58%, rgba(0,0,0,.38) 100%);
}

/* Winieta — bez niej sygnety wchodzą pod tekst i zabierają mu kontrast. */
.zs::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 62% at 50% 46%,
    color-mix(in srgb,var(--page) 93%,transparent) 0%,
    color-mix(in srgb,var(--page) 58%,transparent) 56%, transparent 100%);
}

/* ─── znak producenta u góry ─── */
.zs-atop{position:relative;z-index:3;flex:none;
  display:grid;justify-items:center;gap:9px;text-align:center}
.zs-atop .rola{font-size:var(--fs-meta);font-weight:var(--fw-med);color:var(--ink-muted);
  letter-spacing:.01em;line-height:1}
.zs-atop .logo{display:block;width:clamp(124px,12vw,162px);color:var(--ink)}
.zs-atop .logo svg{width:100%;height:auto;display:block}

/* ─── plansza: automat, słowo, karta ───
   Wąsko. Karta ma czytać się jak ta z ekranu logowania (396 px), a nie jak
   pas na całą szerokość — Damian poprosił wprost o „taki jak w oryginalnym
   panelu, mniejszy". */
.zs-plansza{
  position:relative;z-index:2;
  width:100%;max-width:560px;
  /* Kotwica u GORY. Wysrodkowanie w pionie spychalo cala kompozycje
     nizej, niz stoi na makiecie — stopka i tak trzyma sie dolu, bo
     `.zs` jest kolumna flex, a plansza ma `margin-bottom:auto`. */
  margin:0 0 auto;
  display:grid;justify-items:center;gap:16px;
  padding:clamp(6px,2.4vh,26px) 0 4px;
  isolation:isolate;   /* własny kontekst, żeby poświata weszła POD treść */
}

/* ═══════════════════════ RYSUNEK AUTOMATU ═══════════════════════ */
/* Miękka poświata za planszą. Nie rysuje niczego — robi powietrze między
   treścią a czarnym tłem, żeby napis i maszyna nie leżały na papierze. */
.zs-plansza::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-24%;right:-24%;top:2%;bottom:6%;
  background:radial-gradient(ellipse 46% 42% at 50% 62%,
    color-mix(in srgb,var(--brand) 20%,transparent) 0%,
    color-mix(in srgb,var(--brand) 6%,transparent) 46%, transparent 74%);
  filter:blur(26px);
  transition:background 900ms ease;
}
.zs-automat{margin-top:16px}
.zs-wkrotce{
  margin:14px 0 0;font-family:var(--font-tyt);
  font-size:clamp(12.5px,1.5vw,14px);font-weight:var(--fw-med);
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
  line-height:1.2;padding-left:.26em;
}
.zs-mf{width:clamp(248px,27vw,344px);height:auto;display:block;overflow:visible}
/* ── GŁĘBIA ────────────────────────────────────────────────────────────────
   Cały rysunek był płaski: jedno wypełnienie na korpus, jedno na skrytkę.
   Pięć rzeczy dokłada bryłę, żadna nie dokłada koloru:
   1. blacha ma gradient pionowy — światło pada z góry, jak w hali,
   2. każdy moduł ma jasną krawędź z lewej i ciemną z prawej, więc widać, że
      to osobne szafy dostawione do siebie, a nie jedna malowana ściana,
   3. wnętrze przyciemnia się u góry i u dołu (tam, gdzie półka rzuca cień),
   4. na szybie stoi nieruchomy refleks — ten ruchomy przelatuje po nim,
   5. pod maszyną leży poświata w barwie automatu; na czerni cień nie zadziała,
      bo nie ma co przyciemnić, więc grunt daje ŚWIATŁO, nie ciemność. */
.zs-korpus{fill:url(#zs-blacha);stroke:var(--line-firm);stroke-width:.8}
.zs-kraw-l{fill:#FFFFFF;opacity:.055}
.zs-kraw-p{fill:#000000;opacity:.55}
.zs-wnetrze{fill:url(#zs-wnetrze);pointer-events:none}
.zs-refleks{fill:url(#zs-szyba);pointer-events:none}
.zs-grunt{fill:url(#zs-poswiata);pointer-events:none}
.zs-kaseton-swiatlo{fill:#FFFFFF;opacity:.07}
.zs-kaseton-cien{fill:url(#zs-podkaseton);pointer-events:none}
/* Kaseton to podświetlany szyld, nie czarna dziura — ta sama blacha co korpus,
   odrobinę jaśniejsza. Na czystej czerni odklejał się od maszyny. */
.zs-kaseton-tlo{fill:var(--surface-2);stroke:var(--line-firm);stroke-width:.8}
.zs-kaseton{fill:var(--brand-ink);font-size:13px;font-weight:600;letter-spacing:.13em;
  font-family:var(--font-tyt);text-anchor:middle;
  transition:opacity 420ms ease,fill 820ms ease}
.zs-automat[data-zmiana] .zs-kaseton{opacity:0}
.zs-kaseton--pyt{font-size:19px;letter-spacing:0}
.zs-kratka{stroke:var(--line);stroke-width:.9}
.zs-stopka{fill:var(--surface-3);stroke:var(--line);stroke-width:.6}
.zs-podpis{fill:var(--ink-empty);font-size:6.4px;font-weight:600;letter-spacing:.2em;
  font-family:var(--font-tyt);text-anchor:middle}

/* pasek diodowy pod kasetonem — maszyna ma prąd i widać to od pierwszej sekundy */
.zs-led{fill:var(--line-firm)}
.zs-led-dot{fill:var(--brand);animation:zs-led 4.6s linear infinite;transition:fill 620ms ease}
@keyframes zs-led{0%{transform:translateX(0);opacity:0}
  8%{opacity:1} 88%{opacity:1} 100%{transform:translateX(var(--bieg,112px));opacity:0}}

/* ── MODUŁ STEROWANIA ──────────────────────────────────────────────────────
   Pierwsza wersja była ciemnym pudełkiem z napisami po 4 px, których nikt nie
   przeczytał — wyglądała na dziurę pośrodku maszyny. Teraz ma pięć rzeczy,
   które realnie są na module RAPA i czytają się kształtem, nie tekstem:
   ekran z kaflami produktów, terminal zbliżeniowy, szczelina na kartę,
   klapka odbioru i podpis producenta. */
.zs-ekran-obud{fill:#0C0D0F;stroke:var(--brand);stroke-width:.7;stroke-opacity:.5;
  transition:stroke 620ms ease}
.zs-ekran-pasek{fill:var(--brand-ink);opacity:.55;transition:fill 620ms ease}
.zs-ekran-kafel{fill:var(--surface-2);stroke:var(--brand);stroke-width:.5;stroke-opacity:.42;
  transition:stroke 620ms ease}
.zs-term{fill:var(--surface-3);stroke:var(--line-firm);stroke-width:.6}
.zs-nfc{fill:none;stroke:var(--brand-ink);stroke-width:1.8;stroke-linecap:round;
  transition:stroke 620ms ease}
.zs-szczelina{fill:#000;stroke:var(--line-firm);stroke-width:.5}
.zs-sruba{fill:none;stroke:var(--line-firm);stroke-width:.6}

/* ── SKRYTKI ───────────────────────────────────────────────────────────────
   Tło skrytki zostaje ciemne zawsze. Kolor niesie TOWAR, nie pudełko —
   inaczej przy zmianie migałaby cała ściana, a nie zawartość. */
.zs-kom-tlo{fill:var(--surface-3);stroke:var(--line-firm);stroke-width:.7}
/* Wycięcia W SYLWETCE — oczko kwiatu, zakładka na rożku. Muszą mieć barwę
   skrytki, a nie tła strony: leżą na podświetlonej szybie. */
.zs-oczko{fill:var(--surface-3)}
.zs-rant{fill:none;stroke:var(--surface-3);stroke-width:5;stroke-linecap:round}
.zs-towar{
  fill:currentColor;
  transform-box:fill-box;transform-origin:center;
  opacity:0;transform:translateY(9%) scale(.82);
  transition:opacity 560ms cubic-bezier(.4,0,.2,1),
             transform 760ms cubic-bezier(.34,1.24,.44,1);
}
.zs-towar[data-t="kwiat"] {color:var(--kwiat)}
.zs-towar[data-t="ciasto"]{color:var(--ciasto)}
.zs-towar[data-t="mieso"] {color:var(--mieso)}
.zs-towar[data-t="warzywo"]{color:var(--warzywo)}
.zs-kom[data-towar="kwiat"]  .zs-towar[data-t="kwiat"],
.zs-kom[data-towar="ciasto"] .zs-towar[data-t="ciasto"],
.zs-kom[data-towar="mieso"]  .zs-towar[data-t="mieso"],
.zs-kom[data-towar="warzywo"] .zs-towar[data-t="warzywo"]{opacity:1;transform:none}

/* ── UKŁADY — trzy różne maszyny w jednej obudowie ─────────────────────────
   Liczby wprost z `urzadzenie.json`: kwiatomat ma NIEWIELE DUŻYCH skrytek
   („bukiet potrzebuje wysokości"), mięsomat dwanaście na moduł, ciastomat
   kratę 3 × 9 z kolumnami różnej szerokości i wyższym rzędem dolnym.
   Obrys szafy jest wspólny, zmienia się wnętrze — dlatego to czyta się jak
   przezbrojenie maszyny, a nie jak podmiana obrazka. */
.zs-uklad{opacity:0;transition:opacity 760ms ease;pointer-events:none}
.zs-automat[data-uklad="kwiat"]  .zs-uklad[data-u="kwiat"],
.zs-automat[data-uklad="ciasto"] .zs-uklad[data-u="ciasto"],
.zs-automat[data-uklad="mieso"]  .zs-uklad[data-u="mieso"],
.zs-automat[data-uklad="warzywo"] .zs-uklad[data-u="warzywo"],
.zs-automat[data-uklad="twoj"]   .zs-uklad[data-u="twoj"]{opacity:1;transition-delay:240ms}

/* światło zza tafli — mocniejsze w chwili przemiany */
.zs-swiatlo{fill:var(--brand);opacity:.13;filter:blur(7px);
  transition:opacity 700ms ease,fill 620ms ease}
.zs-automat[data-zmiana] .zs-swiatlo{opacity:.36}

/* TAFLA — szyby modułów */
.zs-tafla{fill:rgba(255,255,255,.055);stroke:var(--line-firm);stroke-width:.8}
.zs-klamka{fill:var(--brand);transition:fill 620ms ease}

/* ── ODBLASK: jedno pasmo światła przez CAŁĄ maszynę ───────────────────────
   Wersja z panelu robiła osobny przebłysk w każdym module przy kryciu .10 —
   na tej stronie po prostu nie dało się go zauważyć („nie ma dalej animacji
   światła na szybach"). Teraz jest jedno pasmo, przycięte do szyb wszystkich
   modułów naraz, jaśniejsze i z krótszą pauzą. Ruch, nie migotanie. */
.zs-odblask-g{transform-box:view-box;transform-origin:center;transform:skewX(-15deg)}
.zs-odblask{fill:#fff;opacity:0;animation:zs-sweep 7s ease-in-out infinite}
@keyframes zs-sweep{
  0%  {transform:translateX(0);opacity:0}
  5%  {opacity:.19}
  44% {opacity:.19}
  52% {transform:translateX(430px);opacity:0}
  100%{transform:translateX(430px);opacity:0}
}

/* ═══════════════════════ SŁOWO, KTÓRE SIĘ PRZEMIENIA ═══════════════════════ */
.zs-tyt{margin:0;text-align:center;display:grid;justify-items:center;gap:2px;width:100%}
.zs-slogan{
  display:block;font-family:var(--font-tyt);
  font-size:clamp(12.5px,1.5vw,14px);font-weight:var(--fw-reg);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.2;
}
/* Wszystkie cztery napisy leżą w JEDNEJ komórce siatki, więc slot sam bierze
   wysokość najwyższego — bez sztywnego `height`, które przy zawiniętym pytaniu
   obcinałoby drugą linijkę. */
.zs-rolka{display:grid;width:100%}
.zs-slowo{
  grid-area:1/1;align-self:center;justify-self:center;
  font-family:var(--font-tyt);font-weight:var(--fw-med);
  font-size:clamp(34px,5.4vw,54px);line-height:1.02;letter-spacing:-.008em;
  /* Gradient światła jest przycięty do liter (`background-clip:text`), a tło
     maluje się tylko w obrębie pudełka elementu. Przy `line-height:1.02`
     pudełko jest NIŻSZE niż glify, więc wszystko poniżej jego dolnej krawędzi
     nie dostawało ani grama tła i znikało: ogonek w „Mięsomat", oba „y"
     w „Warzywomat" i „ó" w „A jaki będzie Twój?" kończyły się płaskim
     ścięciem (zmierzone: 3,9 px tuszu poza pudełkiem przy 1440×900).
     Padding powiększa obszar malowania, ujemny margines oddaje tę samą
     wartość układowi — siatka, `h1` i maszyna stoją tam, gdzie stały. */
  padding-bottom:.15em;margin-bottom:-.15em;
  opacity:0;transform:translateY(.30em) scale(.97);filter:blur(9px);
  transition:opacity 820ms cubic-bezier(.4,0,.2,1),
             transform 1020ms cubic-bezier(.34,1.16,.44,1),
             filter 820ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* Każde słowo ma barwę SWOJEGO automatu na stałe — nie ma czego przełączać
   w locie i nie da się złapać napisu w kolorze poprzedniego stanu. */
.zs-slowo[data-s="0"]{color:var(--kwiat)}
.zs-slowo[data-s="1"]{color:var(--ciasto)}
.zs-slowo[data-s="2"]{color:var(--mieso)}
.zs-slowo[data-s="3"]{color:var(--warzywo)}
/* Światło przebiegające po napisie — ten sam gest, co odblask na szybie
   automatu, tylko na literach. `background-clip:text` jest tu konieczne:
   inaczej rozjaśniłby się prostokąt wokół napisu, a nie sam znak.
   Zapala się DOPIERO na widocznym słowie, żeby nie mielić w tle. */
.zs-slowo[data-widoczne]{opacity:1;transform:none;filter:blur(0)}
.zs-slowo[data-widoczne]{
  background-image:linear-gradient(104deg,
    currentColor 0%, currentColor 40%, #FFFFFF 50%, currentColor 60%, currentColor 100%);
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  /* TYLKO `-webkit-text-fill-color`. Dopisany obok `color:transparent` kasowal
     caly napis: gradient jest zbudowany z `currentColor`, a `currentColor`
     czyta wlasnie `color` — wiec pasmo swiatla bieglo po przezroczystym tle
     i slowo znikalo z ekranu. Barwa musi zostac w `color`, zeby gradient mial
     z czego brac swoj kolor. */
  -webkit-text-fill-color:transparent;
  animation:zs-blysk-tekst 9.5s cubic-bezier(.55,0,.3,1) infinite;
}
@keyframes zs-blysk-tekst{
  0%  {background-position:100% 0}
  38% {background-position:0% 0}
  100%{background-position:0% 0}
}
/* Pytanie jest zdaniem, nie hasłem — przy 66 px rozjeżdżało się na trzy linijki. */
.zs-slowo--pyt{
  font-size:clamp(23px,3.8vw,38px);color:var(--ink);
  letter-spacing:.004em;max-width:15ch;
}
.zs-slowo--pyt b{color:var(--rapa-ink);font-weight:inherit}

/* ─── stopka ─── */
.zs-abot{position:relative;z-index:3;flex:none;padding-top:16px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.zs-abot .znak{margin:0;display:flex;align-items:center;gap:9px;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-off)}
.zs-abot .znak .sygnet{width:16px;height:16px;flex:none;color:var(--ink-off)}
.zs-abot .znak .sygnet svg{width:100%;height:100%;display:block}
.zs-abot .drobne{margin:0;font-size:var(--fs-micro);color:var(--ink-faint);
  letter-spacing:.02em;line-height:1.6;max-width:min(96vw,760px)}
/* Adres i numer są JEDYNĄ rzeczą na tej stronie, w którą da się kliknąć —
   dostają jaśniejszy ton i podkreślenie na najechanie, żeby było widać,
   że to nie jest zwykły przypis. */
/* Cel dotykowy: te trzy odnośniki to CAŁA treść użytkowa strony, a miały
   22,6 px wysokości — połowę zalecanych 44 px (WCAG 2.5.5).
   Powiększamy OBSZAR TRAFIENIA, nie pudełko: `padding` odsunąłby podkreślenie
   od tekstu i linijka rozjechałaby się na oczach. Niewidoczny prostokąt
   `::after` rozpycha się w pionie do 44 px, nie ruszając ani układu,
   ani miejsca, w którym rysuje się `border-bottom`. */
.zs-abot .drobne a{position:relative;display:inline-block;padding:2px 0;
  color:var(--ink-muted);font-weight:var(--fw-med);text-decoration:none;
  border-bottom:1px solid var(--line-firm);transition:color 120ms,border-color 120ms}
.zs-abot .drobne a:hover,.zs-abot .drobne a:focus-visible{
  color:var(--rapa-ink);border-color:var(--rapa-ink)}
.zs-abot .drobne a::after{content:"";position:absolute;left:0;right:0;
  top:50%;height:44px;transform:translateY(-50%)}

/* KADR KAFELKA DO UDOSTĘPNIANIA (`?og=1`).
   Obrazek do Facebooka i Messengera powstaje ze zrzutu TEJ strony, a nie
   z osobnego pliku — inaczej kafelek byłby drugim źródłem wyglądu i po
   pierwszej poprawce przestałby być tym samym projektem. Przy kadrze
   1200×630 blok kończy się dokładnie na „Zapraszamy wkrótce"; stopka
   wychodziła poza dolną krawędź i „by RAPA" zostawało przecięte w pół.
   Kontakt na kafelku i tak jest nieczytelny, a pod obrazkiem stoi tytuł
   i opis strony — więc nic tu nie ginie. */
.zs[data-og] .zs-abot{display:none}

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

/* ─── węższe ekrany ─── */
@container (max-width:480px){
  .zs-plansza{gap:12px;padding-top:10px}
}

/* ─── ograniczony ruch ─────────────────────────────────────────────────────
   Słowa dalej się zmieniają, bo to jest TREŚĆ zaślepki, a nie ozdoba —
   znika za to wszystko, co się przesuwa, obraca i rozmywa. */
@media (prefers-reduced-motion:reduce){
  .zs-petale,.zs-petal,.zs-led-dot,.zs-odblask{animation:none}
  .zs-odblask{opacity:.07}
  .zs-slowo{transform:none;filter:none;transition:opacity 420ms ease}
  /* `-webkit-text-fill-color` odwraca przezroczyste wypełnienie, żeby napis
     był widoczny bez gradientu. `color` NIE może tu wejść: ma tę samą wagę
     co `.zs-slowo[data-s="…"]`, a stoi niżej w arkuszu, więc kasował barwę
     towaru i wszystkie cztery nazwy robiły się szare u każdego, kto ma
     w systemie wyłączone animacje. */
  .zs-slowo[data-widoczne]{animation:none;background:none;
    -webkit-text-fill-color:currentColor}
  .zs-slowo[data-widoczne]{transform:none}
  .zs-towar{transform:none;transition:opacity 300ms ease}
  .zs-kom[data-towar="kwiat"]  .zs-towar[data-t="kwiat"],
  .zs-kom[data-towar="ciasto"] .zs-towar[data-t="ciasto"],
  .zs-kom[data-towar="mieso"]  .zs-towar[data-t="mieso"],
  .zs-kom[data-towar="warzywo"] .zs-towar[data-t="warzywo"]{transform:none}
}