/* A classic cotton envelope: a lined interior, a front pocket, a folding flap and a wax seal. */
#envelope-intro {
  --envelope-width: min(86vw, 420px, 60svh);
  --stationery-grain: url("../../assets/images/paper-texture.jpg");
  --flap-ease: cubic-bezier(.5,.02,.24,1);
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  color: #6d6452;
  outline: none;
}

#envelope-intro[hidden] { display: none; }
/* Set in <head> so the envelope covers the page before envelope.js has loaded. */
.envelope-pending #envelope-intro[hidden] { display: block; }

#envelope-intro::before,
#envelope-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#envelope-intro::before { z-index: -2; background: var(--paper); }
/* A soft falloff toward the edges lights the envelope like a card resting on a table. */
#envelope-intro::after { z-index: -1; background: radial-gradient(120% 90% at 50% 52%, #5b4a3200 55%, #5b4a3216), linear-gradient(var(--paper-veil), var(--paper-veil)), var(--paper-texture) center / cover; }

.envelope-greeting {
  position: absolute;
  top: clamp(40px, 13svh, 116px);
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.65,.2,1);
}
.envelope-eyebrow {
  color: #8d836f;
  font: 600 10px/1.6 "Cormorant Garamond", serif;
  letter-spacing: .34em;
}
.envelope-greeting p {
  margin: 18px 0 0;
  color: #5f5747;
  font: 400 clamp(18px, 4.8vw, 22px)/1.85 "Gowun Batang", serif;
  letter-spacing: -.03em;
}

/* Wraps the whole scene so the closing dissolve can ease it forward as one piece, about the envelope's centre. */
.envelope-camera { position: absolute; inset: 0; transform-origin: 50% 45%; transition: scale 1.2s cubic-bezier(.4,0,.2,1); }

.envelope-stage {
  position: absolute;
  top: 53%;
  left: 50%;
  width: var(--envelope-width);
  aspect-ratio: 1.45;
  transform: translate(-50%, -50%);
}

/* The envelope rests slightly askew, as if just set down, and squares up when picked up. */
.envelope, .envelope-shadow { rotate: -1.5deg; }

/* A broad ambient shadow plus a tight contact shadow along the bottom edge seat the envelope on the surface. */
.envelope-shadow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease, rotate .7s cubic-bezier(.3,.1,.2,1), scale .6s cubic-bezier(.3,.1,.2,1), translate .8s cubic-bezier(.45,0,.25,1);
}
.envelope-shadow::before,
.envelope-shadow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #5a4630;
}
.envelope-shadow::before { inset: 16% 3% -5%; filter: blur(20px); opacity: .3; }
.envelope-shadow::after { left: 3%; right: 3%; bottom: 1.5%; height: 7%; filter: blur(5px); opacity: .42; }

.envelope {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform 1.3s cubic-bezier(.22,.68,.2,1), rotate .7s cubic-bezier(.3,.1,.2,1), scale .6s cubic-bezier(.3,.1,.2,1);
}

.is-ready .envelope-greeting,
.is-ready .envelope { opacity: 1; transform: none; }
.is-ready .envelope-shadow { opacity: 1; }

/* 0. Picked up: it squares up and rises a touch, its shadow spreading and softening beneath it. */
.is-opening :is(.envelope, .envelope-shadow) { rotate: 0deg; }
.is-opening .envelope { scale: 1.025; }
.is-opening .envelope-shadow { scale: 1.05; opacity: .8; }

/* Every layer is cut from one 1510×1041 artboard, so each one fills the envelope box and they stack exactly. */
.envelope-inside, .envelope-pocket, .flap-top, .flap-face { position: absolute; inset: 0; pointer-events: none; }
.envelope-inside img, .envelope-pocket img, .flap-face > img { display: block; width: 100%; height: 100%; }

.envelope-card {
  position: absolute;
  z-index: 1;
  top: 5%;
  left: 6%;
  width: 88%;
  height: 90%;
  border-radius: 1px;
  box-shadow: 0 1px 0 #c6bca6, 0 2px 0 #eee8da, 0 3px 1px #bdb39e, 0 6px 12px #5b493b21;
  /* The lift overshoots a few pixels and settles, like paper drawn out by hand. */
  transition: translate 1.3s cubic-bezier(.34,0,.16,1.1), scale 1.1s cubic-bezier(.3,.05,.2,1), box-shadow 1.3s ease;
}

/* The pocket's notch casts a soft shadow onto the card as it slides out. */
.envelope-pocket {
  z-index: 3;
  filter: drop-shadow(0 -1px 1px #7a643f2e) drop-shadow(0 -4px 8px #6a573a1f);
}
.envelope-inscription {
  position: absolute;
  bottom: 9%;
  left: 0;
  width: 100%;
  text-align: center;
  /* Multiplied into the paper so it reads as ink printed on the stock, not type laid over a photo. */
  color: #8a7a5e;
  font: italic 400 clamp(12px, 3.4vw, 16px)/1 "Cormorant Garamond", serif;
  letter-spacing: .02em;
  mix-blend-mode: multiply;
  opacity: .85;
}

/* The flap hinges on the artboard's fold line (y 38 of 1041); its two faces turn over in 3D. */
.flap-top {
  z-index: 5;
  transform-origin: 50% 3.65%;
  transform-style: preserve-3d;
}
/* Isolated so everything on a face, the seal included, turns and hides with it. */
.flap-face { isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flap-front img { filter: drop-shadow(0 1px 1px #6f5a3833) drop-shadow(0 5px 9px #5f4c2f24); }
/* Pre-flipped about the flap's mid-height (y 394.5 of 1041) so it lands upright above the fold. */
.flap-back { transform: rotateX(180deg); transform-origin: 50% 37.9%; }
/* A shade masked to each face darkens the paper as it turns edge-on to the light. */
.flap-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #3f301b;
  opacity: 0;
}
.flap-front::after {
  -webkit-mask: url("../../assets/images/envelope/flap-outer.webp") center / 100% 100%;
  mask: url("../../assets/images/envelope/flap-outer.webp") center / 100% 100%;
}
.flap-back::after {
  -webkit-mask: url("../../assets/images/envelope/flap-inner-tone.webp") center / 100% 100%;
  mask: url("../../assets/images/envelope/flap-inner-tone.webp") center / 100% 100%;
}

#envelope-open {
  position: absolute;
  z-index: 10;
  inset: -14px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
#envelope-open:disabled { pointer-events: none; }
#envelope-open:focus-visible { outline: 2px solid #91434a; outline-offset: 4px; }
.is-opening #envelope-open { visibility: hidden; }

.envelope-caption {
  position: absolute;
  top: calc(53% + var(--envelope-width) / 2.9 + 34px);
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.is-ready .envelope-caption { opacity: 1; }
.envelope-hint {
  margin: 0 0 14px;
  color: #8a806c;
  font: 400 12px/1.6 "Gowun Batang", serif;
  transition: opacity .4s ease;
}
@keyframes envelope-hint-breathe { from { opacity: 1; } to { opacity: .4; } }
.is-ready:not(.is-opening) .envelope-hint { animation: envelope-hint-breathe 1.6s 1.4s ease-in-out infinite alternate; }
.is-opening .envelope-hint { opacity: 0; }
.envelope-names {
  margin: 0;
  color: #5f5747;
  font: 400 15px/1.5 "Gowun Batang", serif;
  letter-spacing: .2em;
}
.envelope-names span { margin: 0 .5em 0 .3em; color: #a2957c; font: italic 1.1em "Cormorant Garamond", serif; letter-spacing: 0; }
.envelope-date {
  display: block;
  margin-top: 8px;
  color: #948973;
  font: 600 10px/1.6 "Cormorant Garamond", serif;
  font-variant-numeric: lining-nums;
  letter-spacing: .26em;
}

#envelope-skip {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: #79705f;
  font: 400 11px/1.5 "Gowun Batang", serif;
  cursor: pointer;
  transition: opacity .35s ease;
}
#envelope-skip span { display: inline-block; margin-left: 12px; transition: transform .2s ease; }
#envelope-skip:hover span { transform: translateX(4px); }
#envelope-skip:focus-visible { outline: 1px solid #8a7a5c; outline-offset: 0; border-radius: 2px; }

/* 1. The flap flips up, shading as it turns away and brightening as its liner faces up, then drops behind the card.
   Shades share the swing's easing with two keyframes each, so their opacity tracks the angle: .225 edge-on. */
@keyframes flap-top-open { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes flap-shade-out { from { opacity: 0; } to { opacity: .45; } }
@keyframes flap-shade-in { from { opacity: .45; } to { opacity: 0; } }
.is-open .flap-top { animation: flap-top-open 1.25s var(--flap-ease) forwards; }
.is-open .flap-front::after { animation: flap-shade-out 1.25s var(--flap-ease) forwards; }
.is-open .flap-back::after { animation: flap-shade-in 1.25s var(--flap-ease) forwards; }
.is-flap-behind .flap-top { z-index: 0; }

/* 2. The card slides up out of the pocket, tipping slightly as it comes free, while the flap is still settling. */
@keyframes card-tilt { 0%, 100% { rotate: 0deg; } 40% { rotate: -1.8deg; } }
.is-lifted .envelope-card {
  translate: 0 -74%;
  box-shadow: 0 1px 0 #c6bca6, 0 2px 0 #eee8da, 0 3px 1px #bdb39e, 0 18px 28px #5b493b2b;
  animation: card-tilt 1.3s ease-in-out;
}
.is-open .envelope-greeting { opacity: 0; transform: translateY(-12px); transition-duration: .6s; }
.is-lifted .envelope-caption,
.is-lifted #envelope-skip { opacity: 0; pointer-events: none; }

/* 3. Straight into the invitation: while the letter is still rising, the view eases forward a touch and the whole
   scene dissolves into the cover, which settles beneath it in the same direction. */
#envelope-intro.is-leaving { opacity: 0; pointer-events: none; transition: opacity .9s cubic-bezier(.4,0,.2,1); }
.is-leaving .envelope-camera { scale: 1.06; }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
/* The cover waits, still, beneath the intro. */
.envelope-pending .hero-image,
.envelope-active .hero-image,
.envelope-entered .hero-image { animation: none; }
/* Declared after the rule above so the settle keeps running once the intro is removed. */
.envelope-leaving .hero-image { animation: hero-settle 1.6s cubic-bezier(.2,.6,.2,1) both; }

.letter-paper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3% 7% 4.5%;
  background: linear-gradient(125deg, #fffef8bb, #eee8d96b), var(--stationery-grain) center / 340px auto, #f7f3e8;
  /* Small, irregular edges suggest cotton stock without a torn-paper silhouette. */
  clip-path: polygon(0 .4%, 14% 0, 33% .3%, 50% 0, 72% .25%, 89% 0, 99.8% .4%, 100% 23%, 99.7% 42%, 100% 69%, 99.8% 99.5%, 83% 100%, 60% 99.7%, 40% 100%, 19% 99.7%, .2% 100%, 0 77%, .2% 55%, 0 29%);
}

.letter-paper::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #b5a7864a;
  box-shadow: 0 1px 0 #ffffffce, inset 0 1px 0 #fffdf5;
  pointer-events: none;
}

.letter-kicker {
  margin-bottom: 3%;
  font: 600 clamp(7px, 1.9vw, 9px)/1 "Cormorant Garamond", serif;
  letter-spacing: .25em;
  color: #8c8069;
  text-shadow: 0 1px 0 #fffef5;
}

.letter-photo {
  /* Sized so the names and date always clear the card's inner frame. */
  width: 63%;
  flex-shrink: 0;
  min-height: 0;
  padding: 3px;
  border: 1px solid #c5bcac80;
  background: #eeebe2;
  box-shadow: 0 1px 0 #fffef9, inset 0 1px 3px #6a5a4629;
}

.letter-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.28;
  object-fit: cover;
  object-position: center 43%;
  filter: var(--photo-grade);
}

.letter-names {
  margin-top: 3%;
  color: #625c4c;
  font: 500 clamp(15px, 4.6vw, 21px)/1.05 "Cormorant Garamond", serif;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}
.letter-names i { padding: 0 .12em; font-weight: 400; color: #998c70; }
.letter-date { margin-top: 3%; font: 600 clamp(6px, 1.7vw, 8px)/1 "Cormorant Garamond", serif; font-variant-numeric: lining-nums; letter-spacing: .2em; color: #8b806d; }
.letter-date b { padding: 0 .35em; font-weight: 400; }

/* The seal is fixed to the flap's tip (artboard crop 589,495 316×301): it swings up with the flap and turns away with its front face. */
.envelope-seal {
  position: absolute;
  top: 47.55%;
  left: 39.01%;
  width: 20.93%;
  aspect-ratio: 316 / 301;
  filter: drop-shadow(1px 2px 2px #49202a40) drop-shadow(2px 6px 7px #49202a38);
}
.envelope-seal img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A light press answers the tap before the flap lifts. */
@keyframes seal-press { 0%, 100% { scale: 1; } 45% { scale: .94; } }
.is-unsealed .envelope-seal { animation: seal-press .32s ease-out; }

@media (max-height: 680px) {
  .envelope-greeting { top: 6%; }
  .envelope-greeting p { margin-top: 10px; font-size: 17px; }
  .envelope-stage { top: 55%; }
  .envelope-caption { top: calc(55% + var(--envelope-width) / 2.9 + 18px); }
  .envelope-date { display: none; }
}

@media (max-height: 480px) {
  #envelope-intro { --envelope-width: min(55vw, 52svh); }
  .envelope-greeting p { font-size: 14px; line-height: 1.6; }
  .envelope-caption .envelope-names { display: none; }
  .letter-names { font-size: 13px; }
  .letter-kicker, .letter-date { font-size: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  #envelope-intro { display: none; }
}