/* Decorative motion belongs to the preparation screen, outside its reading and control areas. */
#screen-setup #shopPanel #offers .offer:not(.equip-offer) .offer-portrait-wrap{overflow:visible!important;isolation:isolate}
#screen-setup #shopPanel #offers .offer-portrait-wrap .summon-art[data-whimsy-element],#screen-setup #formationPanel .unit-avatar .formation-art[data-whimsy-element],#screen-setup #terrainPanel .roster-art[data-whimsy-element]{border-radius:50%!important;box-shadow:0 0 0 1px var(--whimsy-tone),0 0 10px color-mix(in srgb,var(--whimsy-tone) 35%,transparent)!important}
#screen-setup .element-filigree{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;color:var(--whimsy-tone);pointer-events:none!important;z-index:2;opacity:.72}
#screen-setup .element-filigree svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none!important}
#screen-setup #shopPanel .element-filigree{animation:element-sway248 11s ease-in-out infinite;animation-delay:var(--whimsy-delay,0s)}
#screen-setup #formationPanel .unit-avatar{position:relative!important;overflow:visible!important}
#screen-setup #formationPanel .element-filigree{width:46px;height:46px;margin:-23px 0 0 -23px;opacity:.48}
#screen-setup #shopPanel [data-whimsy-element=Fire] .element-filigree{animation-name:ember-sway248;animation-duration:8.5s}
#screen-setup #shopPanel [data-whimsy-element=Water] .element-filigree{animation-name:water-sway248;animation-duration:13s}
#screen-setup #shopPanel [data-whimsy-element=Air] .element-filigree{animation-duration:15s}
#screen-setup #shopPanel [data-whimsy-element=Earth] .element-filigree{animation:none;opacity:.62}
#screen-setup #shopPanel .summoning-flourish{display:inline-block;width:48px;height:16px;margin-left:10px;color:#c5aa75;vertical-align:middle;opacity:.75;pointer-events:none!important}
#screen-setup #shopPanel .summoning-flourish svg{width:100%;height:100%;display:block}
#screen-setup #shopPanel #offers::before{animation:seal-sway248 46s ease-in-out infinite!important;opacity:.14!important}
#screen-setup #circleFireflies{position:absolute;inset:0;overflow:hidden;pointer-events:none!important;z-index:1}
#screen-setup #circleFireflies i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f2d79e;box-shadow:0 0 5px #e6c07c;left:32%;top:49%;animation:firefly248 15s ease-in-out infinite;opacity:.25}
#screen-setup #circleFireflies i:nth-child(2){left:64%;top:27%;animation-delay:-5s;animation-duration:18s}
#screen-setup #circleFireflies i:nth-child(3){left:35%;top:77%;animation-delay:-10s;animation-duration:21s}
/* Keep fireflies behind opaque cards and away from their buttons. */
#screen-setup #shopPanel #offers>.offer{position:relative;z-index:2}
#dragSparkDust{position:fixed;inset:0;overflow:hidden;pointer-events:none!important;z-index:20000;contain:strict}
#dragSparkDust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f5ddb0;box-shadow:0 0 4px #dabb7b88;pointer-events:none!important;animation:dust-fade248 .34s ease-out both}
#waitingCompany .nook-flame{transform-origin:50px 37px;animation:lantern-breathe248 5s ease-in-out infinite}
@keyframes element-sway248{0%,100%{transform:translate(0,0) rotate(-2deg);opacity:.5}50%{transform:translate(1px,-2px) rotate(3deg);opacity:.8}}
@keyframes ember-sway248{0%,100%{transform:translate(0,1px);opacity:.45}55%{transform:translate(0,-3px);opacity:.85}}
@keyframes water-sway248{0%,100%{transform:scale(.97);opacity:.5}50%{transform:scale(1.04);opacity:.78}}
@keyframes seal-sway248{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes firefly248{0%,100%{transform:translate(-3px,3px);opacity:.15}35%{opacity:.55}60%{transform:translate(6px,-9px);opacity:.35}}
@keyframes dust-fade248{from{opacity:.65;transform:scale(1)}to{opacity:0;transform:translate(-5px,7px) scale(.25)}}
@keyframes lantern-breathe248{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.9;transform:scale(1.04)}}
body[data-whimsy-paused=true] #screen-setup .element-filigree,body[data-whimsy-paused=true] #screen-setup #circleFireflies i,body[data-whimsy-paused=true] #screen-setup #shopPanel #offers::before,body[data-whimsy-paused=true] #waitingCompany .nook-flame{animation-play-state:paused!important}
body:has(#equipmentDetailsOverlay:not(.hidden)) #screen-setup .element-filigree,body:has(#equipmentDetailsOverlay:not(.hidden)) #screen-setup #circleFireflies i,body:has(#equipmentDetailsOverlay:not(.hidden)) #screen-setup #shopPanel #offers::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#screen-setup #shopPanel #offers::before,#screen-setup .element-filigree,#screen-setup #circleFireflies i,#waitingCompany .nook-flame{animation:none!important}#dragSparkDust{display:none}#screen-setup #circleFireflies i{opacity:.25}}