/* ============================================================
   MOTYW: rose-garden  (Ogród Różany)
   7-ekranowe zaproszenie — akwarelowe róże, fontanna, pałac
   Autor grafik: dostarczone assety w assets/themes/rose-garden/
   ============================================================ */

body[data-theme="rose-garden"] {
  /* --- Paleta --- */
  --rg-ink:      #4E1038;   /* nagłówki, imiona */
  --rg-body:     #2E2A2C;   /* tekst opisowy */
  --rg-accent:   #7D5578;   /* przyciski, aktywne radio */
  --rg-line:     #6B2247;   /* linia harmonogramu */
  --rg-card:     #FFFFFF;   /* białe karty */
  --rg-pink:     #FDECF5;   /* pastelowy róż */
  --rg-muted:    #8A7B84;   /* podpisy, placeholdery */

  /* --- Fonty --- */
  --rg-script:   'Pinyon Script', cursive;          /* imiona pary */
  --rg-display:  'Playfair Display', serif;         /* nagłówki sekcji */
  --rg-mono-sig: 'Italianno', cursive;              /* monogram R&P */
  --rg-ui:       'Montserrat', sans-serif;          /* countdown, przyciski */
  --rg-text:     'Comfortaa', sans-serif;           /* teksty opisowe */

  /* --- Layout --- */
  --rg-col:      clamp(320px, 92vw, 560px);         /* szerokość kolumny treści */

  background: #FFFFFF;
  color: var(--rg-body);
  font-family: var(--rg-text);
}

/* Klasyczne sekcje ukrywa css/screens.css (dotyczy wszystkich motywów
   7-ekranowych, nie tylko tego) */

/* ============================================================
   KONTENER — jedna ciągła wstęga, bez granic „kartek"
   ============================================================ */

body[data-theme="rose-garden"] { background: #FFFFFF; }

#rgScreens {
  /* Szerokość odniesienia dla proporcji grafik (płótno 900×1500) */
  --rg-w: min(100vw, 760px);
  width: 100%;
  margin: 0 auto;
  /* clip na obu osiach — 'clip' nie tworzy kontenera przewijania,
     w przeciwieństwie do overflow-x:clip + overflow-y:visible,
     które przeglądarka zamienia na 'auto' i ucina grafikę w pionie */
  overflow: clip;
  background: #FFFFFF;
}

/* ============================================================
   WSPÓLNE — sekcja (nie „ekran"): wysokość z treści, grafika płynie
   ============================================================ */

.rg-screen {
  position: relative;
  width: 100%;
  /* Grafika ma być widoczna w całości — proporcja płótna 900×1500.
     To NIE jest sztywna „kartka": sekcje z dłuższą treścią rosną same,
     zachodzą na siebie, a krawędzie są wygaszone maską. */
  min-height: calc(var(--rg-w) * 5 / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Sekcje zachodzą na siebie → brak widocznego szwu */
  margin-top: -7vw;
  padding: 9vw 0;
}
.rg-screen:first-child { margin-top: 0; }

/* Warstwy graficzne — proporcje płótna 900×1500, miękko wtopione w sąsiadów */
.rg-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: var(--rg-w);
  /* Proporcja płótna, ale nigdy krócej niż treść sekcji */
  height: max(calc(var(--rg-w) * 5 / 3), 100%);
  z-index: 0;
  pointer-events: none;
  /* Wygaszenie krawędzi — grafiki przenikają się zamiast ciąć */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.rg-bg img {
  position: absolute;
  display: block;
  will-change: transform;
  /* left/top/width/height ustawiane inline z manifestu */
}

/* Warstwy bez maski tam, gdzie grafika ma dochodzić do krawędzi */
.rg-rsvp .rg-bg,
.rg-outro .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
}

/* Kolumna treści — 78% szerokości karty, jak w projekcie */
/* Bazowa reguła .rg-inner przeniesiona do css/style.css — była tu bez
   zakresu i po cichu obsługiwała WSZYSTKIE motywy, co przy dziesięciu
   motywach jest już mylące. */

/* Nagłówek sekcji — Playfair italic, wersaliki */
.rg-h {
  font-family: var(--rg-display);
  font-style: italic;
  font-weight: 700;
  color: var(--rg-ink);
  text-transform: uppercase;
  font-size: clamp(30px, 7.5vw, 46px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Tekst opisowy — Comfortaa */
.rg-p {
  font-family: var(--rg-text);
  font-weight: 300;
  font-size: clamp(12px, 3.1vw, 14px);
  line-height: 1.75;
  color: var(--rg-body);
  margin: 0;
}

/* Przycisk — pigułka */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rg-ui);
  font-weight: 600;
  font-size: clamp(14px, 3.6vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--rg-accent);
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease;
  box-shadow: 0 6px 18px -6px rgba(125,85,120,.5);
}
.rg-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(125,85,120,.6); background: #6C476A; }
.rg-btn:active { transform: translateY(0); }

/* Biała karta (lokalizacja, RSVP) */
.rg-card {
  background: var(--rg-card);
  border-radius: 28px;
  box-shadow: 0 18px 50px -22px rgba(78,16,56,.28);
  padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 32px);
}

/* ============================================================
   EKRAN 2 — DATA I OSOBY
   ============================================================ */

.rg-date {
  /* min-height dziedziczy z .rg-screen (proporcja płótna) — nie nadpisujemy,
     bo 100svh bywa niższe niż grafika i ucina ją w połowie */
  padding: clamp(48px, 11vh, 96px) 0 9vw;
  justify-content: flex-start;
}

.rg-names {
  font-family: var(--rg-script);
  font-weight: 400;
  color: var(--rg-ink);
  font-size: clamp(52px, 15vw, 104px);
  line-height: .95;
  margin: 0;
}
.rg-names .amp {
  display: block;
  font-size: .48em;
  line-height: 1.2;
  margin: -.06em 0;
}

.rg-sub {
  font-family: var(--rg-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.6;
  color: var(--rg-ink);
  margin: clamp(18px, 4vw, 30px) auto 0;
  max-width: 30em;
}

/* Countdown — 3 kolumny */
.rg-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 4vw, 28px);
  margin: clamp(26px, 6vw, 46px) auto 0;
  max-width: 400px;
}
.rg-count .num {
  font-family: var(--rg-ui);
  font-weight: 400;
  font-size: clamp(24px, 6.6vw, 34px);
  color: var(--rg-ink);
  line-height: 1;
}
.rg-count .lbl {
  font-family: var(--rg-ui);
  font-weight: 300;
  font-size: clamp(9px, 2.4vw, 11px);
  color: var(--rg-body);
  letter-spacing: .04em;
  margin-top: 6px;
}

/* (róże pierwszego planu są warstwami tła z manifestu — .rg-fg usunięte) */

/* ============================================================
   EKRAN 3 — HARMONOGRAM
   ============================================================ */

.rg-schedule {
  padding: clamp(56px, 12vw, 104px) 0 clamp(64px, 14vw, 120px);
}

.rg-timeline {
  position: relative;
  margin-top: clamp(30px, 7vw, 54px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 5.5vw, 40px);
}

/* Pionowa linia — biegnie przez perły (47% szerokości, jak w projekcie) */
.rg-timeline::before {
  /* Projekt: pionowa linia na X 49.8% płótna. Kolumna treści jest
     wyśrodkowana, więc 50% jej szerokości = 50% płótna. */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6%;
  bottom: 6%;
  width: 1.5px;
  background: var(--rg-line);
  opacity: .8;
}

.rg-item {
  display: grid;
  /* Symetrycznie — perełka ląduje dokładnie na linii (50%) */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2.5vw, 16px);
  text-align: left;
}

.rg-item .ico {
  justify-self: center;
  width: clamp(72px, 22vw, 118px);
  height: auto;
}

/* Kropka na linii — ciemna śliwka (pozycje 2, 3, 4) */
.rg-item .pearl {
  width: clamp(9px, 2.4vw, 12px);
  height: clamp(9px, 2.4vw, 12px);
  border-radius: 50%;
  background: var(--rg-line);
}
/* Pierwsza — prawdziwa perła: większa, biała, z połyskiem */
.rg-item:first-child .pearl {
  width: clamp(15px, 3.8vw, 20px);
  height: clamp(15px, 3.8vw, 20px);
  /* --rg-pearl ustawia renderer z THEMES[id].parts.timelinePearl */
  background: var(--rg-pearl, radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F6F0F3 30%, #DCD0D8 62%, #A99AA4 100%));
  background-size: cover;
  box-shadow: 0 2px 6px rgba(107,34,71,.28), inset 0 -1px 2px rgba(107,34,71,.12);
}

.rg-item .txt { padding-left: clamp(4px, 1.5vw, 10px); }
/* Godzina i nazwa punktu są osobnymi `span`-ami, żeby motyw mógł je
   rozdzielić na dwie kolumny (tak jak plansza „Białego lnu"). Kropka
   rozdzielająca wraca z CSS, więc we wszystkich pozostałych motywach
   wiersz wygląda dokładnie tak jak przedtem: „15:30 · Przyjazd gości". */
.rg-item .time .nazwa::before { content: " · "; }
.rg-item .time {
  font-family: var(--rg-ui);
  font-weight: 600;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--rg-ink);
  letter-spacing: .03em;
}
.rg-item .desc {
  font-family: var(--rg-text);
  font-weight: 300;
  font-size: clamp(11px, 2.9vw, 13px);
  line-height: 1.6;
  color: var(--rg-body);
  margin-top: 3px;
}

/* ============================================================
   EKRAN 4 — HISTORIA PARY
   ============================================================ */

.rg-story {
  padding: clamp(56px, 12vw, 104px) 0 0;
  background: #FFFFFF;
}

/* Serce ze zdjęciem — 3 warstwy, pozycje 1:1 z projektu
   Kontener = obrys koronkowego serca (73.79% × 43.25% płótna 900×1500) */
.rg-heart {
  /* Projekt: X 12.45–86.24% płótna → 73.79% szerokości.
     Liczymy z płótna, nie z kolumny treści — ta na desktopie
     zatrzymuje się na 520 px i serce robiło się o ~20% za małe. */
  position: relative;
  width: min(92vw, calc(var(--rg-w) * 0.7379));
  aspect-ratio: 664 / 649;
  margin: clamp(22px, 5vw, 38px) auto 0;
}
.rg-heart img { position: absolute; display: block; }

/* Kolejność z projektu: koronka → zdjęcie → perły */
.rg-heart .lace  { z-index: 1; left: 0; top: 0; width: 100%; height: 100%; }
.rg-heart .photo {
  z-index: 2;
  left: 14.95%; top: 15.72%;
  width: 75.14%; height: 69.90%;
  object-fit: cover;
  /* miękki kształt serca — zdjęcie nie wystaje spod koronki */
  border-radius: 46% 46% 8% 8% / 40% 40% 60% 60%;
  filter: grayscale(1) contrast(1.03);
  /* v349: zdjęcie pary przycinamy dokładnie do kształtu serca z projektu
     (maska = przykładowe zdjęcie motywu, które ma przezroczyste tło).
     Sam border-radius dawał prostokąt z zaokrągleniami — dół i boki
     zdjęcia wystawały spod perłowego serca. */
  -webkit-mask-image: url("../assets/themes/rose-garden/04-story/zdjecie_pary.webp");
          mask-image: url("../assets/themes/rose-garden/04-story/zdjecie_pary.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  border-radius: 0;
}
.rg-heart .pearl {
  z-index: 3;
  left: 9.84%; top: 7.05%;
  width: 86.30%; height: 83.91%;
}

.rg-story .rg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 4vw, 26px);
  margin: clamp(30px, 7vw, 52px) auto 0;
  text-align: left;
}
@media (max-width: 420px) {
  .rg-story .rg-cols { grid-template-columns: 1fr; text-align: center; }
}

.rg-story .rg-bouquet {
  width: min(78%, 380px);
  margin: clamp(30px, 7vw, 56px) auto 0;
  display: block;
}

/* ============================================================
   EKRAN 5 — LOKALIZACJA + DRESS CODE
   ============================================================ */

.rg-location { padding: clamp(48px, 10vw, 88px) 0 0; }

.rg-location .rg-card { margin-top: clamp(20px, 5vw, 36px); }

.rg-map {
  width: 100%;
  aspect-ratio: 1/1;
  border: none;
  border-radius: 18px;
  margin: clamp(16px, 4vw, 26px) 0 clamp(12px, 3vw, 18px);
  display: block;
  background: var(--rg-pink);
}

.rg-addr {
  font-family: var(--rg-text);
  font-weight: 300;
  font-size: clamp(11px, 2.9vw, 13px);
  line-height: 1.6;
  color: var(--rg-body);
  margin-bottom: clamp(18px, 4.5vw, 26px);
}

.rg-pin { width: 18px; height: 18px; flex: none; object-fit: contain; }

/* Dress code — nad warstwą graficzną (z-index 0), pod treścią (z-index 2) */
.rg-dress {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: clamp(44px, 10vw, 80px);
  padding-bottom: clamp(40px, 9vw, 72px);
  background: linear-gradient(180deg, rgba(253,236,245,0) 0%, var(--rg-pink) 18%, var(--rg-pink) 100%);
}
.rg-dress-inner { padding-top: clamp(30px, 7vw, 52px); }

/* UWAGA: ta reguła jest BEZ zakresu motywu — obsługuje wszystkie szablony.
   `auto 1fr auto` zostaje, bo motywy BEZ sylwetek (złote liście, włoski len)
   mają na niej oparte rozsunięcie kółek do krawędzi kolumny. Motywy
   z sylwetkami dostają własne kolumny niżej. */
.rg-dress-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 3vw, 22px);
  margin: clamp(22px, 5vw, 38px) auto 0;
}
/* Sylwetki pary: kółka mają stać PRZY nich, nie na krawędziach kolumny.
   Przy `1fr` środkowa kolumna brała całą wolną szerokość (360 px),
   a sylwetki (190 px) stały pośrodku niej — kółka odjeżdżały o 104 px,
   zamiast o 18 jednostek z planszy. `auto auto auto` sprawia, że
   środkowa kolumna przylega do grafiki, a odstęp bierze się ze
   wspólnego `--rg-dress-odstep` (css/style.css) — tego samego,
   którego używa motyw 2. */
body[data-theme="rose-garden"] .rg-dress-grid {
  grid-template-columns: auto auto auto;
  justify-content: center;
  column-gap: var(--rg-dress-odstep);
}
.rg-swatches {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3.4vw, 20px);
}
.rg-swatches.right { align-items: flex-end; }
.rg-sw {
  width: clamp(38px, 10vw, 58px);
  height: clamp(38px, 10vw, 58px);
  border-radius: 50%;
  box-shadow: 0 3px 10px -3px rgba(78,16,56,.25);
}
.rg-dress-fig { width: 100%; max-width: 190px; display: block; margin: 0 auto; }
/* Plik sylwetek miał PRZEZROCZYSTY margines: 13 px z lewej i 36 px
   z prawej (na 427 px szerokości). Odstęp `--rg-dress-odstep` liczy się
   od krawędzi obrazka, więc kółka stały dalej od pary niż w motywie 2
   i do tego nierówno: 19 px z lewej, 29 px z prawej (na komputerze
   25/35, wobec wspólnych 12/18). Plik przycięty do narysowanych
   pikseli (427×578 → 378×469), a szerokość zmniejszona o ten sam
   ułamek — para jest dokładnie tej samej wielkości co wcześniej,
   zniknęło tylko puste pole wokół niej. */
body[data-theme="rose-garden"] .rg-dress-fig { max-width: calc(190px * 378 / 427); }

/* ============================================================
   EKRAN 6 — RSVP
   ============================================================ */

.rg-rsvp {
  padding: clamp(40px, 9vw, 76px) 0 0;
  background: var(--rg-pink);
}
/* Reguły bez `body[data-theme]` w tym pliku obowiązują WSZYSTKIE motywy
   (arkusze ładują się razem), a `.rg-rsvp` i `.rg-swans` mają też inne
   motywy. Wszystko, co dotyczy łabędzi, jest więc zawężone do motywu 1. */
body[data-theme="rose-garden"] .rg-rsvp {
  /* Dół: 3,5vw, czyli połowa zakładki z następną sekcją (margin-top: -7vw
     na .rg-screen). W zakładce zakończenie dopiero wyłania się z maski,
     więc wizualny koniec RSVP wypada mniej więcej w jej połowie — i od
     tego miejsca, a nie od matematycznej krawędzi, liczy się środek
     wolnego miejsca dla łabędzi. */
  padding-bottom: 3.5vw;
}
/* Najmniejszy odstęp karta → łabędzie. Siedzi na karcie, a nie na
   łabędziach, bo te mają marginesy `auto` (patrz niżej) i własnego
   minimum mieć nie mogą. */
body[data-theme="rose-garden"] .rg-rsvp > .rg-inner { margin-bottom: clamp(18px, 4vw, 30px); }
.rg-rsvp .rg-card { padding-bottom: clamp(30px, 7vw, 48px); }

.rg-q {
  font-family: var(--rg-ui);
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 23px);
  color: var(--rg-body);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: clamp(12px, 3vw, 18px) 0 clamp(14px, 3.5vw, 20px);
}

.rg-radios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rg-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--rg-ui);
  font-weight: 400;
  font-size: clamp(14px, 3.6vw, 17px);
  color: var(--rg-body);
}
.rg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.rg-radio .dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--rg-accent);
  display: inline-block;
  position: relative;
  transition: background .2s ease;
}
.rg-radio input:checked + .dot { background: var(--rg-accent); box-shadow: inset 0 0 0 3px #FFF; }
.rg-radio input:focus-visible + .dot { outline: 2px solid var(--rg-accent); outline-offset: 3px; }

.rg-sep {
  width: 58%;
  height: 1px;
  background: var(--rg-muted);
  opacity: .5;
  margin: clamp(16px, 4vw, 24px) auto;
  border: none;
}

.rg-msg-label {
  font-family: var(--rg-ui);
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 23px);
  color: var(--rg-body);
  text-transform: uppercase;
  margin-bottom: clamp(12px, 3vw, 16px);
}

.rg-textarea {
  width: 100%;
  min-height: clamp(84px, 20vw, 116px);
  background: var(--rg-pink);
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--rg-text);
  font-weight: 300;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--rg-body);
  resize: vertical;
}
.rg-textarea::placeholder { color: var(--rg-muted); }
.rg-textarea:focus { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

.rg-rsvp .rg-btn { margin-top: clamp(18px, 4.5vw, 28px); }

.rg-note {
  font-family: var(--rg-text);
  font-weight: 300;
  font-size: clamp(11px, 2.8vw, 12.5px);
  line-height: 1.6;
  color: var(--rg-body);
  margin-top: clamp(16px, 4vw, 24px);
}

.rg-swans {
  /* Element w przepływie, POD formularzem — dlatego nie ma go w manifeście
     warstw tła: tam procent liczy się od wysokości sekcji, która przy
     rozwiniętym formularzu jest dużo wyższa niż płótno 900×1500. */
  position: relative;
  z-index: 1;
  width: min(92%, 640px);   /* plik jest przycięty do samych łabędzi */
  display: block;
  margin: clamp(18px, 4vw, 30px) auto 0;
}
body[data-theme="rose-garden"] .rg-swans {
  /* Łabędzie stoją na ŚRODKU wolnego miejsca pod kartą, nie przyklejone
     do niej. Sekcja jest kolumną flex o wysokości co najmniej płótna 3:5,
     a formularz jest od płótna niższy — na komputerze zostawało pod
     łabędziami ok. 275 px pustego różu, a one wisiały tuż pod kartą.
     Marginesy `auto` z góry i z dołu dzielą to miejsce po równo.
     Na telefonie wolnego miejsca nie ma (treść jest wyższa niż płótno),
     więc `auto` daje 0 i zostaje sam odstęp z .rg-rsvp > .rg-inner. */
  margin: auto;
}

/* ============================================================
   EKRAN 7 — ZAKOŃCZENIE
   ============================================================ */

/* Treść zakończenia stoi w GÓRNEJ części planszy — altanka zajmuje jej
   dolne dwie trzecie (dach zaczyna się ok. 46 % wysokości). Zmierzone
   z planszy „7 ekran zakończenie.svg" (900×1500):
       inicjały        y  95,5–284,4  →   6,4–19,0 %
       „Kilka słów"    y 333,2–441,4  →  22,2–29,4 %
       akapity        y 481,5–578,6  →  32,1–38,6 %
   Wcześniej blok kończył się na 27,5 % i nad altanką został pusty pas
   na jedną piątą ekranu. Odstępy liczą się od WYSOKOŚCI PŁÓTNA, nie od
   viewportu — dzięki temu trzymają się grafiki przy każdej szerokości. */
.rg-outro {
  /* bez min-height:100svh — altanka jest w dolnej części grafiki 900×1500
     i przy niższym viewporcie zostawał sam dach */
  --rg-h: calc(var(--rg-w) * 5 / 3);
  padding: 0;
  justify-content: flex-start;
}

/* Blok jest zaczepiony DOŁEM, nie górą: `margin-top: auto` spycha go na
   sam dół sekcji, a `margin-bottom` odsuwa od jej końca o 61,4 % — czyli
   ostatnia linijka siada na 38,6 % wysokości, tam gdzie w projekcie,
   tuż nad dachem altanki. Zaczepienie dołem ma tę zaletę, że dłuższy
   tekst od pary rośnie W GÓRĘ, w pusty pas nieba, zamiast wjeżdżać
   na altankę. Odstępy mierzone od WYSOKOŚCI PŁÓTNA, nie od viewportu —
   trzymają się więc grafiki na każdej szerokości ekranu. */
/* Procentowy `flex-basis` rozpórki tu NIE działa: w kolumnie liczyłby się
   od wysokości kontenera, a `.rg-screen` ma tylko `min-height`, więc
   wysokość jest nieokreślona i procent schodzi do zera. Stąd zwykły
   margines liczony od wysokości płótna. */
.rg-outro > .rg-inner {
  margin-top: auto;
  margin-bottom: calc(var(--rg-h) * 0.614);
}


.rg-monogram {
  font-family: var(--rg-mono-sig);
  font-size: clamp(58px, 15vw, 96px);
  line-height: 1;
  color: var(--rg-accent);
  margin: 0 0 clamp(14px, 3.5vw, 24px);
}

/* Tekst zakończenia — 2 kolumny, jak w projekcie */
.rg-outro .rg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 4vw, 26px);
  margin-top: clamp(16px, 4vw, 26px);
  text-align: left;
}
@media (max-width: 420px) {
  .rg-outro .rg-cols { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================================
   RUCH — wejścia przy scrollu + nieustanny delikatny oddech grafik
   ============================================================ */

/* --- 1. Wejście treści --- */
@keyframes rg-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 2. Parallax — --rg-par ustawiane z JS przy scrollu --- */
.rg-bg img {
  /* scaleX na końcu łańcucha — inline --rg-fx odbija warstwę lustrzanie
     (np. drugi cherubin), nie kolidując z parallaxem ani dryfem */
  transform: translate3d(0, calc(var(--rg-par, 0px) * var(--rg-depth, 1)), 0) scaleX(var(--rg-fx, 1));
  transition: transform .12s linear;
}

/* --- 3. Oddech grafik — ciągły, nieregularne fazy żeby nie „pulsowały razem" --- */
@keyframes rg-drift-a {
  0%, 100% { translate: 0 0;        rotate: 0deg; }
  50%      { translate: -1.8% -2.8%; rotate: -1deg; }
}
@keyframes rg-drift-b {
  0%, 100% { translate: 0 0;       rotate: 0deg; }
  50%      { translate: 2% -2.4%; rotate: 1.1deg; }
}
@keyframes rg-drift-c {
  0%, 100% { translate: 0 0;   scale: 1; }
  50%      { translate: 0 -1.6%; scale: 1.03; }
}

.rg-bg img[data-drift="a"] { animation: rg-drift-a 11s ease-in-out infinite; }
.rg-bg img[data-drift="b"] { animation: rg-drift-b 13s ease-in-out infinite; }
.rg-bg img[data-drift="c"] { animation: rg-drift-c  9s ease-in-out infinite; }
.rg-bg img[data-drift="b"] { animation-delay: -3s; }
.rg-bg img[data-drift="c"] { animation-delay: -5s; }

/* Warstwa bazowa (pełnoekranowe tło) — bardzo powolny oddech,
   żeby ekrany z jedną grafiką (np. zakończenie) też żyły */
@keyframes rg-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.018; }
}
.rg-bg img[data-base] { animation: rg-breathe 18s ease-in-out infinite; }

/* --- 4. Elementy treści też żyją ---
   UWAGA: elementy które mają JEDNOCZEŚNIE .rg-reveal muszą mieć obie
   animacje w jednej deklaracji — inaczej reguła .rg-reveal.in (wyższa
   specyficzność) nadpisze `animation` i dryf zatrzyma się po wejściu. */
.rg-heart     { animation: rg-drift-c 10s ease-in-out infinite; }
/* Łabędzie mają WŁASNE kołysanie, symetryczne wokół środka. Wspólne
   rg-drift-b jedzie od 0 do +2 % w prawo i wraca — czyli średnio stoi
   1 % na prawo od osi, a w szczycie 13 px. Przy grafice, która ma stać
   dokładnie pośrodku (serce z szyj jest na osi pliku co do 0,2 px),
   to było widać. Tutaj ten sam zakres ruchu, tylko ±1 % wokół zera. */
@keyframes rg-labedzie {
  0%, 100% { translate: -1% 0;     rotate: -0.55deg; }
  50%      { translate:  1% -2.4%; rotate:  0.55deg; }
}
.rg-swans     { animation: rg-drift-b 14s ease-in-out infinite; }
body[data-theme="rose-garden"] .rg-swans { animation: rg-labedzie 14s ease-in-out infinite; }
.rg-bouquet   { animation: rg-drift-a 12s ease-in-out infinite; }

/* Po odsłonięciu: wejście + dryf działają równolegle i dryf zostaje na zawsze */
body[data-theme="rose-garden"] .rg-heart.rg-reveal.in {
  animation: rg-rise 1s cubic-bezier(.22,1,.36,1) forwards,
             rg-drift-c 10s ease-in-out infinite;
}
body[data-theme="rose-garden"] .rg-swans.rg-reveal.in {
  animation: rg-rise 1s cubic-bezier(.22,1,.36,1) forwards,
             rg-labedzie 14s ease-in-out infinite;
}
body[data-theme="rose-garden"] .rg-bouquet.rg-reveal.in {
  animation: rg-rise 1s cubic-bezier(.22,1,.36,1) forwards,
             rg-drift-a 12s ease-in-out infinite;
}

/* Te są dziećmi elementów z .rg-reveal — bez konfliktu */
.rg-dress-fig { animation: rg-drift-c 11s ease-in-out infinite -2s; }
/* Każda ikona z inną fazą — inaczej cała czwórka rusza się jak jeden blok */
.rg-item .ico { animation: rg-drift-a 13s ease-in-out infinite; }
.rg-item:nth-child(2) .ico { animation-delay: -3.25s; }
.rg-item:nth-child(3) .ico { animation-delay: -6.5s;  }
.rg-item:nth-child(4) .ico { animation-delay: -9.75s; }

/* Perełki na osi też rozsunięte, żeby błysk nie szedł równo */
.rg-item .pearl { animation: rg-pearl-dot 7s ease-in-out infinite; }
.rg-item:nth-child(2) .pearl { animation-delay: -1.75s; }
.rg-item:nth-child(3) .pearl { animation-delay: -3.5s;  }
.rg-item:nth-child(4) .pearl { animation-delay: -5.25s; }

@keyframes rg-pearl-dot {
  0%, 100% { scale: 1;    opacity: .85; }
  50%      { scale: 1.18; opacity: 1;   }
}
.rg-item:nth-child(2n) .ico { animation-name: rg-drift-b; animation-duration: 15s; }

/* --- 5. Perła na osi czasu — subtelny połysk --- */
@keyframes rg-pearl-shine {
  0%, 100% { box-shadow: 0 2px 6px rgba(107,34,71,.28), inset 0 -1px 2px rgba(107,34,71,.12); }
  50%      { box-shadow: 0 2px 10px rgba(107,34,71,.34), inset 0 -1px 2px rgba(107,34,71,.10), 0 0 12px rgba(255,255,255,.85); }
}
.rg-item:first-child .pearl { animation: rg-pearl-shine 4.5s ease-in-out infinite; }

/* --- 6. Countdown — cyfry lekko „tętnią" przy zmianie --- */
@keyframes rg-tick { 0% { opacity: .45; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
.rg-count .num.bump { animation: rg-tick .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  body[data-theme="rose-garden"] .rg-reveal,
  body[data-theme="rose-garden"] .rg-reveal.in { opacity: 1; animation: none; transform: none; }
  .rg-bg img, .rg-heart, .rg-swans, .rg-bouquet,
  .rg-dress-fig, .rg-item .ico, .rg-item .pearl {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   DESKTOP — wyśrodkowana kolumna, tło szersze
   ============================================================ */

/* Uwaga: NIE nadpisujemy tu min-height — wysokość sekcji musi wynikać
   z proporcji grafiki (900×1500), inaczej ilustracje są przycinane. */

/* ============================================================
   MINIATURA W GALERII
   Motywy fotograficzne dostają globalny grade (sepia + ciemny scrim
   + biały tekst). Na pastelowej akwareli to zabija kolory — tutaj
   przywracamy naturalną paletę i ciemną typografię.
   ============================================================ */

/* Miniatura w galerii: kafelek renderuje się jako czysty <img class="thumb-plate">
   (patrz pages/szablony.html + .template-thumb.is-plate w style.css).
   Żadne nadpisania filtrów ani gradientów nie są tu już potrzebne. */

/* ── Handoff z zasłon ──────────────────────────────────────────────
   Ekran 2 leży bezpośrednio pod zasłonami, więc jego grafika musi mieć
   DOKŁADNIE tę samą geometrię co .curtain-canvas — inaczej w chwili
   wygaszania backdropu skala przeskakuje w trakcie rozsuwania.
   Ta sama formuła jest w style.css przy .curtain-canvas.
   max(...) => na wąskich/wysokich ekranach płótno wypełnia viewport
   (nadmiar przycina overflow:clip na #rgScreens), na szerokich trzyma
   się kolumny 760px, tak jak reszta zaproszenia. */
body[data-theme="rose-garden"] .rg-date {
  --rg-w: min(100vw, 760px);                              /* fallback */
  --rg-w: max(min(100vw, 760px), calc(100svh * 3 / 5));
}

/* Pierwszy ekran nie może mieć wygaszonej góry — zasłony rozsuwają się
   dokładnie nad nim i biała poświata zdradzałaby „drugą warstwę". */
body[data-theme="rose-garden"] .rg-date .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
}

/* NIE blokujemy scrolla przez overflow:hidden na body — to dodaje/zabiera
   pasek przewijania i cała strona przeskakuje o jego szerokość dokładnie
   w chwili kliknięcia. Zamiast tego overlay połyka gesty (patrz style.css). */


/* Puste pola nie zostawiają odstępu — setText() ustawia [hidden],
   a te elementy są flex/grid, więc samo `hidden` by nie wystarczyło. */
body[data-theme="rose-garden"] [hidden] { display: none !important; }
body[data-theme="rose-garden"] .rg-names:empty,
body[data-theme="rose-garden"] .rg-sub:empty,
body[data-theme="rose-garden"] .rg-addr:empty,
body[data-theme="rose-garden"] .rg-p:empty,
body[data-theme="rose-garden"] .rg-monogram:empty { display: none; }

/* ── ZASŁONY: TKANINA DO SAMYCH KRAWĘDZI EKRANU ─────────────
   Płótno zasłon jest pionowe 3:5 — na telefonie przykrywa całe okno,
   ale na laptopie zostają po bokach czyste różowe pasy. Zasłona ma
   iść do krawędzi kadru, tak jak w motywie 2.

   Czego tam NIE można położyć: całego drugiego skrzydła z dostawy
   2400×1600. Ono ma własną falbanę mniej więcej w jednej piątej
   szerokości okna, więc obok falban z płótna (28 % i 72 %) na ekranie
   stały CZTERY falbany — dwie pary zasłon obok siebie.

   Boki wypełnia więc panel WYCIĘTY Z TEJ SAMEJ AKWARELI (tools/buduj-bok.py):
   dwa w pełni kryjące bloki z `lewa_czesc.webp` i `prawa_czesc.webp`
   sklejone przenikaniem, domknięte w kafel i rozjaśnione do tonu wersji
   pionowej użytej na planszy. Żadnego rysowania proceduralnego — to
   ten sam materiał, te same falbany, ta sama faktura papieru.

   Gotowy panel jest odwrócony tak, żeby przy płótnie stała jego GŁADKA
   część, a falbana uciekała ku krawędzi ekranu — inaczej obok falbany
   z planszy (38 % szerokości okna) stanęłaby druga i wraca problem
   „dwóch par zasłon".

   Panel jedzie razem ze skrzydłami płótna: ten sam czas, ta sama
   krzywa, to samo opóźnienie. */
/* Zasada NIE MA Żadnego tła. Całe okno i tak przykrywa tkanina: kolumnę
   — płótno 3:5, boki — panele niżej. Gdyby został tu różowy prostokąt,
   to po zniknięciu środkowej zasłony z szarfą (ETAP 1) w powstałej
   szparze przez półtorej sekundy świeciłby róż, a dopiero potem — gdy
   rozjadą się skrzydła — zaproszenie. Środek ma znikać PROSTO NA
   zaproszenie, a skrzydła dopiero odsłaniać resztę. */
body[data-theme="rose-garden"] .curtain-backdrop {
  background: none;
}
/* v352: zanim gość kliknie, skrzydła i środkowa zasłona stykają się
   „na styk” — wzdłuż krawędzi prawego skrzydła (u góry ekranu i przy
   szarfie) zostawały 1–3-pikselowe szczeliny, przez które prześwitywała
   strona. Zamknięta kurtyna dostaje więc różowy podkład w tonie tkaniny.
   Znika w chwili kliknięcia (`.opening` → `background: none` wyżej), więc
   środek dalej odsłania prosto zaproszenie, tak jak opisano powyżej. */
body[data-theme="rose-garden"] .curtain-reveal:not(.opening) .curtain-backdrop {
  background: #F3C6CB;
}
body[data-theme="rose-garden"] .curtain-backdrop::before,
body[data-theme="rose-garden"] .curtain-backdrop::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: auto;              /* nadpisuje wąski pas z css/style.css */
  /* Wysokość wyznacza skalę — przy oknie ok. 900 px fałdy wychodzą
     szerokie na ok. 171 px, czyli praktycznie tyle samo co fałdy skrzydeł
     z planszy (ok. 167 px). Kafel jest bezszwowy, więc `repeat-x`
     dopełnia bardzo szerokie ekrany bez śladu łączenia. */
  background-size: auto 100%;
  background-repeat: repeat-x;
  /* Ten sam czas, krzywa i opóźnienie co `.curtain-left/.curtain-right`.
     Opóźnienie MUSI iść ze zmiennej, nie z wpisanej liczby: gdy środek
     zaczął gasnąć wolniej, skrzydła dostały 2,0 s, a tu zostało 1,2 s —
     panele ruszały pierwsze i zasłona rozsuwała się dwa razy.
     Zmienna jest w css/style.css przy [data-srodek]. */
  transition: transform 2.8s cubic-bezier(0.25, 0.1, 0.55, 0.9) var(--zaslona-skrzydla, 1.2s);
  will-change: transform;
}
/* `--curtain-w` podaje JS (pages/zaproszenie.html): to szerokość, jaką
   płótno zajmuje NA EKRANIE, już po `--rg-fit`. Panel kończy się 60 px ZA
   krawędzią płótna — zewnętrzna krawędź skrzydła jest wygaszona maską na
   ok. 7 % szerokości i bez tego zapasu prześwitywałaby przez nią różowa
   zasada zamiast tkaniny. */
body[data-theme="rose-garden"] .curtain-backdrop::before {
  left: 0;
  right: calc(50% + var(--curtain-w, 100%) / 2 - 60px);
  background-image: url("../assets/themes/rose-garden/01-start/bok_lewy.webp");
  background-position: right center;
}
body[data-theme="rose-garden"] .curtain-backdrop::after {
  left: calc(50% + var(--curtain-w, 100%) / 2 - 60px);
  right: 0;
  background-image: url("../assets/themes/rose-garden/01-start/bok_prawy.webp");
  background-position: left center;
}
body[data-theme="rose-garden"] .curtain-reveal.opening .curtain-backdrop::before {
  transform: translateX(-102%);
}
body[data-theme="rose-garden"] .curtain-reveal.opening .curtain-backdrop::after {
  transform: translateX(102%);
}
/* Zasada nie ma tu czego gasić (tło: none), a gaśnięcie krycia z
   css/style.css trzeba WYŁĄCZYĆ: panele tkaniny to jej pseudoelementy,
   więc razem z nią bladłyby boki — w połowie rozsuwania robiły się
   przeźroczyste, podczas gdy skrzydła płótna jechały kryjące. */
body[data-theme="rose-garden"] .curtain-reveal.opening .curtain-backdrop {
  opacity: 1;                     /* nadpisuje `opacity: 0` z css/style.css */
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="rose-garden"] .curtain-backdrop::before,
  body[data-theme="rose-garden"] .curtain-backdrop::after { transition: none; }
}

/* Zewnętrzne krawędzie skrzydeł rozmywam na ok. 7 % ich szerokości —
   inaczej na szerokim ekranie w miejscu, gdzie kończy się płótno 3:5
   i zaczyna wypełnienie boków, widać było pionową kreskę. Maska siedzi
   na SKRZYDLE, nie na płótnie: dzięki temu jedzie razem z nim przy
   rozsuwaniu i nie przycina go do płótna. Na wąskim ekranie krawędzie
   skrzydeł są poza kadrem, więc maska nic tam nie zmienia. */
body[data-theme="rose-garden"] .curtain-left {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%);
}
body[data-theme="rose-garden"] .curtain-right {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 7%);
          mask-image: linear-gradient(270deg, transparent 0, #000 7%);
}