.letter-entry {
  height: 420svh;
  min-height: 0;
  overflow: visible;
  background: #20372f;
}

.romantic-site {
  overflow-x: hidden;
}

.letter-entry::before {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.letter-recede {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  transform: none;
  opacity: 1;
}

.letter-stage {
  height: 100%;
  overflow: hidden;
}

.envelope {
  z-index: 5;
  opacity: var(--envelope-opacity, 1);
  transform: translateY(var(--envelope-y, 0)) scale(var(--envelope-scale, 1));
  will-change: transform, opacity;
}

.letter-entry.envelope-open .envelope {
  z-index: 2;
}

.envelope-flap {
  transform: rotateX(var(--flap-angle, 0deg));
  will-change: transform;
}

.envelope-seal {
  opacity: var(--seal-opacity, 1);
  transform: scale(calc(.82 + var(--seal-opacity, 1) * .18));
}

.invitation {
  z-index: 3;
  opacity: var(--paper-opacity, 0);
  transform: translateY(var(--paper-y, 4vh)) rotate(var(--paper-rotate, -1.8deg)) scale(var(--paper-scale, .30));
  transform-origin: 50% 70%;
  clip-path: inset(0 0 var(--paper-clip, 65%) 0);
  box-shadow: 0 28px 70px rgba(8, 28, 23, .34), 0 3px 12px rgba(8, 28, 23, .16);
  will-change: transform, opacity;
}

.paper-crease {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.paper-crease::before {
  content: '';
  position: absolute;
  inset: -25%;
  opacity: var(--paper-sheen, 0);
  background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .62) 48%, rgba(184, 147, 90, .10) 50%, transparent 62%);
  transform: translateX(calc((var(--paper-sheen, 0) - .5) * 22%));
}

.envelope-pocket-front {
  position: absolute;
  z-index: 4;
  width: 420px;
  height: 265px;
  border-radius: 4px;
  background:
    linear-gradient(150deg, rgba(252, 246, 233, .98), rgba(226, 212, 187, .99)),
    #eee2cd;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  opacity: var(--pocket-front-opacity, 0);
  transform: translateY(var(--envelope-y, 0)) scale(var(--envelope-scale, 1));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .14);
  pointer-events: none;
  will-change: transform, opacity;
}

.envelope-pocket-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(33deg, transparent 49.5%, rgba(184, 147, 90, .17) 50%, transparent 50.5%);
  opacity: .7;
}

.letter-line {
  transform: translateY(12px);
}

.letter-kicker { opacity: var(--line-1, 0); transform: translateY(calc((1 - var(--line-1, 0)) * 12px)); }
.letter-ornament { opacity: var(--line-2, 0); transform: translateY(calc((1 - var(--line-2, 0)) * 12px)); }
.invitation h1 { opacity: var(--line-3, 0); transform: translateY(calc((1 - var(--line-3, 0)) * 12px)); }
.invitation h2 { opacity: var(--line-4, 0); transform: translateY(calc((1 - var(--line-4, 0)) * 12px)); }
.letter-description { opacity: var(--line-5, 0); transform: translateY(calc((1 - var(--line-5, 0)) * 12px)); }
.letter-condition,
.letter-scroll { opacity: var(--line-6, 0); transform: translateY(calc((1 - var(--line-6, 0)) * 12px)); }

.stamp-cta {
  opacity: var(--stamp-opacity, 0);
  transform: rotate(-4deg) scale(var(--stamp-scale, .55));
}

.flying-rings,
.dove-flight {
  display: none !important;
}

.dove-carrier {
  position: absolute;
  top: 50%;
  width: min(34vw, 470px);
  aspect-ratio: 3 / 2;
  z-index: 8;
  background-image: url('/assets/doves-rings-v2.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  opacity: var(--dove-opacity, 0);
  filter: drop-shadow(0 14px 22px rgba(8, 29, 24, .28));
  pointer-events: none;
  will-change: transform, opacity;
}

.dove-carrier-left {
  left: calc(50% - min(31vw, 420px));
  background-position: left center;
  transform: translate3d(var(--dove-left-x, -62vw), var(--dove-y, 32vh), 0) rotate(var(--dove-rotate, 8deg));
}

.dove-carrier-right {
  right: calc(50% - min(31vw, 420px));
  background-position: right center;
  transform: translate3d(var(--dove-right-x, 62vw), var(--dove-y, 32vh), 0) rotate(calc(0deg - var(--dove-rotate, 8deg)));
}

.scroll-cue {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #f6f1e6;
  opacity: var(--cue-opacity, 1);
  transform: translateX(-50%);
  font: 13px/1.7 'Noto Naskh Arabic', serif;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  pointer-events: none;
}

.scroll-cue i {
  font: normal 24px/1 Arial, sans-serif;
}

@media (max-width: 760px) {
  .letter-entry { height: 440svh; }
  .letter-recede { min-height: 620px; }
  .dove-carrier { width: 245px; top: 48%; }
  .envelope { width: min(300px, calc(100vw - 28px)); }
  .envelope-pocket-front { width: min(300px, calc(100vw - 28px)); height: 190px; }
  .dove-carrier-left { left: calc(50% - 218px); }
  .dove-carrier-right { right: calc(50% - 218px); }
  .scroll-cue { bottom: 18px; width: 100%; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-entry { height: 100svh; min-height: 690px; }
  .letter-recede { position: relative; min-height: 690px; }
  .envelope,
  .envelope-pocket-front,
  .dove-carrier,
  .scroll-cue { display: none !important; }
  .invitation {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .letter-line,
  .stamp-cta,
  .letter-kicker,
  .letter-ornament,
  .invitation h1,
  .invitation h2,
  .letter-description,
  .letter-condition,
  .letter-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}