/* ─────────────────────────────────────────
   SECTION — HERO
───────────────────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--cream-50);
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* frame on the faces, not the middle of the photo: 35% across keeps both
     faces in view on phones, 15% down keeps Stian's head in on wide screens and both faces in on ultra-wide ones */
  object-position: 35% 15%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.hero-content {
  position: relative;
  text-align: center;
  padding: 0 24px;
}

.hero-eyebrow {
  color: var(--on-inverse-muted);
  margin-bottom: 18px;
}

.hero-title {
  /* Flaviotte sits high in its line box, so the names' box carries ~0.25em of
     empty space under the letters. The same space added on top makes the gap
     "THE WEDDING OF" → names match the gap names → date (checked at
     390, 768, 1440 and 1920px wide: within 2px). */
  padding-top: 0.25em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-amp {
  line-height: 1;
  position: relative;
  top: 0.04em;
}

.hero-date {
  margin-top: 20px;
  color: var(--on-inverse-muted);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2.4s ease-in-out infinite;
}

.hero-flower {
  width: 32px;
  height: 32px;
  /* tint to cream so it reads on the dark hero overlay */
  filter: brightness(0) invert(1) opacity(0.7);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* dark base behind the photo so its fade-in reads as "developing" */
.hero { background-color: var(--inverse); }