:root {
  --white: #ffffff;
  --gold: #d8bd86;
  --gold-light: #ead8ae;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: #111;
  color: var(--white);
}

/*
 * Fundo principal
 */
.thank-you {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

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

  padding: 2rem;

  background-image: url("../images/bg-wedding.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  overflow: hidden;
}

/*
 * Apenas o necessário para garantir leitura.
 * A fotografia continua sendo o elemento principal.
 */
.thank-you::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(10, 8, 6, 0.04) 0%,
      rgba(10, 8, 6, 0.12) 55%,
      rgba(10, 8, 6, 0.20) 100%
    );
}

/*
 * Conteúdo
 */
.thank-you__content {
  position: relative;
  z-index: 1;

  width: min(92%, 720px);

  padding: 2.5rem 3rem;

  text-align: center;

  background: rgba(18, 14, 10, 0.28);

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.25rem;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 4px 20px rgba(0, 0, 0, 0.20);
}

/*
 * Pequeno detalhe ornamental.
 */
.thank-you__content::before {
  content: "";

  display: block;

  width: 48px;
  height: 1px;

  margin: 0 auto 1.5rem;

  background: var(--gold-light);

  opacity: 0.9;
}

/*
 * Título
 */
.thank-you__title {
  margin-bottom: 1rem;

  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: clamp(3rem, 8vw, 5.8rem);
  font-weight: 400;
  line-height: 0.9;

  letter-spacing: -0.02em;

  color: var(--white);
}

/*
 * Mensagem
 */
.thank-you__message {
  max-width: 580px;

  margin: 0 auto;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 300;

  line-height: 1.8;
  letter-spacing: 0.025em;

  color: rgba(255, 255, 255, 0.94);
}

/*
 * Logo
 */
.thank-you__logo {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 2.25rem auto 1.8rem;
}

.thank-you__logo img {
  display: block;

  width: clamp(130px, 24vw, 210px);
  height: auto;

  /*
   * Ajuda principalmente quando a logo
   * possui linhas claras/douradas finas.
   */
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.15));
}

/*
 * Assinatura
 */
.thank-you__signature {
  font-family: "Cormorant Garamond", Georgia, serif;

  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-style: italic;
  font-weight: 400;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.9);
}

.thank-you__signature strong {
  display: block;

  margin-top: 0.15rem;

  font-size: clamp(1.5rem, 4vw, 2rem);
  font-style: normal;
  font-weight: 400;

  color: var(--gold-light);
}

/*
 * Mobile
 */
@media (max-width: 600px) {
  .thank-you {
    padding: 1rem;
    background-position: center center;
  }

  .thank-you__content {
    width: 100%;

    padding: 2rem 1.5rem;

    border-radius: 1rem;

    background: rgba(18, 14, 10, 0.32);
  }
}