/* A layered paper envelope: seal → flap → letter → page. */
html { scrollbar-gutter: stable; }
.invitation-section .narrow > p.invitation-copy {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.65;
  letter-spacing: 0;
}
/* The heading receives focus after opening, but is not an interactive control. */
#couple-names:focus { outline: none; }
.music-toggle { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.welcome-dialog.envelope-intro {
  --opening-duration: 5500;
  --letter-delay: 2500;
  --letter-duration: 1900;
  --handoff-duration: 1050;
  width: 100%; max-width: none; height: 100%; height: 100dvh;
  max-height: none; inset: 0; margin: 0; padding: 20px;
  border: 0; box-shadow: none; overflow-y: auto; overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fffdf6, #eee8da 90%);
  perspective: 1600px; transition: none;
}
.welcome-dialog.envelope-intro::backdrop { background: #f3eee2; backdrop-filter: none; }
.envelope-layout {
  min-height: 100%; display: flex; flex-direction: column;
  width: 100%; overflow: clip;
  align-items: center; justify-content: center; gap: 24px;
}
.envelope-heading { text-align: center; position: relative; z-index: 8; }
.envelope-heading .eyebrow { font-size: 8px; color: #8c7b57; }
.envelope-heading h2 { font-size: 34px; letter-spacing: -.5px; margin-top: 7px; }
.envelope-trigger {
  position: relative; display: block; flex: 0 0 auto;
  width: min(410px, 88vw, 48svh); aspect-ratio: 3 / 4.6;
  padding: 0; margin: 0; border: none; border-radius: 3px;
  background: transparent; color: var(--ink); perspective: 1400px;
  isolation: isolate; -webkit-appearance: none; appearance: none;
}
.envelope-trigger:disabled { opacity: 1; cursor: default; }
.envelope-trigger:focus-visible { outline-offset: 12px; outline: 1px solid #ac8d50; }
.envelope-shadow {
  position: absolute; inset: 7% 3% -1%; border-radius: 6%;
  box-shadow: 0 20px 44px #64533426, 0 5px 12px #6453341c;
  transition: box-shadow .4s;
}
.envelope-trigger:hover .envelope-shadow { box-shadow: 0 25px 55px #64533435, 0 5px 15px #64533424; }
.envelope-back { position: absolute; inset: 0; border-radius: 3px; background: #dcd0b9; box-shadow: inset 0 0 0 1px #bbab8f40; }
.envelope-pocket { position: absolute; inset: 0; z-index: 3; }
.envelope-side, .envelope-bottom, .envelope-flap-paper {
  position: absolute; inset: 0; background-color: #f5eee1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.envelope-side { z-index: 3; }
.envelope-left { clip-path: polygon(0 0, 55% 55%, 0 100%); background-color: #f0e7d7; }
.envelope-right { clip-path: polygon(100% 0, 45% 55%, 100% 100%); background-color: #eae0cf; }
.envelope-bottom { z-index: 4; clip-path: polygon(0 100%, 50% 51%, 100% 100%); background-color: #f8f0e1; }
.envelope-bottom::after { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, #ac926120, transparent 55%, #fffdf650); }
.envelope-flap { position: absolute; inset: 0; z-index: 6; transform-origin: center top; backface-visibility: visible; filter: drop-shadow(0 3px 2px #79644140); }
.envelope-flap-paper { clip-path: polygon(0 0, 100% 0, 50% 56%); background-color: #faf3e7; }
.envelope-flap-paper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, #fffdf88c, transparent 50%, #bca27630); }
.envelope-flowers-top { position: absolute; width: 71%; height: auto; top: 7%; left: 14.5%; opacity: .93; }
.envelope-flowers-bottom { position: absolute; z-index: 5; width: 62%; height: auto; bottom: 4%; left: 19%; transform: rotate(180deg); opacity: .9; }
.envelope-sprig { position: absolute; z-index: 5; top: 35%; width: 23%; height: 46%; color: #fef9ed; filter: drop-shadow(1px 1px 1px #a9987e90); }
.envelope-sprig-left { left: 3%; transform: rotate(-13deg); }
.envelope-sprig-right { right: 3%; transform: scaleX(-1) rotate(-13deg); }
.envelope-seal {
  position: absolute; z-index: 7; left: 50%; top: 55%;
  width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 44% 51% 43% 49% / 48% 43% 52% 45%;
  background: linear-gradient(140deg, #fffdf5 8%, #e3d6bd 38%, #f9efd9 64%, #c5b28c);
  box-shadow: 2px 5px 7px #88724b44, inset 2px 3px 4px #fffef5, inset -2px -3px 5px #bdaa85;
}
.envelope-seal::before { content: ''; position: absolute; inset: 10%; border: 1px solid #b7a17a; border-radius: 50%; box-shadow: 0 1px 2px white, inset 0 2px 3px #98805224; }
.envelope-seal::after {
  content: ''; position: absolute; inset: -3%; border: 1px solid #f5d487;
  border-radius: inherit; opacity: 0;
  box-shadow: 0 0 5px #ffe8b0, 0 0 14px #e9bb5780, inset 0 0 6px #ffdf9560;
}
.seal-initials { position: relative; font: italic 35px var(--serif); letter-spacing: -3px; color: #a5813c; text-shadow: 0 1px #fff9df, 0 -1px #8c6b37; }
.seal-initials em { font-size: 20px; margin: 0 3px; }
.envelope-inscription { position: absolute; z-index: 5; top: 70%; width: 100%; left: 0; color: #9b875e; font-size: 7px; letter-spacing: 2px; }
.envelope-letter {
  position: absolute; inset: 4% 7% 5%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 14% 7% 5%; text-align: center; background: #fbf6eb;
  box-shadow: 0 0 10px #705c3926;
  background-image: linear-gradient(#fcf8efed 0%, #fcf8efdd 48%, transparent 82%), url('images/garden.jpg');
  background-size: cover; background-position: center bottom;
}
.letter-border { position: absolute; inset: 9px; border: 1px solid #c1ad7c88; pointer-events: none; }
.envelope-letter.has-preview { bottom: auto; padding: 0; }
.envelope-letter.has-preview > span { visibility: hidden; }
.envelope-preview.hero-frame { position: absolute; top: 0; left: 0; margin: 0; max-width: none; transform-origin: top left; overflow: hidden; }
.letter-bismillah { font: 23px/1.6 Amiri,serif; color: #8a7548; }
.letter-eyebrow { font: 6px var(--sans); letter-spacing: 1.6px; margin-top: 18px; }
.letter-names { font: 50px/.95 var(--serif); margin-top: 20px; }
.letter-names>span { display: block; font-size: 26px; font-style: italic; color: var(--gold); margin: 7px 0; }
.letter-date { font: 19px var(--serif); letter-spacing: 2px; margin-top: 24px; }
.letter-invite { font: italic 15px var(--serif); margin-top: 12px; }
.envelope-glow {
  position: absolute; inset: -35% -50%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, #fffef1 0%, #ffedbba0 22%, #d6ac4d20 47%, transparent 68%);
  opacity: 0; transform: scale(.65); mix-blend-mode: screen;
}
.envelope-flower-light {
  opacity: 0; pointer-events: none;
  filter: sepia(.4) saturate(1.3) drop-shadow(0 0 3px #eac577a0);
}
.envelope-portal {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 12% 8% at 50% 55%, #fffdf1 0%, #fff5d180 12%, #eac78038 45%, transparent 72%);
}
.envelope-portal::before, .envelope-portal::after {
  content: ''; position: absolute; inset: -12%;
  background: linear-gradient(0deg, transparent 42%, #ffe3a570 58%, #fff2c535 90%);
  clip-path: polygon(50% 54%, 5% 0, 95% 0);
  filter: blur(5px);
}
.envelope-portal::after {
  transform: rotate(180deg); opacity: .55;
  clip-path: polygon(50% 46%, 12% 0, 88% 0);
}
.envelope-controls { text-align: center; position: relative; z-index: 8; }
.envelope-hint { font-size: 9px; letter-spacing: 1px; color: #8d7852; }
.envelope-hint>span { display: block; font-size: 25px; line-height: 1; margin-bottom: 6px; animation: envelopeHint 2.6s ease-in-out infinite; }
.envelope-controls .welcome-music { margin-top: 12px; font-size: 9px; color: #827b69; }
.replay-invitation { display: inline-block; margin-top: 22px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #737a64; font-size: 10px; letter-spacing: .4px; }
.replay-invitation:hover { color: var(--gold); border-color: var(--gold); }

.welcome-dialog.envelope-intro.is-opening { transform: none; opacity: 1; }
.welcome-dialog.envelope-intro.is-handoff { animation: invitationReveal .6s .45s ease-in-out forwards; }
.welcome-dialog.envelope-intro.is-handoff::backdrop { animation: invitationReveal .6s .45s ease-in-out forwards; }
.is-opening .envelope-heading, .is-opening .envelope-controls { animation: envelopeCaptionOut .5s ease forwards; pointer-events: none; }
.is-opening .envelope-trigger { pointer-events: none; animation: envelopeApproach 4.4s ease-in-out forwards; }
.is-opening .envelope-seal { animation: sealIlluminate 2.3s ease-in-out forwards; }
.is-opening .envelope-seal::after { animation: sealHalo 2.7s .1s ease-in-out forwards; }
.is-opening .envelope-flap { animation: flapUnfold 1.65s 1.75s cubic-bezier(.45,0,.2,1) forwards; }
.is-opening .envelope-letter { animation: letterReveal calc(var(--letter-duration) * 1ms) calc(var(--letter-delay) * 1ms) cubic-bezier(.22,.61,.36,1) forwards; }
.is-opening .envelope-glow { animation: envelopeLight 3.1s .8s ease forwards; }
.is-opening .envelope-portal { animation: portalLight 2.4s 1.75s ease-in-out forwards; }
.is-opening .envelope-flowers-top.envelope-flower-light { animation: floralShimmer 2s .35s ease-in-out forwards; }
.is-opening .envelope-flowers-bottom.envelope-flower-light { animation: floralShimmer 2s .65s ease-in-out forwards; }
.is-opening .envelope-sprig { animation: branchIlluminate 2.8s .5s ease-in-out forwards; }
.is-opening .envelope-pocket, .is-opening .envelope-back, .is-opening .envelope-shadow {
  animation: pocketRelease calc(var(--letter-duration) * 1ms) calc(var(--letter-delay) * 1ms) cubic-bezier(.45,0,.2,1) forwards;
}
.is-handoff .envelope-letter { visibility: hidden; }
.envelope-bridge.hero-frame {
  position: fixed; z-index: 20; margin: 0; max-width: none; pointer-events: none;
  transform-origin: top left; overflow: hidden; will-change: transform;
}

@keyframes envelopeHint { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes envelopeApproach { 0%,100% { transform: scale(1); } 55% { transform: scale(1.035); } }
@keyframes sealIlluminate { 0% { filter: brightness(1); } 45% { filter: brightness(1.08) drop-shadow(0 0 9px #e0b05a70); } 75% { filter: brightness(1.05) drop-shadow(0 0 5px #e0b05a50); } 100% { filter: brightness(1.02); } }
@keyframes sealHalo { 0%,100% { opacity: 0; transform: scale(.96); } 35% { opacity: .95; transform: scale(1); } 65% { opacity: .6; transform: scale(1.015); } }
@keyframes floralShimmer { 0% { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } 18% { opacity: .65; } 80% { opacity: .5; } 100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } 45% { clip-path: polygon(0 24%, 100% 24%, 100% 70%, 0 70%); } }
@keyframes branchIlluminate { 0%,100% { color: #fef9ed; filter: drop-shadow(1px 1px 1px #a9987e90); } 45% { color: #fff0be; filter: drop-shadow(0 0 5px #e5b85a90); } }
@keyframes flapUnfold { 0% { transform: rotateX(0); z-index: 6; } 49% { z-index: 6; } 50%,100% { z-index: 1; } 65% { opacity: 1; } 100% { transform: rotateX(172deg); opacity: 0; } }
@keyframes letterReveal { from { transform: translateY(0) scale(1); } to { transform: translateY(-4%) scale(1.06); } }
@keyframes pocketRelease { 0% { transform: translateY(0); opacity: 1; } 55% { opacity: 1; } 100% { transform: translateY(108%); opacity: 0; } }
@keyframes envelopeLight { 0% { opacity: 0; transform: scale(.7); } 50% { opacity: .8; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes portalLight { 0% { opacity: 0; transform: scale(.8); } 42% { opacity: .95; transform: scale(1); } 70% { opacity: .55; } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes envelopeCaptionOut { to { opacity: 0; } }
@keyframes invitationReveal { to { opacity: 0; } }

@media(max-width:480px) {
  .welcome-dialog.envelope-intro { padding: 18px 12px; }
  .envelope-layout { gap: 21px; }
  .envelope-heading h2 { font-size: 30px; }
  .seal-initials { font-size: 29px; }
  .seal-initials em { font-size: 17px; }
  .letter-bismillah { font-size: 20px; }
  .letter-names { font-size: 43px; }
  .letter-eyebrow { font-size: 5px; }
}
@media(max-height:640px) {
  .envelope-layout { gap: 10px; }
  .envelope-heading h2 { font-size: 25px; }
  .envelope-heading .eyebrow { font-size: 6px; }
  .envelope-controls .welcome-music { margin-top: 5px; }
  .envelope-hint { font-size: 8px; }
  .envelope-hint>span { font-size: 18px; margin-bottom: 2px; }
  .letter-bismillah { font-size: 17px; }
  .letter-names { font-size: 33px; margin-top: 10px; }
  .letter-eyebrow { margin-top: 10px; }
  .letter-date { margin-top: 10px; font-size: 15px; }
  .letter-invite { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .envelope-intro *, .welcome-dialog.envelope-intro.is-opening,
  .welcome-dialog.envelope-intro.is-opening::backdrop { animation: none !important; transition: none !important; }
}
@media(max-height:450px) { .envelope-trigger { width: min(220px,72vw,34svh); } }
@media print { .replay-invitation { display: none !important; } }