/* ==========================================================
   SUCCESS OVERLAY
========================================================== */

.success-overlay {
  position: fixed;
  inset: 0;

  z-index: 9999;

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

  padding: 30px;

  background: rgba(0, 0, 0, 0.50);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


/* ACTIVO */

.success-overlay.is-visible {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* ==========================================================
   MESSAGE
========================================================== */

.success-message {
  width: min(90%, 850px);

  text-align: center;

  color: #ffffff;

  transform: translateY(20px);

  opacity: 0;

  transition:
    transform 0.65s ease,
    opacity 0.65s ease;
}


.success-overlay.is-visible .success-message {
  transform: translateY(0);

  opacity: 1;
}


/* GRACIAS */

.success-message h2 {
  margin: 0 0 22px;

  font-family: var(--font-display);

  font-size: clamp(65px, 7vw, 120px);

  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.035em;

  color: #ffffff;
}


/* MENSAJE */

.success-message p {
  margin: 0;

  font-family: var(--font-primary);

  font-size: clamp(15px, 1.3vw, 21px);

  font-weight: 500;

  line-height: 1.6;

  letter-spacing: 0.11em;

  text-transform: uppercase;

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


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

  .success-message h2 {
    font-size: clamp(58px, 18vw, 85px);
  }

  .success-message p {
    font-size: 13px;

    letter-spacing: 0.08em;
  }

}