body{background:linear-gradient(#fff4e6,#ffe8cc)}.flip{place-items:center;padding:84px 24px 32px;display:grid;position:absolute;inset:0;overflow:hidden}.deck{aspect-ratio:1;touch-action:none;width:min(82vw,64vh,460px);position:relative}.sheet{--depth:0;transform:translate(calc(var(--depth) * 8px), calc(var(--depth) * 10px)) rotate(calc(var(--depth) * 2.5deg));will-change:transform;border-radius:24px;place-items:center;transition:transform .25s ease-out;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 6px #ffffffb3,0 6px 14px #3b33552e}.animal{pointer-events:none;width:82%;height:82%}.animal svg{width:100%;height:100%;display:block}.animal.is-popping{animation:.45s ease-out pop}.animal.is-wiggling{animation:.45s ease-in-out wiggle}@keyframes pop{0%{transform:scale(.6)}55%{transform:scale(1.1)translateY(-6%)}to{transform:scale(1)}}@keyframes wiggle{20%{transform:rotate(-8deg)scale(1.05)}45%{transform:rotate(7deg)scale(1.05)}70%{transform:rotate(-4deg)}}.hint{z-index:10;pointer-events:none;opacity:0;width:0;height:0;transition:opacity .3s;position:absolute;top:55%;left:55%}.hint.is-visible{opacity:1}.hint-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;position:absolute;top:-5px;left:-34px;overflow:visible}.hint-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.hint.is-visible .hint-hand{animation:1.8s ease-in-out infinite hint-swipe}@keyframes hint-swipe{0%{opacity:0;transform:translate(60px,10px)rotate(-12deg)}20%{opacity:1;transform:translate(60px)rotate(-12deg)}65%{opacity:1;transform:translate(-90px,-30px)rotate(-24deg)}85%,to{opacity:0;transform:translate(-110px,-36px)rotate(-24deg)}}.intro{z-index:5;cursor:pointer;place-items:center;padding:84px 24px 32px;display:grid;position:absolute;inset:0}.envelope{--ew:min(72vw, 54vh, 380px);--er:6px;width:var(--ew);height:calc(var(--ew) * .66);margin-top:calc(var(--ew) * .3);perspective:900px;animation:2.4s ease-in-out infinite env-float;position:relative}@keyframes env-float{50%{translate:0 -10px}}.flip.is-opening .envelope{animation:none}.env-back,.env-front{border-radius:var(--er);position:absolute;inset:0}.env-back{z-index:1;background:#ffd8a8;box-shadow:0 16px 30px #3b335538}.env-front{z-index:3;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:#ffc078}.env-front:before{content:"";border-radius:0 0 var(--er) var(--er);clip-path:polygon(0 100%,50% 52%,100% 100%);background:#ffb35c;position:absolute;inset:0}.letter{--s:1;aspect-ratio:1;z-index:2;border-radius:calc(24px / var(--s));height:84%;box-shadow:inset 0 0 0 calc(6px / var(--s)) #ffffffb3;opacity:0;transform-origin:50%;place-items:center;transition:opacity .15s .2s,transform .45s cubic-bezier(.3,.7,.3,1);display:grid;position:absolute;top:8%;left:50%;translate:-50%}.flip.is-rising .letter{transform:translateY(-90%)}.flip.is-moving .letter{z-index:6;transition:opacity .15s,transform .5s cubic-bezier(.4,0,.2,1)}.flip.is-opening .letter{opacity:1}.flap{z-index:4;transform-origin:top;height:66%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.5,0,.3,1);position:absolute;top:0;left:0;right:0}.flap-front,.flap-back{border-radius:var(--er) var(--er) 0 0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;position:absolute;inset:0}.flap-front{background:#ffa94d}.flap-back{border-radius:0 0 var(--er) var(--er);clip-path:polygon(50% 0,100% 100%,0 100%);background:#ffd09b;transform:rotateX(180deg)}.flip.is-opening .flap{transform:rotateX(180deg)}.flip.is-rising .flap{z-index:0}.seal{z-index:5;width:calc(var(--ew) * .22);aspect-ratio:1;padding:calc(var(--ew) * .03);background:#ff922b;border-radius:50%;transition:opacity .2s,transform .2s;position:absolute;top:66%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #fff,0 3px 6px #3b335540}.seal svg{width:100%;height:100%;display:block}.flip.is-opening .seal{opacity:0;transform:translate(-50%,-50%)scale(.5)}.env-hint{z-index:6;pointer-events:none;width:0;height:0;transition:opacity .2s;position:absolute;top:72%;left:64%}.flip.is-opening .env-hint{opacity:0}.env-hand{filter:drop-shadow(0 3px 4px #3b335559);width:72px;height:90px;animation:1.6s ease-in-out infinite env-tap;position:absolute;top:-5px;left:-34px;overflow:visible}.env-hand path{fill:#fff;stroke:#3b3355;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}@keyframes env-tap{0%,to{transform:translate(18px,28px)rotate(-12deg)}35%{transform:translate(0)rotate(-12deg)}45%{transform:translate(0)rotate(-12deg)scale(.88)}55%{transform:translate(0)rotate(-12deg)}}.flip.is-intro .deck,.flip.is-opening .deck{opacity:0}.flip.is-opening.is-revealing .deck{opacity:1;transition:opacity .3s}.flip.is-moving .env-back,.flip.is-moving .env-front,.flip.is-moving .flap-back{opacity:0;transition:opacity .4s}.flip.is-moving .env-back,.flip.is-moving .env-front,.flip.is-moving .flap{transition:opacity .4s,translate .5s ease-in,transform .45s;translate:0 50%}.flip.is-revealing .letter{opacity:0;transition:opacity .15s .25s}