:root{color-scheme:dark;--ease:cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#54181c}
body{overflow-x:hidden}
.experience{min-height:100svh;padding:var(--initial-top,24px) 0 24px;overflow:hidden}
.composition{position:relative;width:82.631579vw;margin-inline:auto;aspect-ratio:1.78;isolation:isolate;transform:translateY(0);transition:transform 2500ms var(--ease) 500ms}
.envelope{position:absolute;inset:0;perspective:1600px;filter:drop-shadow(0 22px 25px #0004)}
.paper{background-color:#171717;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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.035' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"),linear-gradient(125deg,#ffffff04,#00000010)}
.back{position:absolute;inset:0;border:1px solid #ffffff0b;border-radius:3px;background-color:#101010;z-index:1}
.invitation{position:absolute;z-index:3;inset:2.5% 2.5% auto;margin:0;visibility:hidden;transform:translateY(0);filter:drop-shadow(0 4px 9px #0003);will-change:transform}
.invitation img{display:block;width:100%;height:auto;object-fit:contain}
.flap{position:absolute;top:0;left:0;width:100%;height:56%;z-index:5;transform-origin:50% 0%;transform:rotateX(0);transform-style:preserve-3d;transition:transform 1100ms var(--ease) 180ms}
.flap-face,.flap-inside{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden}
.flap-face{background-color:#202020;background-image:linear-gradient(165deg,#242424,#141414);filter:drop-shadow(0 2px 1px #000)}
/* Reverse the inner face so its full-width edge stays on the hinge after the 3D flip. */
.flap-inside{transform:rotateX(180deg);clip-path:polygon(0 100%,100% 100%,50% 0);background-color:#141414}
.pocket{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:2px}
.side{position:absolute;inset:0}
.left{clip-path:polygon(0 0,53% 55%,0 100%);background-color:#1d1d1d}
.right{clip-path:polygon(100% 0,47% 55%,100% 100%);background-color:#191919}
.bottom{position:absolute;inset:0;clip-path:polygon(0 100%,0 98%,50% 43%,100% 98%,100% 100%);background-color:#202020;background-image:linear-gradient(0deg,#171717,#222);border-bottom:1px solid #ffffff0b}
.envelope-logo{position:absolute;z-index:5;right:1%;bottom:1.5%;width:18%;height:auto;object-fit:contain;opacity:.55;pointer-events:none}
.seal{position:absolute;z-index:6;top:51%;left:50%;width:clamp(68px,12.5%,128px);aspect-ratio:1282/1228;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);cursor:pointer;animation:breathe 4s ease-in-out infinite;transition:opacity 180ms,filter 180ms}
.seal img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 5px #0006);pointer-events:none}
.seal:hover{filter:brightness(1.08)}
.seal:focus-visible{outline:2px solid #e6d3a3;outline-offset:7px}
.seal:disabled{cursor:default}
.confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.confetti i{position:absolute;left:50%;top:15%;width:3px;height:9px;background:var(--color);opacity:0}
.opening,.opened{min-height:var(--open-height,100svh)}
.opening .composition,.opened .composition{transform:translateY(var(--open-shift,0px))}
.opening .seal,.opened .seal{animation:seal-away 250ms ease-out forwards;pointer-events:none}
.opening .flap,.opened .flap{transform:rotateX(-180deg);z-index:2}
.opening .invitation,.opened .invitation{animation:extract 1900ms var(--ease) 1100ms forwards}
.opening .confetti i{animation:celebrate 2400ms ease-out calc(1100ms + var(--delay)) both}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.045)}}
@keyframes seal-away{to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@keyframes extract{0%{visibility:visible;transform:translateY(0)}100%{visibility:visible;transform:translateY(-102%)}}
@keyframes celebrate{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.7}80%{opacity:.35}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rotation))}}
@media(max-width:600px){.composition{width:92vw}}
@media(prefers-reduced-motion:reduce){.composition,.flap{transition-duration:100ms;transition-delay:0ms}.seal{animation:none}.opening .seal,.opened .seal{animation-duration:80ms}.opening .invitation,.opened .invitation{visibility:visible;animation:none;transform:translateY(-102%)}.opening .confetti i{animation:none}}

/* The reflective overlay follows only the original gold foil band. */
.invitation::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(0 96.1%,100% 88%,100% 100%,0 100%);background:linear-gradient(112deg,transparent 39%,rgba(230,211,163,.08) 44%,rgba(255,247,219,.55) 49%,rgba(255,255,244,.75) 50%,rgba(230,211,163,.12) 55%,transparent 61%);background-size:250% 100%;background-position:200% 0;mix-blend-mode:screen;opacity:0}
.opening .invitation::after,.opened .invitation::after{animation:gold-glint 7s ease-in-out 3100ms infinite both}
@keyframes gold-glint{0%{background-position:200% 0;opacity:0}8%{opacity:.75}34%{background-position:-100% 0;opacity:.75}42%,100%{background-position:-100% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.opening .invitation::after,.opened .invitation::after{animation:none;opacity:0}}

.invitation-modal{width:min(92vw,480px);max-width:none;max-height:90svh;margin:auto;padding:26px 24px 28px;border:1px solid #c9a34a55;border-radius:14px;background:#191919;box-shadow:0 24px 70px #0008;color:#f5f1e9;overflow:auto;font:400 16px/1.65 Arial,sans-serif}
.invitation-modal[open]{animation:modal-enter 480ms cubic-bezier(.22,1,.36,1) both}
.invitation-modal::backdrop{background:rgba(22,5,7,.85);backdrop-filter:blur(5px)}
.invitation-modal[open]::backdrop{animation:modal-backdrop-enter 480ms ease-out both}
.modal-header{display:flex;justify-content:flex-end;align-items:flex-start;margin-bottom:10px}
.modal-message p{margin:0 0 20px}
.modal-details{margin:26px 0 0;padding-top:20px;border-top:1px solid #c9a34a40}
.modal-details div+div{margin-top:14px}
.modal-details dt{font-weight:700;color:#e6d3a3}
.modal-details dd{margin:2px 0 0;overflow-wrap:anywhere}
.modal-close{flex-shrink:0;width:44px;height:44px;margin:-8px -10px 0 0;border:0;background:transparent;color:#e6d3a3;font:32px/1 Arial,sans-serif;cursor:pointer;border-radius:8px}
.modal-close:hover{background:#ffffff0a}
.modal-close:focus-visible,.invitation[role="button"]:focus-visible{outline:2px solid #e6d3a3;outline-offset:2px}
body.modal-open{overflow:hidden}
@media(max-width:600px){.invitation[role="button"]{cursor:zoom-in}}
@keyframes modal-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes modal-backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.invitation-modal[open],.invitation-modal[open]::backdrop{animation:none}}