.cover { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; min-height: 100svh; padding: 30px 20px; background: radial-gradient(circle at 50% 46%, #f8fcff 0 25%, #ebf5fe 55%, #d8ebf9 100%); transition: opacity .75s cubic-bezier(0.2, 0.8, 0.25, 1), visibility .75s ease; }
.cover::before, .cover::after { content: ""; position: absolute; width: 35vw; height: 120%; top: -10%; opacity: .11; filter: blur(14px); background: repeating-radial-gradient(ellipse at center, #769fb9 0 4px, transparent 5px 22px); transform: rotate(-18deg); }
.cover::before { left: -14vw; }
.cover::after { right: -15vw; transform: rotate(18deg); }
.cover__mist { position: absolute; border-radius: 50%; background: #fff; filter: blur(45px); opacity: .4; }
.cover__mist--one { width: 44vw; height: 13vw; left: 12%; bottom: 4%; transform: rotate(12deg); }
.cover__mist--two { width: 36vw; height: 12vw; right: 5%; top: 7%; }
.cover__heading { position: relative; z-index: 2; text-align: center; margin: 0 0 clamp(4px, 1.2vh, 12px); color: #123e66; }
.cover__eyebrow { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(13px, 1.6vw, 21px); letter-spacing: .32em; color: #123e66; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; height: 20px; margin: 4px 0 12px; }
.ornament span { width: 88px; border-top: 1.2px solid #5688b6; }
.ornament b { flex: 0 0 18px; width: 18px; height: 18px; font-size: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='rgb(126,177,216)' stroke='rgb(78,141,187)' stroke-width='.75'%3E%3Ccircle cx='12' cy='6.8' r='4.2'/%3E%3Ccircle cx='16.95' cy='10.4' r='4.2'/%3E%3Ccircle cx='15.06' cy='16.2' r='4.2'/%3E%3Ccircle cx='8.94' cy='16.2' r='4.2'/%3E%3Ccircle cx='7.05' cy='10.4' r='4.2'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.2' fill='rgb(245,251,255)' stroke='rgb(78,141,187)' stroke-width='.7'/%3E%3C/svg%3E"); }
.cover__heading h1 { margin: 6px 0 6px; font: 400 clamp(44px, 6vw, 72px)/1.08 "Great Vibes", cursive; color: #154571; }
.cover__subheading { margin: 10px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(12.5px, 1.45vw, 18px); line-height: 1.2; letter-spacing: .32em; color: #123e66; transform: translateY(6px); }
.envelope { position: relative; z-index: 2; border: 0; padding: 0; width: min(50vw, 700px); aspect-ratio: 3/2; background: none; cursor: pointer; filter: drop-shadow(0 20px 20px rgba(43, 75, 111, .35)); transition: transform .25s ease; }
.envelope:hover { transform: translateY(-4px) scale(1.008); }
.envelope__art { position: absolute; inset: 0; display: block; pointer-events: none; }
.envelope__art img { position: absolute; display: block; object-fit: contain; pointer-events: none; user-select: none; }
.envelope__base { inset: 0; width: 100%; height: 100%; }
.envelope__flower { z-index: 1; top: 10.2%; left: 47.4%; width: 34%; height: 51%; transform-origin: 18% 86%; animation: flower-sway 3.6s ease-in-out infinite alternate; backface-visibility: hidden; will-change: transform; }
.envelope__seal { z-index: 2; top: 35.2%; left: 39.7%; width: 20.6%; height: 30.9%; }
.envelope__recipient, .envelope__guest { position: absolute; left: 50%; translate: -50% 0; z-index: 3; width: 70%; text-align: center; pointer-events: none; }
.envelope__recipient { bottom: 18.5%; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; color: #0d385f; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.envelope__guest { bottom: 7.8%; font: 400 clamp(28px, 2.8vw, 38px)/1 "Great Vibes", cursive; color: #164875; }
.envelope__guest em { font-style: normal; color: inherit; }
.open-button { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 176px; min-height: 46px; margin-top: 8px; padding: 9px 22px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; background: linear-gradient(110deg, #4b7fae, #709bc5); box-shadow: 0 8px 18px rgba(49, 93, 135, .27); cursor: pointer; font-size: 14px; transition: transform .2s ease, opacity .35s ease; }
.cover.is-opening { opacity: 0; pointer-events: none; transition: opacity .75s cubic-bezier(0.2, 0.8, 0.25, 1), visibility .75s ease; }
.cover.is-opening .envelope { transform: scale(1.02); opacity: 0.8; transition: transform .75s cubic-bezier(0.2, 0.8, 0.25, 1), opacity .75s ease; }
.cover.is-opening .cover__heading, .cover.is-opening .open-button { opacity: 0; transform: translateY(-12px); transition: opacity .5s ease, transform .5s ease; }
.cover.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes flower-sway {
  0% { transform: rotate(-2deg) translate3d(-1px, 1px, 0); }
  48% { transform: rotate(1.1deg) translate3d(1px, -1px, 0); }
  100% { transform: rotate(2.5deg) translate3d(2px, -2px, 0); }
}