/* Park Jarocin. Kolory, pismo i układ: pkt 4 specyfikacji w docs/superpowers/specs/. */
:root {
  --tlo: #0b0b0b;
  --pas: #121212;
  --linia: #222222;
  --tekst: #ffffff;
  --pomocniczy: #cfcfcf;
  --stopka: #8d8d8d;
  --zloty: #d8b46a;
  --na-zlotym: #16130c;
  --szeryfowy: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --prosty: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ruch: cubic-bezier(.2, .7, .2, 1);
  --ekran: 100vh;
  /* Łuk, który obejmuje całe okno. Jego prosta część zaczyna się na 41% wysokości,
     więc łuk musi być wyższy niż 1,72 wysokości okna i szerszy niż okno. */
  --mh: max(172vh, 152vw);
  --mw: calc(var(--mh) * 2 / 3);
  /* Odstępy bloku z napisami w połowie ekranu i wysokość, na której przyciemnienie pod napisami narasta. */
  --odstep: clamp(1.2rem, 4vw, 4rem);
  --odstep-dol: clamp(1.5rem, 4.6vw, 4.4rem);
  --rozbieg: 3rem;
  /* Przyciemnienie zdjęć pod napisami i pod napisem u góry. Przy tych wartościach złoty i biały napis
     mają kontrast co najmniej 4,5:1 nawet na białym zdjęciu (pilnuje tego test_tresc.py). */
  --zaslona: .72;
  --cien-gora: .6;
}
@supports (height: 100svh) {
  :root { --ekran: 100svh; --mh: max(172svh, 152vw); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tlo); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 1rem/1.5 var(--prosty); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--zloty); outline-offset: 3px; }

.pomin { position: absolute; left: 1rem; top: -4rem; z-index: 40; padding: .6rem 1rem; background: var(--zloty); color: var(--na-zlotym); font-weight: 600; text-decoration: none; }
.pomin:focus { top: 1rem; }

/* Pierwszy ekran */
.scena { position: relative; height: var(--ekran); min-height: 20rem; overflow: hidden; background: var(--tlo); }
.zapowiedz, .rama { display: none; }
.odslona { position: absolute; inset: 0; background: var(--tlo); }
.naglowek { position: absolute; top: clamp(1rem, 2.6vw, 2.4rem); left: 0; right: 0; z-index: 4; margin: 0; text-align: center; font: 400 clamp(.8rem, 1.45vw, 1.3rem)/1.2 var(--szeryfowy); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); pointer-events: none; }
.naglowek::after { content: ""; display: block; width: 3rem; height: 1px; margin: .9rem auto 0; background: var(--zloty); }
.znak { margin: 0; text-align: center; font: 400 clamp(2rem, 4.2vw, 4rem)/1.1 var(--szeryfowy); letter-spacing: .04em; }
.znak span { display: block; margin-top: .6em; font: 600 clamp(.6rem, 1.15vw, 1rem)/1.2 var(--prosty); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--zloty); }

/* Dwa skrzydła */
.skrzydla { display: flex; height: 100%; }
.skrzydlo { position: relative; isolation: isolate; flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: flex-basis .8s var(--ruch); }
.skrzydlo + .skrzydlo { border-left: 1px solid var(--zloty); }
.okno { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--tlo); }
/* Zdjęcie ma stałą szerokość 64% okna i trzyma się zewnętrznej krawędzi: rozszerzanie połowy odsłania go więcej. */
.kadr { position: absolute; top: 0; bottom: 0; left: 0; width: 64vw; }
.skrzydlo + .skrzydlo .kadr { left: auto; right: 0; }
.kadr + .kadr { opacity: 0; }
.kadr picture, .kadr img { display: block; width: 100%; height: 100%; }
.kadr img { max-width: none; object-fit: cover; }
.cien { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, var(--cien-gora)) 0, rgba(0, 0, 0, var(--cien-gora)) 5rem, rgba(0, 0, 0, .05) 14rem, rgba(0, 0, 0, .05) 100%); transition: background-color .5s; }

/* Blok z napisami sięga krawędzi połowy i sam przyciemnia zdjęcie pod sobą; nad nim zdjęcie zostaje jasne. */
.opis { padding: var(--rozbieg) var(--odstep) var(--odstep-dol); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, var(--zaslona)) var(--rozbieg), rgba(0, 0, 0, var(--zaslona)) 100%); }
.opis > * { max-width: 36rem; }
.skrzydlo + .skrzydlo .opis { text-align: right; }
.skrzydlo + .skrzydlo .opis > * { margin-left: auto; }
.etykieta { margin: 0; font: 600 clamp(.62rem, 1.02vw, .9rem)/1.3 var(--prosty); letter-spacing: .3em; text-transform: uppercase; color: var(--zloty); }
/* Nazwa nie łamie się na dwa wiersze, także gdy połowa zwęża się do 38%. */
.nazwa { margin: .35em 0 .1em; font: 400 clamp(2.2rem, 4.4vw, 4.6rem)/1.08 var(--szeryfowy); white-space: nowrap; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.wejdz { text-decoration: none; }
/* Pole kliknięcia nazwy obejmuje całą połowę; przyciski leżą nad nim. */
.wejdz::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.haslo { margin: .4rem 0 1.1rem; font: italic 400 clamp(1rem, 1.5vw, 1.35rem)/1.35 var(--szeryfowy); }
.przyciski { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.skrzydlo + .skrzydlo .przyciski { justify-content: flex-end; }
.przycisk { position: relative; z-index: 2; display: inline-block; padding: .85em 1.3em; border: 1px solid var(--zloty); background: rgba(11, 11, 11, .35); color: var(--tekst); font: 600 clamp(.68rem, 1vw, .85rem)/1 var(--prosty); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; }
.przycisk.glowny { background: var(--zloty); color: var(--na-zlotym); }
.przycisk:hover, .przycisk:focus-visible { background: var(--tekst); border-color: var(--tekst); color: var(--na-zlotym); }

/* Mysz, ekran poziomy: połowa pod kursorem albo z fokusem rozszerza się i pokazuje hasło z przyciskami. */
@media (hover: hover) and (min-width: 760px) and (orientation: landscape) {
  .wiecej { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s, opacity .6s; }
  .skrzydlo:hover { flex-basis: 62%; }
  .skrzydla:hover .skrzydlo:not(:hover) { flex-basis: 38%; }
  .skrzydla:hover .skrzydlo:not(:hover) .cien { background-color: rgba(0, 0, 0, .45); }
  .skrzydlo:hover .wiecej { max-height: 14rem; opacity: 1; }
  /* Fokus z klawiatury działa jak najechanie. Fokus po kliknięciu myszką nie: połowa zostawałaby otwarta.
     Gdy mysz stoi nad pierwszym ekranem, o szerokościach decyduje mysz; przyciski z fokusem są widoczne zawsze. */
  .skrzydla:not(:hover) .skrzydlo:has(:focus-visible) { flex-basis: 62%; }
  .skrzydla:not(:hover):has(:focus-visible) .skrzydlo:not(:has(:focus-visible)) { flex-basis: 38%; }
  .skrzydla:not(:hover):has(:focus-visible) .skrzydlo:not(:has(:focus-visible)) .cien { background-color: rgba(0, 0, 0, .45); }
  .skrzydlo:has(:focus-visible) .wiecej { max-height: 14rem; opacity: 1; }
  @supports not selector(:has(*)) {
    .skrzydlo:focus-within { flex-basis: 62%; }
    .skrzydla:focus-within .skrzydlo:not(:focus-within) { flex-basis: 38%; }
    .skrzydlo:focus-within .wiecej { max-height: 14rem; opacity: 1; }
  }
}

/* Telefon i ekran pionowy: połowy jedna pod drugą, hasło i przycisk główny widoczne stale. */
@media (max-width: 759px), (orientation: portrait) {
  :root { --odstep: 1.5rem; --odstep-dol: 1.6rem; --rozbieg: 2.2rem; }
  .scena { min-height: 32rem; }
  .skrzydla { flex-direction: column; }
  .skrzydlo + .skrzydlo { border-left: 0; border-top: 1px solid var(--zloty); }
  .kadr, .skrzydlo + .skrzydlo .kadr { left: 0; right: auto; width: 100%; }
  .skrzydlo + .skrzydlo .opis { text-align: left; }
  .skrzydlo + .skrzydlo .opis > * { margin-left: 0; }
  .skrzydlo + .skrzydlo .przyciski { justify-content: flex-start; }
  .naglowek { top: 1.1rem; font-size: .8rem; }
  .etykieta { font-size: .62rem; letter-spacing: .22em; }
  .nazwa { font-size: clamp(2rem, 10vw, 3.2rem); }
  .haslo { margin: .3rem 0 .9rem; font-size: 1rem; }
  .przycisk { font-size: .72rem; }
  .przycisk:not(.glowny) { display: none; }
}

/* Pas z kontaktami i stopka */
.pas { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 6vw, 6rem); background: var(--pas); border-top: 1px solid rgba(216, 180, 106, .4); }
.pas h2, .pas h3 { margin: 0 0 .5rem; font: 400 clamp(1.3rem, 2vw, 1.8rem)/1.2 var(--szeryfowy); }
.pas p { margin: 0 0 .5rem; color: var(--pomocniczy); line-height: 1.75; }
.pas .mala { margin-bottom: .7rem; color: var(--zloty); font: 600 .72rem/1.3 var(--prosty); letter-spacing: .28em; text-transform: uppercase; }
.pas a { text-decoration: none; }
.pas a:hover, .pas a:focus-visible { color: var(--zloty); }
.pas .odnosniki { color: var(--zloty); }
.pas .odnosniki a:hover, .pas .odnosniki a:focus-visible { color: var(--tekst); }
.stopka { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1.5rem, 6vw, 6rem); border-top: 1px solid var(--linia); color: var(--stopka); font-size: .85rem; }
.stopka p { margin: 0; }
@media (max-width: 759px), (orientation: portrait) {
  .pas { grid-template-columns: 1fr; }
  .stopka { flex-direction: column; gap: .3rem; }
}

/* Podstrony z tekstem: polityka prywatności, 404 */
.tekst { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 1.5rem; }
.tekst .powrot { margin: 0 0 2.5rem; font: 400 .95rem/1.2 var(--szeryfowy); letter-spacing: .5em; text-transform: uppercase; }
.tekst .powrot a { text-decoration: none; }
.tekst h1 { margin: 0 0 1.5rem; font: 400 clamp(2rem, 5vw, 3rem)/1.1 var(--szeryfowy); }
.tekst h2 { margin: 2rem 0 .8rem; color: var(--zloty); font: 400 1.35rem/1.3 var(--szeryfowy); }
.tekst p, .tekst li { color: var(--pomocniczy); }
.tekst .przycisk { margin-top: 1rem; }

/* Zdjęcia: powolne przybliżanie i przenikanie. Klasę "pokaz" dodaje skrypt, gdy dołożone zdjęcia się wczytają.
   Pierwsze zdjęcie leży na spodzie i jest widoczne zawsze; drugie i trzecie pojawiają się nad nim na 7 s. */
.kadr img { animation: zblizenie 18s ease-in-out infinite alternate; }
.okno.pokaz .kadr:nth-child(2) { animation: drugie-zdjecie 21s linear infinite; }
.okno.pokaz .kadr:nth-child(3) { animation: trzecie-zdjecie 21s linear infinite; }
/* druga połowa zmienia zdjęcia 3,5 s później, żeby połowy nie zmieniały się jednocześnie */
.skrzydlo + .skrzydlo .okno.pokaz .kadr { animation-delay: 3.5s; }
@keyframes zblizenie { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes drugie-zdjecie { 0%, 33.33% { opacity: 0; } 40.33%, 73.8% { opacity: 1; } 73.81%, 100% { opacity: 0; } }
@keyframes trzecie-zdjecie { 0%, 66.67% { opacity: 0; } 73.67%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* Wejście przez łuk. Klasę "wejscie" dodaje js/wejscie.js, zanim przeglądarka narysuje stronę.
   Reguły z tą klasą nie mogą wyłączać klikania: bez js/strona.js klasa zostaje na <html>. */
.wejscie .zapowiedz { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; background: var(--tlo); }
.wejscie .znak { opacity: 0; animation: pokaz-znak .6s ease forwards; }
.wejscie .rama { display: block; position: absolute; inset: 0; background: var(--zloty); }
.wejscie .odslona, .wejscie .rama { -webkit-mask: url(../grafika/luk.svg) 50% 56% / 0 0 no-repeat; mask: url(../grafika/luk.svg) 50% 56% / 0 0 no-repeat; }
.wejscie .odslona { animation: luk-wejscie 1.8s cubic-bezier(.5, 0, .85, .35) .8s forwards; }
.wejscie .rama { animation: luk-wejscie-rama 1.8s cubic-bezier(.5, 0, .85, .35) .8s forwards; }
@keyframes pokaz-znak { to { opacity: 1; } }
@keyframes luk-wejscie {
  from { -webkit-mask-size: 0 0; mask-size: 0 0; -webkit-mask-position: 50% 56%; mask-position: 50% 56%; }
  to { -webkit-mask-size: var(--mw) var(--mh); mask-size: var(--mw) var(--mh); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}
@keyframes luk-wejscie-rama {
  from { -webkit-mask-size: 8px 12px; mask-size: 8px 12px; -webkit-mask-position: 50% 56%; mask-position: 50% 56%; }
  to { -webkit-mask-size: calc(var(--mw) + 8px) calc(var(--mh) + 12px); mask-size: calc(var(--mw) + 8px) calc(var(--mh) + 12px); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}

/* Przelot przez łuk po kliknięciu w obiekt. Warstwy i klasę "leci" dodaje js/strona.js. */
.leci { overflow: hidden; }
.przelot, .przelot-rama { position: fixed; inset: 0; z-index: 30; -webkit-mask: url(../grafika/luk.svg) var(--x, 50%) var(--y, 50%) / 0 0 no-repeat; mask: url(../grafika/luk.svg) var(--x, 50%) var(--y, 50%) / 0 0 no-repeat; }
.przelot-rama { background: var(--zloty); animation: luk-przelot-rama 1.1s cubic-bezier(.5, 0, .85, .35) forwards; }
.przelot { background: var(--tlo); animation: luk-przelot 1.1s cubic-bezier(.5, 0, .85, .35) forwards; }
.przelot picture, .przelot img { display: block; width: 100%; height: 100%; }
.przelot img { max-width: none; object-fit: cover; }
@keyframes luk-przelot {
  from { -webkit-mask-size: 0 0; mask-size: 0 0; -webkit-mask-position: var(--x, 50%) var(--y, 50%); mask-position: var(--x, 50%) var(--y, 50%); }
  to { -webkit-mask-size: var(--mw) var(--mh); mask-size: var(--mw) var(--mh); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}
@keyframes luk-przelot-rama {
  from { -webkit-mask-size: 8px 12px; mask-size: 8px 12px; -webkit-mask-position: var(--x, 50%) var(--y, 50%); mask-position: var(--x, 50%) var(--y, 50%); }
  to { -webkit-mask-size: calc(var(--mw) + 8px) calc(var(--mh) + 12px); mask-size: calc(var(--mw) + 8px) calc(var(--mh) + 12px); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}

/* Ograniczenie ruchu w systemie: bez wejścia, przelotu, przenikania i przybliżania. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wejscie .zapowiedz, .wejscie .rama { display: none; }
  .wejscie .odslona { -webkit-mask: none; mask: none; }
}