/* The sealed envelope the invitation arrives in: gold-edged ivory paper and a maroon wax seal on deep wine. One tap
   opens it and starts the music, which phones only allow after a tap. Shared by the scroll and swipe drafts; the
   page sets --env-grain to its paper grain. */
html.env-on, html.env-on body { overflow: hidden; height: 100%; }
.env {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(70% 46% at 50% 47%, rgba(255, 206, 140, .2), rgba(255, 206, 140, 0) 72%),
    radial-gradient(130% 92% at 50% 46%, #6e1b2d 0%, #4b0f1e 55%, #2a0711 100%);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  animation: env-failsafe 0s 9s forwards;
}
.env.ready { animation: none; }
@keyframes env-failsafe { to { opacity: 0; visibility: hidden; } }
/* a faint gold lattice woven into the backdrop, and the paper grain */
.env::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: var(--env-grain, none),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23e2bf7a' stroke-opacity='.16' stroke-width='.8'%3E%3Cpath d='M22 0L44 22L22 44L0 22Z'/%3E%3Ccircle cx='22' cy='22' r='5'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%23e2bf7a' fill-opacity='.2'/%3E%3Ccircle cx='44' cy='44' r='1.6' fill='%23e2bf7a' fill-opacity='.2'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(90% 70% at 50% 47%, transparent 22%, #000 78%); mask-image: radial-gradient(90% 70% at 50% 47%, transparent 22%, #000 78%);
}
.env:focus { outline: none; }
.env:focus-visible .env-box { outline: 2px solid #e2bf7a; outline-offset: 10px; }

.env-scene { position: relative; display: flex; flex-direction: column; align-items: center; width: min(86vw, 400px); }
.env-box { position: relative; width: 100%; aspect-ratio: 1.42; perspective: 1200px; }
@supports not (aspect-ratio: 1) { .env-box { height: calc(min(86vw, 400px) / 1.42); } }
.env-box > * { position: absolute; }
.env-back { z-index: 1; inset: 0; border-radius: 3px; background: #ecdcbf; box-shadow: 0 26px 50px rgba(18, 2, 6, .55), 0 6px 14px rgba(18, 2, 6, .35); }
.env-card {
  z-index: 3; left: 5%; right: 5%; top: 5%; height: 90%; border-radius: 2px; background: #fdf9f1;
  box-shadow: 0 1px 4px rgba(72, 42, 18, .16); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 6%; text-align: center; transform-origin: 50% 50%;
}
.env-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(176, 134, 66, .6); border-radius: 1px; }
.env-card::after { content: ''; position: absolute; inset: 8px; border: .5px solid rgba(176, 134, 66, .35); }
.env-card .c-orn { width: 54px; height: 10px; margin-bottom: 4px; fill: #b08a45; }
.env-card .c-names { font: 400 clamp(22px, 6.6vw, 29px)/1.15 'Pinyon Script', 'Great Vibes', cursive; color: #6c1a2b; }
.env-card .c-names i { padding: 0 .16em; font: italic 500 .62em/1 'Cormorant Garamond', Georgia, serif; color: #8a6630; }
.env-card .c-date { margin-top: 6px; font: 600 11.5px/1.3 'Cormorant Garamond', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #6b4a1e; }
.env-pocket { z-index: 4; inset: 0; width: 100%; height: 100%; }
.env-flap { z-index: 5; left: 0; top: 0; width: 100%; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; }
.env-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.env-flap .lining { transform: rotateY(180deg); }
.env-seal { z-index: 6; left: 50%; top: 58%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.env-seal svg { width: 100%; height: 100%; overflow: visible; animation: env-breathe 2.6s ease-in-out 1.6s infinite; }
@keyframes env-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* arrival: the script adds .in a frame after load */
.env-box { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); }
.env.in .env-box { opacity: 1; transform: none; transition: opacity 1s ease .2s, transform 1.1s cubic-bezier(.2, .7, .25, 1) .2s; }

/* opening: the seal lifts, the flap opens, the card rises, the envelope falls away, the card becomes the page */
.env.open { cursor: default; }
.env.open .env-seal { transition: transform .35s cubic-bezier(.4, 0, .6, 1), opacity .35s ease .1s; transform: translate(-50%, -50%) scale(.82); opacity: 0; }
.env.open .env-seal svg { animation: none; }
.env.open .env-flap { transition: transform .8s cubic-bezier(.45, 0, .25, 1) .15s; transform: rotateX(180deg); }
.env.flap-back .env-flap { z-index: 2; }
.env.open .env-card { transition: transform .85s cubic-bezier(.2, .7, .25, 1) .85s; transform: translate3d(0, -60%, 0); }
.env.leave .env-back, .env.leave .env-pocket, .env.leave .env-flap {
  transition: transform .65s cubic-bezier(.5, 0, .75, .4), opacity .5s ease .1s; opacity: 0;
}
.env.leave .env-back, .env.leave .env-pocket { transform: translate3d(0, 34%, 0); }
.env.leave .env-flap { transform: translate3d(0, 58.6%, 0) rotateX(180deg); }
.env.leave .env-card { z-index: 7; }
.env.leave .env-card > *, .env.leave .env-card::before, .env.leave .env-card::after { transition: opacity .3s ease; opacity: 0; }
.env.leave::before { transition: opacity .6s ease; opacity: 0; }
.env.grow .env-card { transition: transform .85s cubic-bezier(.6, 0, .3, 1); transform: var(--grow); }
.env.gone { transition: opacity .55s ease; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .env-box, .env.in .env-box { opacity: 1; transform: none; transition: none; }
  .env-seal svg { animation: none; }
  .env.open .env-flap, .env.open .env-card, .env.open .env-seal { transition: none; }
  .env.open { transition: opacity .4s ease; opacity: 0; }
}