/* =====================================================
   Two fixed background layers — instant elevator swap
   (no transition: sections snap like floors of a building)
   ===================================================== */
#site-bg,
#site-bg2 {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #111;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.22s ease; /* brief crossfade — keeps the "floor change" feel without looking broken */
  filter: none;
}

#site-bg  { background-image: url("../images/BG-HERO-LANDSCAPE.jpg"); opacity: 1; z-index: -1; }
#site-bg2 { opacity: 0; z-index: -2; }

/* =====================================================
   Sections — a modest gap between cards so background
   peeks through as you pass between floors.
   ===================================================== */
.bg-photo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;         /* full-screen background visible in the gap */
  margin: 0 0 100vh;         /* full-screen elevator gap between floors */
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
}

/* Last section needs no gap below it */
.bg-photo-section:last-of-type {
  margin-bottom: 0;
}

/* Paper card — content-driven height, not forced to fill viewport */
.paper-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: auto;          /* height = content, no forced 105vh */
  margin: 0;
  padding: 5rem 3.5rem;
  border-radius: 0;
  border: none;
  font-size: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 0 -10px 50px rgba(0,0,0,0.28);
}

.paper-card > * { position: relative; z-index: 1; }

/* Paper texture */
.paper-card--details,
.paper-card--hotel,
.paper-card--venue,
.paper-card--travel,
.paper-card--rsvp,
.paper-card--story,
.paper-card--registry {
  background-color: #fdf7f0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  box-shadow:
    0 -6px 40px rgba(0,0,0,0.22),
    inset 0 0 80px rgba(180,150,100,0.07);
}

/* Per-section card identity — each "chapter" feels distinct */
/* Story: soft warm white */
.paper-card--story {
  background-color: #faf8f4;
  box-shadow:
    0 -6px 40px rgba(0,0,0,0.22),
    inset 0 0 80px rgba(180, 150, 100, 0.06);
}

/* RSVP: lightest, most open — signals "action space" */
.paper-card--rsvp {
  background-color: #fefcf9;
  box-shadow:
    0 -6px 40px rgba(0,0,0,0.20),
    inset 0 0 60px rgba(200, 185, 150, 0.04);
}

/* Registry: parchment warmth */
.paper-card--registry {
  background-color: #faf5eb;
  box-shadow:
    0 -6px 40px rgba(0,0,0,0.22),
    inset 0 0 90px rgba(180, 155, 100, 0.09);
}

/* Details: crisper, more formal */
.paper-card--details {
  background-color: #fdfaf4;
}

/* Invitation card: stretch children to full width so text can centre */
.section--invitation .paper-card--details {
  justify-content: center;
  align-items: stretch;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.paper-card--hotel    { background-color: #faf4ed; }
.paper-card--venue    { background-color: #fcf6ef; }
.paper-card--travel   { background-color: #fbf5ee; }