@font-face{font-family:DynaPuff;src:url('assets/dynapuff.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--headline:DynaPuff,Arial,sans-serif}
body{background:#fff}
/* One piece of wedding stationery, composed for a phone first. */
.cover{display:block;min-height:100svh;padding:0 0 max(20px,env(safe-area-inset-bottom));isolation:isolate;color:#30261f}
.envelope-stage{position:relative;width:100%;max-width:460px;margin:0 auto;perspective:1400px}
.cover-paper{position:relative;padding:22px 25px 104px;border-radius:0 0 35px 35px;background:#f7efdf url('assets/ivory-paper.webp') repeat;background-size:400px;box-shadow:0 5px 10px #4a351a18,0 17px 30px #79614a0b;transform-origin:50% 0;backface-visibility:hidden;text-align:center}
.paper-heading{margin:0 auto 2px;max-width:365px}
.arched-title{display:block;width:100%;height:auto;overflow:visible}
.arched-title text{font:600 33px var(--headline);fill:#25211d;letter-spacing:-1.2px}
.couple-illustration{display:block;width:92%;max-width:310px;height:auto;margin:0 auto;aspect-ratio:4/3;object-fit:contain}
.cover .names h1{font:400 clamp(57px,16vw,74px)/1.16 var(--script);letter-spacing:-.025em;color:#d66386;padding:7px 0 2px;white-space:nowrap}
.cover .names h1 span{font:inherit;font-size:.78em;color:inherit;margin:0 .025em}
.cover .names>p{font-size:10px;font-weight:600;color:#756248;letter-spacing:.17em;margin:0}
.cover .recipient{margin:28px 0 24px}
.cover .recipient p{font-size:10px;color:#806f5d;line-height:1.5}
.cover .recipient strong{font:700 16px/1.6 var(--sans);margin-top:4px;color:#4f4135;overflow-wrap:anywhere}
.cover .music-player{max-width:350px;margin:0 auto;background:#f2c76e;border:2px solid #fffcf2;border-radius:19px;padding:13px 13px 4px;box-shadow:0 3px 0 #b88b3720;text-align:left}
.cover .player-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cover .player-heading h2{font:500 18px/1.4 var(--headline);letter-spacing:-.5px;color:#3f2c1a}
.cover .player-heading>span{font:600 7px/1.4 var(--sans);letter-spacing:.1em;max-width:49px;text-align:right;color:#6d4d25}
.cover .track-options{gap:5px;margin:9px 0 6px}
.cover .track{min-height:44px;border:1px solid #a77a3340;border-radius:10px;background:#ffffff18;font-size:11px;font-weight:600;color:#5d421f;padding:5px 3px;transition:background 160ms var(--ease-out),transform 160ms var(--ease-out)}
.cover .track.active{background:#fffbec;border-color:#fffbec;color:#47301b;box-shadow:0 2px 5px #79582b12}
.cover .playback{background:transparent;padding:0;gap:9px;border-radius:0}
.cover .play-button{width:44px;height:44px;flex-basis:44px;background:#4d3827;border:1px solid #684a2b}
.cover .now-playing strong{font-size:13px;color:#47301e}
.cover .now-playing>span{font-size:10px;color:#745429;white-space:normal;line-height:1.4}
.cover .equalizer{display:none}
.cover .icon-button{color:#47301e}
.cover .icon-button img{opacity:.7}
.cover .timeline{margin-top:0;gap:8px;font-size:10px;color:#6e502b}
.cover .timeline input{height:44px;accent-color:#6b4c29;min-width:0}
.cover .player-status{font-size:11px;color:#663b24;line-height:1.5}
.cover .player-status:not(:empty){padding:0 0 9px}
.wax-seal{position:absolute;z-index:2;bottom:-54px;left:calc(50% - 62px);width:124px;height:124px;padding:0;background:transparent;border:0;border-radius:50%;transition:transform 160ms var(--ease-out);filter:drop-shadow(0 5px 4px #5e431b25);touch-action:manipulation}
.wax-seal img{width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none;filter:none}
.wax-seal:active{transform:scale(.95)}
.wax-seal:focus-visible{outline:2px dashed #a97d31;outline-offset:5px}
.seal-caption{text-align:center;padding:65px 20px 0;color:#867054;line-height:1.6}
.seal-caption>span{display:block;font-size:10px;letter-spacing:.025em}
.seal-caption strong{display:block;font:500 15px/1.8 var(--headline);color:#624b31}
.seal-caption .tiny-heart{font-size:20px;line-height:1.5;color:#c78396;margin-top:1px}
/* The seal releases before the paper opens from its top edge. */
.cover.is-opening{position:fixed;inset-inline:0;z-index:20;pointer-events:none}
.cover.is-opening .wax-seal{animation:seal-drop 650ms var(--ease-in-out) forwards}
.cover.is-opening .cover-paper{animation:paper-open 850ms 180ms var(--ease-in-out) both;will-change:transform,opacity}
.cover.is-opening .seal-caption{animation:caption-away 150ms var(--ease-out) both}
@keyframes seal-drop{0%{transform:translateY(0) rotate(0);opacity:1}22%{transform:translateY(10px) rotate(-8deg);opacity:1}75%{opacity:1}100%{transform:translate(23px,65vh) rotate(40deg);opacity:0}}
@keyframes paper-open{0%{transform:rotateX(0);opacity:1}72%{opacity:1}100%{transform:rotateX(105deg);opacity:0}}
@keyframes caption-away{to{opacity:0;transform:translateY(5px)}}
/* The inside keeps the same paper, pink ink, and playful typography. */
.invitation{background:#fffaf3;max-width:720px;padding-inline:28px;animation:none}
.invite-nav{font-size:11px;gap:20px;border-color:#e6d9c4;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.invite-nav a,.invite-nav>button{flex-shrink:0}
.invitation-intro{padding:35px 0 42px}
.invitation-intro .eyebrow{font-size:9px;letter-spacing:.16em;color:#8c6b3e}
.intro-illustration{display:block;width:min(78%,285px);height:auto;aspect-ratio:4/3;object-fit:contain;margin:24px auto 0}
.invitation-intro h2{color:#ce6483;margin:8px 0 14px;line-height:1.2;font-size:clamp(58px,16vw,90px)}
.invitation-intro h2 em{color:inherit}
.invitation-intro>p{font-size:14px;max-width:410px;line-height:1.8}
.couple{gap:25px;margin-top:28px}
.couple>div{flex:1;min-width:0}
.couple p{font-size:12px}
.event-section{background:#f4e7dd;padding:28px;gap:25px;grid-template-columns:1fr;border-radius:20px}
.event-details h2,.section-heading h2,.gift-section h2{font-family:var(--headline);font-weight:400;font-size:clamp(25px,6.8vw,34px);line-height:1.3;letter-spacing:-.7px}
.countdown-section h2{font:400 26px/1.35 var(--headline)}
.maze-section .section-heading h2{font-size:clamp(25px,6.8vw,34px)}
.section-heading>p{margin-top:12px}
.section-ornament{color:#c2768b}
.photo-card,.maze-game{border-radius:18px}
.mini-player{background:#fff9e9;border-color:#d8bb7c;border-radius:17px}
.invitation-footer strong{color:#ce6483}
.invitation.is-revealing .invitation-intro>*{animation:letter-arrive 650ms var(--ease-out) both}
.invitation.is-revealing .invitation-intro>.eyebrow{animation-delay:500ms}
.invitation.is-revealing .intro-illustration{animation-delay:580ms}
.invitation.is-revealing .invitation-intro>h2{animation-delay:650ms}
.invitation.is-revealing .invitation-intro>p{animation-delay:720ms}
.invitation.is-revealing .invitation-intro>.couple{animation-delay:790ms}
.reveal-on-scroll{opacity:0;transform:translateY(15px);transition:opacity 550ms var(--ease-out),transform 550ms var(--ease-out)}
.reveal-on-scroll.is-visible{opacity:1;transform:none}
@keyframes letter-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){.wax-seal:hover{transform:rotate(-5deg) scale(1.03)}.cover .track:hover{background:#fff7df99}.cover .track.active:hover{background:#fffbec}.cover .icon-button:hover{background:#bc883123}}
@media(min-width:600px){.cover{padding-top:25px}.cover-paper{border-radius:24px 24px 38px 38px;padding-inline:35px}.invitation-intro{padding-top:45px}.invite-nav{gap:24px}.event-section{grid-template-columns:1fr 1.3fr}.couple-illustration{max-width:330px}}
@media(max-width:359px){.cover-paper{padding:18px 19px 104px}.cover .names h1{font-size:55px}.cover .names>p{font-size:9px}.cover .recipient{margin-block:26px 22px}.cover .player-heading h2{font-size:16px}.cover .music-player{padding-inline:11px}.cover .now-playing>span{font-size:10px}.invitation{padding-inline:16px}.invitation-intro h2{font-size:54px}.couple{gap:12px}.couple p{font-size:11px}.event-section{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none}.cover.is-opening .cover-paper,.cover.is-opening .wax-seal{animation:none}.invitation.is-revealing .invitation-intro>*{animation:none;opacity:1;transform:none}}