/* ==========================================================================
   Hero — primeira dobra, nomes dos noivos.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
}

/* --- Fundo fotográfico ---------------------------------------------------
   A foto entra como <img> e não como background-image de propósito: sendo
   o maior elemento da primeira dobra, o <img> é achado pelo pré-scanner do
   navegador e começa a baixar antes do CSS terminar de ser lido. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Vale como fundo enquanto a foto carrega, e como fundo definitivo se
     nenhuma imagem estiver cadastrada. */
  background:
    radial-gradient(circle at 20% 20%, var(--serenity-pale), transparent 55%),
    radial-gradient(circle at 80% 30%, var(--serenity-light), transparent 50%),
    linear-gradient(180deg, var(--background-white), var(--background));
}

.hero__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu Serenity por cima da foto. Denso no miolo, para o texto ficar
   legível; mais aberto nas bordas, onde a fotografia respira. Também
   dessatura o verde da imagem para dentro da paleta azul. */
.hero__veu {
  position: absolute;
  inset: 0;
  /* A primeira camada fica por cima: dissolve o pé da foto no branco da
     seção seguinte. A segunda é o véu que garante o contraste do texto. */
  background:
    linear-gradient(
      to bottom,
      transparent 56%,
      var(--hero-fade-soft) 70%,
      var(--hero-fade-mid) 83%,
      var(--hero-fade-strong) 93%,
      var(--background-white) 100%
    ),
    radial-gradient(
      ellipse 85% 65% at 50% 46%,
      var(--hero-veil-center) 0%,
      var(--hero-veil-mid) 52%,
      var(--hero-veil-edge) 100%
    );
}

.hero__inner {
  position: relative;
}

.hero__eyebrow {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  /* --serenity-medium não alcança 4.5:1 nem no fundo liso; sobre a foto,
     menos ainda. O tom escuro da paleta resolve sem sair da identidade. */
  color: var(--serenity-dark);
  margin-bottom: var(--space-5);
}

.hero__names {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  /* No corpo do hero a Cormorant abre demais entre as letras; um leve
     fechamento devolve a unidade da palavra. */
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.hero__amp {
  color: var(--serenity);
  font-size: 0.6em;
}

.hero__date {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  /* A data do casamento é a informação central da primeira dobra:
     precisa de contraste de texto normal, que --text-secondary não dá. */
  color: var(--text-primary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* Indicador de rolagem com pulso contínuo. */
.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.hero__scroll-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, var(--serenity), transparent);
  animation: float-soft 2.4s ease-in-out infinite;
}