/* ==================================================================== PLANSZA TYTUŁOWA — odwzorowanie paulkalkbrenner.net ==================================================================== Układ i WEJŚCIE odczytane z oryginału, nie podpatrzone na oko. Animacji nie dało się podejrzeć: w naszej przeglądarce testowej requestAnimationFrame jest zamrożony, więc zegar GSAP nigdy nie rusza i widać wyłącznie stan końcowy. Zamiast tego odczytaliśmy oś czasu z samego GSAP-a (gsap.globalTimeline.getChildren) — wraz z czasami, opóźnieniami i wartościami startowymi każdego przejścia. ODCZYTANA OŚ CZASU (całość 3,00 s): 0,00 s hero staje się widoczne; OBRAZ MA WTEDY 120vw × 100vh i przesunięcie -40vw / -44vh, czyli przykrywa cały ekran 0,60 s obraz startuje — przez 1,40 s zjeżdża do rozmiaru ramki w napisie (100% × 100%, x:17vw, y:0) 0,80 s wyrazy ruszają z PRZECIWNYCH stron przez 1,20 s: lewy xPercent -200 → 78 prawy xPercent 200 → 30 2,00 s wszystko dochodzi na miejsce przez 1,00 s: wyrazy → 0, obraz → x:0, nawigacja z yPercent -200 → 0 Czyli: wyrazy zbiegają się z obu stron, a pełnoekranowy obraz składa się dokładnie w lukę między nimi. Poprzednia wersja odtwarzała tylko ostatnią sekundę tego ruchu — stąd wrażenie, że „to jest samo zakończenie". KRZYWA CZASU: w oryginale to CustomEase (skompilowana funkcja, nie do odczytania ze źródła). Wywołaliśmy ją dla 101 punktów i przenieśliśmy te próbki 1:1 do CSS-owego linear(). To nie jest przybliżenie — to ta sama krzywa. Identyczna dla wszystkich trzech przejść. ==================================================================== */ :root{ /* Krzywa z oryginału, spróbkowana w 101 punktach. NAJPIERW BYŁO 21 PUNKTÓW I TO BYŁ BŁĄD. CSS-owe linear() łączy podane punkty ODCINKAMI PROSTYMI, a ta krzywa ma bardzo stromy środek: przy 21 próbkach jeden odcinek (t=0,30→0,35) obejmował 0,2354 całego ruchu — prawie ćwierć drogi pokonywanej ze stałą prędkością. Właśnie to widać jako „zbyt liniowe". Przy 101 próbkach największy pojedynczy skok to 0,0565, czyli cztery razy gładziej w newralgicznym miejscu. */ /* Wspólne przesunięcie w fazie środkowej. W oryginale są to xPercent 78 i 30 — ale xPercent liczy się od WŁASNEJ szerokości elementu, a te liczby są dobrane pod „Paul" (wąskie) i „Kalkbrenner" (szerokie). Po przeliczeniu na piksele oba wyrazy jadą tam o niemal tyle samo: 54 px i 58 px. Czyli cała kompozycja dryfuje w prawo jako jedna całość i dopiero potem wraca. Przeniesione wprost, te same procenty rozerwały układ: „Gramy dla" (szerokie) skakało o 0,78 × 846 px = 660 px, a „Zenona" tylko o 0,30 × 640 px = 192 px. Różnica wpychała wyrazy na logo — to jest ta „kolizja obrazu z tekstem". Jedna wspólna wartość dla wszystkich trzech elementów zachowuje zamysł i usuwa nachodzenie. */ --drift: 17vw; --ease-pk: linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 ); } /* UWAGA — KRZYWA JEST WPISANA DOSŁOWNIE W @keyframes, NIE PRZEZ var(). To nie jest niechlujstwo, tylko konieczność: `animation-timing-function` podane wewnątrz klatki kluczowej jako var(--…) nie jest stosowane — przeglądarka cicho wraca do domyślnego `ease`. Objaw był mylący, bo animacja działała, tylko z zupełnie inną krzywą, co czytało się jako „za bardzo liniowe". Sprawdzenie: element.getAnimations()[0] .effect.getKeyframes()[0].easing — musi pokazywać linear(...), nie ease. Zmienna --ease-pk zostaje dla przejść (transition), gdzie var() działa normalnie. Przeglądarki bez obsługi linear() odrzucą tę deklarację i użyją domyślnego `ease` — ruch zostaje, zmienia się tylko krzywa. */ /* NAKŁADKA (od 22.09.2026). Plansza nie jest już początkiem strony, tylko gra raz NAD nią i schodzi (hero.js) — pod spodem od razu jest rezerwacja. Widoczna WYŁĄCZNIE przy klasie html.intro, którą stawia skrypt w : bez JavaScriptu, przy skoku do sekcji i przy ograniczonym ruchu nakładki nie ma wcale, więc nic nie może zasłonić planu sali na stałe. */ .hero{display:none} html.intro .hero{ position:fixed;inset:0;z-index:90; background:var(--papier); display:flex;flex-direction:column;justify-content:space-between; padding:clamp(28px,7vh,72px) 0 26px; /* Wyrazy wyjeżdżają poza ekran o 200% swojej szerokości — bez tego pojawiłby się poziomy pasek przewijania na czas wejścia. */ overflow:hidden; cursor:pointer; /* kliknięcie pomija planszę */ } .hero-srodek{flex:1;display:flex;align-items:center} .h-d{ font-weight:700; letter-spacing:-.05em; line-height:.8; text-transform:none; /* wzorzec: zwykła wielkość liter */ white-space:nowrap; /* wzorzec: jeden wiersz, nigdy nie łamie */ text-align:start; color:var(--czern); font-size:11vw; /* wartość zastępcza; właściwą liczy hero.js */ } /* --- wyrazy -------------------------------------------------------- */ .h-d__span{ display:inline-block; vertical-align:baseline; will-change:transform; /* Wyrazy MUSZĄ być nad obrazem. W trakcie wjazdu obraz jest jeszcze duży, a wyrazy przechodzą przez jego obszar (lewy wychodzi chwilowo aż na +78% swojej szerokości) — przy obrazie na wierzchu nachodziły na siebie i litery znikały pod nim. */ position:relative; z-index:2; } /* --- ramka na logo -------------------------------------------------- */ /* overflow MUSI być widoczny: w pierwszej fazie zawartość jest większa od ramki o cały ekran i ma się z niej wylewać. */ .h-d__img{ display:inline-flex; width:.75em; aspect-ratio:1.5 / 1; margin-left:.05em; margin-right:.05em; vertical-align:baseline; position:relative; overflow:visible; } /* To jest element, który zjeżdża z pełnego ekranu do ramki. */ .h-d__img-hold{ position:absolute; left:0;top:0; width:100%;height:100%; overflow:hidden; /* Bez tła — logo ma być samym znakiem, nie obrazkiem w szarej ramce. Przy pełnym ekranie szary prostokąt zachowywał się jak plansza ładowania i rozbijał wrażenie, że to część napisu. */ will-change:transform,width,height; z-index:1; /* pod wyrazami — patrz komentarz przy .h-d__span */ } /* Odstęp w procentach, nie w em: em skaluje się ze stopniem pisma, więc przy pełnym ekranie logo dotykałoby krawędzi. Procent skaluje się z ramką i trzyma margines na każdym etapie. */ .h-d__img-hold img{width:100%;height:100%;object-fit:contain;padding:4%} /* --- gość specjalny (góra planszy) ---------------------------------- */ /* Na ulotce z 17.09 Siczka (KSU) stoi na samej górze jako główna atrakcja. Tu tak samo: nad tytułem, dość duży, żeby był pierwszą rzeczą po nazwie wydarzenia, i dość mały, żeby nie konkurował z samym tytułem. */ .hero-gosc{opacity:0} .hero-gosc-etyk{ font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--szary);margin-bottom:6px; } .hero-gosc-imie{ font-size:clamp(2.1rem,6.4vw,4.6rem);font-weight:700; letter-spacing:-.045em;line-height:.95;color:var(--czern); } .hero-gosc-imie span{color:var(--szary-2)} .hero-gosc-dop{margin-top:8px;font-size:.9rem;color:var(--szary)} /* --- dół planszy ---------------------------------------------------- */ .hero-dol{ display:grid;gap:16px;grid-template-columns:1fr;align-items:end; opacity:0; } @media (min-width:820px){ .hero-dol{grid-template-columns:1fr 1fr auto;gap:30px} } .hero-dol p{font-size:.8rem;line-height:1.5;color:var(--szary);max-width:32ch} .hero-dol b{display:block;color:var(--czern);font-weight:500;font-size:.92rem;margin-bottom:2px} .hero-dol .akcje{display:flex;gap:9px;flex-wrap:wrap} /* Duża data — prośba klienta (17.09). Rok stoi w pasku u góry strony i w atrybucie datetime; na planszy liczy się dzień i miesiąc. */ .hero-kiedy .hero-data{ display:block;font-size:clamp(3rem,8.5vw,6.2rem);font-weight:700; letter-spacing:-.05em;line-height:.85;color:var(--czern); font-variant-numeric:tabular-nums;margin-bottom:10px; } @media (min-width:820px){.hero-dol .akcje{justify-content:flex-end}} /* ==================================================================== WEJŚCIE — trzy sekundy, klatki odpowiadają czasom z oryginału ==================================================================== */ /* Stan przed startem. Ustawiony w CSS, nie w JS, żeby nie było mignięcia pełnym układem, zanim skrypt zdąży cokolwiek zrobić. */ .hero .h-d__span{transform:translateX(-200%)} .hero .h-d__span--prawy{transform:translateX(200%)} /* Punkt startowy logo: DOKŁADNIE środek ekranu. Wcześniej stało tu `width:120vw; height:100vh` z przesunięciem `-40vw,-44vh` — liczbami dobranymi na oko. Ramka z logo siedzi w środku napisu, a napis jest dopasowywany do szerokości okna przez hero.js, więc jej położenie zmienia się z każdą szerokością ekranu i z długością tekstu. Stałe przesunięcie trafiało w środek tylko przypadkiem: przy jednej szerokości logo startowało z centrum, przy innej z lewej strony albo spod górnej krawędzi. Teraz kadr startowy to równo widok (100vw × 100vh), a przesunięcie liczy hero.js z rzeczywistego położenia ramki — logo zaczyna wypełnione na cały ekran i wyśrodkowane, niezależnie od okna. Wartości zapasowe w var() są przybliżeniem tego samego na wypadek, gdyby skrypt nie zdążył: ramka stoi mniej więcej w połowie napisu, a napis w połowie ekranu. */ .hero .h-d__img-hold{ width:100vw;height:100vh; transform:translate(var(--obraz-x,calc(-50vw + .375em)), var(--obraz-y,calc(-50vh + .25em))); } /* 0,60 s / 3,00 s = 20% · 0,80 s = 26,667% · 2,00 s = 66,667% */ @keyframes pkObraz{ 0%,20% {width:100vw;height:100vh; transform:translate(var(--obraz-x,calc(-50vw + .375em)), var(--obraz-y,calc(-50vh + .25em))); animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 66.667% {width:100%;height:100%;transform:translate(var(--drift),0); animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 100% {width:100%;height:100%;transform:translate(0,0)} } @keyframes pkLewy{ 0%,26.667%{transform:translateX(-200%);animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 66.667% {transform:translateX(var(--drift)); animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 100% {transform:translateX(0)} } @keyframes pkPrawy{ 0%,26.667%{transform:translateX(200%); animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 66.667% {transform:translateX(var(--drift)); animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 100% {transform:translateX(0)} } @keyframes pkDol{ 0%,66.667%{opacity:0;transform:translateY(14px);animation-timing-function:linear( 0, 0.00106, 0.00211, 0.00328, 0.00486, 0.00646, 0.00837, 0.01058, 0.01281, 0.01566, 0.01854, 0.02191, 0.02552, 0.02954, 0.03397, 0.03883, 0.04416, 0.0501, 0.05644, 0.06374, 0.07151, 0.08022, 0.09, 0.10072, 0.11263, 0.12625, 0.14145, 0.15884, 0.17905, 0.20254, 0.23013, 0.2634, 0.30354, 0.35299, 0.40905, 0.46556, 0.52149, 0.56923, 0.60977, 0.6439, 0.67335, 0.69906, 0.72178, 0.74203, 0.76018, 0.7767, 0.79162, 0.80534, 0.81816, 0.82984, 0.84064, 0.85092, 0.86021, 0.86915, 0.87733, 0.8852, 0.89239, 0.89937, 0.90571, 0.91196, 0.91757, 0.9231, 0.92819, 0.933, 0.93772, 0.94192, 0.94607, 0.95001, 0.95356, 0.95711, 0.96041, 0.96341, 0.9664, 0.96921, 0.9717, 0.97418, 0.9766, 0.97865, 0.98066, 0.98268, 0.98444, 0.98602, 0.9876, 0.98916, 0.9904, 0.99159, 0.99277, 0.99391, 0.99476, 0.99557, 0.99638, 0.99719, 0.9977, 0.99817, 0.99864, 0.99911, 0.9994, 0.99955, 0.9997, 0.99985, 1 )} 100% {opacity:1;transform:translateY(0)} } /* `forwards` trzyma stan końcowy — bez tego wszystko wróciłoby na start w chwili zakończenia animacji. */ .gotowe .h-d__span {animation:pkLewy 3s both} .gotowe .h-d__span--prawy {animation:pkPrawy 3s both} .gotowe .h-d__img-hold {animation:pkObraz 3s both} .gotowe .hero-dol {animation:pkDol 3s both} .gotowe .hero-gosc {animation:pkDol 3s both} @media (prefers-reduced-motion:reduce){ /* Dla części osób taki ruch to zawroty głowy. Zostaje sam stan końcowy — strona jest w pełni używalna, tylko bez wjazdu. */ .hero .h-d__span,.hero .h-d__span--prawy{transform:none} .hero .h-d__img-hold{width:100%;height:100%;transform:none;z-index:auto} .hero-dol,.hero-gosc{opacity:1} .gotowe .h-d__span,.gotowe .h-d__span--prawy,.gotowe .h-d__img-hold, .gotowe .hero-dol,.gotowe .hero-gosc{animation:none} }