/* ==========================================================================
   WEBSITE LAUNCH PROMOTION MODAL  (NEW component)
   ==========================================================================
   Layered entirely on top of the site's existing shared modal system
   (.modal-backdrop / .modal, from css/overlays.css and js/modal-toast.js)
   — that system already provides the backdrop fade, the focus trap, and
   Escape/backdrop-click-to-close, so none of that is reimplemented here.
   This file only adds: this modal's own dark/glow/rounded-card look, and
   a staggered ~0.7s entrance for its children (logo → headline →
   subhead → code card → actions → trust line), which the shared system
   doesn't provide on its own.

   Every rule below is scoped to .launch-promo / .launch-promo__* so
   nothing here can affect the Researcher Verification modal or any other
   .modal-backdrop on the site.
   ========================================================================== */

.modal-backdrop.launch-promo-backdrop {
  /* Slightly darker + a touch of purple in the backdrop itself, for the
     "soft purple glow" feel — the shared .modal-backdrop's own opacity
     fade-in still does the timing work. */
  background: radial-gradient(circle at 50% 40%, rgba(91, 42, 134, 0.25), rgba(11, 13, 15, 0.78) 70%);
}

.modal.launch-promo {
  /* Matte-black card instead of the shared .modal's default white —
     matches the brand's existing near-black, not a new color. */
  background: var(--color-obsidian);
  border: 1px solid rgba(var(--color-royal-violet-rgb), 0.35);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-modal), 0 0 48px rgba(var(--color-royal-violet-rgb), 0.28);
  max-width: 420px;
  padding: var(--space-8) var(--space-7) var(--space-7);
  text-align: center;
  position: relative;
}

.launch-promo__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: var(--color-graphite-500);
}

.launch-promo__close svg {
  width: 18px;
  height: 18px;
}

.launch-promo__close:hover {
  color: var(--color-white);
}

.launch-promo__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-graphite-300);
  margin-bottom: var(--space-5);
}

.launch-promo__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.launch-promo__subhead {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-graphite-300);
  margin-bottom: var(--space-6);
}

.launch-promo__code-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.launch-promo__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--color-royal-violet);
  margin-bottom: 4px;
}

.launch-promo__validity {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-graphite-500);
}

.launch-promo__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.launch-promo__shop-btn {
  background: transparent;
  color: var(--color-graphite-300);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.launch-promo__shop-btn:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--color-white);
}

.launch-promo__trust-line {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-graphite-500);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   ENTRANCE ANIMATION — staggered, ~0.7s total, no excessive movement.
   Backdrop fade + modal fade-upward already come from the shared
   .modal-backdrop/.modal transition; these keyframes stagger each
   child's own fade-in on top of that, timed off the same .is-open class.
   --------------------------------------------------------------------- */

@keyframes launchPromoFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.launch-promo__wordmark,
.launch-promo__headline,
.launch-promo__subhead,
.launch-promo__code-card,
.launch-promo__actions,
.launch-promo__trust-line {
  opacity: 0;
}

.launch-promo-backdrop.is-open .launch-promo__wordmark {
  animation: launchPromoFadeUp 350ms var(--ease-out-expo) 120ms forwards;
}

.launch-promo-backdrop.is-open .launch-promo__headline {
  animation: launchPromoFadeUp 350ms var(--ease-out-expo) 240ms forwards;
}

.launch-promo-backdrop.is-open .launch-promo__subhead {
  animation: launchPromoFadeUp 350ms var(--ease-out-expo) 340ms forwards;
}

.launch-promo-backdrop.is-open .launch-promo__code-card {
  /* "Promo code section fades in last" — the longest delay of the set. */
  animation: launchPromoFadeUp 400ms var(--ease-out-expo) 460ms forwards;
}

.launch-promo-backdrop.is-open .launch-promo__actions {
  animation: launchPromoFadeUp 350ms var(--ease-out-expo) 560ms forwards;
}

.launch-promo-backdrop.is-open .launch-promo__trust-line {
  animation: launchPromoFadeUp 350ms var(--ease-out-expo) 620ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .launch-promo__wordmark,
  .launch-promo__headline,
  .launch-promo__subhead,
  .launch-promo__code-card,
  .launch-promo__actions,
  .launch-promo__trust-line {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 480px) {
  .modal.launch-promo {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }

  .launch-promo__headline {
    font-size: 20px;
    line-height: 26px;
  }

  .launch-promo__code {
    font-size: 20px;
  }
}