/* DAI TO SE - animowane logo: pasek + loader (runda 8, MAP D70-D79; sprawdzenia: node sites/daitose/check-logo.mjs).
   Ruch i znaczniki: assets/logo.js, kształty: assets/logo-glify.js. Animowane tylko transform i opacity. */

/* LOGO W PASKU. Klasę lg i litery dokłada logo.js; bez skryptu zostaje napis DAI-TO-SE ze site.css.
   1em = wysokość litery: 22 px na komputerze, 16 px do 820 px (system z 4.10.2026). --lw = szerokość najszerszego stylu w em (liczy logo.js),
   --lr = miejsce reszty paska; pudełko ma 44 px wysokości na pole dotyku.
   ponytail: 560 px (z linkami) i 196 px (koszyk + przycisk menu) = margines + reszta paska przy „Koszyk (10)” + odstęp, pomiar 2026-10-04;
   próg 820 px jak w site.css. Po zmianie linków paska albo progu przeliczyć. */
.nav__logo.lg { --lr: 560px; --lm: 22px; position: relative; width: calc(var(--lw) * 1em); height: 44px; font-size: clamp(10px, (100vw - var(--lr)) / var(--lw), var(--lm)); }
@media (max-width: 820px) { .nav__logo.lg { --lr: 228px; --lm: 16px; } }

/* Litera = punkt w środku dołu znaku (span 0 x 0) przesuwany transformem, więc przysiad skaluje się od ziemi.
   Kształty 3 stylów leżą na sobie, widać ten z data-styl logo; w trakcie fali podmienia je logo.js. */
.lg__l, .lg__x { position: absolute; left: 0; top: 50%; }
.lg__l svg, .lg__x svg { position: absolute; bottom: 0; overflow: visible; }
.lg__l svg, .lg__x { opacity: 0; }
[data-styl=pedzel] [data-s=pedzel], [data-styl=kanji] [data-s=kanji], [data-styl=babel] [data-s=babel] { opacity: 1; }
.lg__l path { fill: currentColor; fill-rule: evenodd; }
[data-s=pedzel] path { fill-rule: nonzero; } /* pędzel ma nachodzące kontury, pozostałe style dziury */

/* LOADER (D74, D75). div.ld dokleja logo.js: punkt w środku okna, 1em = wysokość bloku 7 liter, kontur 1,5 px.
   Dodatki (nawiasy, TM) gasną i zapalają się ze stylem; lg__f = wypełniony kształt na czas lotu do paska. */
.ld { position: fixed; z-index: 201; left: 50%; top: 50%; font-size: min(40vh, 62vw); pointer-events: none; }
.ld path { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ld .lg__f path { fill: currentColor; stroke: none; }
html:has(.hero):has(.nav:not(.is-przewiniety)) .ld .lg__f { color: var(--krem); } /* strona główna na górze: logo paska leży na zdjęciu i jest kremowe, więc litery lądują w tym kolorze */
.lg__x { transition: opacity .3s; }
[data-styl=babel] .lg__x { transition-delay: .4s; } /* TM bąbla wchodzi, gdy fala dochodzi do ostatnich liter */
.ld-out .lg__x { opacity: 0; transition: opacity .15s; }
.ld-p .ld { opacity: 0; transition: opacity .2s; }
.ld-off .ld { display: none; }

/* ZASŁONA (D74, D76): jest od pierwszej klatki, ale tylko tam, gdzie działa JS. Klasy na html: ld-out = zanik
   (z ld-p krótki, 200 ms), ld-off = zdjęta. Bezpiecznik: bez logo.js chowa się sama po 4 s; gdy skrypt ruszy (ld-js),
   pilnuje tego jego zegar. Logo w pasku jest ukryte do zdjęcia zasłony (przy krótkim zaniku: do jego startu). */
@media screen and (scripting: enabled) {
  html::before { content: ""; position: fixed; z-index: 200; inset: 0; background: var(--krem); pointer-events: none; transition: opacity .4s; animation: ld-z 0s 4s forwards; }
  html.ld-js::before { animation: none; }
  html.ld-out::before { opacity: 0; }
  html.ld-p::before { transition-duration: .2s; }
  html.ld-off::before { content: none; }
  html:not(.ld-off, .ld-p) .lg { visibility: hidden; }
}
@keyframes ld-z { to { visibility: hidden; } }
@media print { .ld { display: none; } }

/* DUŻY NAPIS nad półką (.nz w nagłówku sekcji, strona główna): to samo logo co w pasku, 1em = wysokość litery, mieści się w oknie na każdej szerokości.
   Pudełko ma zapas nad literami na skok fali (.4em). */
.nz { display: block; }
.nz.lg { position: relative; width: calc(var(--lw) * 1em); height: 1.1em; margin: .45em auto .15em; font-size: min(7vw, 112px, (100vw - 2 * var(--margines)) / var(--lw)); color: var(--tusz); -webkit-tap-highlight-color: transparent; transition: transform .5s cubic-bezier(.65,0,.25,1); }
/* kroje mają różną szerokość, a napis stoi na środku: pudełko przesuwa się o połowę różnicy do najszerszego */
.nz.lg[data-styl=pedzel] { transform: translateX(calc((var(--lw) - var(--w-pedzel)) * .5em)); }
.nz.lg[data-styl=kanji] { transform: translateX(calc((var(--lw) - var(--w-kanji)) * .5em)); }
.nz.lg[data-styl=babel] { transform: translateX(calc((var(--lw) - var(--w-babel)) * .5em)); }
@media (prefers-reduced-motion: reduce) { .nz.lg { transition: none; } }