/* ============================================
   Ekran 1 — Strona główna (Figma 54:739, 1920×7725)

   Sekcje leżą w normalnym przepływie; ujemne marginesy odtwarzają
   zaplanowane w makiecie nachodzenie warstw, a kolejność malowania
   ustala z-index. Dzięki temu dłuższy tekst przesuwa resztę strony
   w dół, zamiast nachodzić na sąsiadów — warunek działania szablonu.
   ============================================ */

/* === Hero ==================================================
   Makieta zaczyna zdjęcie 94 px nad krawędzią kadru, więc górna
   część łuku jest przycięta. */
.hero {
  position: relative;
  z-index: 3;
  height: 1386px;
  color: var(--text-on-burgundy);
  text-align: center;
}

.hero__photo {
  position: absolute;
  top: -94px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 0 0 var(--r-hero-arch) var(--r-hero-arch);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Jeden plik obsługuje oba układy: desktop bierze z niego górny, szeroki
     pas, a telefon wąski wycinek od lewej. */
  object-position: 4% top;
}

.hero__eyebrow,
.hero__date,
.hero__names {
  position: relative;
}

.hero__eyebrow {
  padding-top: 75px;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-body);
  color: var(--c-burgundy);
}

.hero__date {
  margin-top: 6px;
  font-size: var(--fs-eyebrow-date);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--c-burgundy);
}

.hero__names {
  margin-top: 205px;
  font-family: var(--font-script);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
}

/* === Szczegóły ============================================= */
.details {
  position: relative;
  z-index: 2;
  margin-top: -433px; /* 953 − 1386 */
}

.details__panel {
  min-height: 1619px;
  padding-top: 540px;   /* 1493 − 953 */
  padding-bottom: 109px;
}

.detail-block + .detail-block {
  margin-top: var(--sp-detail-block);
}

.detail-block__text {
  margin-top: var(--sp-3);
}

.detail-block__script {
  margin-top: var(--sp-detail-script);
  font-size: var(--fs-script-date);
}

/* Kokardka — dekoracja pozycjonowana względem canvasu, nad hero i kartą. */
.bow-decor {
  position: absolute;
  top: 998px;
  left: 1170px;
  z-index: 4;
  display: block;
  width: 530px;
  height: 990px;
  pointer-events: none;
}

.bow-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Pasma zdjęciowe ======================================= */
.photo-band--home {
  z-index: 1;
  height: 1483px;
  margin-top: -237px; /* 2335 − 2572 */
}

/* W makiecie zdjęcie stopki wystaje poza dolną krawędź kadru i jest
   przycinane. Sekcja ma więc wysokość do końca strony, a samo zdjęcie
   zachowuje pełne proporcje i wychodzi poza nią. */
.photo-band--foot {
  z-index: 2;
  height: 1615px; /* 7725 − 6110 */
  margin-top: 526px;
  overflow: hidden;
}

.photo-band--foot picture {
  height: 2178px;
}

/* Zdjęcie w środku strony jest pionowe — telefon pokazuje je niemal w całości,
   desktop tylko dolny pas ze ścieżką. */
.photo-band--home img {
  object-fit: cover;
  object-position: center bottom;
}


/* === Dress code ============================================
   Falę nad sekcją tworzy kremowy blob nachodzący na zdjęcie.
   ========================================================== */
.dress-code {
  position: relative;
  z-index: 5;
  height: 640px;
  margin-top: -100px; /* tytuł startuje jeszcze nad krawędzią zdjęcia */
  color: var(--text-on-cream);
}

.blob--cream {
  top: -1037px; /* 2681 − 3718 */
  left: -279px;
  width: 2722px;
  height: 2722px;
  --blob-color: var(--c-cream);
  --blob-w: 1968.21px;
  --blob-h: 1880.96px;
  --blob-rot: -135.23deg;
}

.blob--cream::before {
  -webkit-mask-image: url('../../img/decor/blob-cream.svg');
  mask-image: url('../../img/decor/blob-cream.svg');
}

.dress-code__body {
  position: relative;
}

.dress-code__text {
  max-width: 1102px;
  margin-top: 60px;
}

.dress-code__swatches {
  margin-top: 71px;
  padding: 0;
  list-style: none;
}

/* === Registry ==============================================
   Bordowa płyta plus blob, który schodzi falą na zdjęcie stopki.
   ========================================================== */
.registry {
  position: relative;
  z-index: 6;
  height: 1226px;
  color: var(--text-on-burgundy);
  background: var(--c-burgundy);
}

.blob--burgundy {
  top: -453px; /* 3905 − 4358 */
  left: -644.5px;
  width: 3272.5px;
  height: 3299px;
  --blob-color: var(--c-burgundy);
  --blob-w: 2415.3px;
  --blob-h: 2308.23px;
  --blob-rot: 55.31deg;
}

.blob--burgundy::before {
  -webkit-mask-image: url('../../img/decor/blob-burgundy.svg');
  mask-image: url('../../img/decor/blob-burgundy.svg');
}

.registry__body {
  position: relative;
  padding-top: 145px; /* 4503 − 4358 */
}

.registry__text {
  max-width: 1420px;
  margin-top: 76px;
}

/* Koperta wychodzi poza bordową płytę — kryje ją blob poniżej. */
/* === Koperta ===============================================
   Trzy warstwy z makiety: koronkowy tył z rozłożoną klapką, kartka
   z zaproszeniem i przód koperty, który ją przykrywa. Ten sam podział
   napędza animację otwierania na ekranie powitalnym.
   ========================================================== */
.envelope {
  position: relative;
  display: block;
  width: 841px;
  height: 1051px; /* 5962 − 4911 */
  margin: 92px auto 0;
  color: var(--c-burgundy);
  text-decoration: none;
}

/* Wnętrze koperty liczone procentowo od 841 × 1051 z makiety — dzięki temu
   telefon dostaje ten sam układ po zmianie jednej szerokości. */
.envelope__back,
.envelope__front {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
}

.envelope__back img,
.envelope__front img {
  display: block;
  width: 100%;
  height: 100%;
}

.envelope__back {
  top: 0;
  z-index: 1;
  height: 68.51%; /* 720 / 1051 */
}

.envelope__front {
  top: 40.15%; /* 422 / 1051 */
  z-index: 3;
  height: 59.85%;
  transition: transform var(--dur) var(--ease);
}

/* Kartka wysuwa się spod klapki; przód zostaje na miejscu. */
.envelope__card {
  position: absolute;
  top: 28.83%;  /* 303 / 1051 */
  left: 16.05%; /* 135 / 841 */
  z-index: 2;   /* pod przodem koperty, nad jej tyłem */
  display: block;
  width: 67.9%;
  height: 59.47%;
  background: var(--c-card);
  transition: transform var(--dur) var(--ease);
}

.envelope:hover .envelope__card,
.envelope:focus-visible .envelope__card {
  transform: translateY(-22px);
}

.envelope__kicker,
.envelope__label {
  position: absolute;
  left: 0;
  z-index: 4; /* nad przodem koperty — w makiecie napis leży na kartce */
  width: 100%;
  text-align: center;
}

.envelope__kicker {
  top: 35.68%; /* 375 / 1051 */
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-body);
}

.envelope__label {
  top: 42.72%; /* 449 / 1051 */
  display: block;
  font-size: var(--fs-script-cta);
}

/* === Przejście na ekran RSVP ===============================
   Koperta w tej sekcji jest już otwarta, więc po kliknięciu wyjeżdża
   z niej sama kartka — ta sama, która w intro wpuszcza na stronę.
   ========================================================== */
.envelope--opening .envelope__card {
  animation: envelope-card-out var(--env-t-slide) var(--ease) both;
}

.envelope--opening .envelope__kicker,
.envelope--opening .envelope__label {
  animation: envelope-card-out var(--env-t-slide) var(--ease) both;
}

.envelope--opening .envelope__back,
.envelope--opening .envelope__front {
  animation: envelope-shell-out var(--env-t-slide) var(--ease) both;
}

@keyframes envelope-card-out {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-30%) scale(1.12); }
}

@keyframes envelope-shell-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.35; transform: translateY(3%); }
}

/* Zasłona domyka przejście, żeby wczytanie RSVP nie mrugnęło. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: var(--c-cream);
  opacity: 0;
  /* Zasłona rusza dopiero, gdy kartka zdąży wyjechać — inaczej przykrywa
     ją, zanim ruch stanie się widoczny. */
  transition: opacity var(--env-t-exit) var(--ease) calc(var(--env-t-slide) * 0.45);
}

.page-veil[data-on] {
  opacity: 1;
}

/* === Stopka ================================================ */
.photo-band--foot .site-footer {
  position: absolute;
  top: 406px; /* 6516 − 6110 */
  left: 5px;
  width: var(--canvas-w);
}

/* ============================================
   Mobile — Figma 54:777 (393×3140)
   Kotwice z makiety; te same sekcje, inne wartości.
   ============================================ */
@media (max-width: 767px) {
  .hero {
    height: 720px;
  }

  /* Na telefonie zdjęcie zaczyna się przy górnej krawędzi — inaczej niż
     na desktopie, gdzie makieta wypuszcza je 94 px ponad kadr. */
  .hero__photo {
    top: 0;
  }

  /* Telefon bierze z tego samego pliku wąski pas od lewej krawędzi. */
  .hero__photo img {
    object-position: 4% top;
  }

  .hero__eyebrow {
    padding-top: 37px;
    font-size: var(--fs-eyebrow);
  }

  .hero__date {
    margin-top: 6px;
    font-size: var(--fs-eyebrow-date);
  }

  .hero__names {
    margin-top: 301px;
  }

  .details {
    margin-top: -118px; /* 602 − 720 */
  }

  .details__panel {
    /* Wysokość z makiety. Przeglądarka łamie akapit „TRAVEL” na 4 wiersze
       zamiast 5, więc bez tego karta byłaby o wiersz niższa i wszystkie
       sekcje poniżej (fale, zdjęcia) rozjechałyby się o 17 px. */
    min-height: 610px;
    padding-top: 156px;
    padding-bottom: 59px;
  }

  .bow-decor {
    top: 602px;
    left: 232px;
    width: 133px;
    height: 248px;
  }

  .photo-band--home {
    height: 645px;
    margin-top: -95px; /* 1117 − 1212 */
  }

  .photo-band--foot {
    height: 484px;
    margin-top: 32px; /* 2656 − 2624 */
  }

  /* Desktop wypuszcza zdjęcie poza dolną krawędź kadru; na telefonie
     ma się zmieścić w całości. */
  .photo-band--foot picture {
    height: 100%;
  }

  .dress-code {
    height: 306px;
    margin-top: 0;
  }

  .blob--cream {
    top: -272px; /* 1490 − 1762 */
    left: -94px;
    width: 684.4px;
    height: 684.5px;
    --blob-w: 494.9px;
    --blob-h: 473px;
  }

  .dress-code__text {
    max-width: var(--prose-w);
    margin-top: 20px;
  }

  .dress-code__swatches {
    margin-top: 26px;
  }

  .registry {
    height: 556px;
  }

  .blob--burgundy {
    top: 136px; /* 2204 − 2068 */
    left: -132px;
    width: 670.6px;
    height: 676px;
    --blob-w: 494.9px;
    --blob-h: 472.9px;
  }

  .registry__body {
    padding-top: 40px;
  }

  .registry__text {
    max-width: var(--prose-w);
    margin-top: 33px;
  }

  .envelope {
    width: 216px;
    height: 268px;
    margin-top: 50px;
  }

  .photo-band--foot .site-footer {
    top: 92px; /* 2748 − 2656 */
    left: 0;
    width: 100%;
  }
}