/* VIP 進場動畫（自舊版語音房搬移） */

/* ================= VIP 進場動畫 V3 =================
   捨棄舊版「左邊角色、右邊文字」橫幅排版，改成跟送禮特效（.wulala-gift-fx）
   一致的「置中角色 + 底部資訊卡」電影構圖，共用肉球尾巴／衝擊震波語彙，
   讓送禮與進場兩套全螢幕特效像同一個系統做的。只有 VIP5 以上會觸發。 */
.voice-arrival-fx{--arrival-main:#a06cff;--arrival-hot:#57f3d1;position:fixed;inset:0;z-index:5200;display:grid;place-items:center;overflow:hidden;pointer-events:none;isolation:isolate;background:radial-gradient(circle at 50% 64%,color-mix(in srgb,var(--arrival-main) 20%,transparent),transparent 60%),linear-gradient(180deg,rgba(2,8,14,.86),rgba(2,8,14,.58) 42%,rgba(2,8,14,.86));animation:arrival-curtain 3s both}

.voice-arrival-fx[data-tier="emperor"]{--arrival-main:#ffcf55;--arrival-hot:#ff9ad6;animation-duration:3.4s}

.voice-arrival-fx[data-tier="emperor-cinema"]{--arrival-main:#ffcf55;--arrival-hot:#71f4d2;animation-duration:5.2s;background:radial-gradient(circle at 50% 68%,rgba(255,207,85,.22),transparent 55%),radial-gradient(circle at 22% 40%,rgba(118,77,255,.24),transparent 45%),linear-gradient(180deg,rgba(2,6,12,.9),rgba(2,6,12,.56) 40%,rgba(2,6,12,.9))}

.voice-arrival-fx-atmosphere{position:absolute;inset:0;z-index:0}

.voice-arrival-fx-atmosphere i{position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--arrival-main) 22%,transparent),transparent 30%);animation:arrival-atmosphere 3s linear both}

.voice-arrival-fx-atmosphere i:nth-child(2){animation-direction:reverse;animation-delay:.15s}

.voice-arrival-fx-atmosphere i:nth-child(3){inset:22%;filter:blur(30px)}

.voice-arrival-fx-runes{position:absolute;z-index:1;width:56vmin;height:56vmin;animation:arrival-runes 3s linear both}

.voice-arrival-fx-runes i{position:absolute;color:#fff;font-style:normal;font-size:clamp(16px,3.4vw,32px);text-shadow:0 0 16px var(--arrival-main)}

.voice-arrival-fx-runes i:nth-child(1){top:2%;left:48%}
.voice-arrival-fx-runes i:nth-child(2){right:2%;top:47%}
.voice-arrival-fx-runes i:nth-child(3){bottom:2%;left:48%}
.voice-arrival-fx-runes i:nth-child(4){left:2%;top:47%}

.voice-arrival-fx-paw-trail{position:absolute;inset:0;z-index:2;pointer-events:none}

.voice-arrival-fx-paw-trail i{--paw-a:calc(var(--paw-i) * 5deg - 15deg);position:absolute;left:4%;top:70%;width:18px;height:16px;opacity:0;background:var(--arrival-hot);border-radius:58% 58% 50% 50%;box-shadow:0 0 14px var(--arrival-hot);animation:arrival-paw-trail 1.3s calc(var(--paw-i) * 60ms) cubic-bezier(.3,.68,.36,1) both}

.voice-arrival-fx-paw-trail i::before{content:"";position:absolute;top:-6px;left:2px;width:4.4px;height:4.4px;background:var(--arrival-hot);border-radius:50%;box-shadow:5.6px .5px 0 -.4px var(--arrival-hot),8.3px -2.2px 0 -1.1px var(--arrival-hot),-2.2px -1.6px 0 -1.1px var(--arrival-hot)}

.voice-arrival-fx-stage{position:relative;z-index:2;width:min(640px,86vw);height:min(64vh,560px)}

.voice-arrival-fx-ground{position:absolute;left:50%;bottom:6%;width:min(420px,62vw);height:60px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--arrival-main) 45%,transparent),transparent 70%);transform:translateX(-50%);animation:arrival-ground 3s both}

.voice-arrival-fx-character{position:absolute;z-index:4;left:50%;bottom:6%;width:min(300px,52vw);max-height:92%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 20px 26px rgba(0,0,0,.5)) drop-shadow(0 0 16px color-mix(in srgb,var(--arrival-main) 65%,transparent));animation:arrival-character 3s cubic-bezier(.2,.86,.24,1) both}

.voice-arrival-fx-impact{position:absolute;left:50%;bottom:14%;width:46vmin;height:46vmin;border-radius:50%;background:radial-gradient(circle,#fff 0 4%,var(--arrival-main) 9%,color-mix(in srgb,var(--arrival-main) 40%,transparent) 36%,transparent 70%);transform:translate(-50%,30%);filter:blur(1px);animation:arrival-impact-glow 3s both}

.voice-arrival-fx-shockwave{position:absolute;left:50%;bottom:26%;width:1px;height:1px;z-index:3;pointer-events:none;opacity:0;animation:arrival-shockwave 3s both}

.voice-arrival-fx-shockwave::before,.voice-arrival-fx-shockwave::after{content:"";position:absolute;left:50%;top:50%;width:58vmin;height:58vmin;border-radius:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#fff 0 1.3deg,transparent 1.3deg 14deg)}

.voice-arrival-fx-shockwave::after{width:40vmin;height:40vmin;transform:translate(-50%,-50%) rotate(18deg)}

.voice-arrival-fx-paw-ring{position:absolute;left:50%;bottom:20%;width:180px;height:180px;z-index:3;transform:translate(-50%,50%);animation:arrival-paw-spin 3s linear both}

.voice-arrival-fx-paw-ring i{--paw-a:calc(var(--i) * 36deg);position:absolute;left:50%;top:50%;width:15px;height:13px;margin:-6.5px 0 0 -7.5px;background:var(--arrival-hot);border-radius:58% 58% 50% 50%;opacity:.85;box-shadow:0 0 10px var(--arrival-hot);transform:rotate(var(--paw-a)) translateY(-88px)}

.voice-arrival-fx-paw-ring i::before{content:"";position:absolute;top:-4px;left:1.5px;width:3.6px;height:3.6px;background:var(--arrival-hot);border-radius:50%;box-shadow:4.6px .4px 0 -.4px var(--arrival-hot),6.9px -1.8px 0 -.9px var(--arrival-hot),-1.8px -1.3px 0 -.9px var(--arrival-hot)}

.voice-arrival-fx-cavalry{position:absolute;left:-6%;bottom:6%;z-index:1;width:112%;opacity:.75;filter:drop-shadow(0 0 14px var(--arrival-main));animation:arrival-cavalry 3.4s both}

.voice-arrival-fx-portal{position:absolute;left:50%;bottom:8%;z-index:1;width:min(420px,72vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);border:3px solid color-mix(in srgb,var(--arrival-hot) 78%,transparent);background:repeating-conic-gradient(from 12deg,color-mix(in srgb,var(--arrival-hot) 22%,transparent) 0 8deg,transparent 8deg 24deg);box-shadow:inset 0 0 35px color-mix(in srgb,var(--arrival-main) 70%,transparent),0 0 30px color-mix(in srgb,var(--arrival-main) 45%,transparent);animation:arrival-portal 5.2s both}

.voice-arrival-fx-portal::before,.voice-arrival-fx-portal::after{content:"";position:absolute;border-radius:50%;inset:9%;border:2px dashed color-mix(in srgb,var(--arrival-hot) 80%,transparent);animation:arrival-portal-rune 2s linear infinite}

.voice-arrival-fx-portal::after{inset:22%;border-style:solid;border-color:color-mix(in srgb,var(--arrival-main) 80%,transparent);animation-direction:reverse}

.voice-arrival-fx-army{position:absolute;left:0;bottom:1%;z-index:3;width:min(760px,94vw);filter:drop-shadow(0 15px 14px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,213,76,.4));animation:arrival-army-charge 5.2s cubic-bezier(.18,.65,.28,1) both}

.voice-arrival-fx-punchline{position:absolute;left:50%;top:10%;z-index:6;display:grid;justify-items:center;transform:translateX(-50%);pointer-events:none}

.voice-arrival-fx-punchline span{display:grid;place-items:center;width:66px;height:66px;border:3px solid #ffdc62;border-radius:50% 48% 52% 44%;background:#fff6b8;color:#57360b;font-size:27px;font-weight:1000;box-shadow:0 8px 0 rgba(91,51,8,.2),0 0 24px rgba(255,226,104,.7);animation:arrival-punchline-pop 5.2s both}

.voice-arrival-fx-punchline b{margin-top:9px;padding:7px 14px;border:1px solid rgba(128,255,223,.68);border-radius:999px;background:rgba(2,28,30,.9);color:#dffff7;font-size:13px;letter-spacing:.06em;animation:arrival-punchline-tag 5.2s both}

.voice-arrival-fx-hero{position:relative;z-index:7;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "icon subtitle";align-items:center;column-gap:12px;row-gap:2px;max-width:min(560px,92vw);margin-top:-4vh;padding:10px 20px 10px 10px;border:1px solid color-mix(in srgb,var(--arrival-main) 45%,transparent);border-radius:999px;background:rgba(4,10,18,.72);backdrop-filter:blur(10px);animation:arrival-hero 3s both}

.voice-arrival-fx-hero img{grid-area:icon;width:46px;height:46px;object-fit:contain;border-radius:50%;background:color-mix(in srgb,var(--arrival-main) 30%,#0a1420);box-shadow:0 0 0 2px color-mix(in srgb,var(--arrival-main) 60%,transparent)}

.voice-arrival-fx-hero strong{grid-area:title;color:#fff;font-size:clamp(17px,3vw,23px);text-shadow:0 2px 10px #000}

.voice-arrival-fx-hero small{grid-area:subtitle;color:var(--arrival-hot);font-size:12.5px;font-weight:800;letter-spacing:.04em;text-shadow:0 2px 8px #000}

.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-atmosphere i,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-runes,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-ground,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-character,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-impact,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-shockwave,.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-hero{animation-duration:3.4s}

.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-shockwave{left:50%;bottom:36%}

.voice-arrival-fx[data-tier="emperor"] .voice-arrival-fx-stage,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-stage{animation:arrival-camera-shake 3.4s both}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-atmosphere i,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-runes,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-ground,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-impact,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-shockwave,.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-hero{animation-duration:5.2s}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-stage{animation-duration:5.2s}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-shockwave{left:50%;bottom:34%}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-character{width:min(360px,58vw);z-index:5;animation:arrival-character-cinema 5.2s cubic-bezier(.16,.8,.22,1) both}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-hero{border-color:#ffe07a;background:linear-gradient(110deg,rgba(52,31,95,.85),rgba(9,39,43,.85))}

.voice-arrival-fx-stage{width:92vw;height:56vh}
.voice-arrival-fx-character{width:min(230px,64vw)}
.voice-arrival-fx-hero{max-width:92vw;margin-top:-2vh;padding:8px 16px 8px 8px}
.voice-arrival-fx-hero img{width:38px;height:38px}
.voice-arrival-fx-punchline{top:5%}
.voice-arrival-fx-punchline span{width:54px;height:54px;font-size:22px}

.voice-arrival-fx[data-tier="emperor-cinema"] .voice-arrival-fx-character{width:min(260px,72vw)}
.voice-arrival-fx,.voice-arrival-fx *,.voice-arrival-fx-shockwave::before,.voice-arrival-fx-shockwave::after,.voice-arrival-fx-portal::before,.voice-arrival-fx-portal::after,.voice-drop-fx,.voice-drop-fx *{animation-duration:.01ms!important}
@keyframes arrival-curtain{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}
@keyframes arrival-atmosphere{0%{opacity:0;transform:rotate(0) scale(.7)}25%{opacity:.6}100%{opacity:0;transform:rotate(160deg) scale(1.2)}}
@keyframes arrival-runes{0%{opacity:0;transform:scale(.5) rotate(-40deg)}22%{opacity:1}86%{opacity:.75}100%{opacity:0;transform:scale(1.4) rotate(120deg)}}
@keyframes arrival-paw-trail{0%{opacity:0;left:2%;top:72%;transform:rotate(var(--paw-a)) scale(.45)}16%{opacity:.95}55%{left:48%;top:34%;transform:rotate(var(--paw-a)) scale(1)}86%{opacity:.6}100%{opacity:0;left:88%;top:46%;transform:rotate(var(--paw-a)) scale(.55)}}
@keyframes arrival-ground{0%,100%{opacity:0;transform:translateX(-50%) scale(.5)}20%,84%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes arrival-character{0%,7%{opacity:0;transform:translateX(-50%) translateY(24%) scale(.4) rotate(-10deg)}22%{opacity:1;transform:translateX(-50%) translateY(-4%) scale(1.08) rotate(4deg)}32%{opacity:1;transform:translateX(-50%) translateY(0) scale(.96) rotate(-2deg)}40%{opacity:1;transform:translateX(-50%) translateY(-2%) scale(1.02) rotate(1deg)}48%,82%{opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}100%{opacity:0;transform:translateX(-50%) translateY(-10%) scale(.9) rotate(0)}}
@keyframes arrival-character-cinema{0%,6%{opacity:0;transform:translateX(-50%) translateY(30%) scale(.5) rotate(-8deg)}20%{opacity:1;transform:translateX(-50%) translateY(-3%) scale(1.06) rotate(2deg)}30%{opacity:1;transform:translateX(-50%) translateY(0) scale(.97) rotate(-1deg)}38%,80%{opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}92%,100%{opacity:0;transform:translateX(-50%) translateY(-8%) scale(.92) rotate(0)}}
@keyframes arrival-impact-glow{0%,18%{opacity:0;transform:translate(-50%,30%) scale(.2)}26%{opacity:1;transform:translate(-50%,30%) scale(1.15)}34%{opacity:.7;transform:translate(-50%,30%) scale(.95)}80%{opacity:.55}100%{opacity:0;transform:translate(-50%,30%) scale(1.2)}}
@keyframes arrival-shockwave{0%,18%{opacity:0;transform:translate(-50%,-50%) scale(.04)}25%{opacity:.85}38%{opacity:0;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}
@keyframes arrival-paw-spin{0%,14%{opacity:0;transform:translate(-50%,50%) rotate(0) scale(.4)}30%,74%{opacity:.9;transform:translate(-50%,50%) rotate(220deg) scale(1)}100%{opacity:0;transform:translate(-50%,50%) rotate(420deg) scale(1.15)}}
@keyframes arrival-hero{0%,20%{opacity:0;transform:translateY(16px)}30%,84%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes arrival-cavalry{0%,20%{opacity:0;transform:translateX(-80vw) scale(.8)}46%,80%{opacity:.78;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(55vw) scale(1.08)}}
@keyframes arrival-portal{0%,10%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-70deg)}22%,72%{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}86%,100%{opacity:0;transform:translateX(-50%) scale(1.3) rotate(70deg)}}
@keyframes arrival-portal-rune{to{transform:rotate(360deg)}}
@keyframes arrival-army-charge{0%,32%{opacity:0;transform:translateX(-105%) scale(.72) rotate(-2deg)}42%{opacity:1;transform:translateX(-20%) scale(.9) rotate(1deg)}55%{transform:translateX(0) scale(1)}66%{transform:translateX(6%) translateY(-6px) scale(1.02)}74%,84%{opacity:1;transform:translateX(0) scale(1)}94%,100%{opacity:0;transform:translateX(40%) scale(.92)}}
@keyframes arrival-punchline-pop{0%,18%{opacity:0;transform:scale(.2) rotate(-18deg)}26%{opacity:1;transform:scale(1.15) rotate(6deg)}34%{transform:scale(1) rotate(-3deg)}72%{opacity:1}82%,100%{opacity:0;transform:translateY(-14px) scale(.85)}}
@keyframes arrival-punchline-tag{0%,24%{opacity:0;transform:translateY(10px)}32%,68%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes arrival-camera-shake{0%,22%,42%,100%{transform:translate(0,0)}25%{transform:translate(-7px,3px)}28%{transform:translate(6px,-4px)}31%{transform:translate(-4px,2px)}34%{transform:translate(3px,-2px)}37%{transform:translate(0,0)}}