/* Strona pamięci — Lucyna Rymsza */
:root {
  --tlo: #15110d;
  --tlo2: #1d1813;
  --papier: #f3ece0;
  --tekst: #eadfce;
  --tekst2: #b9a98f;
  --zloto: #c9b38a;
  --szeryf: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { background: var(--tlo); }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--szeryf);
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* pasek postępu przewijania */
.postep {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 30;
  background: var(--zloto); transform-origin: 0 50%;
  transform: scaleX(var(--s, 0)); opacity: .7;
}

/* ---------- początek ---------- */
.start { height: 170vh; height: 170svh; position: relative; --p: 0; }
.start-scena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.start-tlo {
  position: absolute; inset: -6%;
  background: url(photos/hero_s.jpg) center/cover;
  filter: blur(28px) brightness(.38) saturate(.7);
}
.start-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.02 + var(--p) * .1));
  opacity: calc(1 - var(--p) * .75);
}
.start-scena::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,17,13,0) 32%, rgba(21,17,13,.72) 60%, rgba(21,17,13,.97) 100%);
}
.start-tekst {
  position: relative; z-index: 2; text-align: center;
  padding: 0 20px 9vh; width: 100%;
  transform: translateY(calc(var(--p) * -9vh));
  opacity: calc(1 - var(--p) * 1.7);
}
.start-tekst .nad { font-style: italic; font-size: clamp(20px, 5.2vw, 30px); color: var(--zloto); margin: 0; }
.start-tekst h1 {
  font-weight: 400; font-size: clamp(44px, 12.5vw, 96px); line-height: 1.05;
  margin: .12em 0 .16em; color: #fbf4e6; letter-spacing: .01em;
}
.start-tekst .daty { font-size: clamp(20px, 5.2vw, 30px); color: var(--zloto); margin: 0; letter-spacing: .04em; }
.przycisk {
  font: inherit; font-size: 18px; color: var(--papier); cursor: pointer;
  background: rgba(243,236,224,.08); border: 1px solid rgba(201,179,138,.6);
  border-radius: 999px; padding: 10px 22px; margin-top: 26px;
  -webkit-tap-highlight-color: transparent; transition: background .25s;
}
.przycisk:hover, .przycisk:focus-visible { background: rgba(243,236,224,.18); outline: none; }
.przewin {
  margin: 20px 0 0; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--tekst2);
}
.przewin::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--zloto), transparent);
  animation: kreska 2.2s ease-in-out infinite;
}
@keyframes kreska { 0%,100% { transform: scaleY(.3); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }

@media (min-width: 900px) and (orientation: landscape) {
  .start-scena { align-items: center; justify-content: center; gap: 6vw; }
  .start-foto {
    position: relative; inset: auto; width: auto; height: 84vh; z-index: 1;
    object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transform: scale(calc(1 + var(--p) * .06)) translateY(calc(var(--p) * -4vh));
  }
  .start-scena::after { background: linear-gradient(to bottom, rgba(21,17,13,0) 60%, rgba(21,17,13,.9) 100%); }
  .start-tekst { width: auto; padding: 0; max-width: 46vw; }
  .start-tekst h1 { font-size: clamp(56px, 6.4vw, 108px); }
}

/* ---------- rozdziały ---------- */
.rozdzial {
  min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12vh 24px 6vh; --a: 1; --b: 0;
}
.rozdzial h2 {
  font-weight: 400; font-style: italic; margin: 0; color: #fbf4e6;
  font-size: clamp(38px, 9vw, 76px); line-height: 1.1;
  opacity: calc(var(--a) * (1 - var(--b)));
  transform: translateY(calc((1 - var(--a)) * 40px));
  letter-spacing: calc((1 - var(--a)) * .12em);
}
.rozdzial p { margin: 14px 0 0; color: var(--tekst2); max-width: 30em; opacity: calc(var(--a) * (1 - var(--b))); }
.rozdzial p:empty { display: none; }
.rozdzial::before {
  content: ""; width: 1px; height: 70px; margin-bottom: 26px;
  background: linear-gradient(transparent, var(--zloto));
  transform: scaleY(var(--a)); transform-origin: top;
}

/* ---------- zdjęcia ---------- */
/* Bez JavaScriptu: zwykła kolumna zdjęć. Z JavaScriptem (klasa .js): przypięta scena,
   na której zdjęcia zmieniają się w miejscu, a przewijanie steruje przejściami. */
.scena { position: relative; padding: 0 4vw; }
.tlo { display: none; }
.kadr { margin: 0 auto 12vh; width: 100%; max-width: 760px; }
.ramka {
  background: var(--papier); padding: 5px; border-radius: 2px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
.okno { overflow: hidden; background: #2a231c; }
.okno img { width: 100%; height: auto; transform-origin: var(--fx, 50%) var(--fy, 45%); }
.kadr figcaption { text-align: center; font-style: italic; color: var(--tekst); font-size: 19px; margin-top: 14px; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.kadr figcaption:empty { display: none; }

.js .scena { padding: 0; }
.js .scena-kadr { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.js .scena-kadr::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--tlo), rgba(21,17,13,0) 14%, rgba(21,17,13,0) 86%, var(--tlo));
}
.js .tlo {
  display: block; position: absolute; inset: -8%; opacity: 0;
  background: center / cover no-repeat;
  filter: blur(30px) brightness(.27) saturate(.75);
}
.js .kadr {
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh;
  margin: 0; max-width: none; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center;
}
.js .kadr.on { display: flex; }
.js .ramka {
  width: min(92vw, calc(74vh * var(--ar))); width: min(92vw, calc(74svh * var(--ar)));
  will-change: transform, opacity; backface-visibility: hidden;
}
@media (min-width: 900px) {
  .ramka { padding: 7px; }
  .js .ramka { width: min(74vw, calc(80vh * var(--ar)), 1400px); }
}

/* ---------- film ---------- */
.film-sekcja { padding: 12vh 4vw 10vh; text-align: center; }
.film-sekcja h2 { font-weight: 400; font-style: italic; font-size: clamp(34px, 8vw, 64px); margin: 0 0 8px; color: #fbf4e6; }
.film-sekcja > p { color: var(--tekst2); margin: 0 auto 30px; max-width: 30em; }
.film {
  position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9;
  background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.6); cursor: pointer; overflow: hidden; border-radius: 3px;
}
.film img, .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.film .graj {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; background: rgba(21,17,13,.6); border: 1px solid rgba(243,236,224,.8);
  transition: transform .25s, background .25s;
}
.film .graj::before {
  content: ""; position: absolute; left: 34px; top: 26px;
  border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--papier);
}
.film:hover .graj { transform: scale(1.08); background: rgba(21,17,13,.8); }
.film-uwaga { margin-top: 16px; color: var(--tekst2); font-style: italic; font-size: 17px; }
.film-uwaga[hidden] { display: none; }

/* ---------- zakończenie ---------- */
.koniec { height: 240vh; height: 240svh; position: relative; --p: 0; }
.koniec-scena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.koniec-tlo {
  position: absolute; inset: -8%;
  background: url(photos/wigilia_s.jpg) center/cover;
  filter: blur(26px) brightness(.24) saturate(.7);
}
.koniec-foto {
  position: relative; width: 100%; max-width: min(100vw, 177.8vh); height: auto;
  transform: scale(calc(1.1 - var(--p) * .1));
  opacity: calc(.25 + var(--p) * 3);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.cytat {
  position: relative; text-align: center; padding: 30px 20px 0; margin: 0;
  opacity: calc((var(--p) - .38) * 4);
  transform: translateY(calc((1 - min(1, max(0, (var(--p) - .38) * 4))) * 24px));
}
.cytat p { font-style: italic; font-size: clamp(30px, 8vw, 68px); line-height: 1.15; margin: 0; color: #fbf4e6; }
.cytat footer { font-style: italic; font-size: clamp(20px, 4.6vw, 34px); color: var(--zloto); margin-top: 10px; }
@media (min-width: 900px) and (orientation: landscape) {
  .koniec-foto { width: auto; height: 100vh; max-width: none; object-fit: cover; box-shadow: none; }
  .koniec-scena::after {
    content: ""; position: absolute; inset: 38% 0 0 0;
    background: linear-gradient(transparent, rgba(12,10,8,.6) 50%, rgba(12,10,8,.96));
    opacity: calc((var(--p) - .3) * 4);
  }
  .cytat { position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 2; padding: 0 20px; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
}

.stopka { text-align: center; padding: 12vh 24px 14vh; color: var(--tekst2); }
.stopka .imie { font-size: clamp(28px, 6vw, 44px); color: #fbf4e6; margin: 0; }
.stopka .daty { color: var(--zloto); margin: 4px 0 30px; letter-spacing: .04em; }
.stopka small { display: block; font-size: 15px; opacity: .75; max-width: 34em; margin: 0 auto; }

/* ---------- przycisk muzyki ---------- */
.muzyka {
  position: fixed; right: 14px; bottom: 14px; z-index: 40;
  font: inherit; font-size: 16px; color: var(--papier); cursor: pointer;
  background: rgba(21,17,13,.78); border: 1px solid rgba(201,179,138,.55); border-radius: 999px;
  padding: 8px 16px 8px 12px; display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.muzyka.ukryta { opacity: 0; pointer-events: none; }
.muzyka { transition: opacity .4s; }
.muzyka .nuta { font-size: 18px; line-height: 1; color: var(--zloto); }
.muzyka .gra, .muzyka.gra .cisza, .przycisk .gra, .przycisk.gra .cisza { display: none; }
.przycisk.gra .gra { display: inline; }
.muzyka.gra .gra { display: inline; }
.muzyka.gra .nuta { animation: nuta 1.8s ease-in-out infinite; }
@keyframes nuta { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .rozdzial h2, .start-foto, .start-tekst, .koniec-foto { transform: none !important; }
  .rozdzial h2, .rozdzial p { opacity: 1 !important; }
  .przewin::after, .muzyka.gra .nuta { animation: none; }
}