.summon-opening{position:fixed;z-index:990;inset:0;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,#294766,#0d1724 45%,#030609 80%);color:#fff;text-align:center}.gold-opening{background:radial-gradient(circle at 50% 46%,#806126,#2a1b09 45%,#050301 80%)}.summon-vortex{position:absolute;width:120vmax;height:120vmax;border-radius:50%;background:repeating-conic-gradient(transparent 0 12deg,#7ed8ff2c 13deg 16deg);animation:opening-spin 4s linear infinite}.gold-opening .summon-vortex{background:repeating-conic-gradient(transparent 0 12deg,#ffd85a38 13deg 16deg)}.summon-trails{position:absolute;width:78vmin;height:78vmin;border:2px solid #aee9ff;border-radius:50%;box-shadow:0 0 20px #65cfff,inset 0 0 30px #65cfff;animation:opening-pulse .8s ease-in-out infinite alternate}.gold-opening .summon-trails{border-color:#ffe690;box-shadow:0 0 25px #ffc23d,inset 0 0 35px #ffc23d}.summon-box{position:relative;z-index:2;font-size:min(30vw,150px);filter:drop-shadow(0 15px 15px #000);animation:box-charge .23s ease-in-out infinite alternate}.summon-box i{position:absolute;z-index:-1;inset:45% 5%;border-radius:50%;background:#b9efff;box-shadow:0 0 25px 15px #73d6ff;opacity:.8}.gold-opening .summon-box i{background:#fff0a6;box-shadow:0 0 30px 18px #ffc33b}.summon-status{position:absolute;z-index:3;bottom:11vh;display:grid;gap:5px;width:min(75vw,340px)}.summon-status b{font:900 24px serif}.summon-status small{color:#cbd9e3}.summon-status span{height:5px;margin-top:9px;border-radius:5px;background:#ffffff22;overflow:hidden}.summon-status span:after{content:"";display:block;height:100%;background:#73d6ff;animation:opening-load 1.75s ease-in-out forwards}.gold-opening .summon-status span:after{background:#ffd052}.summon-opening.burst:after{content:"";position:absolute;z-index:9;inset:0;background:#fff;animation:opening-burst .6s ease-out forwards}@keyframes opening-spin{to{transform:rotate(360deg)}}@keyframes opening-pulse{to{transform:scale(1.12);opacity:.55}}@keyframes box-charge{from{transform:rotate(-2deg) scale(.98)}to{transform:rotate(2deg) scale(1.03)}}@keyframes opening-load{from{width:0}to{width:100%}}@keyframes opening-burst{from{opacity:1}to{opacity:0}}
