.login-opening{width:min(400px,calc(100vw - 40px));max-height:calc(100svh - 32px);padding:38px 24px 30px;border:1px solid #ffffffc9;border-radius:30px;background:radial-gradient(ellipse at 50% 42%,#fffefb,#fcf4ef 75%);box-shadow:0 30px 100px #65494a26,0 1px 0 #fff inset;color:#704d53;overflow:hidden;text-align:center;isolation:isolate}
.login-opening::backdrop{background:#80696738;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.login-opening h2{margin:0;font-family:'Kaiti SC','STKaiti','KaiTi',serif;font-size:23px;font-weight:400;letter-spacing:5px;text-indent:5px}
.opening-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#a38e88;font-size:23px;font-weight:300;cursor:pointer;z-index:8}
.opening-scene{position:relative;height:min(220px,40svh);display:grid;place-items:center;perspective:800px;pointer-events:none}
.opening-envelope{position:relative;width:228px;height:142px;transform:translateY(20px) rotate(-5deg);filter:drop-shadow(0 18px 16px #99766a24)}
.envelope-back{position:absolute;inset:0;border-radius:8px;background:linear-gradient(155deg,#e6c1b9,#d7a99f)}
.envelope-letter{position:absolute;left:16px;right:16px;top:9px;bottom:8px;border-radius:5px;background:linear-gradient(#fffefb,#fff8ee);box-shadow:0 0 0 1px #ba977414 inset;display:flex;flex-direction:column;align-items:center;padding-top:13px;gap:9px;color:#bc7b80}
.envelope-letter span{font:36px/1.2 Georgia,serif}.envelope-letter i{display:block;width:50%;height:1px;background:#d6b1a24d}.envelope-letter i:last-child{width:30%}
.envelope-front{position:absolute;inset:0;z-index:3;border-radius:7px;overflow:hidden;background:linear-gradient(145deg,#f2d9d0,#e7bfb5);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.envelope-front:after{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 43%,100% 100%);background:linear-gradient(#f7e1d5,#f0d0c2);box-shadow:0 -1px 0 #f8e9e0}
.envelope-flap{position:absolute;inset:0 0 auto;height:86px;z-index:4;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#f2d2c7,#e3b4a8);backface-visibility:visible}
.envelope-seal{position:absolute;left:calc(50% - 21px);top:58px;width:42px;height:42px;border:1px solid #b77574;border-radius:48% 52% 49% 51%;background:radial-gradient(circle at 35% 28%,#c59089,#a86e70);box-shadow:0 3px 6px #91615d25,0 0 0 3px #d9aaa54a inset;color:#f8e5d8;font:28px/39px Georgia,serif;z-index:5}
.opening-halo{position:absolute;inset:12px 0;background:radial-gradient(ellipse,#efd3ae70,transparent 65%);opacity:.5;transform:scale(.85)}
.opening-petals{position:absolute;left:50%;top:57%;z-index:6}.opening-petals i{position:absolute;width:11px;height:18px;border-radius:85% 12% 80% 20%;background:linear-gradient(125deg,#ead3ca,#be7f837d);opacity:0}.opening-petals i:nth-child(3n){width:6px;height:6px;border-radius:50%;background:#dfbb86;box-shadow:0 0 12px #f1d49e}
.opening-start{min-width:132px;min-height:44px;padding:10px 32px;border:1px solid #925e68;border-radius:23px;color:#fff7f1;background:linear-gradient(140deg,#a9777c,#8f5c68);box-shadow:0 6px 16px #945f6826;letter-spacing:4px;text-indent:4px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.opening-start:hover{transform:translateY(-2px);box-shadow:0 9px 20px #945f6833}.opening-start:active{transform:scale(.97)}
.login-opening.is-opening{animation:opening-card-fade .6s 2s ease-in forwards}.is-opening .opening-start,.is-opening h2{animation:opening-text-fade .4s forwards}.is-opening .opening-envelope{animation:envelope-rise 2.1s cubic-bezier(.22,.8,.25,1) forwards}.is-opening .envelope-flap{animation:envelope-unseal .95s .12s cubic-bezier(.25,.7,.25,1) forwards}.is-opening .envelope-seal{animation:seal-dissolve .5s forwards}.is-opening .envelope-letter{animation:letter-emerge 1.4s .55s cubic-bezier(.2,.8,.3,1) forwards}.is-opening .opening-halo{animation:opening-bloom 2.3s ease-out forwards}.is-opening .opening-petals i{animation:petal-release 1.65s calc(.6s + var(--petal-delay)) cubic-bezier(.17,.7,.35,1) forwards}
@keyframes envelope-unseal{0%{transform:rotateX(0);z-index:4}55%{z-index:4}56%,100%{transform:rotateX(180deg);z-index:0}}
@keyframes envelope-rise{35%{transform:translateY(16px) rotate(0)}100%{transform:translateY(28px) rotate(0) scale(1.03)}}
@keyframes letter-emerge{0%{transform:translateY(0)}100%{transform:translateY(-68px)}}
@keyframes seal-dissolve{to{opacity:0;transform:translateY(-9px) scale(1.16)}}
@keyframes opening-bloom{40%{opacity:1;transform:scale(1.8)}100%{opacity:.2;transform:scale(2.3)}}
@keyframes petal-release{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}18%{opacity:.85}100%{opacity:0;transform:translate(var(--petal-x),var(--petal-y)) rotate(var(--petal-turn)) scale(1)}}
@keyframes opening-text-fade{to{opacity:0;transform:translateY(5px)}}
@keyframes opening-card-fade{to{opacity:0;transform:translateY(-8px) scale(1.025)}}

@media(max-height:520px){.login-opening{padding:20px 22px}.opening-scene{height:138px}.opening-envelope{transform:translateY(6px) rotate(-5deg) scale(.76)}.login-opening h2{font-size:19px}.opening-start{min-height:40px}}
@media(prefers-reduced-motion:reduce){.login-opening.is-opening{opacity:1}.opening-petals{display:none}.is-opening .envelope-flap{transform:rotateX(180deg);z-index:0}.is-opening .envelope-letter{transform:translateY(-40px)}}
.login-opening.is-opening::backdrop{animation:opening-backdrop-fade .6s 2s ease-in forwards}
@keyframes opening-backdrop-fade{to{background:transparent;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}

.login-opening,.login-opening *{box-sizing:border-box}
.login-opening button:focus-visible{outline:2px solid #a46b75;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.login-opening,.login-opening *,.login-opening::backdrop{animation:none!important;transition:none!important}}