.unboxing{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 35% 20%,#756b5cf5,#302e2aff 78%);overflow:hidden;transition:background .9s ease .25s}
.unboxing-content{width:min(900px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;perspective:1300px}
.unboxing h2{font:clamp(1.5rem,4vw,2.1rem)/1.1 var(--display);color:#f5e3b9;text-shadow:0 2px 1px #17120e;margin:0 0 5px;transition:opacity .2s ease,transform .3s ease}
.wrapped-parcel{position:relative;width:min(100%,calc(66vh * 1.5));aspect-ratio:3/2;filter:drop-shadow(4px 12px 9px #0006);perspective:1300px;transform:rotate(-2deg);transform-style:preserve-3d}
.paper-piece{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:visible;will-change:transform,opacity}
.paper-piece img{width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none}
.paper-left{clip-path:polygon(0 0,51% 0,49.3% 21%,51.1% 42%,49.7% 61%,50.7% 80%,50% 100%,0 100%);transform-origin:7% 50%;transition:transform 1.1s cubic-bezier(.3,.02,.25,1) .14s,opacity .3s ease .87s}
.paper-right{clip-path:polygon(51% 0,100% 0,100% 100%,50% 100%,50.7% 80%,49.7% 61%,51.1% 42%,49.3% 21%);transform-origin:93% 50%;transition:transform 1.1s cubic-bezier(.3,.02,.25,1) .27s,opacity .3s ease 1s}
.wrapper-seal{position:absolute;top:27%;left:21%;width:58%;transform:rotate(3deg);filter:drop-shadow(0 2px 1px #4d29184d);transition:transform .35s ease,opacity .25s ease;pointer-events:none}
.wrapper-seal img{width:100%;height:auto;display:block;user-select:none}
.unwrap-button{border:2px solid #792c20;border-top-color:#ffb47b;border-left-color:#ef9b62;border-radius:13px;background-image:var(--wear),linear-gradient(145deg,#f8d261,#edba39);background-size:250px,100% 100%;padding:15px 23px;min-height:54px;font:20px/1.15 var(--display);color:#3c2b1e;box-shadow:inset 0 2px 1px #ffedac,0 4px 0 #775022,3px 8px 7px #0005;transition:opacity .2s ease,transform .25s ease;max-width:100%}
.unwrap-button span{display:inline-block;margin-left:8px}.unwrap-button:hover{background-color:#ffda5a}.unwrap-button:focus-visible{outline:3px solid #fff5cc;outline-offset:6px}
body.unboxing-active{overflow:hidden}.unboxing-active .toy{opacity:.2;transform:scale(.96);filter:blur(2px);transition:opacity .75s ease .3s,transform .9s ease .2s,filter .8s ease .2s}.unboxing-opening .toy{opacity:1;transform:none;filter:none}
.unboxing.is-opening{background:#302e2a00;pointer-events:none}.unboxing.is-opening h2{opacity:0;transform:translateY(-8px)}.unboxing.is-opening .unwrap-button{opacity:0;transform:translateY(10px)}.unboxing.is-opening .wrapper-seal{opacity:0;transform:translateY(-40px) rotate(12deg) scale(.85)}.unboxing.is-opening .paper-left{transform:translateX(-30%) rotateY(-110deg) rotateZ(-12deg) translateY(12%);opacity:0}.unboxing.is-opening .paper-right{transform:translateX(30%) rotateY(110deg) rotateZ(12deg) translateY(17%);opacity:0}
@media(max-width:680px){.unboxing{padding:22px 12px}.unboxing h2{font-size:24px;max-width:280px;margin-bottom:13px}.wrapped-parcel{width:100%;transform:rotate(-3deg);margin:12px 0 22px}.unwrap-button{font-size:19px;padding:14px 17px}.wrapper-seal{left:17%;width:66%;top:25%}}
@media(prefers-reduced-motion:reduce){.unboxing,.unboxing *,.unboxing-active .toy{transition:none!important;animation:none!important}.unboxing-active .toy{transform:none;filter:none}}