@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Italiana&family=Parisienne&display=swap');
:root{--bg:#f9f0e0;--gold:#d6a63c;--wine:#71111b;--ink:#5e493b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{overflow:hidden}.opening{position:fixed;z-index:5;inset:0;display:grid;place-items:center;background:var(--bg);overflow:hidden}.envelope-stage,.motion-stage{position:absolute;width:min(100vw,440px);aspect-ratio:941/1672;max-height:100svh}.envelope-stage img,.motion-stage video,.motion-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.envelope-base{z-index:1}.gold-flowers{z-index:2;opacity:0;filter:drop-shadow(0 0 2px #ffe7a0)}.gold-sweep{position:absolute;z-index:3;inset:-10%;opacity:0;background:linear-gradient(112deg,transparent 31%,rgba(255,246,188,.05) 42%,rgba(255,242,157,.78) 49%,rgba(177,110,11,.18) 55%,transparent 67%);mix-blend-mode:screen;transform:translateX(-90%);pointer-events:none}.tap-cue{position:absolute;z-index:4;left:50%;top:67%;translate:-50% -50%;display:grid;justify-items:center;gap:8px;color:rgba(126,92,56,.67);animation:cueIn 1.2s .5s both}.tap-cue span{width:8px;height:8px;border-left:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}.tap-cue b{font:400 10px/1 Cinzel,serif;letter-spacing:.28em;white-space:nowrap}.motion-stage{visibility:hidden;opacity:0;z-index:5}.motion-stage video{z-index:1}.seal-center{z-index:3!important;width:23.2%!important;height:auto!important;inset:39.2% auto auto 50%!important;translate:-50% 0;border-radius:50%;filter:drop-shadow(0 1px 2px #2c0d08aa)}.moving-gold{z-index:2!important;opacity:0;mix-blend-mode:color-dodge;filter:drop-shadow(0 0 3px #ffd466)}.open-hit{position:absolute;z-index:9;inset:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.opening.goldening .tap-cue{animation:cueOut .3s forwards}.opening.goldening .gold-flowers{animation:flowersGold 1.55s cubic-bezier(.2,.68,.2,1) forwards}.opening.goldening .gold-sweep{animation:sweep 1.35s .1s ease-in-out forwards}.opening.playing .envelope-stage{opacity:0}.opening.playing .motion-stage{visibility:visible;opacity:1}.opening.playing .seal-center{animation:trackSeal 4.8s linear forwards}.opening.playing .moving-gold{animation:videoGold 2.4s ease-in-out forwards}.opening.finished{animation:openingOut 1.1s ease forwards}.destination{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;opacity:0;background:radial-gradient(circle at 50% 35%,#fffdf8 0,#f5ead6 72%)}.destination.visible{animation:destinationIn 1.3s .2s ease forwards}.destination .ornament{font:400 20px Cinzel;color:#ad7a24;letter-spacing:.2em}.destination .ornament i,.destination h1 i{font-family:Parisienne;font-weight:400;color:#b88832}.destination>p:first-of-type{margin:38px 0 23px;font:500 10px Cinzel;letter-spacing:.33em}.destination h1{margin:0;font:400 clamp(52px,14vw,94px)/.9 Italiana,serif}.destination .rule{width:78px;height:1px;margin:36px 0;background:#b88832}.destination .date{font:500 14px Cinzel;letter-spacing:.18em}.destination .place{margin-top:20px;font:400 16px Italiana;letter-spacing:.08em}.replay{position:fixed;z-index:20;right:16px;bottom:16px;padding:10px 15px;border:1px solid #fff8;border-radius:999px;background:#5c463bcc;color:white;font:400 11px Cinzel;cursor:pointer}@keyframes cueIn{from{opacity:0;transform:translateY(7px)}to{opacity:1}}@keyframes cueOut{to{opacity:0}}@keyframes flowersGold{0%{opacity:0;filter:drop-shadow(0 0 0 transparent)}45%{opacity:.78}75%{opacity:1;filter:drop-shadow(0 0 7px #ffe195)}100%{opacity:.88;filter:drop-shadow(0 0 3px #f6c55c)}}@keyframes sweep{0%{opacity:0;transform:translateX(-90%)}28%{opacity:1}100%{opacity:0;transform:translateX(90%)}}@keyframes videoGold{0%{opacity:.88}38%{opacity:.7}100%{opacity:0}}@keyframes trackSeal{0%,10%{inset:39.2% auto auto 50%;width:23.2%}25%{inset:39.8% auto auto 50%;width:23.8%}48%{inset:41% auto auto 50%;width:24.3%}65%{inset:39.5% auto auto 50%;width:24.8%}80%{inset:31% auto auto 50%;width:24.8%}100%{inset:23.5% auto auto 50%;width:24%}}@keyframes openingOut{to{opacity:0;visibility:hidden}}@keyframes destinationIn{to{opacity:1}}@media(max-aspect-ratio:941/1672){.envelope-stage,.motion-stage{width:100vw;height:auto}}@media(min-width:700px){.envelope-stage,.motion-stage{max-height:92vh;filter:drop-shadow(0 20px 30px #816a4f22)}.tap-cue{top:67%}}@media(prefers-reduced-motion:reduce){.gold-flowers{opacity:.88}.gold-sweep{display:none}}