/* ===== companion stage effects ===== */
.sfx{position:relative;aspect-ratio:720/683;isolation:isolate}
.sfx .fi{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s;filter:drop-shadow(0 10px 16px rgba(80,60,160,.2));z-index:3}
.sfx.s0 .f-open,.sfx.s1 .f-open,.sfx.s2 .f-calm,.sfx.s3 .f-calm,.sfx.s4 .f-joy{opacity:1}
.sfx>div{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
/* s1+: soft aura */
.fx-aura{left:50%;top:52%;width:128%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;
 background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(226,216,255,.75) 26%,rgba(186,170,255,.32) 46%,transparent 68%);animation:sfxPulse 4.5s ease-in-out infinite}
.sfx:is(.s1,.s2,.s3,.s4) .fx-aura{opacity:1}
/* s2+: seven chakra points along the body */
.fx-ch{inset:0;z-index:4}
.fx-ch::before{content:"";position:absolute;left:50%;top:10%;bottom:12%;width:2px;margin-left:-1px;border-radius:2px;
 background:linear-gradient(#c9a7ff,#7a8cff 30%,#5fd0ff 52%,#6fe3a0 62%,#ffd76a 72%,#ffa45c 80%,#ff6b7a);opacity:.5;filter:blur(1px)}
.fx-ch i{position:absolute;left:50%;top:var(--y);width:8.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
 background:radial-gradient(circle,#fff 0 16%,var(--c) 38%,transparent 72%);box-shadow:0 0 10px 3px color-mix(in srgb,var(--c) 70%,transparent);
 animation:sfxChakra 3.2s ease-in-out infinite;animation-delay:calc(var(--k) * .26s)}
.sfx:is(.s2,.s3,.s4) .fx-ch{opacity:1}
/* s3+: halo of light behind the head + soft aurora wash */
.fx-halo{left:50%;top:31%;width:74%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:1;
 border:3px solid rgba(255,238,190,.95);box-shadow:0 0 18px 4px rgba(255,214,140,.7),inset 0 0 16px 3px rgba(255,226,170,.6);animation:sfxHalo 6s ease-in-out infinite}
.fx-wash{left:50%;top:40%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:0;
 background:conic-gradient(from 0deg,rgba(120,230,210,.55),rgba(150,130,255,.5),rgba(255,160,210,.45),rgba(255,220,140,.45),rgba(120,230,210,.55));
 -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);filter:blur(8px);animation:sfxSpin 24s linear infinite}
.sfx:is(.s3,.s4) .fx-halo,.sfx:is(.s3,.s4) .fx-wash{opacity:1}
/* s4 (final form): aurora ribbons + radiant crown light */
.fx-aur{left:-30%;right:-30%;top:-14%;height:78%;z-index:0}
.fx-aur i{position:absolute;left:0;right:0;height:26%;border-radius:50%;filter:blur(9px);opacity:.75;transform-origin:50% 50%}
.fx-aur i:nth-child(1){top:8%;background:linear-gradient(90deg,transparent,rgba(90,240,200,.9) 30%,rgba(140,150,255,.85) 60%,transparent);animation:sfxRib 7s ease-in-out infinite}
.fx-aur i:nth-child(2){top:26%;background:linear-gradient(90deg,transparent,rgba(170,120,255,.85) 25%,rgba(255,140,210,.8) 65%,transparent);animation:sfxRib 9s ease-in-out infinite reverse}
.fx-aur i:nth-child(3){top:44%;height:20%;background:linear-gradient(90deg,transparent,rgba(110,220,255,.8) 35%,rgba(120,250,190,.75) 70%,transparent);animation:sfxRib 8s ease-in-out -3s infinite}
.fx-aur i:nth-child(4){top:-2%;height:18%;background:linear-gradient(90deg,transparent,rgba(255,210,140,.75) 40%,rgba(255,150,200,.7) 70%,transparent);animation:sfxRib 10s ease-in-out -5s infinite reverse}
.fx-rays{left:50%;top:10%;width:170%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;
 background:repeating-conic-gradient(from 0deg,rgba(255,236,180,0) 0 7deg,rgba(255,236,180,.75) 9deg,rgba(255,236,180,0) 12deg);
 -webkit-mask:radial-gradient(circle,#000 6%,rgba(0,0,0,.6) 22%,transparent 46%);mask:radial-gradient(circle,#000 6%,rgba(0,0,0,.6) 22%,transparent 46%);animation:sfxSpin 40s linear infinite}
.fx-crown{left:50%;top:9%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:5;
 background:radial-gradient(circle,rgba(255,255,255,1) 0 6%,rgba(255,240,190,.85) 16%,rgba(255,210,130,.35) 36%,transparent 62%);animation:sfxPulse 3.6s ease-in-out infinite}
.sfx.s4 .fx-aur,.sfx.s4 .fx-rays,.sfx.s4 .fx-crown{opacity:1}
.sfx.s4 .fx-aura{background:radial-gradient(circle,rgba(255,252,235,1) 0,rgba(255,230,180,.7) 24%,rgba(200,180,255,.4) 46%,transparent 68%)}
@keyframes sfxPulse{0%,100%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.05)}}
@keyframes sfxChakra{0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
@keyframes sfxHalo{0%,100%{transform:translate(-50%,-50%) scale(.97)}50%{transform:translate(-50%,-50%) scale(1.03)}}
@keyframes sfxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sfxRib{0%,100%{transform:translateX(-6%) rotate(-6deg) scaleY(.85)}50%{transform:translateX(6%) rotate(5deg) scaleY(1.15)}}
.sfx:not(.s3):not(.s4)>.fx-wash,.sfx:not(.s4)>.fx-aur i,.sfx:not(.s4)>.fx-rays{animation-play-state:paused}
/* minis (Buddy chips): static, lighter */
.sfx.mini *{animation:none!important}
.sfx.mini .fx-aur i,.sfx.mini .fx-wash{filter:blur(4px)}
.sfx.mini .fx-halo{border-width:1.5px;box-shadow:0 0 6px 1px rgba(255,214,140,.7)}
.sfx.mini .fx-ch i{box-shadow:0 0 4px 1px color-mix(in srgb,var(--c) 70%,transparent);width:10%}
.sfx.mini .fx-ch::before{width:1px}
@media (prefers-reduced-motion:reduce){.sfx *{animation:none!important}}