/* Local light, atmosphere and motion follow the character illustration. */
.character-fx{position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;pointer-events:none;contain:paint;-webkit-mask-image:linear-gradient(#000 0%,#000 68%,rgba(0,0,0,.75) 76%,transparent 87%);mask-image:linear-gradient(#000 0%,#000 68%,rgba(0,0,0,.75) 76%,transparent 87%);--fx-color:175,203,230;--fx-accent:238,239,223;--fx-strength:.35;--fx-filter:brightness(1.20) saturate(1.25);--fx-aura-low:.35;--fx-aura-high:.70}
.character-fx>span{pointer-events:none}
.fx-art,.fx-aura,.fx-particles,.fx-mist{position:absolute;inset:0}
.fx-art{background-size:100% 100%;background-position:center;mix-blend-mode:screen;-webkit-mask-image:var(--fx-mask);mask-image:var(--fx-mask);filter:var(--fx-filter);opacity:var(--fx-strength);transform:scale(1.015);transition:transform .65s var(--ease);animation:character-light 4.6s ease-in-out infinite;animation-play-state:paused}
.fx-aura{mix-blend-mode:screen;opacity:.50;animation:character-aura 5.4s ease-in-out infinite;animation-play-state:paused}
.fullart-card.is-active .fx-art{transform:scale(1.045) translate(calc(var(--px,0)*-3px),calc(var(--py,0)*-3px))}
.fullart-card[data-fx-ready]::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 18px rgba(var(--legend-fx-rgb),.12),inset 0 -1px 0 rgba(var(--legend-fx-rgb),.28)}
.fx-particles{opacity:1}
.fx-particle{position:absolute;left:var(--particle-x);top:var(--particle-y);width:var(--particle-size);height:var(--particle-size);background:rgb(var(--fx-accent));box-shadow:0 0 5px 1px rgba(var(--fx-color),.8);border-radius:50%;opacity:0;animation:character-particle var(--particle-time,7s) var(--particle-delay,-2s) ease-in-out infinite;animation-play-state:paused}
.fx-motif{position:absolute;left:var(--fx-x);top:var(--fx-y);width:35%;height:11%;border-radius:50%;border-top:1.5px solid rgba(var(--fx-accent),.72);border-bottom:1px solid rgba(var(--fx-color),.20);transform:translate(-50%,-50%) rotate(var(--fx-angle));opacity:.45;mix-blend-mode:screen;animation:character-motif 4.8s ease-in-out infinite;animation-play-state:paused}
.fx-motif-b{width:46%;height:16%;opacity:.16;animation-delay:-3.3s}
.fx-mist{display:none;background:radial-gradient(ellipse 32% 21% at 14% 69%,rgba(var(--fx-color),.14),transparent 80%),radial-gradient(ellipse 25% 26% at 85% 61%,rgba(var(--fx-color),.1),transparent 80%);opacity:0;animation:character-mist 9s ease-in-out infinite;animation-play-state:paused;mix-blend-mode:screen}
.fx-traces{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 3px rgba(var(--fx-color),.85))}
.fx-trace{fill:none;stroke:rgba(var(--fx-accent),.88);stroke-width:1.35px;stroke-linecap:round;stroke-linejoin:round;opacity:.58;transform-box:fill-box;transform-origin:center;animation:character-trace 4.6s var(--trace-delay,0s) ease-in-out infinite;animation-play-state:paused}

/* Wind and foliage retain clear faces and move along the outside of the figure. */
.fx-kind-wind .fx-motif{width:75%;height:23%;border-top-width:2px;border-bottom-width:0;opacity:.55;animation-name:character-wind;animation-duration:4.4s}
.fx-kind-wind .fx-motif-b{width:91%;height:28%;top:calc(var(--fx-y) + 8%);animation-delay:-3s}
.fx-kind-wind .fx-trace{stroke-width:1.7px;animation-name:character-wind-trace;animation-duration:4.4s}
.fx-kind-wind .fx-particle,.fx-kind-leaves .fx-particle,.fx-kind-seeds .fx-particle,.fx-kind-earth .fx-particle{width:calc(var(--particle-size)*1.65);height:calc(var(--particle-size)*2.8);border-radius:85% 10% 85% 15%;background:linear-gradient(25deg,rgba(var(--fx-color),.24),rgba(var(--fx-accent),.95));box-shadow:0 0 5px rgba(var(--fx-color),.45)}
.fx-kind-leaves .fx-motif,.fx-kind-earth .fx-motif{width:37%;height:25%;border-top-color:rgba(var(--fx-color),.3);border-bottom:0;transform:translate(-50%,-50%) rotate(-34deg)}
.fx-kind-leaves .fx-motif-b,.fx-kind-earth .fx-motif-b{left:calc(var(--fx-x) + 10%);width:28%;opacity:.2}
.fx-kind-seeds .fx-motif{width:15%;height:9%;border:1px solid rgba(var(--fx-accent),.28);box-shadow:0 0 12px rgba(var(--fx-color),.16)}
.fx-kind-seeds .fx-motif-b{width:26%;height:15%}

/* Water is a reflection on the painted water plus little suspended droplets. */
.fx-kind-water .fx-motif{width:25%;height:18%;border:1px solid rgba(var(--fx-accent),.32)}
.fx-kind-water .fx-motif-b{width:35%;height:23%;border-left-color:transparent;border-right-color:transparent}
.fx-kind-water .fx-particle,.fx-kind-tide .fx-particle,.fx-kind-river .fx-particle{background:rgba(var(--fx-color),.18);border:.75px solid rgba(var(--fx-accent),.9);box-shadow:0 0 6px rgba(var(--fx-color),.7)}
.fx-kind-tide .fx-motif{width:68%;height:28%;border-top-width:1.2px;border-bottom:0}
.fx-kind-tide .fx-motif-b{width:83%;height:33%;top:calc(var(--fx-y) + 4%)}
.fx-kind-river .fx-motif{width:42%;height:33%;border-top-width:1.5px;border-bottom:0;transform:translate(-50%,-50%) rotate(48deg)}
.fx-kind-river .fx-motif-b{left:75%;top:52%;width:55%;height:28%;opacity:.15;transform:translate(-50%,-50%) rotate(39deg)}

/* Warm accents live on the flames; a few tongues flicker by changing opacity. */
.fx-kind-fire .fx-art,.fx-kind-solar .fx-art{animation-duration:4.3s}
.fx-kind-fire,.fx-kind-solar{--fx-aura-low:.42;--fx-aura-high:.78}
.fx-kind-fire .fx-aura,.fx-kind-solar .fx-aura{opacity:.56;animation-duration:4.2s}
.fx-kind-fire .fx-trace,.fx-kind-solar .fx-trace{stroke-width:1.7px;stroke:rgba(var(--fx-accent),.92);animation-name:character-fire-trace;animation-duration:3.8s}
.fx-kind-fire .fx-particle,.fx-kind-solar .fx-particle{height:calc(var(--particle-size)*2.4);background:linear-gradient(0deg,rgba(var(--fx-color),.45),rgb(var(--fx-accent)));border-radius:70% 25% 60% 30%;box-shadow:0 0 8px 1px rgba(var(--fx-color),.75)}
.fx-kind-fire .fx-motif,.fx-kind-solar .fx-motif{width:12%;height:21%;border:0;border-radius:90% 12% 80% 20%;background:radial-gradient(ellipse at 45% 80%,rgba(var(--fx-accent),.5),rgba(var(--fx-color),.16) 45%,transparent 75%);opacity:.35;animation-name:character-flame;animation-duration:5.4s}
.fx-kind-fire .fx-motif-b{left:76%;top:62%;height:24%;animation-delay:-2.6s}
.fx-kind-solar .fx-motif{width:23%;height:32%;transform:translate(-50%,-50%) rotate(19deg)}
.fx-kind-solar .fx-motif-b{left:75%;top:35%;width:19%;height:27%;animation-delay:-2.8s}

/* Small coloured wisps have no effect on interaction or legibility. */
.fx-kind-sleep .fx-mist{display:block;opacity:.5;background:radial-gradient(ellipse 34% 30% at 66% 65%,rgba(var(--fx-color),.22),transparent 75%)}
.fx-kind-sleep .fx-motif{width:23%;height:12%;border-top-color:rgba(var(--fx-accent),.6);transform:translate(-50%,-50%) rotate(-37deg)}
.fx-kind-sleep .fx-motif-b{top:calc(var(--fx-y) - 8%);left:calc(var(--fx-x) + 4%);width:31%;height:20%}
.fx-kind-sleep .fx-particle{width:calc(var(--particle-size)*2);height:calc(var(--particle-size)*2);background:rgba(var(--fx-color),.12);border:1px solid rgba(var(--fx-accent),.6)}
.fx-kind-moon .fx-motif,.fx-kind-lunar .fx-motif{width:29%;height:19%;border-top:1px solid rgba(var(--fx-accent),.4);border-left:1px solid rgba(var(--fx-accent),.17);border-bottom:0;transform:translate(-50%,-50%) rotate(-29deg)}
.fx-kind-moon .fx-motif-b{width:36%;height:24%;opacity:.14}
.fx-kind-lunar .fx-motif-b{width:44%;height:28%;opacity:.14}
.fx-kind-moon .fx-particle,.fx-kind-lunar .fx-particle{box-shadow:0 0 6px rgba(var(--fx-accent),.65);opacity:.15}

/* Matinta's mask follows bird and mantle feathers, keeping her face untouched. */
.fx-kind-plume{--fx-aura-low:.44;--fx-aura-high:.86}
.fx-kind-plume .fx-art{animation-duration:4.8s}
.fx-kind-plume .fx-aura{opacity:.63;animation-duration:4.8s}
.fx-kind-plume .fx-trace{stroke:rgba(230,184,255,.94);stroke-width:1.65px;filter:drop-shadow(0 0 3px rgba(167,75,255,.85));animation-duration:4.8s}
.fx-kind-plume .fx-motif{width:41%;height:12%;border-top:1.5px solid rgba(var(--fx-accent),.48);border-bottom:0;box-shadow:0 -2px 8px -5px rgb(var(--fx-color));transform:translate(-50%,-50%) rotate(-25deg)}
.fx-kind-plume .fx-motif-b{left:65%;top:72%;width:45%;height:11%;transform:translate(-50%,-50%) rotate(23deg)}
.fx-kind-plume .fx-particle{width:calc(var(--particle-size)*1.2);height:calc(var(--particle-size)*3.3);border-radius:100% 5% 90% 5%;background:linear-gradient(30deg,rgba(var(--fx-color),.15),rgb(var(--fx-accent)));box-shadow:0 0 7px rgba(var(--fx-color),.7)}
.fx-kind-song .fx-motif{width:68%;height:15%;border-top:1.2px solid rgba(var(--fx-accent),.5);border-bottom:0}
.fx-kind-song .fx-motif-b{left:35%;top:64%;width:75%;height:19%;transform:translate(-50%,-50%) rotate(-27deg)}
.fx-kind-song .fx-particle{width:calc(var(--particle-size)*1.3);height:calc(var(--particle-size)*1.3);box-shadow:0 0 8px 2px rgba(var(--fx-color),.65)}

/* Dry ash falls in irregular flakes; no fiery orange is added to Corpo Seco. */
.fx-kind-ash .fx-art{mix-blend-mode:soft-light;animation-duration:11s}
.fx-kind-ash{--fx-aura-low:.18;--fx-aura-high:.36}
.fx-kind-ash .fx-aura{mix-blend-mode:soft-light;opacity:.25}
.fx-kind-ash .fx-traces{display:none}
.fx-kind-ash .fx-mist{display:block;opacity:.6;mix-blend-mode:normal;background:radial-gradient(ellipse 32% 24% at 10% 66%,rgba(176,166,144,.19),transparent 75%),radial-gradient(ellipse 26% 30% at 91% 57%,rgba(57,54,48,.24),transparent 75%)}
.fx-kind-ash .fx-motif{display:none}
.fx-kind-ash .fx-particle{width:calc(var(--particle-size)*1.4);height:calc(var(--particle-size)*.65);border-radius:2% 60% 15% 40%;background:rgba(var(--fx-accent),.94);box-shadow:1px 1px 1px rgba(25,23,21,.75);animation-name:character-ash}
.fx-kind-ash .fx-particle:nth-child(2n){background:#aaa79d;box-shadow:1px 1px 1px #1c1a17b3}
.fx-kind-shadow .fx-mist{display:block;opacity:.45;mix-blend-mode:screen}
.fx-kind-shadow .fx-motif{height:27%;width:16%;border:0;background:radial-gradient(ellipse at 50% 70%,rgba(var(--fx-color),.2),transparent 65%);transform:translate(-50%,-50%) rotate(29deg)}
.fx-kind-shadow .fx-motif-b{left:16%;top:48%;height:32%}
.fx-kind-shadow .fx-particle{background:rgba(var(--fx-color),.75);box-shadow:0 0 6px rgba(var(--fx-color),.6)}
.fx-kind-thread .fx-motif{width:74%;height:23%;border-top:1px solid rgba(var(--fx-accent),.48);border-bottom:0;transform:translate(-50%,-50%) rotate(-29deg)}
.fx-kind-thread .fx-motif-b{left:56%;top:62%;width:61%;height:17%;transform:translate(-50%,-50%) rotate(31deg)}
.fx-kind-thread .fx-particle{box-shadow:0 0 8px 2px rgba(var(--fx-color),.6)}

/* The five expanded-roster identities each have their own surface response. */
.fx-kind-ruby .fx-motif{width:12%;height:8%;border:1px solid rgba(var(--fx-accent),.25);border-radius:20%;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 13px rgba(var(--fx-color),.2)}
.fx-kind-ruby .fx-motif-b{left:36%;top:58%;width:31%;height:20%;border-radius:50%;border-left:0;border-bottom:0;opacity:.18;transform:translate(-50%,-50%) rotate(-23deg)}
.fx-kind-ruby .fx-particle{border-radius:1px;transform:rotate(45deg);box-shadow:0 0 7px rgba(var(--fx-color),.6)}
.fx-kind-gold .fx-motif{width:60%;height:12%;border-top:1.2px solid rgba(var(--fx-accent),.55);border-bottom:0}
.fx-kind-gold .fx-motif-b{left:63%;top:46%;width:49%;height:8%;transform:translate(-50%,-50%) rotate(-7deg)}
.fx-kind-gold .fx-particle{border-radius:0;box-shadow:0 0 9px 2px rgba(var(--fx-color),.6)}
.fx-kind-echo .fx-motif{width:35%;height:25%;border-top:1px solid rgba(var(--fx-accent),.4);border-right:1px solid rgba(var(--fx-accent),.22);border-bottom:0;animation-name:character-echo;animation-duration:5.2s}
.fx-kind-echo .fx-motif-b{width:51%;height:37%;animation-delay:-2.6s}
.fx-kind-echo .fx-particle{width:1px;height:calc(var(--particle-size)*3);border-radius:2px;box-shadow:0 0 4px rgba(var(--fx-color),.5)}

/* Every moving layer is compositor-friendly: only transform and opacity vary. */
@keyframes character-light{0%,100%{opacity:calc(var(--fx-strength)*.68)}50%{opacity:var(--fx-strength)}}
@keyframes character-aura{0%,100%{opacity:var(--fx-aura-low)}50%{opacity:var(--fx-aura-high)}}
@keyframes character-particle{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.72)}14%{opacity:.9}72%{opacity:.76}100%{opacity:0;transform:translate3d(var(--particle-dx),var(--particle-dy),0) rotate(var(--particle-turn)) scale(1)}}
@keyframes character-ash{0%{opacity:0;transform:translate3d(0,0,0) rotate(-15deg)}15%{opacity:.92}78%{opacity:.78}100%{opacity:0;transform:translate3d(var(--particle-dx),var(--particle-dy),0) rotate(var(--particle-turn))}}
@keyframes character-motif{0%,100%{opacity:.28;translate:-3px 3px}45%{opacity:.65;translate:3px -4px}}
@keyframes character-wind{0%,100%{opacity:.28;translate:-7px 4px;rotate:-3deg}50%{opacity:.7;translate:8px -5px;rotate:3deg}}
@keyframes character-flame{0%,100%{opacity:.28;translate:0 4px;scale:.92 1}35%{opacity:.64;translate:2px -6px;scale:1.04 1.13}65%{opacity:.42;translate:-2px -2px;scale:1 1.05}}
@keyframes character-trace{0%,100%{opacity:.35;transform:translate3d(-1px,2px,0) scale(.985)}50%{opacity:.85;transform:translate3d(2px,-3px,0) scale(1.015)}}
@keyframes character-wind-trace{0%,100%{opacity:.32;transform:translate3d(-7px,3px,0) rotate(-2deg)}50%{opacity:.85;transform:translate3d(8px,-4px,0) rotate(2deg)}}
@keyframes character-fire-trace{0%,100%{opacity:.38;transform:translate3d(0,3px,0) scaleY(.98)}45%{opacity:.92;transform:translate3d(1px,-5px,0) scaleY(1.05)}}
@keyframes character-mist{0%,100%{opacity:.25;transform:translate3d(-2px,3px,0)}50%{opacity:.58;transform:translate3d(3px,-4px,0)}}
@keyframes character-echo{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fx-angle)) scale(.82)}25%{opacity:.36}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fx-angle)) scale(1.16)}}
.fullart-card[data-fx-playing=true] .character-fx .fx-art,.fullart-card[data-fx-playing=true] .character-fx .fx-aura,.fullart-card[data-fx-playing=true] .character-fx .fx-motif,.fullart-card[data-fx-playing=true] .character-fx .fx-mist,.fullart-card[data-fx-playing=true] .character-fx .fx-particle,.fullart-card[data-fx-playing=true] .character-fx .fx-trace{animation-play-state:running}
.fullart-card[data-fx-motion=off] .character-fx .fx-particles,html[data-motion=off] .character-fx .fx-particles{display:none}
.fullart-card[data-fx-motion=off] .character-fx .fx-art,.fullart-card[data-fx-motion=off] .character-fx .fx-aura,.fullart-card[data-fx-motion=off] .character-fx .fx-motif,.fullart-card[data-fx-motion=off] .character-fx .fx-mist,html[data-motion=off] .character-fx .fx-art,html[data-motion=off] .character-fx .fx-aura,html[data-motion=off] .character-fx .fx-motif,html[data-motion=off] .character-fx .fx-mist{animation:none}
.fullart-card[data-fx-motion=off] .character-fx .fx-art{opacity:calc(var(--fx-strength)*.7)}
.fullart-card[data-fx-motion=off] .character-fx .fx-trace,html[data-motion=off] .character-fx .fx-trace{animation:none;opacity:.28;transform:none}
html[data-motion=off] .character-fx .fx-art{transform:none!important;transition:none}
@media(max-width:650px){.fx-particle:nth-child(n+7){display:none}.fx-motif-b{opacity:.13}.fx-trace{stroke-width:1.15px}.fullart-card[data-fx-ready]::after{box-shadow:inset 0 0 12px rgba(var(--legend-fx-rgb),.12)}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .character-fx *{animation:none!important;transition:none!important}html:not([data-motion=on]) .character-fx .fx-particles{display:none}}

/* Roster and enlarged cards share a transparent, character-coloured reflection. */
:is(.legend-grid,.dialog-art) .fullart-card .card-foil{
  background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,rgba(var(--legend-fx-rgb,238,237,225),.12) 52%,rgba(255,255,255,.08) 58%,transparent 70%);
  background-size:220% 220%;
  background-position:var(--mx,50%) var(--my,50%);
  mix-blend-mode:normal;
  filter:none;
  opacity:0;
  animation:none;
}
:is(.legend-grid,.dialog-art) .fullart-card .card-glare{
  background:radial-gradient(farthest-corner at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14) 0%,rgba(var(--legend-fx-rgb,238,237,225),.06) 25%,transparent 64%);
  mix-blend-mode:normal;
  filter:none;
  opacity:0;
  animation:none;
}
:is(.legend-grid,.dialog-art) .fullart-card .card-sparkle{
  background-image:radial-gradient(circle at center,rgba(255,255,255,.55) 0,.45px,transparent .9px),radial-gradient(circle at center,rgba(var(--legend-fx-rgb,238,237,225),.35) 0,.45px,transparent .9px);
  mix-blend-mode:normal;
  filter:none;
  opacity:0;
  animation:none;
}
:is(.legend-grid,.dialog-art) .fullart-card.is-active .card-foil,:is(.legend-grid,.dialog-art) .fullart-card:focus-visible .card-foil{opacity:.24}
:is(.legend-grid,.dialog-art) .fullart-card.is-active .card-glare,:is(.legend-grid,.dialog-art) .fullart-card:focus-visible .card-glare{opacity:.20}
:is(.legend-grid,.dialog-art) .fullart-card.is-active .card-sparkle,:is(.legend-grid,.dialog-art) .fullart-card:focus-visible .card-sparkle{opacity:.04}
:is(.legend-grid,.dialog-art) .fullart-card.is-revealed .card-foil,:is(.legend-grid,.dialog-art) .fullart-card.is-revealed .card-glare,:is(.legend-grid,.dialog-art) .fullart-card.is-revealed .card-sparkle{animation:none}
:is(.legend-grid,.dialog-art) .fullart-card{border-color:rgba(var(--legend-fx-rgb,238,237,225),.34);box-shadow:0 11px 28px #0005,0 0 0 1px #0009,0 0 0 3px rgba(var(--legend-fx-rgb,238,237,225),.04)}
:is(.legend-grid,.dialog-art) .fullart-card::before{border-color:rgba(244,241,229,.25)}
:is(.legend-grid,.dialog-art) .fullart-card.is-active,:is(.legend-grid,.dialog-art) .fullart-card:focus-visible{box-shadow:0 22px 40px #0009,0 0 22px rgba(var(--legend-fx-rgb,238,237,225),.10),0 0 0 1px rgba(var(--legend-fx-rgb,238,237,225),.28)}