/* AVAURA1029 高レア（SR・UR）の品の演出。着た姿の後ろのオーラ・ゆっくり昇る光の粒・札の光のふち。
   動かすのは transform と opacity だけ。画面の外・タブが裏では止める（.ava-off）。動きを減らす設定では止める。 */
/* ---- 着た姿の後ろのオーラ（UR: 金と薄桃と藤のやわらかい光 / SR: 白銀の淡い光） ---- */
.ava{position:absolute;left:-6%;right:-6%;top:2%;bottom:0;pointer-events:none;z-index:0}
.ava i{position:absolute;border-radius:50%;opacity:0}
.ava__a{left:12%;right:12%;top:8%;bottom:6%;background:radial-gradient(closest-side,rgba(255,226,170,.75),rgba(255,214,150,.38) 45%,rgba(255,214,150,0) 100%)}
.ava__b{left:4%;right:30%;top:22%;bottom:22%;background:radial-gradient(closest-side,rgba(255,168,214,.55),rgba(255,168,214,0))}
.ava__c{left:30%;right:4%;top:30%;bottom:14%;background:radial-gradient(closest-side,rgba(186,160,255,.5),rgba(186,160,255,0))}
.ava--ur i{animation:ava-in 1.2s ease-out forwards,ava-br 7s ease-in-out 1.2s infinite}
.ava--ur .ava__b{animation-delay:0s,3.2s}.ava--ur .ava__c{animation-delay:0s,5.1s}
.ava--sr .ava__a{background:radial-gradient(closest-side,rgba(238,240,255,.8),rgba(214,220,255,.32) 50%,rgba(214,220,255,0));animation:ava-in 1.2s ease-out forwards}
.ava--sr .ava__b,.ava--sr .ava__c{display:none}
@keyframes ava-in{to{opacity:.85}}
@keyframes ava-br{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.55;transform:scale(.96)}}
/* ---- ゆっくり昇る光の粒（UR だけ） ---- */
.avm{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.avm i{position:absolute;left:var(--x);bottom:var(--y);width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);border-radius:50%;opacity:0;
	background:radial-gradient(circle,#fffbea 0,#ffe39a 34%,rgba(255,200,110,.55) 52%,rgba(255,200,110,0) 72%);animation:avm-up var(--t) ease-in-out var(--d) infinite}
@keyframes avm-up{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}75%{opacity:.6}100%{opacity:0;transform:translateY(calc(var(--h) * -1))}}
.ava-off .ava i,.ava-off .avm i,html.ava-hidden .ava i,html.ava-hidden .avm i{animation-play-state:paused}

/* ---- 札（着せ替えの一覧・ショップ・ガチャの結果）: UR は金と藤の光のふち＋淡い光、SR は白銀のふち ---- */
.hm__it:has(.hm__sub.is-ur),.s2-card:has(.s2-r--UR),.avs-res .hm__it:has(.is-ur){position:relative;isolation:isolate;border-color:transparent!important;
	box-shadow:0 0 0 1.5px #f3c96a,0 0 0 3px rgba(255,255,255,.9),0 0 14px rgba(255,190,120,.55),0 0 26px rgba(190,150,255,.35)!important}
.hm__it:has(.hm__sub.is-ur)::before,.s2-card:has(.s2-r--UR)::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
	background:radial-gradient(70% 60% at 50% 40%,rgba(255,232,190,.8),rgba(255,232,190,0) 70%),radial-gradient(60% 50% at 30% 70%,rgba(255,190,226,.45),rgba(255,190,226,0)),radial-gradient(60% 50% at 75% 65%,rgba(200,180,255,.45),rgba(200,180,255,0))}
.hm__it:has(.hm__sub.is-ur)::after,.s2-card:has(.s2-r--UR)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:2;pointer-events:none;
	box-shadow:0 0 18px 2px rgba(255,214,140,.7);opacity:0;animation:ava-rim 4.5s ease-in-out infinite}
@keyframes ava-rim{0%,100%{opacity:0}50%{opacity:.75}}
.hm__it:has(.hm__sub.is-sr),.s2-card:has(.s2-r--SR){border-color:#dfe3f2!important;box-shadow:0 0 0 1.5px #e3e7f7,0 0 10px rgba(190,200,240,.6)!important}

@media (prefers-reduced-motion:reduce){.ava i,.avm i,.hm__it::after,.s2-card::after{animation:none!important}.ava i{opacity:.75}.avm{display:none}}