/* ============================================================
   Drifting photo field
   Photos travel across the page at three depths. Nearer ones are
   larger, faster and more opaque; farther ones are smaller, slower
   and fainter — which is what sells the sense of distance.
   ============================================================ */

.driftfield{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}

.drift{
  position:absolute;
  top:0; left:0;
  will-change:transform;
  border-radius:.5rem;
  overflow:hidden;
  box-shadow:0 10px 34px rgba(42,33,27,.16);
  transform:translate3d(-50vw,-50vh,0);
}

.drift img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

/* Depth tiers. Black and white throughout; opacity and a touch of blur
   carry the distance cue. Contrast is lifted slightly as things recede so
   the far tier does not dissolve into the background entirely. */
.drift.near{ opacity:.75; filter:grayscale(1) contrast(1.04) blur(0px); }
.drift.mid { opacity:.58; filter:grayscale(1) contrast(1.08) blur(.5px); }
.drift.far { opacity:.42; filter:grayscale(1) contrast(1.12) blur(1.2px); }

/* A neutral scrim only — no colour wash, or the black and white would
   come back tinted. */
.drift::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(150deg, rgba(42,33,27,.10), rgba(42,33,27,.04));
}

/* ------------------------------------------------------------
   Readability. The field sits behind everything, so any section
   carrying body copy gets a translucent plate. Photos stay fully
   visible in the hero and in the gaps between sections.
   ------------------------------------------------------------ */
section{ background:rgba(251,247,241,.86); backdrop-filter:blur(2px); }
section:nth-of-type(even){ background:rgba(244,237,227,.88); }
#rsvp{ background:rgba(46,64,52,.94); }

.hero{ background:transparent; }
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 52% at 50% 46%,
      rgba(251,247,241,.97) 0%,
      rgba(251,247,241,.93) 38%,
      rgba(251,247,241,.72) 62%,
      rgba(251,247,241,.28) 82%,
      transparent 100%),
    linear-gradient(175deg, rgba(244,237,227,.42) 0%, rgba(251,247,241,.22) 55%);
}

footer{ background:rgba(234,224,210,.92); position:relative; z-index:1; }

/* Section edges feather into the photo field instead of hard-cutting. */
section::before{
  content:'';
  position:absolute; left:0; right:0; top:-46px; height:46px;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(251,247,241,.86));
}
section:nth-of-type(even)::before{
  background:linear-gradient(to bottom, transparent, rgba(244,237,227,.88));
}
#rsvp::before{
  background:linear-gradient(to bottom, transparent, rgba(46,64,52,.94));
}

@media (max-width:700px){
  /* Fewer, calmer photos on a phone — and firmer plates, because
     small screens leave no margin for busy text backgrounds. */
  .drift.far{ display:none; }
  .drift.near{ opacity:.62; }
  .drift.mid { opacity:.48; }
  section{ background:rgba(251,247,241,.93); }
  section:nth-of-type(even){ background:rgba(244,237,227,.94); }
}

@media (prefers-reduced-motion:reduce){
  /* Motion off entirely: a still, sparse scatter rather than a blank page. */
  .drift{ animation:none !important; }
  .drift.mid, .drift.far{ display:none; }
  .drift.near{ opacity:.30; }
}