/* boss-mist.css - "Haunting mist" boss portrait (owner pick 2026-11-03: variant 2 of
 * _mockups/bathalian-anim.html), used on every Bathalian Mastermind picture.
 *
 * Markup (boss-mist.js writes it for any <img data-boss-mist>, or call BossMist.html()):
 *   <span class="bmist"><span class="bmist-art"><img ...></span><i class="bmist-glow"></i>
 *     <span class="bmist-fog"><i></i><i></i><i></i><i></i></span><i class="bmist-aura"></i>
 *     <i class="bmist-eye e1"></i><i class="bmist-eye e2"></i></span>
 *
 * .bmist fills its parent box (the tile / card / popup frame keeps its own size and border), so the
 * page layout does not move when the mist is added. Everything is clipped inside the box: nothing
 * can make the page wider. Sizes are percentages, so the same markup works from 40px to 230px.
 * Only transform and opacity animate. prefers-reduced-motion (or class "still") shows the still
 * picture with the eyes glowing but not moving. Eye positions differ from the mockup because the
 * live portrait is the fight-screen art. */
.bmist{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:inherit;
  isolation:isolate;contain:paint;background:#120c1c}
.bmist-art{position:absolute;inset:0;display:block;transform-origin:55% 70%;will-change:transform;
  animation:bmBreath 7s ease-in-out infinite}
.bmist-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
/* soft red-violet glow on the face, flickering through the mist */
.bmist-glow{position:absolute;left:30%;top:47%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;
  pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,120,110,.55) 0 12%,rgba(255,59,47,.35) 32%,rgba(140,40,220,.18) 55%,transparent 72%);
  animation:bmFlicker 4.5s steps(1,end) infinite,bmEye 2.6s ease-in-out infinite}
/* glowing red eyes on top of the mist: they pulse and flicker/blink like the mockup (variant 2).
 * Positions are % of the picture, set for the fight-screen art; override --x/--y for other art. */
.bmist-eye{position:absolute;left:var(--x);top:var(--y);width:13%;height:13%;margin:-6.5% 0 0 -6.5%;
  border-radius:50%;pointer-events:none;z-index:3;mix-blend-mode:screen;will-change:transform,opacity;
  animation:bmEyePulse 2.6s ease-in-out infinite}
.bmist-eye::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff6d8 0 8%,#ff3b2f 22%,rgba(255,59,47,.45) 45%,transparent 70%);
  animation:bmBlink 4.5s steps(1,end) infinite}
.bmist-eye.e1{--x:36.5%;--y:45%}
.bmist-eye.e2{--x:22%;--y:50%;width:11%;height:11%;margin:-5.5% 0 0 -5.5%}
.bmist-eye.e2::after{animation-delay:-.2s}
/* rolling mist: four soft blobs (no filter, the gradient is already soft) */
.bmist-fog{position:absolute;inset:0;display:block;pointer-events:none;mix-blend-mode:screen}
.bmist-fog i{position:absolute;width:90%;height:38%;border-radius:50%;opacity:.9;will-change:transform;
  background:radial-gradient(closest-side,rgba(180,120,255,.55),rgba(120,60,220,.2) 60%,transparent);
  animation:bmRoll 11s linear infinite}
.bmist-fog i:nth-child(1){left:-30%;bottom:-8%}
.bmist-fog i:nth-child(2){left:30%;bottom:-14%;animation-duration:15s;animation-delay:-6s}
.bmist-fog i:nth-child(3){left:-10%;bottom:18%;height:26%;opacity:.5;animation-duration:13s;animation-delay:-3s}
.bmist-fog i:nth-child(4){left:40%;bottom:30%;height:22%;opacity:.45;animation-duration:17s;animation-delay:-9s}
/* aura: violet glow breathing in from the edges (inside the box, never outside it) */
.bmist-aura{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(150,90,255,.35);
  background:radial-gradient(closest-side,transparent 62%,rgba(108,43,217,.55) 100%);
  animation:bmAura 7s ease-in-out infinite}
@keyframes bmBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes bmAura{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes bmEye{0%,100%{transform:scale(.85)}50%{transform:scale(1.15)}}
@keyframes bmEyePulse{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@keyframes bmBlink{0%,100%{opacity:1}62%{opacity:.1}64%{opacity:1}66%{opacity:.2}68%{opacity:1}}
@keyframes bmFlicker{0%,100%{opacity:.9}62%{opacity:.35}64%{opacity:.9}66%{opacity:.45}68%{opacity:.9}}
@keyframes bmRoll{0%{transform:translateX(-80%) translateY(0)}50%{transform:translateX(10%) translateY(-18%)}100%{transform:translateX(100%) translateY(0)}}
/* still picture: no motion, no mist overlays; the eyes keep their glow */
.bmist.still .bmist-art{animation:none}
.bmist.still .bmist-glow,.bmist.still .bmist-fog,.bmist.still .bmist-aura{display:none}
.bmist.still .bmist-eye,.bmist.still .bmist-eye::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .bmist .bmist-art{animation:none}
  .bmist .bmist-glow,.bmist .bmist-fog,.bmist .bmist-aura{display:none}
  .bmist .bmist-eye,.bmist .bmist-eye::after{animation:none}   /* still eyes keep their glow */
}