/* ============================================================
   MOTYW: photobooth-noir  (Fotobudka Retro)
   6-ekranowe zaproszenie — mosiężna fotobudka, czarno-białe paski
   zdjęć, bordowy adamaszek, koperta z odciskiem ust, koronkowe
   serca, płyta winylowa.
   Grafiki: assets/themes/photobooth-noir/
   Geometria z pliku zbiorczego (folder plansz osobnych w dostawie
   zawierał przez pomyłkę plansze motywu 1).
   Struktura sekcji wspólna z motywami 1–3 (klasy .rg-*).
   ============================================================ */

body[data-theme="photobooth-noir"] {
  /* --- Paleta (z klas CSS pliku źródłowego) --- */
  --rg-ink:      #382C1F;   /* nagłówki */
  --rg-body:     #160909;   /* tekst */
  --rg-accent:   #560000;   /* przyciski */
  --rg-deep:     #440728;   /* adamaszek ekranu 3 */
  --rg-olive:    #324229;   /* akcent zielony */
  --rg-cream:    #F2F0E4;   /* papier */
  --rg-card:     #FFFFFF;
  --rg-muted:    #8A7A6A;

  /* --- Fonty (darmowe zamienniki) ---
     Coldiac              → Cormorant Garamond  (wysoki kontrast, cienkie szeryfy)
     ITC Edwardian Script → Pinyon Script       (kaligrafia)
     Lumios Typewriter    → Courier Prime       (maszynowy)
     Now Light            → Poppins
     The Seasons          → Bodoni Moda
     Wszystkie mają polskie znaki. */
  --rg-script:   'Pinyon Script', cursive;
  --rg-display:  'Cormorant Garamond', serif;
  --rg-type:     'Courier Prime', monospace;
  --rg-ui:       'Courier Prime', monospace;
  --rg-text:     'Courier Prime', monospace;
  --rg-seasons:  'Bodoni Moda', serif;

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

body[data-theme="photobooth-noir"] #rgScreens { background: var(--rg-cream); }

/* Ekran 3 jest ciemny (adamaszek) — bez wygaszania do bieli,
   inaczej bordo rozpływa się w połowie sekcji. Ta sama zasada
   co przy granatowych sekcjach motywu 2. */
body[data-theme="photobooth-noir"] .rg-schedule { background: var(--rg-deep); }
body[data-theme="photobooth-noir"] .rg-schedule .rg-bg {
  -webkit-mask-image: none;
          mask-image: none;
}
body[data-theme="photobooth-noir"] .rg-date .rg-bg,
body[data-theme="photobooth-noir"] .rg-rsvp .rg-bg {
  -webkit-mask-image: none;
          mask-image: none;
}
body[data-theme="photobooth-noir"] .rg-story .rg-bg,
body[data-theme="photobooth-noir"] .rg-location .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* Styk sekcji jasna → ciemna: gradient zamiast twardej krawędzi */
body[data-theme="photobooth-noir"] .rg-schedule::before,
body[data-theme="photobooth-noir"] .rg-schedule::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(40px, 8vw, 90px);
  pointer-events: none;
  z-index: 1;
}
body[data-theme="photobooth-noir"] .rg-schedule::before {
  top: 0;
  background: linear-gradient(180deg, var(--rg-cream), transparent);
}
body[data-theme="photobooth-noir"] .rg-schedule::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--rg-cream), transparent);
}

/* ============================================================
   TYPOGRAFIA WSPÓLNA
   ============================================================ */

body[data-theme="photobooth-noir"] .rg-h {
  font-family: var(--rg-display);
  font-weight: 400;
  color: var(--rg-ink);
  letter-spacing: .012em;
  font-size: clamp(32px, 7vw, 62px);
}

body[data-theme="photobooth-noir"] .rg-p {
  font-family: var(--rg-type);
  color: var(--rg-body);
  line-height: 1.9;
  font-size: clamp(12px, 2.8vw, 15px);
}

body[data-theme="photobooth-noir"] .rg-names {
  font-family: var(--rg-script);
  color: var(--rg-body);
  line-height: .96;
}
body[data-theme="photobooth-noir"] .rg-names .amp {
  font-family: var(--rg-type);
  font-size: .26em;
  color: var(--rg-accent);
}

body[data-theme="photobooth-noir"] .rg-sub {
  font-family: var(--rg-type);
  color: var(--rg-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.2vw, 12px);
}

body[data-theme="photobooth-noir"] .rg-btn {
  font-family: var(--rg-type);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.4vw, 13px);
  background: var(--rg-accent);
  color: #fff;
  border-radius: 1px;
  padding: 15px 34px;
  border: none;
}
body[data-theme="photobooth-noir"] .rg-btn:hover { background: #6E0A0A; }

body[data-theme="photobooth-noir"] .rg-card {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ============================================================
   EKRAN 2 — IMIONA I DATA
   W projekcie imiona są NA DOLE planszy (y 92.9%), pod maszynką
   z paskiem zdjęć. Reszta płótna należy do grafiki.
   ============================================================ */

/* Maszynka kończy się na 80,9 % płótna, imiona w projekcie stoją na 92,9 %.
   Cały blok tekstu musi się zmieścić między nimi a dolną krawędzią planszy —
   inaczej sekcja rośnie ponad płótno (było 1495 px przy 1267 px) i kolejna
   plansza przykrywa jej dół. Stąd: odstęp od góry w jednostkach płótna,
   imiona w JEDNEJ linii i licznik przeniesiony na ekran 3. */
/* Bazowa sekcja ma `padding: 9vw 0` — przy odstępie liczonym w jednostkach
   płótna te 2×68 px wypychały treść poza planszę i sekcja rosła o 54 px.
   Tu odstęp daje wyłącznie `.rg-inner`. */
body[data-theme="photobooth-noir"] .rg-date {
  padding-top: 0;
  padding-bottom: 0;
}
body[data-theme="photobooth-noir"] .rg-date .rg-inner {
  width: min(88vw, calc(var(--rg-w, 760px) * 0.90));
  margin: 0 auto;
  text-align: center;
  /* Imiona zaczepione od DOŁU PLANSZY, nie odsunięte górnym paddingiem.
     Padding liczył się od płótna (--rg-w × 5/3), a sekcja jest wyższa
     o swoje `padding: 9vw 0` — i .rg-bg rozciąga planszę do wysokości
     SEKCJI. Rozjazd tych dwóch miar rósł z szerokością okna, więc na
     komputerze imiona lądowały 71 px za wysoko i wchodziły na dolną
     ramę maszynki; na telefonie różnica była na tyle mała, że nie było
     jej widać. W projekcie linia bazowa imion jest na 92,9 % planszy,
     czyli ok. 5,5 % nad jej dolną krawędzią.
     Zaczepienie od dołu ma jeszcze tę zaletę, że długie imiona rosną
     w GÓRĘ, w wolne miejsce, zamiast wychodzić poza planszę. */
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 5.5%;
  padding-top: 0;
}
body[data-theme="photobooth-noir"] .rg-date { position: relative; }
/* Imiona w jednej linii, jak na planszy („Robert & Patrycja”).
   Bazowa reguła układa je w kolumnę — tu wracamy do rzędu. */
body[data-theme="photobooth-noir"] .rg-date .rg-names {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .28em;
  line-height: 1.08;
  font-size: clamp(22px, 5.6vw, 46px);
}
body[data-theme="photobooth-noir"] .rg-date .rg-names .amp {
  font-size: .52em;
}
body[data-theme="photobooth-noir"] .rg-date .rg-sub {
  margin-top: clamp(10px, 2.2vw, 18px);
  line-height: 1.9;
}
/* Licznik mieszka teraz na ekranie 3 (patrz `countdownIn` w rejestrze);
   reguły dla ekranu 2 zostają dla motywów, które go tam trzymają. */
body[data-theme="photobooth-noir"] .rg-date .rg-count {
  margin-top: clamp(20px, 4.4vw, 36px);
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3.4vw, 30px);
}
body[data-theme="photobooth-noir"] .rg-schedule .rg-count {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  margin: 0 auto clamp(22px, 5vw, 44px);
}
body[data-theme="photobooth-noir"] .rg-date .rg-count .num {
  font-family: var(--rg-type);
  color: var(--rg-ink);
  font-size: clamp(20px, 4.4vw, 32px);
}
body[data-theme="photobooth-noir"] .rg-date .rg-count .lbl {
  font-family: var(--rg-type);
  color: var(--rg-muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(8px, 1.9vw, 10px);
}

/* ============================================================
   EKRAN 3 — HARMONOGRAM na adamaszku
   W projekcie: klamra u góry i u dołu (druga odbita), a pod każdym
   punktem cienka biała linia. Cały tekst na biało.
   ============================================================ */

body[data-theme="photobooth-noir"] .rg-schedule {
  padding: clamp(60px, 12vw, 110px) 0 clamp(70px, 14vw, 130px);
  position: relative;
}
body[data-theme="photobooth-noir"] .rg-schedule .rg-inner { position: relative; z-index: 2; }
body[data-theme="photobooth-noir"] .rg-schedule .rg-h,
body[data-theme="photobooth-noir"] .rg-schedule .rg-p { color: #FFFFFF; }
/* Licznik stoi na JASNYM pasie u góry planszy (w projekcie biel do 23 %
   wysokości), więc jako jedyny na tym ekranie musi być ciemny — biały
   był tam po prostu niewidoczny. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-count .num { color: var(--rg-ink); }
body[data-theme="photobooth-noir"] .rg-schedule .rg-count .lbl { color: var(--rg-muted); }
/* Nagłówek wchodzi dopiero na adamaszek (projekt: y 34,7 % płótna),
   inaczej biały napis ląduje na jasnym pasie. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-h {
  margin-top: calc(var(--rg-w, 760px) * 5 / 3 * 0.115);
}

body[data-theme="photobooth-noir"] .rg-timeline::before,
body[data-theme="photobooth-noir"] .rg-item .pearl,
body[data-theme="photobooth-noir"] .rg-item .ico { display: none; }

/* Klamry obejmujące listę — szerokość i odstępy z planszy
   (ornament: x 23,9–76,3 % płótna, czyli 52,4 % jego szerokości). */
body[data-theme="photobooth-noir"] .rg-sch-frame {
  display: block;
  width: calc(var(--rg-w, 760px) * 0.524);
  height: auto;
  margin: 0 auto;
}
body[data-theme="photobooth-noir"] .sf-top    { margin: clamp(16px, 3.4vw, 28px) auto clamp(18px, 4vw, 34px); }
body[data-theme="photobooth-noir"] .sf-bottom { margin-top: clamp(22px, 5vw, 42px); transform: scaleY(-1); }

body[data-theme="photobooth-noir"] .rg-timeline {
  /* Lista między klamrami: w projekcie x 19,9–80,3 % płótna */
  width: min(78vw, calc(var(--rg-w, 760px) * 0.604));
  margin: clamp(26px, 6vw, 52px) auto 0;
}
/* Punkt = godzina po lewej, opis po prawej, pod spodem włosowa linia.
   Linia rysuje się od lewej, gdy sekcja wejdzie w kadr. */
/* `.time` i `.desc` są opakowane w `.txt` (wspólny szablon), więc bez
   `display: contents` cała para wpadała w PIERWSZĄ kolumnę siatki i tekst
   zawijał się na trzy linie zamiast stanąć obok godziny. */
body[data-theme="photobooth-noir"] .rg-item .txt { display: contents; }
body[data-theme="photobooth-noir"] .rg-item {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(10px, 2.6vw, 22px);
  align-items: baseline;
  padding: 0 0 clamp(12px, 2.6vw, 20px);
  margin: 0 0 clamp(12px, 2.6vw, 20px);
  position: relative;
}
body[data-theme="photobooth-noir"] .rg-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .42);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 1.1s cubic-bezier(.22,1,.36,1);
}
body[data-theme="photobooth-noir"] .rg-item.in::after { scale: 1 1; }
body[data-theme="photobooth-noir"] .rg-item:last-child::after { display: none; }

body[data-theme="photobooth-noir"] .rg-item .time {
  font-family: var(--rg-type);
  color: #FFFFFF;
  font-size: clamp(13px, 3vw, 17px);
  letter-spacing: .04em;
}
body[data-theme="photobooth-noir"] .rg-item .desc {
  font-family: var(--rg-type);
  color: rgba(255, 255, 255, .82);
  font-size: clamp(12px, 2.7vw, 15px);
  line-height: 1.7;
  text-align: left;
}

/* ============================================================
   EKRAN 4 — HISTORIA PARY (pasek zdjęć + koperta)
   Nakładka na płótnie 900×1500, kolejność warstw jak w projekcie:
   pasek → karteczka → kwiat → koperta → kartka → napis.
   ============================================================ */

body[data-theme="photobooth-noir"] .rg-story { background: var(--rg-cream); }
body[data-theme="photobooth-noir"] .rg-heart,
body[data-theme="photobooth-noir"] .rg-collage { display: none; }

body[data-theme="photobooth-noir"] .rg-postcard,
body[data-theme="photobooth-noir"] .rg-loc-cards {
  position: absolute;
  left: 50%; top: 0;
  translate: -50% 0;
  width: var(--rg-w);
  height: calc(var(--rg-w) * 5 / 3);
  z-index: 1;
  pointer-events: none;
  display: block;
  margin: 0;
}
body[data-theme="photobooth-noir"] .rg-postcard .ov,
body[data-theme="photobooth-noir"] .rg-loc-cards .ov {
  position: absolute;
  display: block;
  scale: var(--rg-fx, 1) 1;
  animation: pb-float 16s ease-in-out infinite;
  animation-delay: calc(var(--ov-i) * -2.7s);
}
body[data-theme="photobooth-noir"] .rg-postcard .ph {
  object-fit: cover;
  pointer-events: auto;
}

@keyframes pb-float {
  0%, 100% { translate: 0 0;     rotate: 0deg;     }
  35%      { translate: 0 -0.9%; rotate: 0.3deg;   }
  70%      { translate: 0 0.6%;  rotate: -0.22deg; }
}

body[data-theme="photobooth-noir"] .rg-story .rg-inner {
  position: relative;
  width: var(--rg-w);
  min-height: calc(var(--rg-w) * 5 / 3);
  margin: 0 auto;
}
/* Nagłówek — w jasnym polu nad bordową karteczką (zmierzone: y 0–12%
   po prawej od paska to czysta biel). Wcześniej stał okrakiem na styku
   paska i bieli, przez co biały tekst miał kontrast 1.4. */
body[data-theme="photobooth-noir"] .rg-story .rg-h {
  position: absolute;
  left: 47%; top: 4.5%;
  margin: 0;
  color: var(--rg-ink);
  z-index: 2;
}
body[data-theme="photobooth-noir"] .rg-story .rg-cols {
  display: block;
  width: auto;
  margin: 0;
}
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p {
  position: absolute;
  z-index: 2;
  margin: 0;
  text-align: left;
  font-size: clamp(11px, 2.4vw, 14px);
}
/* Pierwszy akapit leży NA bordowej karteczce (y 14.1–48.8%), więc musi
   być jasny — czarny na bordo dawał kontrast 1.5. Drugi jest na bieli
   pod kopertą, więc zostaje ciemny. */
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p:first-child {
  left: 47.5%; top: 20%; width: 41%;
  color: var(--rg-cream);
}
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p:last-child {
  left: 47%; top: 80.5%; width: 44%;
}

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

body[data-theme="photobooth-noir"] .rg-location { background: var(--rg-cream); }
/* UWAGA na `>`: `:first-of-type` liczy się w obrębie RODZICA, a bez
   dziecka bezpośredniego ta reguła łapała też `.rg-inner` w `.rg-dress`
   (pierwszy div w swoim rodzicu) i rozdymała dress code o 300 px. */
body[data-theme="photobooth-noir"] .rg-location > .rg-inner:first-of-type {
  position: relative;
  min-height: calc(var(--rg-w) * 5 / 3 * 0.46);
}
/* Mapa startuje pod koronkowymi sercami (kończą się na ~38% płótna) */
body[data-theme="photobooth-noir"] .rg-location .rg-card {
  padding-top: calc(var(--rg-w) * 5 / 3 * 0.42);
}
body[data-theme="photobooth-noir"] .rg-map {
  width: min(62vw, calc(var(--rg-w, 760px) * 0.62));
  aspect-ratio: 16 / 10;
  border: 6px solid #fff;
  border-radius: 1px;
  box-shadow: 0 10px 30px rgba(56, 44, 31, .18);
  margin: 0 auto;
  display: block;
}
body[data-theme="photobooth-noir"] .rg-addr {
  font-family: var(--rg-type);
  color: var(--rg-ink);
  font-size: clamp(13px, 3vw, 17px);
  margin-top: clamp(14px, 3vw, 22px);
}
body[data-theme="photobooth-noir"] .rg-dress { background: transparent; }
body[data-theme="photobooth-noir"] .rg-dress-fig { display: none; }
body[data-theme="photobooth-noir"] .rg-swatches {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin-top: clamp(16px, 3.6vw, 28px);
}
body[data-theme="photobooth-noir"] .rg-dress-grid {
  display: block;
  width: min(76vw, calc(var(--rg-w, 760px) * 0.78));
  margin: clamp(16px, 3.6vw, 30px) auto 0;
}

/* ============================================================
   EKRAN 6 — RSVP + ZAKOŃCZENIE (jedna plansza)
   ============================================================ */

body[data-theme="photobooth-noir"] .rg-rsvp {
  background: #FFFFFF;
  padding-bottom: clamp(40px, 9vw, 80px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-inner {
  width: min(54vw, calc(var(--rg-w, 760px) * 0.56));
  margin: 0 auto;
  padding-top: calc(min(100vw, 760px) * 5 / 3 * 0.055);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-h {
  font-family: var(--rg-seasons);
  text-align: center;
}
body[data-theme="photobooth-noir"] .rg-q,
body[data-theme="photobooth-noir"] .rg-msg-label {
  font-family: var(--rg-type);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rg-ink);
  font-size: clamp(10px, 2.3vw, 12px);
  text-align: center;
}
body[data-theme="photobooth-noir"] .rg-radios { justify-content: center; }
body[data-theme="photobooth-noir"] .rg-radio {
  font-family: var(--rg-type);
  color: var(--rg-olive);
}
body[data-theme="photobooth-noir"] .rg-radio .dot { border-color: var(--rg-accent); }
body[data-theme="photobooth-noir"] .rg-sep {
  border: none;
  border-top: 1px solid rgba(56, 44, 31, .2);
}
body[data-theme="photobooth-noir"] .rg-textarea {
  font-family: var(--rg-type);
  background: #fff;
  border: 1px solid rgba(56, 44, 31, .24);
  border-radius: 1px;
  color: var(--rg-body);
}
body[data-theme="photobooth-noir"] .rg-note {
  font-family: var(--rg-type);
  color: var(--rg-muted);
  text-align: center;
}
/* Ilustracja (monogram) leży POD formularzem — rosnący formularz
   nigdy jej nie przecina. Ten sam wzorzec co łabędzie i misa cytryn. */
body[data-theme="photobooth-noir"] .rg-swans {
  position: relative;
  display: block;
  width: calc(var(--rg-w, 760px) * 0.09948);   /* 9.948% płótna — wg projektu */
  height: auto;
  margin: clamp(22px, 5vw, 44px) auto 0;
  animation: pb-float 15s ease-in-out infinite;
}

/* Zakończenie wsunięte w tę samą sekcję */
body[data-theme="photobooth-noir"] .rg-outro-inline .rg-inner {
  width: min(62vw, calc(var(--rg-w, 760px) * 0.64));
  margin: 0 auto;
  text-align: center;
}
body[data-theme="photobooth-noir"] .rg-monogram {
  font-family: var(--rg-script);
  color: var(--rg-body);
  font-size: clamp(46px, 11vw, 96px);
  line-height: 1;
}
body[data-theme="photobooth-noir"] .rg-outro-inline .rg-h {
  font-family: var(--rg-type);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: clamp(16px, 3.6vw, 26px);
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="photobooth-noir"] .rg-postcard .ov,
  body[data-theme="photobooth-noir"] .rg-loc-cards .ov,
  body[data-theme="photobooth-noir"] .rg-swans { animation: none !important; }
}

@media (max-width: 560px) {
  body[data-theme="photobooth-noir"] .rg-timeline,
  body[data-theme="photobooth-noir"] .rg-map,
  body[data-theme="photobooth-noir"] .rg-dress-grid { width: min(86vw, 520px); }
  body[data-theme="photobooth-noir"] .rg-date .rg-inner,
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-inner,
  body[data-theme="photobooth-noir"] .rg-outro-inline .rg-inner { width: min(76vw, 460px); }
}

/* ============================================================
   CHARAKTER RUCHU — każdy element wg tego, CZYM jest
   Wcześniej wszystko szło jednym `pb-float`. Teraz: pasek zdjęć
   kołysze się jak odbitki na sznurku, koperta i kartka oddychają,
   a płyta winylowa po prostu się kręci — bo to płyta.
   ============================================================ */

@keyframes pb-sway {          /* odbitki zawieszone u góry */
  0%, 100% { rotate: -0.7deg; translate: 0 0;     }
  50%      { rotate:  0.7deg; translate: 0 -0.4%; }
}
@keyframes pb-breathe {       /* papier — sam oddech */
  0%, 100% { scale: 1;      }
  50%      { scale: 1.018;  }
}
@keyframes pb-spin {          /* płyta gramofonowa — pełny obrót */
  from { rotate: 0deg;   }
  to   { rotate: 360deg; }
}

/* Pasek odbitek — kołysze się na zawieszeniu u góry */
body[data-theme="photobooth-noir"] .rg-postcard .ov[src$="pasek.webp"],
body[data-theme="photobooth-noir"] .rg-postcard .ov[data-warstwa$="pasek.webp"] {
  animation: pb-sway 19s ease-in-out infinite;
  transform-origin: 50% 4%;
}
/* Papier: koperta, kartka, bordowa karteczka — oddech, różne fazy */
body[data-theme="photobooth-noir"] .rg-postcard .ov[src$="koperta.webp"] {
  animation: pb-breathe 15s ease-in-out infinite;
}
body[data-theme="photobooth-noir"] .rg-postcard .ov[src$="kartka.webp"] {
  animation: pb-breathe 17s ease-in-out infinite -5.6s;
}
body[data-theme="photobooth-noir"] .rg-postcard .ov[src$="karteczka_bordo.webp"] {
  animation: pb-breathe 21s ease-in-out infinite -11.2s;
}
/* Płyta winylowa kręci się — bardzo wolno, 48 s na obrót */
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[src$="plyta.webp"] {
  animation: pb-spin 48s linear infinite;
}
/* Zdjęcia w koronkowych sercach — kołysanie, każde w innej fazie */
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[src$="lokalizacja_1.webp"],
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_1.webp"],
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[src$="lokalizacja_2.webp"],
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_2.webp"] {
  animation: pb-sway 21s ease-in-out infinite;
  transform-origin: 50% 10%;
}
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[src$="lokalizacja_2.webp"],
body[data-theme="photobooth-noir"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_2.webp"] { animation-delay: -8.4s; }
/* Monogram pod formularzem — oddech */
body[data-theme="photobooth-noir"] .rg-swans {
  animation: pb-breathe 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="photobooth-noir"] .rg-postcard .ov,
  body[data-theme="photobooth-noir"] .rg-loc-cards .ov,
  body[data-theme="photobooth-noir"] .rg-swans { animation: none !important; }
}

/* ============================================================
   POPRAWKI WG PLIKU ŹRÓDŁOWEGO (2026-08-21)
   Źródło: „z tekstem full zaproszenie z maszynką.svg" (900 × 8975.5,
   sześć plansz po 1495,9). Wszystkie liczby niżej są zmierzone w tym
   pliku: kolory z klas <style>, prostokąty z atrybutów <rect>,
   pozycje tekstu z macierzy <text>.
   ============================================================ */

/* ── EKRAN 4 — ciemna plansza ────────────────────────────────
   W projekcie prostokąt #1C1616 (klasa .st11) kryje CAŁY ekran 4
   (y 99,2 % ekranu 3, wysokość 88,5 % planszy). U nas sekcja miała
   kremowe tło, więc biały nagłówek z projektu byłby niewidoczny —
   stąd wcześniejsze obejście z ciemnym tekstem po prawej stronie.
   Teraz tło jest zgodne z projektem i tekst wraca na swoje miejsce. */
body[data-theme="photobooth-noir"] .rg-story { background: #1C1616; }

/* Nagłówek: w projekcie x 21,8 %, linia bazowa y 9,9 %, biały. */
body[data-theme="photobooth-noir"] .rg-story .rg-h {
  left: 21.8%;
  top: 6.4%;
  color: #FFFFFF;
}

/* Opis leży na bordowej karteczce: prostokąt tekstu x 48–89,1 %,
   y 18,1–26,9 %. Renderer dzieli historię na dwie połowy w pół zdania,
   więc sklejamy je z powrotem w jeden ciąg (`display: inline`) — inaczej
   akapit rwie się w środku zdania, tak jak w motywie 3. */
body[data-theme="photobooth-noir"] .rg-story .rg-cols {
  position: absolute;
  left: 48%;
  top: 16.8%;
  width: 41.1%;
  z-index: 2;
}
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p,
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p:first-child,
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p:last-child {
  position: static;
  display: inline;
  left: auto; top: auto; width: auto;
  color: #F2F0E4;
  line-height: 1.55;
}
body[data-theme="photobooth-noir"] .rg-story .rg-cols .rg-p:first-child::after {
  content: " ";
}

/* ── EKRAN 5 — biała karta i nagłówek nad nią ────────────────
   W projekcie biały prostokąt kryje x 20,4–79,7 %, y 2,3–52 % planszy,
   a serca leżą NA nim. Nagłówek „Lokalizacja" stoi WYŻEJ — technicznie
   na dole planszy ekranu 4 (y 98,1 %), czyli w jasnym pasie tuż nad
   kartą. U nas renderował się na 50,8 %, czyli wprost na sercach.
   Rozwiązanie: nagłówek na samej górze sekcji, karta i serca zsunięte
   o 7 pp niżej — obie rzeczy o tę samą wartość, więc serca nadal
   siedzą dokładnie w karcie. */
body[data-theme="photobooth-noir"] .rg-location > .rg-inner {
  position: relative;
  min-height: calc(var(--rg-w) * 5 / 3 * 0.62);
}
body[data-theme="photobooth-noir"] .rg-location > .rg-inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  translate: -50% 0;
  top: calc(var(--rg-w) * 5 / 3 * 0.093);
  width: calc(var(--rg-w) * 0.593);
  height: calc(var(--rg-w) * 5 / 3 * 0.497);
  background: #FFFFFF;
  pointer-events: none;
}
body[data-theme="photobooth-noir"] .rg-location .rg-loc-cards {
  top: calc(var(--rg-w) * 5 / 3 * 0.07);
}
body[data-theme="photobooth-noir"] .rg-location .rg-card {
  position: relative;
  z-index: 1;
  /* Mapa, adres i przycisk startują tuż pod dolną krawędzią karty
     (0.115 + 0.38 = 0.495 płótna), a nie 12 pp niżej jak dotąd. */
  padding-top: calc(var(--rg-w) * 5 / 3 * 0.50);
}
body[data-theme="photobooth-noir"] .rg-location .rg-card > .rg-h {
  position: absolute;
  left: 0; right: 0; top: calc(var(--rg-w) * 5 / 3 * 0.012);
  margin: 0;
  text-align: center;
  color: var(--rg-ink);
  z-index: 2;
}

/* Przycisk „Dojazd" — w projekcie oliwkowy #556452, biały napis
   (prostokąt x 39,9–60,2 %, y 44,2–47,7 % planszy). */
body[data-theme="photobooth-noir"] .rg-location .rg-btn,
body[data-theme="photobooth-noir"] .rg-rsvp .rg-btn {
  background: #556452;
  color: #FFFFFF;
  border: none;
}

/* ── PRÓBKI DRESS CODE'U ─────────────────────────────────────
   W projekcie to PROSTOKĄTY (11 % szerokości, 3,5 % wysokości planszy,
   y 80,1 %), a nie kółka — i mają własne kolory motywu, nie różową
   paletę odziedziczoną po motywie 1. */
body[data-theme="photobooth-noir"] .rg-swatches .rg-sw {
  width: calc(var(--rg-w) * 0.11);
  height: calc(var(--rg-w) * 5 / 3 * 0.035);
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(56, 44, 31, .18);
}

/* ── EKRAN 6 — bordowa plansza, formularz na białej karcie ───
   W projekcie prostokąt #560000 (.st24) kryje cały ekran 6, a formularz
   leży na białej karcie. Pole wiadomości ma kolor papieru #F2F0E4,
   przycisk oliwkę #556452, a zaznaczona kropka #324229 (kolor napisu
   „Tak, będę" w projekcie). */
body[data-theme="photobooth-noir"] .rg-rsvp { background: #560000; }
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  background: #FFFFFF;
  padding: clamp(22px, 5vw, 40px) clamp(18px, 4vw, 34px) clamp(26px, 6vw, 44px);
  border-radius: 1px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}
body[data-theme="photobooth-noir"] .rg-textarea {
  background: #F2F0E4;
  border: 1px solid rgba(56, 44, 31, .18);
}
body[data-theme="photobooth-noir"] .rg-radio .dot { border-color: #324229; }
body[data-theme="photobooth-noir"] .rg-radio input:checked + .dot {
  background: #324229;
  border-color: #324229;
}
body[data-theme="photobooth-noir"] .rg-radio { color: #324229; }

/* ── ZAKOŃCZENIE — jeden akapit ──────────────────────────────
   Renderer dzieli tekst na dwie połowy w pół zdania i układa je obok
   siebie. W projekcie jest jedna linia pod „WITH LOVE". */
body[data-theme="photobooth-noir"] .rg-outro-inline .rg-cols,
body[data-theme="photobooth-noir"] .rg-outro .rg-cols {
  display: block;
  width: auto;
}
body[data-theme="photobooth-noir"] .rg-outro-inline .rg-cols .rg-p,
body[data-theme="photobooth-noir"] .rg-outro .rg-cols .rg-p {
  display: inline;
}
body[data-theme="photobooth-noir"] .rg-outro-inline .rg-cols .rg-p:first-child::after,
body[data-theme="photobooth-noir"] .rg-outro .rg-cols .rg-p:first-child::after {
  content: " ";
}

/* Cztery próbki w JEDNYM rzędzie na środku. Renderer dzieli je na dwie
   grupy (#rgSwLeft / #rgSwRight), bo w niektórych motywach flankują
   ilustrację dress code'u — tutaj ilustracja jest ukryta, więc obie grupy
   muszą się zejść w jeden pas, tak jak na planszy (x 20,5–78,5 %). */
body[data-theme="photobooth-noir"] .rg-dress-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
}
body[data-theme="photobooth-noir"] .rg-swatches {
  /* Bazowo obie grupy są kolumnami (flankują ilustrację), więc próbki
     stawały jedna nad drugą — na planszy leżą w jednym rzędzie. */
  flex-direction: row;
  margin-top: 0;
  gap: clamp(10px, 2.4vw, 18px);
}

/* Nagłówek „Lokalizacja" musi mieć nad kartą czysty jasny pas — inaczej
   ląduje na koronkowych sercach. Karta i serca schodzą o te same 9 pp. */
body[data-theme="photobooth-noir"] .rg-location > .rg-inner::before {
  top: calc(var(--rg-w) * 5 / 3 * 0.115);
  /* Karta kończy się tuż pod sercami i płytą. Wcześniej ciągnęła się do
     52 % płótna i zostawiała pod nimi pusty biały pas, a mapa z adresem
     i przyciskiem wypadały już POZA nią. */
  height: calc(var(--rg-w) * 5 / 3 * 0.38);
}
body[data-theme="photobooth-noir"] .rg-location .rg-loc-cards {
  top: calc(var(--rg-w) * 5 / 3 * 0.092);
}

/* Zdanie zaproszenia przeniesione na biały pas nad harmonogramem
   (parts.subIn). Na planszy 3 leży na x 12,1 %, tuż pod licznikiem;
   pod maszynką na planszy 2 zostają SAME imiona. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-sub {
  width: min(76vw, calc(var(--rg-w, 760px) * 0.78));
  margin: clamp(14px, 3vw, 24px) auto 0;
  text-align: center;
  color: var(--rg-ink);
  font-family: var(--rg-type);
  font-size: clamp(11px, 2.5vw, 14px);
  line-height: 1.7;
}

/* Gradienty styku sekcji (.rg-schedule::before/::after) mają z-index: 1
   i malują się NAD treścią — górny przykrywał napis „Harmonogram" kremowym
   pasem. Treść musi być nad nimi; gradient nadal wygładza styk plansz,
   bo leży pod tekstem, a nie na nim. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-inner {
  position: relative;
  z-index: 2;
}

/* Biały pas nad harmonogramem ma stałą wysokość niezależnie od tego, czy
   para wpisała zdanie zaproszenia. Bez tego przy pustym zdaniu nagłówek
   podjeżdżał o ~8 pp płótna w górę, prosto w gradient styku. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-sub {
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 0.075);
}

/* Żywa data ślubu w miejscu wypalonej „13.09.2026" na karteczce.
   Kolor tuszu zmierzony wprost w napis.webp (mediana pikseli o pełnym
   kryciu: RGB 67 8 39). Krój markerowy, bo oryginał jest pisany pędzlem —
   Permanent Marker jest z tej samej rodziny form co grafika. */
body[data-theme="photobooth-noir"] .rg-postcard .ov.data {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', 'Courier Prime', cursive;
  color: #430827;
  /* Rozmiar wiązany z płótnem, nie z oknem — inaczej data rozjeżdżałaby się
     z napisem nad nią przy każdej zmianie szerokości. */
  font-size: calc(var(--rg-w, 760px) * 0.036);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1.2deg);
  animation: pb-float 16s ease-in-out infinite;
  animation-delay: calc(var(--ov-i, 0) * -2.7s);
}

/* Sekcje zachodzą na siebie o 7vw (`.rg-screen { margin-top: -7vw }`),
   żeby wygaszone krawędzie plansz się zlewały. Plansza ekranu 3 ma jednak
   u góry NIEPRZEZROCZYSTY biały pas (tam siedzi licznik) — wjeżdżał on
   na papier ekranu 2 i zostawiał między maszynką a licznikiem biały pasek
   bez tekstury. Ten jeden styk robimy więc na styk, bez zachodzenia;
   przejście wygładza gradient .rg-schedule::before. */
body[data-theme="photobooth-noir"] .rg-schedule {
  margin-top: 0;
}
/* Sama plansza też nie może wystawać: w rejestrze ma `t: -0.82 %`, a `.rg-bg`
   rozciąga warstwy do wysokości sekcji, więc biały pas wychodził jeszcze
   38 px ponad jej krawędź. Przycięcie trzyma go w swojej sekcji. */
body[data-theme="photobooth-noir"] .rg-schedule .rg-bg {
  overflow: hidden;
}

/* ── ZAKOŃCZENIE — własny jasny pas, jak w projekcie ─────────
   Na planszy ekranu 6 bordo (#560000) kryje górne ~72 %, a zakończenie
   („Robert & Patrycja / WITH LOVE / zdanie") leży na JASNYM pasie papieru
   u dołu — to jest plik 06-rsvp/tlo.webp, 900×447. U nas sekcja
   zakończenia nie ma własnej planszy, więc tekst lądował ciemnymi literami
   wprost na bordo: praktycznie nieczytelny i wyżej, niż pas na to pozwala.
   Sekcja dostaje więc własne jasne tło i odsunięcie od góry, żeby cały
   blok zszedł na wysokość tego pasa. */
body[data-theme="photobooth-noir"] .rg-outro {
  /* PAPIER Z DOSTAWY, nie płaski kolor. Wcześniej stał tu `--rg-cream`
     (#F2F0E4) i obok tekstury pisma z planszy czytało się to jak dwa różne
     odcienie zszyte bez ramki. To dokładnie ten sam plik, którego projekt
     używa na ten pas: 06-rsvp/tlo.webp, 900×447, jednolicie jasny papier
     z odręcznym pismem. */
  background: var(--rg-cream) url("../assets/themes/photobooth-noir/06-rsvp/tlo.webp") center / cover no-repeat;
  margin-top: 0;
  padding-top: clamp(30px, 7vw, 72px);
  /* Pas papieru musi dochodzić do stopki. Sekcja RSVP kończy się ok. 80 px
     niżej niż zakończenie (tam dojeżdża ilustracja z paterą) i zostawiała
     pod papierem bordowy pasek. */
  padding-bottom: clamp(70px, 14vw, 150px);
}
/* Sekcja RSVP miała własne `padding-bottom: clamp(40px, 9vw, 80px)` — i to
   ono zostawiało pod papierem bordowy pasek, bo kończyła się o tyle niżej
   niż zakończenie. Miejsce pod ilustracją daje teraz sam pas papieru. */
body[data-theme="photobooth-noir"] .rg-rsvp {
  padding-bottom: 0;
}
body[data-theme="photobooth-noir"] .rg-outro .rg-monogram,
body[data-theme="photobooth-noir"] .rg-outro .rg-h,
body[data-theme="photobooth-noir"] .rg-outro .rg-p {
  color: var(--rg-ink);
}
body[data-theme="photobooth-noir"] .rg-outro .rg-inner {
  width: min(72vw, calc(var(--rg-w, 760px) * 0.74));
  margin: 0 auto;
  text-align: center;
}

/* Zakończenie: pełne imiona kaligrafią, jak na planszy (nie inicjały).
   Rozmiar mniejszy niż przy monogramie, bo mieszczą się dwa słowa. */
body[data-theme="photobooth-noir"] .rg-outro .rg-monogram {
  font-family: var(--rg-script);
  font-size: clamp(38px, 8.6vw, 74px);
  line-height: 1.05;
}

/* Koronka i zdjęcie to dwa OSOBNE obrazki, a każda warstwa nakładki dostaje
   `pb-float` z własnym opóźnieniem (`--ov-i` = numer w tablicy). Serca
   i ich ramki miały więc różne fazy tego samego kołysania i przez cały
   czas dryfowały względem siebie o ~0,9 % wysokości i 0,3° obrotu —
   geometria była już wtedy dopasowana co do dziesiątych części procenta,
   ale wyglądało to na rozjechane.

   Rozwiązanie: nie kołysze się każda warstwa z osobna, tylko CAŁA nakładka
   jako jedno. Ramki, zdjęcia i płyta ruszają się wtedy identycznie, więc
   nie mają jak się rozjechać. */
body[data-theme="photobooth-noir"] .rg-loc-cards .ov {
  animation: none;
}
/* Własne klatki, bo nakładka jest wyśrodkowana przez `translate: -50% 0`,
   a `pb-float` też animuje `translate` — wspólne klatki skasowałyby to
   wyśrodkowanie i cała grupa odjeżdżała o pół szerokości w prawo. */
@keyframes pb-float-karty {
  0%, 100% { translate: -50% 0;     rotate: 0deg;     }
  35%      { translate: -50% -0.9%; rotate: 0.3deg;   }
  70%      { translate: -50% 0.6%;  rotate: -0.22deg; }
}
body[data-theme="photobooth-noir"] .rg-loc-cards {
  animation: pb-float-karty 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="photobooth-noir"] .rg-loc-cards { animation: none !important; }
}

/* Pas próbek był SZERSZY od swojej kolumny (min(76vw, 78 % płótna) przy
   kolumnie 520 px), a `margin: auto` na elemencie szerszym od rodzica nie
   centruje — przykleja do lewej. Cały rząd wychodził przez to 36 px w prawo
   od osi sekcji, choć nagłówek i opis stały równo na środku. Szerokość
   z kolumny, centrowanie robi flex. */
body[data-theme="photobooth-noir"] .rg-dress-grid {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* ── RSVP: formularz W BIAŁEJ KARCIE Z PLANSZY ───────────────
   Plansza (06-rsvp/rsvp_karta.webp) ma już narysowaną białą kartę —
   zmierzona w pliku zajmuje x 20,24–80,08 % płótna, y 1,06–46,51 %.
   Formularz rysował dotąd WŁASNĄ białą kartę, węższą i przesuniętą w dół,
   więc obok siebie stały dwie karty: ta z grafiki i ta z kodu.
   Teraz formularz nie ma własnego tła — wchodzi w tę wyznaczoną. */
body[data-theme="photobooth-noir"] .rg-rsvp {
  /* Sekcja ma z bazy `padding: 9vw 0`, przez co formularz startował 8 pp
     poniżej górnej krawędzi karty. Górę zerujemy — pozycję wyznacza karta. */
  padding-top: 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-inner {
  width: calc(var(--rg-w, 760px) * 0.5984);
  max-width: 92vw;
  margin: 0 auto;
  padding-top: calc(var(--rg-w, 760px) * 5 / 3 * 0.011);
}
/* Formularz kryje się z kartą z planszy CO DO PIKSELA i ma jej kolor.
   Gdy treść jest dłuższa (dłuższe teksty, wąski telefon), biel rośnie
   w dół — a że to ta sama biel co na planszy, styku nie widać. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  background: #FFFFFF;
  box-shadow: none;
  border-radius: 0;
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 0.4545);
  padding: clamp(18px, 4vw, 34px) clamp(14px, 3.2vw, 34px) clamp(22px, 5vw, 40px);
}

/* Obrączki pod tekstem zakończenia — na planszy zajmują 9,9 % szerokości
   płótna (x 45,3–55,2 %), tuż pod zdaniem od pary. */
body[data-theme="photobooth-noir"] .rg-outro-fig {
  display: block;
  width: calc(var(--rg-w, 760px) * 0.099);
  height: auto;
  margin: clamp(18px, 4vw, 34px) auto 0;
  animation: pb-float 15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="photobooth-noir"] .rg-outro-fig { animation: none !important; }
}

/* ── RSVP: formularz ma się ZMIEŚCIĆ w karcie z planszy ──────
   Karta z grafiki ma 45,45 % wysokości płótna (583 px przy oknie 1050),
   a formularz mierzył 605 px — wychodził więc pod spód i przykrywał
   srebrną paterę, która na planszy jest widoczna w całości. Poniżej
   odchudzenie kolejnych odstępów; suma oszczędności ok. 110 px, więc
   formularz siedzi w karcie z zapasem i tylko lekko w nią „zanurza". */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  padding: clamp(14px, 2.6vw, 24px) clamp(14px, 3.2vw, 34px) clamp(16px, 3vw, 26px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-h {
  font-size: clamp(30px, 6.4vw, 50px);
  line-height: 1.05;
  margin: 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-q {
  margin: clamp(8px, 1.8vw, 14px) 0 clamp(8px, 1.8vw, 14px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-sep {
  margin: clamp(10px, 2.2vw, 18px) 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-msg-label {
  margin-bottom: clamp(6px, 1.4vw, 11px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-textarea {
  min-height: 0;
  height: clamp(74px, 9vw, 96px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-btn {
  margin-top: clamp(14px, 2.6vw, 22px);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-note {
  margin-top: clamp(10px, 2vw, 15px);
  font-size: clamp(9px, 1.9vw, 11px);
}

/* ── EKRAN 6 JAKO JEDNA PLANSZA: bordo z paterą + pas papieru ─
   Dotąd zakończenie („Robert & Patrycja / WITH LOVE") leżało w toku
   sekcji, ZARAZ pod formularzem, i malowało własny papier. Ponieważ
   formularz kończy się w połowie planszy, papier startował na 50 %
   wysokości sekcji i przykrywał dolną część grafiki — srebrną paterę
   z sercem i kaliami, którą w pliku źródłowym widać w całości.

   Teraz sekcja ma wysokość PŁÓTNA (900×1500), więc warstwy planszy
   nie są rozciągane i trzymają swoje proporcje (grafika kończy się
   na 67,4 %), a blok zakończenia siedzi dokładnie tam, gdzie pas
   papieru na planszy: top 70,493 %, czyli do dołu sekcji. Te same
   liczby stoją w rejestrze przy warstwie 06-rsvp/tlo.webp. */
body[data-theme="photobooth-noir"] .rg-rsvp {
  position: relative;
  min-height: calc(var(--rg-w, 760px) * 5 / 3);
}
/* `rsvpOrnament` to te same obrączki, co pod tekstem zakończenia —
   na planszy występują raz, w pasie papieru. Druga kopia lądowała
   dokładnie na styku bordo i papieru. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-swans { display: none; }

body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline {
  position: absolute;
  left: 0;
  right: 0;
  top: 70.493%;
  bottom: 0;
  margin: 0;
  padding: 0 clamp(14px, 4vw, 40px);
  /* Papier na CAŁĄ szerokość okna. Warstwa planszy kończy się na
     krawędzi płótna (760 px) i na szerokim ekranie zostawiałaby
     bordowe marginesy po bokach — dlatego ma w rejestrze live:false,
     a pas maluje ta sekcja, tym samym plikiem. */
  background: var(--rg-cream) url("../assets/themes/photobooth-noir/06-rsvp/tlo.webp") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-inner {
  padding: 0;
}
/* Pas papieru ma 29,5 % płótna — tekst zakończenia musi się w nim
   zmieścić, więc odstępy liczone są w jednostkach płótna, nie w vw. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-monogram {
  font-size: clamp(30px, 7.2vw, 62px);
  line-height: 1.06;
  margin: 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-h {
  font-size: clamp(13px, 3vw, 22px);
  margin: calc(var(--rg-w, 760px) * 5 / 3 * 0.008) 0 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-p {
  margin: calc(var(--rg-w, 760px) * 5 / 3 * 0.010) 0 0;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-outro-fig {
  margin: calc(var(--rg-w, 760px) * 5 / 3 * 0.016) auto 0;
}
/* Zdanie od pary na planszy jest wyśrodkowane. Sam akapit ma
   `display: inline` (tak układa go `.rg-cols`), więc `text-align`
   musi stanąć na kontenerze — na akapicie nic by nie zrobił. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-cols,
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline .rg-p {
  text-align: center;
}

/* ── RSVP na telefonie: formularz też musi zmieścić się w karcie ──
   Przy 390 px karta z planszy ma 295 px, a formularz mierzył 367 px
   — nadmiar zjadał górę patery ze zdjęciem i kaliami. Odpowiedzi nie
   dają się ustawić w rzędzie (dwie etykiety to 234 px przy 209 px
   kolumny), więc oszczędność idzie z odstępów, pola wiadomości
   i wysokości przycisku. Razem 72 px — formularz ma równo 295 px. */
@media (max-width: 560px) {
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
    padding: 12px clamp(12px, 3.2vw, 20px) 12px;
  }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-h { font-size: 26px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-q { margin: 6px 0; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-radios { gap: 4px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-sep { margin: 7px 0; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-textarea { height: 44px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-btn { margin-top: 10px; padding: 12px 28px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-note { margin-top: 6px; line-height: 1.4; }
}

/* ── EKRAN 6: plansza i formularz pływają JAKO JEDNO ─────────
   Warstwa planszy dostawała z bazy dryf `rg-drift-a` (translate
   -1,8 %/-2,8 % własnego rozmiaru + obrót 1°) i parallax scrolla,
   a formularz stał w miejscu. Biała kartka narysowana na grafice
   uciekała więc spod formularza nawet o ~24 px i przekręcała się
   względem niego — dokładnie ten „rozjazd", który widać w ruchu.

   Teraz obie rzeczy dostają TE SAME klatki, liczone w jednostkach
   płótna (nie w procentach własnego rozmiaru — element o innej
   wysokości przesunąłby się o inną liczbę pikseli). Obrót wypada:
   każdy element kręciłby się wokół własnego środka, a te środki są
   w innych miejscach, więc obrót zawsze rozjeżdża grafikę z treścią
   (ta sama pułapka co przy koronkowych sercach w lokalizacji).
   Parallax w tej sekcji wyłączony z tego samego powodu. */
@keyframes pb-rsvp-plyw {
  0%, 100% { translate: 0 0; }
  50%      { translate: calc(var(--rg-w, 760px) * -0.008)
                        calc(var(--rg-w, 760px) * 5 / 3 * -0.011); }
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-bg img {
  transform: none;
  animation: pb-rsvp-plyw 13s ease-in-out infinite;
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  animation: pb-rsvp-plyw 13s ease-in-out infinite;
}
/* Formularz ma też `.rg-reveal` — reguła `.rg-reveal.in` nadpisałaby
   `animation` i zostawiła kartkę nieruchomą (a przy okazji niewidoczną,
   bo to wejście ustawia jej `opacity`). Obie animacje w jednej
   deklaracji, jak przy sercu i łabędziach w motywie 1. W selektorze
   musi stać `#rgScreens`, bo bazowa reguła też ma to ID — bez niego
   przegrywa nawet cztery klasy. */
body[data-theme="photobooth-noir"] #rgScreens .rg-rsvp .rg-card.rg-reveal.in {
  animation: rg-rise 1s cubic-bezier(.22,1,.36,1) forwards,
             pb-rsvp-plyw 13s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-bg img,
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-card,
  body[data-theme="photobooth-noir"] #rgScreens .rg-rsvp .rg-card.rg-reveal.in { animation: none !important; }
}

/* ── DRESS CODE KRÓTSZY, EKRAN 6 WYŻSZY ─────────────────────
   Reguła `.rg-location .rg-inner:first-of-type` (min-height 46 %
   płótna) miała trzymać miejsce na koronkowe serca nad mapą, ale
   `:first-of-type` liczy się w OBRĘBIE rodzica — a `.rg-dress` też
   ma w środku `.rg-inner` i był to jego pierwszy div. Dress code
   dostawał więc 583 px przy 282 px treści: 300 px pustki.
   Zawężenie tamtej reguły do dziecka bezpośredniego (wyżej w pliku)
   + własna, mniejsza rezerwa skracają sekcję z 655 px do ~452 px
   (-31 %). */
body[data-theme="photobooth-noir"] .rg-dress .rg-inner {
  min-height: calc(var(--rg-w) * 5 / 3 * 0.30);
}

/* Odzyskane ~203 px idą do ekranu 6: trochę powietrza nad planszą,
   szerszy odstęp między paterą a papierem i przede wszystkim wyższy
   pas papieru pod „kilka słów od pary".
   Warunek: `.rg-bg` musi mieć wysokość PŁÓTNA, nie sekcji — inaczej
   warstwy (pozycjonowane w % tła) rozciągnęłyby się razem z sekcją
   i patera zrobiłaby się o 16 % wyższa niż w projekcie. */
body[data-theme="photobooth-noir"] .rg-rsvp {
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.16);
}
body[data-theme="photobooth-noir"] .rg-rsvp .rg-bg {
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.03);
  height: calc(var(--rg-w, 760px) * 5 / 3);
}
/* Formularz jedzie z planszą — to samo przesunięcie co `.rg-bg`
   (0,03) plus jego dotychczasowy odstęp od krawędzi karty (0,011). */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-inner {
  padding-top: calc(var(--rg-w, 760px) * 5 / 3 * 0.041);
}
/* Pas papieru: 0,03 przesunięcia planszy + 0,70493 z planszy
   + 0,02 szerszego odstępu pod paterą. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline {
  top: calc(var(--rg-w, 760px) * 5 / 3 * 0.755);
}

/* ── BIEL Z PLANSZY LOKALIZACJI SCHODZI POD PRZYCISK ─────────
   Plik 05-location/tlo.webp ma paski tylko na górnych 72 % — dolne
   28 % to czysta biel, na której w projekcie leży dress code. Sekcja
   jest jednak o 39 % wyższa od płótna (mieści kartę z mapą i dress
   code), a warstwa rozciąga się razem z nią, więc granica bieli
   wypadała tuż pod adresem i przycisk „Dojazd" lądował na białym.
   Warstwa dostaje więc większą wysokość: 118,4 % zamiast 102,589 %,
   czyli biel startuje na 74,2 % sekcji — 116 px pod przyciskiem na
   komputerze (44 px na telefonie) i tuż nad blokiem dress code'u.
   Paski są pionowe, więc rozciągnięcie w pionie niczego w nich nie
   zniekształca.
   `!important` jest konieczne: geometrię warstw wpisuje inline
   renderer (z rejestru), a stylu inline nie da się nadpisać inaczej.
   Sam rejestr zostaje 1:1 z projektem. */
body[data-theme="photobooth-noir"] #rgLocation .rg-bg img[src$="05-location/tlo.webp"] {
  height: 118.4% !important;
}

/* ══════════════════════════════════════════════════════════════════
   12.10 — EKRAN 6: KARTKA RSVP „ZANURZONA" W PATERZE, JAK NA PLANSZY
   ══════════════════════════════════════════════════════════════════
   Na planszy biała kartka stoi NA paterze, ZA dekoracjami: pasek zdjęć
   zachodzi na jej lewy brzeg, a serce z koronki, kalie i puzderko
   z obrączkami przykrywają jej dół. Kartka jest częścią kompozycji.

   U nas formularz rysował własną białą kartkę NAD całą grafiką i ta
   biel schodziła 295 px w dół (na komputerze ok. 580 px), przykrywając
   górę serca, kalii i puzderka — kartka wyglądała jak naklejona z przodu.

   Teraz trzy warstwy, od tyłu:
     1. plansza rsvp_karta.webp (jak dotąd) — z niej jest biała kartka,
     2. formularz — BEZ własnego tła, wpisany w kartkę z planszy,
     3. rsvp_przod.webp — ta sama plansza z WYCIĘTĄ kartką (sama biel
        karty, wycięta zalewaniem od środka karty; serce, kalie, pasek
        zdjęć i puzderko zostają co do piksela). Leży NAD formularzem,
        więc dekoracje zachodzą na kartkę z formularzem tak jak na planszy.
   Trzecia warstwa to ::after na .rg-bg, w tych samych procentach co
   warstwa planszy — obie liczą się od tego samego pudełka, więc kryją
   się piksel w piksel. */

/* .rg-bg nie może tworzyć własnego kontekstu warstw — inaczej jej ::after
   nie wyjdzie nad formularz (.rg-inner ma z-index 2). Kontekst tworzyły
   z-index: 0 i transform: translateX(-50%); wyśrodkowanie idzie teraz
   przez `left`, bez transformacji. */
body[data-theme="photobooth-noir"] .rg-rsvp > .rg-bg {
  z-index: auto;
  transform: none;
  left: calc(50% - var(--rg-w, 760px) / 2);
}
body[data-theme="photobooth-noir"] .rg-rsvp > .rg-bg::after {
  content: "";
  position: absolute;
  left: 1.94%;
  top: 1.058%;
  width: 86.353%;
  height: 66.379%;
  /* rsvp_przod_okna: kadry paska zdjęć wycięte — pod spodem leży pasek
     złożony ze zdjęć pary (zloz w rejestrze warstw), a bez zdjęć plansza
     z przykładowymi kadrami, więc wygląda tak samo jak wcześniej. */
  background: url("../assets/themes/photobooth-noir/06-rsvp/rsvp_przod_okna.webp") 0 0 / 100% 100% no-repeat;
  z-index: 3;
  pointer-events: none;            /* klik w pole i przycisk przechodzi przez dekoracje */
}

/* Formularz bez własnej kartki — biel daje plansza. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  background: none;
  min-height: 0;
  /* Treść w pasie x 31–69 % płótna, jak na planszy (pole wiadomości:
     x 280–620 z 900). Kartka ma 59,84 %, więc po bokach po 10,9 %.
     Szerzej treść wchodziłaby pod pasek zdjęć z lewej. */
  padding-left: calc(var(--rg-w, 760px) * 0.109);
  padding-right: calc(var(--rg-w, 760px) * 0.109);
}

/* KARTKA I DEKORACJE STOJĄ NIERUCHOMO. Dotąd plansza i formularz płynęły
   razem (pb-rsvp-plyw), ale formularz zaczynał płynąć dopiero po odsłonie,
   więc fazy i tak się rozjeżdżały — a trzecia warstwa dołożyłaby trzeci
   zegar. Do tego pole wiadomości i przycisk uciekały spod palca podczas
   pisania. Formularz to jedyne miejsce, gdzie gość coś wypełnia. */
body[data-theme="photobooth-noir"] .rg-rsvp .rg-bg img,
body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
  animation: none;
}
body[data-theme="photobooth-noir"] #rgScreens .rg-rsvp .rg-card.rg-reveal.in {
  animation: rg-rise 1s cubic-bezier(.22,1,.36,1) forwards;
}
/* Telefon: kartka z planszy ma tu ok. 240 px wysokości do miejsca, gdzie
   zaczyna się serce, a formularz z notką mierzył 282 px — notka chowała
   się w 38 % pod kaliami. Treść dostaje więcej szerokości (45,8 % płótna
   zamiast 38 %: z lewej wciąż 4 px przed paskiem zdjęć, z prawej przed
   puzderkiem), dzięki czemu notka i podpowiedź w polu mieszczą się w
   mniejszej liczbie wierszy, a odstępy schodzą o kilka pikseli. */
@media (max-width: 560px) {
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-card {
    padding: 14px calc(var(--rg-w, 760px) * 0.07) 0;
  }
  /* Notka pod przyciskiem to też miejsce na komunikat po wysłaniu
     („Dziękujemy…", błąd) — musi zostać w kartce i być widoczna, więc to
     ona wyznacza budżet: przy 360 px kończy się nad sercem dopiero po
     zejściu wszystkich odstępów o 2–4 px i nagłówka o 3 px. */
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-h { font-size: 23px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-q { margin: 3px 0; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-radios { gap: 2px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-sep { margin: 3px 0; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-msg-label { margin-bottom: 3px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-textarea { height: 28px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-btn { margin-top: 6px; padding: 8px 24px; }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-note { margin-top: 3px; line-height: 1.3; }
}
/* Najwęższe telefony (poniżej 375 px): grafika maleje razem z ekranem,
   a pismo formularza ma swoje minimum — przy 320 px notka pod przyciskiem
   chowała się w 60 % za sercem. Patera z dekoracjami zjeżdża tam o kilka
   do 32 px, a kartka „rośnie" o tyle samo w górę: biały pas tej samej
   szerokości co kartka z planszy (x 20,24–79,96 % płótna) wypełnia
   szczelinę. Zjazd liczy się płynnie z szerokości okna; przy 375 px
   i szerzej wynosi zero, więc wszystko wyżej zostaje jak na planszy. */
@media (max-width: 374px) {
  body[data-theme="photobooth-noir"] .rg-rsvp {
    --pb-zjazd: clamp(0px, calc((375px - 100vw) * 0.7), 32px);
    /* Pas papieru z zakończeniem stał na 70,49 % wysokości sekcji, a jego
       treść jest tu wyższa niż pas (przy 320 px 266 px na 216 px pasa) —
       imiona wychodziły ponad papier, na bordo i paterę. Na tych
       szerokościach pas zaczyna się tuż pod stopą patery, a sekcja rośnie
       tak, żeby pod nim zmieściła się cała treść. */
    min-height: calc(var(--rg-w, 760px) * 1.174 + var(--pb-zjazd) + 330px);
  }
  body[data-theme="photobooth-noir"] .rg-rsvp .rg-outro-inline {
    top: calc(var(--rg-w, 760px) * 1.174 + var(--pb-zjazd) + 4px);
  }
  body[data-theme="photobooth-noir"] .rg-rsvp > .rg-bg img,
  body[data-theme="photobooth-noir"] .rg-rsvp > .rg-bg::after {
    translate: 0 var(--pb-zjazd);
  }
  body[data-theme="photobooth-noir"] .rg-rsvp > .rg-bg::before {
    content: "";
    position: absolute;
    left: 20.24%;
    width: 59.72%;
    top: 1.058%;
    height: calc(var(--pb-zjazd) + 4px);
    background: #FFFFFF;
    pointer-events: none;
  }
}