:root {
  --deep-violet: #4c1d95;
  --violet: #6d28d9;
  --purple: #7c3aed;
  --lilac: #8b5cf6;
  --light-lilac: #a78bfa;
  --pale-lilac: #ddd6fe;
  --ink: #241046;

  --font-body: Jost, sans-serif;
  --font-display: 'Cormorant Garamond', serif;

  /* Envelope pose, written by JS. */
  --env-opacity: 1;
  --env-scale: 1;
  --env-y: 0px;
  --letter-y: -100%;
  --letter-scale-y: 0.7;
  --flap-rot: -178deg;
  --seal-scale: 2.3;
  --seal-rot: 0deg;
  --seal-opacity: 0;
  --env-pointer: none;
  --hint-opacity: 0;

  /* Card pose, written by JS. */
  --dim-opacity: 0;
  --msg-opacity: 0;
  --msg-y: 26px;
  --msg-pointer: none;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #f5f1ff;
  overflow: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--violet);
  text-decoration: none;
}

a:hover {
  color: var(--deep-violet);
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    125% 95% at 50% 38%,
    #faf8ff 0%,
    #ede9fe 42%,
    #c9bdf5 78%,
    #b6a6ee 100%
  );
  font-family: var(--font-body);
  color: var(--ink);
  overflow: hidden;
}

.globe {
  position: absolute;
  inset: 0;
}

.stage__bloom,
.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__bloom {
  background: radial-gradient(
    58% 44% at 50% 50%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(245, 241, 255, 0) 72%
  );
  animation: bg-pulse 8s ease-in-out infinite;
}

.stage__vignette {
  box-shadow: inset 0 0 180px 50px rgba(182, 166, 238, 0.45);
}

@keyframes bg-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── Globe overlay markers ─────────────────────────────────────────────── */

.bg-city-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep-violet);
  white-space: nowrap;
  transform: translate(-50%, -170%);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.95);
  pointer-events: none;
}

.bg-city-label span {
  display: block;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--purple);
  margin-top: 3px;
}

.bg-flyer {
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(76, 29, 149, 0.35));
}

.bg-flyer__body {
  position: relative;
  width: 34px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(160deg, var(--light-lilac) 0%, var(--lilac) 100%);
  box-shadow:
    0 4px 10px rgba(76, 29, 149, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.bg-flyer__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
}

.bg-flyer__flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 62%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #9c7cf7 0%, var(--purple) 100%);
}

.bg-flyer__seal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(
    60% 60% at 35% 30%,
    var(--light-lilac),
    var(--purple) 55%,
    var(--deep-violet)
  );
}

/* ── Envelope ──────────────────────────────────────────────────────────── */

.envelope-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  pointer-events: none;
  perspective: 1200px;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: var(--env-opacity);
}

.envelope {
  position: relative;
  width: min(74vw, 320px);
  aspect-ratio: 1.55 / 1;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.22, 1.1, 0.36, 1);
  transform: translateY(var(--env-y)) scale(var(--env-scale));
  cursor: pointer;
  pointer-events: var(--env-pointer);
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  display: block;
}

.envelope:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 6px;
  border-radius: 9px;
}

/* 84% of the envelope height, so translateY(-100%) hides the letter entirely. */
.envelope__letter {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 8%;
  height: 84%;
  border-radius: 4px;
  background: linear-gradient(170deg, #fdfcff 0%, #f3efff 100%);
  box-shadow: 0 14px 34px rgba(76, 29, 149, 0.22);
  transform-origin: 50% 100%;
  transition: transform 1150ms cubic-bezier(0.33, 1, 0.68, 1);
  transform: translateY(var(--letter-y)) scaleY(var(--letter-scale-y));
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  box-sizing: border-box;
}

.envelope__rule {
  height: 5px;
  border-radius: 4px;
  background: rgba(109, 40, 217, 0.16);
}

.envelope__rule--title {
  height: 7px;
  width: 34%;
  background: var(--light-lilac);
}

.envelope__rule--a {
  width: 82%;
}

.envelope__rule--b {
  width: 66%;
}

.envelope__rule--c {
  width: 74%;
  background: rgba(109, 40, 217, 0.11);
}

.envelope__body {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--light-lilac) 0%, var(--lilac) 100%);
  box-shadow:
    0 22px 48px rgba(76, 29, 149, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.envelope__creases {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  overflow: hidden;
}

.envelope__crease {
  position: absolute;
  top: 6%;
  width: 62%;
  height: 108%;
}

.envelope__crease--left {
  left: -6%;
  background: rgba(255, 255, 255, 0.13);
  transform: rotate(-32deg);
  transform-origin: top left;
}

.envelope__crease--right {
  right: -6%;
  background: rgba(109, 40, 217, 0.06);
  transform: rotate(32deg);
  transform-origin: top right;
}

.envelope__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 1050ms cubic-bezier(0.45, 0.05, 0.25, 1);
  transform: rotateX(var(--flap-rot));
}

.envelope__flap::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #9c7cf7 0%, var(--purple) 100%);
  border-radius: 7px 7px 0 0;
  box-shadow: 0 8px 20px rgba(76, 29, 149, 0.2);
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 17%;
  aspect-ratio: 1;
  margin-left: -8.5%;
  border-radius: 50%;
  background: radial-gradient(
    60% 60% at 35% 30%,
    var(--light-lilac) 0%,
    var(--purple) 55%,
    var(--deep-violet) 100%
  );
  box-shadow:
    0 6px 16px rgba(76, 29, 149, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: #f5f3ff;
  transition:
    transform 620ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 560ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(var(--seal-scale)) rotate(var(--seal-rot));
  opacity: var(--seal-opacity);
}

.envelope-hint {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--violet);
  transition: opacity 700ms ease;
  opacity: var(--hint-opacity);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.card-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(246, 243, 255, var(--dim-opacity));
  transition: background 1300ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: var(--msg-pointer);
}

.card {
  width: min(100%, 460px);
  margin: auto;
  flex: 0 0 auto;
  text-align: center;
  transition:
    opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1200ms cubic-bezier(0.33, 1, 0.68, 1);
  opacity: var(--msg-opacity);
  transform: translateY(var(--msg-y));
}

.card__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1.06;
  margin: 0 0 20px;
  color: var(--ink);
  text-wrap: pretty;
}

.card__title em {
  font-style: italic;
  color: var(--violet);
}

.card__divider {
  width: 44px;
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--lilac), transparent);
}

.card__message {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  margin: 0 auto 26px;
  max-width: 34em;
  color: rgba(74, 13, 40, 0.78);
  text-wrap: pretty;
}

.card__photo {
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 4 / 5;
  max-height: min(38vh, 300px);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 28px;
  border: 4px solid #ffffff;
  box-shadow: 0 18px 40px rgba(76, 29, 149, 0.22);
}

.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 26px 0 20px;
  border-radius: 999px;
  background: #1db954;
  color: #08160d;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  box-shadow:
    0 12px 28px rgba(29, 185, 84, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform 240ms cubic-bezier(0.33, 1, 0.68, 1),
    background 240ms ease;
}

.card__cta:hover {
  background: #1ed760;
  transform: translateY(-2px);
  color: #08160d;
}

.card__cta svg {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .stage__bloom {
    animation: none;
  }

  .envelope,
  .envelope__letter,
  .envelope__flap,
  .envelope__seal,
  .card,
  .card-layer,
  .card__cta {
    transition-duration: 1ms;
  }
}