/* =========================================================
   WoW Prime — живые баннеры страниц (assets/js/bannerfx.js)
   Слой .bfx лежит ровно на видимой картинке шапки; всё внутри — в процентах картинки.
   ========================================================= */
/* баннер медленно приближается и отъезжает — вместе со слоем эффектов */
.ph-bg.bfx-on{transform-origin:66% 42%;animation:bfx-drift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes bfx-drift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1.2%,-.8%)}}
.bfx-paused,.bfx-paused .bfx *{animation-play-state:paused!important}

.bfx{position:absolute;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.bfx>i{position:absolute;display:block}

/* свечение кристаллов, фонарей, рун */
.bfx-spot{left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(closest-side,var(--c),color-mix(in oklab,var(--c) 38%,transparent) 42%,transparent);
  opacity:.3;animation:bfx-pulse var(--t,4s) ease-in-out var(--d,0s) infinite}
@keyframes bfx-pulse{50%{opacity:.85;transform:scale(1.18)}}
/* разряды молний: короткие неровные вспышки */
.bfx-spot.is-zap{opacity:0;animation:bfx-zap var(--t,6s) linear var(--d,0s) infinite}
@keyframes bfx-zap{0%,61%,64%,67%,100%{opacity:0}62%{opacity:.9;transform:scale(1.1)}63%{opacity:.25}65%{opacity:.7}66%{opacity:.15}}
/* главный кристалл: дышит и переливается */
.bfx-spot.is-prism{background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(127,230,255,.5) 28%,rgba(192,139,255,.28) 55%,transparent);animation:bfx-pulse var(--t,4s) ease-in-out var(--d,0s) infinite,bfx-hue 9s linear infinite}
@keyframes bfx-hue{to{filter:hue-rotate(360deg)}}

/* искорки-звёзды */
.bfx-star{left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)),linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%);
  opacity:0;animation:bfx-twinkle 4.5s ease-in-out var(--d,0s) infinite}
@keyframes bfx-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1.25) rotate(45deg)}60%{opacity:.6;transform:scale(.9) rotate(60deg)}}

/* световые столбы из окон */
.bfx-ray{transform-origin:50% 0;transform:rotate(var(--r));border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,color-mix(in oklab,var(--c) 75%,transparent),color-mix(in oklab,var(--c) 22%,transparent) 55%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  filter:blur(5px);opacity:.22;animation:bfx-ray var(--t,7s) ease-in-out var(--d,0s) infinite}
@keyframes bfx-ray{50%{opacity:.55}}

/* северное сияние */
.bfx-aurora{border-radius:50%;background:linear-gradient(100deg,transparent 4%,rgba(80,255,210,.38) 24%,rgba(150,110,255,.38) 50%,rgba(80,255,210,.32) 72%,transparent 96%);
  filter:blur(20px);opacity:.4;animation:bfx-aurora var(--t,14s) ease-in-out var(--d,0s) infinite}
@keyframes bfx-aurora{0%,100%{transform:translateX(-4%) skewX(-10deg) scaleY(1);opacity:.3}50%{transform:translateX(4%) skewX(10deg) scaleY(1.18);opacity:.7}}

.bfx-motes{position:absolute;inset:0;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  .ph-bg.bfx-on,.bfx *{animation:none!important}
  .bfx-motes{display:none}
}