@font-face {
  font-family: 'Bouquet';
  src: url('/assets/fonts/Bouquet.otf') format('opentype');
  font-display: swap;
}

:root {
  --bg: #d5d1c8;
  --bg-deep: #c9c4ba;
  --paper: #f8f6f2;
  --ink: #3b2f2a;
  --ink-soft: #6d5f57;
  --wine: #8e1b2c;
  --gold: #a9833a;
  --gold-light: #e2c37a;
  --script: 'Great Vibes', 'Noto Serif Khmer', cursive;
  /* couple's names: Snell Roundhand is built into iPhone/iPad/Mac; Pinyon Script is the free lookalike elsewhere */
  --couple: 'Snell Roundhand', 'Pinyon Script', cursive;
  --serif: 'Cormorant Garamond', 'Noto Serif Khmer', Georgia, serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 40%, var(--bg) 55%, var(--bg-deep) 100%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.is-poster { overflow-y: auto; }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- envelope scene ---------- */
.scene {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out), filter .9s ease;
}
.stage {
  position: relative;
  width: min(100vw, 100svh * 0.7503, 620px);
  aspect-ratio: 736 / 981;
  container-type: inline-size;
  perspective: 1600px;
  cursor: pointer;
  animation: float 6s ease-in-out infinite;
  transition: opacity .6s ease;
}
.is-loading .stage { opacity: 0; }
.is-opening .stage { animation-play-state: paused; cursor: default; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2%); }
}

.env {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  user-select: none; pointer-events: none;
  /* feather the photo edges into the page background */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
/* the open photo sits 84px lower in its frame than the closed one — line them up */
.env-open, .env-pocket { transform: translateY(-8.563%); opacity: 0; transition: opacity .7s ease .3s; }
.env-pocket { clip-path: polygon(10.6% 40.1%, 39.4% 58.9%, 61.8% 58.9%, 89.4% 40.1%, 89.4% 88%, 10.6% 88%); }
.env-closed { transition: opacity .6s ease .45s; }
.env-flap {
  clip-path: polygon(10.6% 28.2%, 89.4% 28.2%, 89.4% 30.8%, 50.4% 57.4%, 10.6% 30.8%);
  transform-origin: 50% 28.4%;
  backface-visibility: hidden;
  transition: transform 1s var(--ease-io), filter 1s ease;
}
.is-opening .env-open, .is-opening .env-pocket { opacity: 1; }
.is-opening .env-closed { opacity: 0; }
.is-opening .env-flap { transform: rotateX(178deg); filter: brightness(.85); }

/* headline above the envelope */
.headline {
  position: absolute; left: 6%; right: 6%; top: 6.5%;
  text-align: center; pointer-events: none;
  transition: opacity .6s ease, transform .8s var(--ease-out);
}
.headline-small {
  margin: 0;
  font-size: 3.6cqw; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
  opacity: 0; animation: rise .9s var(--ease-out) .3s forwards;
}
.headline-couple {
  margin: .5cqw 0 0;
  font-family: var(--couple); font-weight: 400;
  font-size: 11.5cqw; line-height: 1.15; color: var(--wine);
  opacity: 0; animation: rise 1s var(--ease-out) .6s forwards;
}

/* guest name "handwritten" on the envelope */
.address {
  position: absolute; left: 17%; width: 66%; top: 61.5%;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  transition: opacity .5s ease;
}
.address-to {
  font-size: 3.3cqw; font-style: italic; color: var(--ink-soft);
  opacity: 0; animation: fade .8s ease 1.2s forwards;
}
.address-name {
  font-family: 'Bouquet', 'Noto Serif Khmer', cursive;
  font-size: 9cqw; line-height: 1.3; color: #4a3328;
  white-space: nowrap;
  padding: 0 2cqw;
  clip-path: inset(-60% 100% -60% -15%);
  animation: write 2.2s cubic-bezier(.5, .1, .4, 1) 1.5s forwards;
}
@keyframes write { to { clip-path: inset(-60% -15% -60% -15%); } }

/* wax seal */
.seal {
  position: absolute; left: 50.3%; top: 53.2%;
  width: 19%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 .6cqw .7cqw rgba(60, 35, 10, .45));
}
.seal:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; border-radius: 50%; }
.seal-flap {
  position: absolute; inset: 0;
  pointer-events: none;
  transform-origin: 50% 28.4%;
  backface-visibility: hidden;
  transition: transform 1s var(--ease-io);
}
.seal-flap .seal { pointer-events: auto; }
.seal-img {
  position: absolute; inset: 0;
  background: url('/assets/red-wax-seal.png') center / 100% 100% no-repeat;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), filter .35s ease;
}
.seal-glow {
  position: absolute; inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 205, 120, .55) 0, rgba(242, 205, 120, 0) 62%);
  animation: glow 2.4s ease-in-out 1.8s infinite;
  opacity: 0;
}
.seal:hover .seal-img { filter: brightness(1.08); }
@keyframes glow { 0%, 100% { opacity: .15; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }

.is-cracked .seal { transform: translate(-50%, -50%) scale(1); }
/* tap: the seal presses in, wobbles, catches a shine and sends out a gold ripple… */
.seal::after {
  content: ''; position: absolute; inset: 4%;
  border-radius: 50%;
  border: .5cqw solid var(--gold-light);
  opacity: 0; pointer-events: none;
}
.seal-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 215, .9) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: url('/assets/red-wax-seal.png') center / 100% 100% no-repeat;
  mask: url('/assets/red-wax-seal.png') center / 100% 100% no-repeat;
  opacity: 0;
}
.is-cracked .seal { transition: opacity .55s ease, transform .6s cubic-bezier(.5, 0, .75, 0); }
.is-cracked .seal-img { animation: seal-tap .8s cubic-bezier(.3, .7, .4, 1) both; }
.is-cracked .seal-img::after { animation: seal-shine .8s ease-out .1s both; }
.is-cracked .seal::after { animation: seal-ripple .9s ease-out both; }
.is-cracked .seal-glow { animation: none; opacity: 1; transform: scale(1.2); transition: opacity .4s ease, transform .4s ease; }
/* …then fades away once the envelope starts to open */
.is-opening .seal { opacity: 0; transform: translate(-50%, -50%) scale(.6); pointer-events: none; }
.is-opening .seal-glow { opacity: 0; }

@keyframes seal-tap {
  0%   { transform: scale(1) rotate(0); }
  18%  { transform: scale(.86) rotate(0); filter: brightness(.95); }
  42%  { transform: scale(1.12) rotate(-7deg); filter: brightness(1.18); }
  62%  { transform: scale(.98) rotate(5deg); }
  80%  { transform: scale(1.03) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1.05); }
}
@keyframes seal-shine {
  0%   { opacity: 1; background-position: 160% 0; }
  100% { opacity: 1; background-position: -60% 0; }
}
@keyframes seal-ripple {
  0%   { opacity: .9; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.9); }
}

.hint {
  position: absolute; left: 0; right: 0; top: 80%;
  margin: 0; text-align: center;
  font-size: 3.5cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; animation: fade 1s ease 3.6s forwards, breathe 2.4s ease-in-out 4.6s infinite;
  transition: opacity .4s;
}
.hint::before { content: '✦ '; color: var(--gold); }
.hint::after  { content: ' ✦'; color: var(--gold); }

.is-opening .headline { opacity: 0; transform: translateY(-20%); }
.is-cracked .address, .is-cracked .hint { opacity: 0 !important; animation: none; }

/* invitation card that slides out */
.card {
  position: absolute; left: 22%; width: 56.4%; top: 21.2%; height: 31%;
  background:
    radial-gradient(120% 60% at 50% 0%, #fff 0, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #faf8f5, #f3efe9);
  border-radius: .4cqw;
  box-shadow: 0 .3cqw 1cqw rgba(70, 50, 30, .12);
  opacity: 0;
  overflow: hidden;
  transition: opacity .5s ease, top 1.3s var(--ease-io), height 1.3s var(--ease-io), box-shadow 1.3s ease;
}
.card::before {
  content: ''; position: absolute; inset: 2.2cqw;
  border: 1px solid rgba(169, 131, 58, .45);
  border-radius: .3cqw; pointer-events: none;
}
.card-inner { padding: 5.5cqw 4cqw 0; text-align: center; }
.card-inner > * { opacity: 0; transform: translateY(1.5cqw); transition: opacity .7s ease, transform .9s var(--ease-out); }
.card-script { margin: 0; font-family: var(--script); font-size: 9.2cqw; line-height: 1.1; color: var(--wine); }
.card-small  { margin: 1.2cqw 0 0; font-size: 3cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.card-couple { margin: 2cqw 0 0; font-family: var(--couple); font-size: 5.8cqw; white-space: nowrap; line-height: 1.15; color: var(--ink); }
.card-rule   { display: block; width: 18cqw; height: 1px; margin: 3cqw auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.card-date   { margin: 0; font-size: 3.8cqw; letter-spacing: .3em; color: var(--gold); font-weight: 600; }

.is-card-in .card { opacity: 1; }
.is-card-in .card-inner > * { opacity: 1; transform: none; }
.card-inner > :nth-child(2) { transition-delay: .15s; }
.card-inner > :nth-child(3) { transition-delay: .3s; }
.card-inner > :nth-child(4) { transition-delay: .45s; }
.card-inner > :nth-child(5) { transition-delay: .6s; }
.is-card-up .card { top: -6%; height: 58%; box-shadow: 0 2cqw 5cqw rgba(70, 50, 30, .22); }

.is-poster .scene { opacity: 0; transform: translateY(8%) scale(.94); filter: blur(2px); pointer-events: none; }

/* ---------- poster ---------- */
.poster-view {
  position: relative; z-index: 10;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(3svh, env(safe-area-inset-top, 0px)) 16px max(5svh, env(safe-area-inset-bottom, 0px));
  visibility: hidden;
}
.is-poster .poster-view { visibility: visible; }
.poster-frame {
  height: min(90svh, (100vw - 32px) * 1.408);
  aspect-ratio: 297.75 / 419.25;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #f4efe9;
  box-shadow: 0 30px 60px -20px rgba(60, 35, 20, .45), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  transform-origin: 0 0;
  opacity: 0;
}
.poster-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-frame.is-flying { transition: transform 1.1s var(--ease-io), opacity .35s ease; }

@keyframes rise { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .3s !important; }
}