:root{color-scheme:light;--ink:#914A60;--paper:#fff;--pink:#F8DCE5;--pink-shadow:color-mix(in srgb,var(--pink),#000 5%);--line:color-mix(in srgb,var(--pink),#000 13%);--serif:"Bodoni Moda",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:400 1rem/1.6 "Poppins",sans-serif;text-align:center}
h1,h2,p{margin:0}
h2{font:700 clamp(2.8rem,7vw,5.25rem)/.98 var(--serif);letter-spacing:-.025em}
a{color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #a64d69;outline-offset:5px}
main:focus{outline:none}
.cover{padding:clamp(14px,3vw,40px);background:var(--paper);min-height:100svh;display:grid}
.frame{border:1px solid var(--pink-shadow);display:grid;justify-items:center;align-content:center;padding:2.6rem 1rem;position:relative}
.frame::before,.frame::after{content:"✦";color:var(--ink);position:absolute;left:50%;translate:-50% -50%;background:var(--paper);padding:0 .7rem;font-size:.85rem}
.frame::before{top:0}.frame::after{top:100%}
.eyebrow{font-size:.69rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.signature{font:400 clamp(4.1rem,14vw,9rem)/1.1 "Great Vibes",cursive}
h1.signature{margin:.25em 0 .08em}
.cover-date,.date{font:700 1.08rem/1.4 var(--serif);letter-spacing:.19em}
.open{text-decoration:none;display:grid;justify-items:center;gap:1.5rem;margin-top:2.2rem}
.envelope {
  position: relative;
  display: block;
  width: min(77vw, 480px);
  aspect-ratio: 1562 / 1007;
  perspective: 900px;
  isolation: isolate;
}
.envelope img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.envelope-back {
  z-index: 0;
  position: absolute;
  inset: 5.8% 3.9% 4.5%;
  border-radius: 3%;
  background: linear-gradient(var(--pink-shadow), var(--pink));
  box-shadow: 0 8px 20px #39262c20;
}
.envelope-letter {
  z-index: 2;
  position: absolute;
  inset: 10.1% 10% 4.33%;
  background: #fffdfd url("flores-carta.svg") repeat 50% 8% / clamp(96px, 22vw, 145px) auto;
  border:1px solid #ecd3da;
  box-shadow: 0 2px 8px #39262c20;
  clip-path: inset(-1rem -1rem 0);
}
.envelope-front {
  z-index: 3;
  clip-path: polygon(3.7% 5.7%, 50% 66.6%, 96.3% 5.7%, 100% 100%, 0 100%);
}
.envelope-flap {
  z-index: 4;
  clip-path: polygon(3.6% 5.5%, 96.4% 5.5%, 50% 67%);
  transform-origin: center 5.5%;
}
.image-filters{position:absolute;pointer-events:none}
.envelope-seal {
  z-index: 5;
  background-color: #292626;
  filter: url("#lacre-rosa");
  clip-path: polygon(40.2% 53%, 41.8% 48.1%, 45% 44.4%, 48.8% 42.3%, 53.5% 42.5%, 56.7% 45.7%, 59% 51.3%, 59.6% 57.4%, 58.7% 62.4%, 56.9% 67.3%, 53.8% 71.3%, 49.7% 72.8%, 46.1% 72.1%, 42.5% 68.9%, 40.5% 65.3%, 39.8% 59.8%);
  transform-origin: 50% 57%;
}
.envelope-sparkles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity .35s ease;
}
.envelope-sparkles > span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  color: #fff;
  filter: drop-shadow(0 0 5px #ef9baf);
  animation: glimmer var(--cycle, 3.6s) var(--delay) ease-in-out infinite;
}
.envelope-sparkles > span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 37%, 100% 50%, 60% 63%, 50% 100%, 40% 63%, 0 50%, 40% 37%);
}
.envelope-sparkles > span:nth-child(1) { --x: 28%; --y: 63%; --size: clamp(13px, 3.6vw, 23px); --delay: 0s; }
.envelope-sparkles > span:nth-child(2) { --x: 9%; --y: 89%; --size: clamp(17px, 4.2vw, 29px); --delay: -1.5s; }
.envelope-sparkles > span:nth-child(3) { --x: 2%; --y: 77%; --size: clamp(8px, 2.1vw, 15px); --delay: -.7s; --cycle: 4.1s; }
.envelope-sparkles > span:nth-child(4) { --x: 25%; --y: 96%; --size: clamp(10px, 2.7vw, 19px); --delay: -2.2s; }
.envelope-sparkles > span:nth-child(5) { --x: 13%; --y: 17%; --size: clamp(10px, 2.7vw, 19px); --delay: -1s; --cycle: 4.4s; }
.envelope-sparkles > span:nth-child(6) { --x: 35%; --y: 27%; --size: clamp(7px, 1.8vw, 12px); --delay: -2.5s; }
.envelope-sparkles > span:nth-child(7) { --x: 75%; --y: 18%; --size: clamp(13px, 3.6vw, 23px); --delay: -1.2s; --cycle: 4.2s; }
.envelope-sparkles > span:nth-child(8) { --x: 94%; --y: 31%; --size: clamp(9px, 2.5vw, 16px); --delay: -2s; }
.envelope-sparkles > span:nth-child(9) { --x: 72%; --y: 73%; --size: clamp(10px, 2.7vw, 19px); --delay: -.5s; --cycle: 4.5s; }
.envelope-sparkles > span:nth-child(10) { --x: 91%; --y: 84%; --size: clamp(15px, 4vw, 25px); --delay: -2.8s; }
.open.is-opening .envelope-sparkles { opacity: 0; }
@keyframes glimmer {
  0%, 15%, 100% { opacity: 0; scale: .65; }
  48% { opacity: 1; scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  .envelope-sparkles > span { animation: none; opacity: .8; }
}
.open.is-opening .envelope-seal { animation: release-seal .46s ease-in-out both; }
.open.is-opening .envelope-flap { animation: lift-flap .78s .22s ease-in-out both; }
.open.is-opening .envelope-letter { animation: raise-letter .9s .74s cubic-bezier(.32, 0, .24, 1) both; }
@keyframes release-seal {
  35% { transform: translateY(-4%) rotate(-8deg) scale(1.08); }
  to { transform: translateY(-8%) rotate(-15deg) scale(.88); opacity: 0; }
}
@keyframes lift-flap {
  50% { z-index: 4; }
  51%, 100% { z-index: 1; }
  to { transform: rotateX(108deg); }
}
@keyframes raise-letter {
  to { transform: translateY(-26%); }
}
.pill{display:inline-flex;gap:.8rem;align-items:center;justify-content:center;padding:.8rem 1.3rem;border:1px solid var(--line);border-radius:99px;background:var(--pink);color:var(--ink);text-decoration:none;font-size:.83rem;font-weight:500;transition:background .2s}
.pill:hover{background:var(--pink-shadow)}
main section{padding:clamp(3.8rem,9vw,7rem) 1.2rem}
.ornament{color:var(--ink);display:block;margin-bottom:1rem}
.music-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem 1.25rem;
  width: min(100%, 880px);
  margin: 0 auto 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--pink-shadow);
  border-radius: .8rem;
  background: var(--pink);
}
.music-player audio {
  display: block;
  width: min(100%, 22rem);
}
.portrait {
  display: block;
  width: min(100%, 880px);
  height: auto;
  margin-inline: auto;
  border:1px solid var(--pink-shadow);
  background-color: var(--pink);
}
.intro { padding-top: clamp(1rem, 4vw, 3.5rem); }
.portrait-opening { margin-bottom: clamp(2.6rem, 7vw, 5rem); }
.portrait-closing { margin-top: clamp(2rem, 6vw, 4.5rem); }
.intro h2{margin:.9rem 0 1.3rem}
.intro p:not(.eyebrow),.gifts p:not(.eyebrow){max-width:34ch;margin-inline:auto}
.date{display:block;margin-top:1.6rem}
.countdown{background:var(--pink);color:var(--ink)}
.countdown h2{font-size:clamp(2.7rem,6vw,4.5rem)}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:520px;margin:2rem auto 0}
.clock div+div{border-left:1px solid var(--line)}
.clock span{display:block;font:clamp(2.2rem,8vw,4rem)/1 var(--serif);font-variant-numeric:tabular-nums}
.clock small{font-size:clamp(.57rem,2vw,.73rem)}
.details{display:grid;grid-template-columns:1fr 1fr;max-width:990px;margin:auto}
.details>div{padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
.attire{border-left:1px solid var(--line)}
.details h2,.gifts h2{font-size:clamp(2.5rem,6vw,4.2rem);margin:.55rem 0 1rem}
.details a,.rsvp .pill,.playlist .pill{margin-top:1.25rem}
.playlist { background: var(--pink); }
.playlist h2 { font-size: clamp(2.55rem, 6.5vw, 4.7rem); }
.playlist p { margin: .9rem auto 0; }
.playlist .pill { background: var(--paper); }
.playlist .pill:hover { background: var(--pink-shadow); }
.rsvp{background:var(--paper);border-block:1px solid var(--pink-shadow)}
.rsvp-deadline{margin-top:.9rem}
.dress-note{max-width:32ch}
.gift-account{margin-top:1rem}
.gifts{border-bottom:1px solid var(--line)}
footer{padding:3rem 1rem}
.farewell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.85rem, 4vw, 1.75rem);
}
.farewell-photos {
  display: flex;
  flex: none;
  align-items: center;
}
.farewell-photo + .farewell-photo {
  margin-inline-start: -.5rem;
  object-position: center;
}
.farewell-photo {
  flex: none;
  width: clamp(66px, 17vw, 96px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 58% 35%;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.farewell .signature{font-size:clamp(3rem, 12vw, 5rem);margin:.6rem 0 0}
footer small{color:var(--ink)}
@media(max-width:560px){.details{grid-template-columns:1fr;gap:2rem}.attire{border-left:0;border-top:1px solid var(--line);padding-top:2rem!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}