.opening-scene{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#34271c,#111114 68%);overflow:hidden}
.opening .opening-scene{display:flex}.opening .photo-wrap{animation:none;border:1px solid #4f402b}.opening .photo-wrap>img{visibility:hidden}.opening .photo-badge{z-index:5}.opening .item-copy{visibility:hidden}.opening .auto-save{visibility:hidden}
.box-camera{perspective:650px;width:140px;height:140px;margin-top:-12px;z-index:2}
.loot-box{width:140px;height:140px;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-25deg)}
.box-face{position:absolute;inset:0;width:140px;height:140px;border:1px solid #c49b5e;background:linear-gradient(135deg,#513d29,#241d16 70%);backface-visibility:visible;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 0 0 0 7px #282018,inset 0 0 0 8px #8b6a3e; color:#eacb96}
.box-face:after{content:'';position:absolute;left:60px;top:0;bottom:0;width:19px;background:linear-gradient(90deg,#8f682f,#dab577,#9e753b);opacity:.65}
.box-face span{font-size:24px;font-weight:900;letter-spacing:2px;z-index:1;text-shadow:0 2px 5px #000;background:#302519;padding:4px 7px}
.box-face small{z-index:1;font-size:5px;letter-spacing:1px;background:#302519;padding:3px}
.box-front{transform:translateZ(70px)}.box-back{transform:rotateY(180deg) translateZ(70px)}.box-right{transform:rotateY(90deg) translateZ(70px)}.box-left{transform:rotateY(-90deg) translateZ(70px)}.box-bottom{transform:rotateX(-90deg) translateZ(70px)}.box-lid{transform:rotateX(90deg) translateZ(70px);background:linear-gradient(120deg,#80603c,#453220)}.box-lid span{font-size:18px}
.opening .loot-box{animation:box-spin 2.1s cubic-bezier(.22,.05,.2,1) both}
@keyframes box-spin{0%{transform:rotateX(-18deg) rotateY(-25deg) scale(.7)}15%{transform:rotateX(-22deg) rotateY(95deg) scale(.95)}55%{transform:rotateX(-14deg) rotateY(560deg) scale(1.04)}85%{transform:rotateX(-18deg) rotateY(688deg) scale(1)}100%{transform:rotateX(-18deg) rotateY(695deg)}}
.box-aura{position:absolute;width:250px;height:250px;background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 35%,transparent),transparent 65%);animation:aura-pulse 1s ease-in-out infinite alternate}.box-orbit{position:absolute;width:205px;height:80px;border:1px solid #d0a35e44;border-radius:50%;transform:translateY(75px);box-shadow:0 0 15px #d0a35e22}.opening-caption{position:absolute;bottom:10px;margin:0;color:#c3ae8c;font-size:10px;letter-spacing:.7px}
@keyframes aura-pulse{to{transform:scale(1.25);opacity:.65}}
.box-light{position:absolute;left:15px;top:-20px;width:110px;height:170px;background:linear-gradient(0deg,var(--rarity),transparent);filter:blur(12px);opacity:0;transform:translateZ(10px);pointer-events:none}
.unsealing .box-lid{animation:lid-open .65s cubic-bezier(.2,.8,.3,1) both}.unsealing .box-light{animation:light-rise .6s ease-out both}.unsealing .box-aura{background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 65%,transparent),transparent 70%)}
@keyframes lid-open{to{transform:translateY(-75px) translateZ(-20px) rotateX(125deg) rotateZ(-8deg)}}
@keyframes light-rise{to{opacity:1;transform:translateY(-40px) translateZ(10px) scale(1.5)}}
.box-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle,#fff 0,var(--rarity) 30%,transparent 75%);z-index:4;pointer-events:none}.unsealing .box-flash{animation:box-flash .75s ease-out both}@keyframes box-flash{0%,35%{opacity:0}70%{opacity:.9}100%{opacity:0}}
.box-sparks{position:absolute;left:50%;top:45%;z-index:3}.box-sparks i{position:absolute;width:4px;height:4px;background:var(--rarity);border-radius:1px;opacity:0;box-shadow:0 0 9px var(--rarity)}.unsealing .box-sparks i{animation:spark-fly .7s ease-out both;transform:rotate(var(--angle))}@keyframes spark-fly{20%{opacity:1}100%{transform:rotate(var(--angle)) translateX(var(--distance));opacity:0}}
.revealed .photo-wrap>img{animation:item-reveal .55s cubic-bezier(.2,.8,.2,1) both}.revealed .item-copy{animation:copy-reveal .45s ease-out both}@keyframes item-reveal{from{opacity:0;transform:scale(.8);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes copy-reveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.opening .loot-box,.box-aura,.unsealing .box-lid,.unsealing .box-light,.unsealing .box-flash,.unsealing .box-sparks i,.revealed .photo-wrap>img,.revealed .item-copy{animation:none}.unsealing .box-light{opacity:.5}.box-flash{display:none}}