/* DAI TO SE (motyw WP) - strona główna: hero i manifest. Przeniesione 1:1 z <style> w makiecie index.html (inc/strony.php wpina po stylach modułów). */
/* HERO: zdjęcie na cały pierwszy ekran, także pod paskiem strony (pasek jest na nim przezroczysty, pełne tło wraca po przewinięciu: site.css).
   Decyzja użytkownika z 4.10.2026, zmienia ModulHero z eksportu (tam hasło stało nad zdjęciem). Hasło i przycisk leżą na zdjęciu w tym samym miejscu co dotąd. */
.hero { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: min(100svh, 100vw * 1062 / 1888); margin-top: calc(var(--pasek-h) * -1); padding-top: var(--pasek-h); background: var(--tusz); color: var(--krem); }
/* Hasło tekstem na zdjęciu bez napisu (prośba użytkownika z 8.10.2026: napis wklejony w zdjęcie był nieostry). Miary zdjęte z jego planszy hero-banner.png 1888 x 1062
   przez dopasowanie pikseli: Druk Wide Medium 170 px, odstęp liter -0,5 px, lewa krawędź 24,5 px, linie pisma na 484 i 643 px, biały. Wszystko w ułamkach szerokości planszy (cqw).
   .hero__plansza leży dokładnie na zdjęciu (zdjęcie ma tu zawsze pełną szerokość okna, patrz min-height wyżej), a hero-na-gorze.webp to wycinek tego samego zdjęcia (tost z palcami, słoik z łyżką), który zasłania napis.
   Hasło sięga do 92% szerokości planszy, dlatego hero nie jest wyższe niż plansza: napis nigdy nie jest ucięty z boków. Telefon i okna pionowe: hasło u góry, bez wycinka (niżej). */
.hero__plansza { position: absolute; z-index: 1; left: 0; top: 50%; width: 100%; aspect-ratio: 1888 / 1062; transform: translateY(-50%); container-type: inline-size; pointer-events: none; }
.hero__h { position: absolute; z-index: 1; left: 1.2977cqw; top: 17.214cqw; font-family: var(--f-druk); font-weight: 500; font-size: 9.0042cqw; line-height: .9353; letter-spacing: -.003em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.hero__gora { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; }
/* PRÓG (1c z eksportu „Hero przycisk”): czerwony pas na całą szerokość dołu kadru, link do półki. Po najechaniu podnosi się o 5 px i odsłania kremową krawędź.
   Wejście (prośba użytkownika z 8.10.2026, poza eksportem): pas rośnie od lewej do prawej, potem zza krawędzi wysuwa się napis i spada strzałka. Tylko transform i opacity. */
.hero__prog { position: absolute; z-index: 3; inset: auto 0 0; height: 56px; }
.hero__prog::before, .hero__cta::before { content: ""; position: absolute; inset: 0; background: var(--krem); transform-origin: 0 50%; animation: prog-pas 800ms cubic-bezier(.65,0,.2,1) 150ms both; }
.hero__cta::before { z-index: -1; background: var(--czerwien); }
.hero__cta { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--margines); color: var(--krem); font-weight: 500; font-size: 22px; line-height: 1; text-decoration: none; transition: transform .2s linear; }
@media (hover: hover) { .hero__cta:hover { transform: translateY(-5px); } }
.hero__cta:active { transform: translateY(-5px); }
.hero__cta:focus-visible { outline: 2px solid var(--krem); outline-offset: -6px; box-shadow: none; }
.hero__cn { overflow: hidden; padding: 6px 0; } /* 6 px: okno na napis z miejscem na ogonki */
.hero__cn span { display: block; animation: prog-napis 520ms cubic-bezier(.2,.7,.2,1) 700ms both; }
.hero__cta svg { flex: none; width: 24px; height: 24px; animation: prog-strzalka 420ms cubic-bezier(.2,.7,.2,1) 880ms both; }
/* wejście czeka na koniec animacji logo: logo.js dokłada html.ld-off, gdy litery wylądują w pasku (albo gdy loader jest pomijany); prog-on to bezpiecznik ze skryptu pod hero */
@media (scripting: enabled) { html:not(.ld-off):not(.prog-on) .hero__prog::before, html:not(.ld-off):not(.prog-on) .hero__cta::before, html:not(.ld-off):not(.prog-on) .hero__cn span, html:not(.ld-off):not(.prog-on) .hero__cta svg { animation-play-state: paused; } }
@keyframes prog-pas { from { transform: scaleX(0); } }
@keyframes prog-napis { from { transform: translateY(130%); } }
@keyframes prog-strzalka { from { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__prog::before, .hero__cta::before, .hero__cn span, .hero__cta svg { animation: none; } .hero__cta { transition: none; } }
.hero__foto { position: absolute; inset: 0; overflow: hidden; }
.hero__foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* przyciemnienie samej góry kadru pod pasek strony (wróciło 8.10.2026, mniejsze niż wcześniej: było 64% wysokości i .82); kremowe linki nad białym talerzykiem mają 4,5:1 */
.hero__foto::after { content: ""; position: absolute; inset: 0 0 auto; height: max(34%, 260px); background: linear-gradient(rgba(19,19,19,.84), rgba(19,19,19,0)); }
/* telefon i okna pionowe: zdjęcie na cały ekran przycięte z boków (62%: słoik z etykietą zostaje w kadrze), więc duży napis by się nie zmieścił: hasło u góry (34 px przy 390, 27 px przy 320, najwyżej 62 px), bez wycinka. */
@media (max-width: 720px), (max-aspect-ratio: 1/1) {
  .hero { min-height: 100svh; }
  .hero__plansza { display: contents; }
  .hero__gora { display: none; }
  .hero__h { left: var(--margines); top: calc(var(--pasek-h) + var(--s-6)); font-size: min(62px, (100vw - 2 * var(--margines)) / 10.25); line-height: .95; letter-spacing: 0; color: inherit; }
  .hero__foto img { object-position: 62% 50%; }
  .hero__foto::after { height: 52%; background: linear-gradient(rgba(19,19,19,.82), rgba(19,19,19,.55) 50%, rgba(19,19,19,0)); } /* tu hasło jest tekstem na zdjęciu, więc przyciemnienie sięga pod nie (kontrast co najmniej 3:1) */
}
@media (max-width: 720px) {
  .hero__prog { height: 48px; }
  .hero__cta { font-size: 16px; }
  .hero__cta svg { width: 20px; height: 20px; }
  .hero__foto img { object-position: 82% 50%; } /* w pionowym kadrze zostają tost i słoik */
}
/* MANIFEST: wyjątek od systemu, wygląd i animacja sprzed redesignu, 1:1 z buckssauce.com (decyzja użytkownika z 4.10.2026).
   60 px / 1.0 / -0.02em (telefon 32 px); słowa i ikony startują z y 100 px, obrót losowy +-30 st., scale(.5, 1.5), opacity 0;
   0,65 s na element, co 35 ms, start gdy tekst mija 90% okna, raz. */
.manifest { padding: 160px 10px 0; }
.manifest__text {
  max-width: 1134px; margin: 0 auto; text-align: center; /* szerokość rośnie razem z fontem, więc wiersze łamią się tak samo */
  font-family: var(--f-tekst); font-weight: 400; text-transform: none;
  font-size: 68px; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; /* wzorzec ma 60 px (telefon 32); powiększone o 13% na prośbę użytkownika z 4.10.2026 */
}
.manifest__text .w { display: inline-block; opacity: 0; transform: translateY(100px) rotate(var(--r)) scale(.5, 1.5); }
.manifest__text svg, .manifest__text img { height: 1em; width: auto; vertical-align: baseline; }
.manifest__text img { height: 1.15em; vertical-align: -.12em; margin: 0 .06em; } /* lody rysowane odręcznie, w stylu ikon z buckssauce.com; czubek rożka schodzi pod linię pisma */
.manifest.is-in .w {
  animation: pop .65s both;
  animation-delay: calc(var(--i) * 35ms);
  /* krzywa zmierzona klatka po klatce na buckssauce.com: przestrzelenie 10% w 41% czasu, dołek -2,2% w 72% */
  animation-timing-function: linear(0.0 0.0%, 0.096 2.5%, 0.204 4.9%, 0.311 7.5%, 0.429 9.9%, 0.542 12.4%, 0.658 15.0%, 0.766 17.4%, 0.853 19.9%, 0.93 22.5%, 0.99 24.9%, 1.033 27.4%, 1.063 30.0%, 1.084 32.4%, 1.095 35.0%, 1.1 37.5%, 1.1 39.9%, 1.099 42.5%, 1.096 45.0%, 1.09 47.4%, 1.082 50.0%, 1.068 52.5%, 1.051 54.9%, 1.033 57.5%, 1.014 60.0%, 0.999 62.4%, 0.989 65.0%, 0.983 67.6%, 0.979 70.0%, 0.978 72.5%, 0.978 75.1%, 0.98 77.5%, 0.982 80.0%, 0.984 82.6%, 0.988 85.0%, 0.991 87.5%, 0.994 90.1%, 0.997 92.5%, 0.999 95.0%, 0.99 97.6%, 1.0 100.0%);
}
@keyframes pop { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .manifest__text .w { opacity: 1; transform: none; animation: none; } }
@media (max-width: 720px) { .manifest { padding: 120px 5px 0; } .manifest__text { font-size: 36px; } }