/* ============================================================
   blindspot-move-hybrid.css
   Hybrid move-card art: painted webp base + bespoke per-move CSS
   effects (idle ::before + on-hover DOM particles).

   The painted images live at blindspot/img/moves/flat/*.webp.
   The existing CSS-only FX particles (bs-fx-strike__streak etc.)
   are HIDDEN in this mode — they were sized for an empty panel
   and fight the painted compositions.

   Each move gets:
   - A painted background image (cover-fit)
   - A vignette ::after to soften card edges
   - A bespoke ::before idle effect tuned to the painting
   - Bespoke DOM hover particles (paused at idle, run on :hover)

   Loaded AFTER blindspot-battle.css so cascade order favors
   these rules without needing !important.
   ============================================================ */

/* ─── Shared painted-card chrome ─── */
.bs-page .bs-move-card__art--strike,
.bs-page .bs-move-card__art--guard,
.bs-page .bs-move-card__art--ability,
.bs-page .bs-move-card__art--ability-powerstrike,
.bs-page .bs-move-card__art--ability-arcaneblast,
.bs-page .bs-move-card__art--ability-shadowstrike,
.bs-page .bs-move-card__art--ability-fortify,
.bs-page .bs-move-card__art--ability-wildcard,
.bs-page .bs-move-card__art--heal,
.bs-page .bs-move-card__art--counter {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Per-move background images */
.bs-page .bs-move-card__art--strike            { background-image: url('../img/moves/flat/strike.webp'); }
.bs-page .bs-move-card__art--guard             { background-image: url('../img/moves/flat/guard.webp'); }
.bs-page .bs-move-card__art--ability           { background-image: url('../img/moves/flat/ability.webp'); }
.bs-page .bs-move-card__art--heal              { background-image: url('../img/moves/flat/heal.webp'); }
.bs-page .bs-move-card__art--counter           { background-image: url('../img/moves/flat/counter.webp'); }
.bs-page .bs-move-card__art--ability-powerstrike   { background-image: url('../img/moves/flat/powerstrike.webp'); }
.bs-page .bs-move-card__art--ability-arcaneblast   { background-image: url('../img/moves/flat/arcaneblast.webp'); }
.bs-page .bs-move-card__art--ability-shadowstrike  { background-image: url('../img/moves/flat/shadowstrike.webp'); }
.bs-page .bs-move-card__art--ability-fortify       { background-image: url('../img/moves/flat/fortify.webp'); }
.bs-page .bs-move-card__art--ability-wildcard      { background-image: url('../img/moves/flat/wildcard.webp'); }

/* Hide the legacy CSS-only FX particles when painted background
   is present. They were designed against an empty panel. */
.bs-page .bs-move-card__art--strike [class*="bs-fx-strike__"],
.bs-page .bs-move-card__art--guard [class*="bs-fx-guard__"],
.bs-page .bs-move-card__art--ability [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--ability-powerstrike [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--ability-arcaneblast [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--ability-shadowstrike [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--ability-fortify [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--ability-wildcard [class*="bs-fx-ability__"],
.bs-page .bs-move-card__art--heal [class*="bs-fx-heal__"],
.bs-page .bs-move-card__art--counter [class*="bs-fx-counter__"] {
  display: none;
}

/* Vignette — softens panel edges so painted card doesn't look pasted in */
.bs-page .bs-move-card__art--strike::after,
.bs-page .bs-move-card__art--guard::after,
.bs-page .bs-move-card__art--ability::after,
.bs-page .bs-move-card__art--heal::after,
.bs-page .bs-move-card__art--counter::after,
.bs-page .bs-move-card__art--ability-powerstrike::after,
.bs-page .bs-move-card__art--ability-arcaneblast::after,
.bs-page .bs-move-card__art--ability-shadowstrike::after,
.bs-page .bs-move-card__art--ability-fortify::after,
.bs-page .bs-move-card__art--ability-wildcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
  z-index: 4;
}

/* ─── PER-MOVE IDLE ::before EFFECTS ─── */

/* Common ::before chassis */
.bs-page .bs-move-card__art--strike::before,
.bs-page .bs-move-card__art--guard::before,
.bs-page .bs-move-card__art--ability::before,
.bs-page .bs-move-card__art--heal::before,
.bs-page .bs-move-card__art--counter::before,
.bs-page .bs-move-card__art--ability-powerstrike::before,
.bs-page .bs-move-card__art--ability-arcaneblast::before,
.bs-page .bs-move-card__art--ability-shadowstrike::before,
.bs-page .bs-move-card__art--ability-fortify::before,
.bs-page .bs-move-card__art--ability-wildcard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Strike — warm radial breath echoing the painted shockwave's heat */
.bs-page .bs-move-card__art--strike::before {
  background: radial-gradient(ellipse 50% 70% at center,
                              rgba(255,140,70,0.25) 0%,
                              rgba(255,90,30,0.10) 40%,
                              transparent 70%);
  animation: bs-fx-radial-breath 3.8s ease-in-out infinite;
}

/* Guard — slow conic shimmer rotating around the painted shield rings */
.bs-page .bs-move-card__art--guard::before {
  background: conic-gradient(from 0deg,
                             transparent 0deg,
                             rgba(108,196,255,0.0) 60deg,
                             rgba(108,196,255,0.35) 120deg,
                             rgba(180,220,255,0.5) 145deg,
                             rgba(108,196,255,0.35) 170deg,
                             transparent 230deg,
                             transparent 360deg);
  animation: bs-fx-rotate 8s linear infinite;
  opacity: 0.55;
}

/* Ability — vertical light seam breathing where the painted sigil cracked open */
.bs-page .bs-move-card__art--ability::before {
  background: linear-gradient(90deg,
                              transparent 46%,
                              rgba(255,235,150,0.6) 49%,
                              rgba(255,255,220,0.85) 50%,
                              rgba(255,235,150,0.6) 51%,
                              transparent 54%);
  animation: bs-fx-seam-pulse 2.6s ease-in-out infinite;
}

/* Heal — gentle mint glow rising from the painted lotus core */
.bs-page .bs-move-card__art--heal::before {
  background: radial-gradient(ellipse 60% 80% at center 75%,
                              rgba(108,255,176,0.30) 0%,
                              rgba(180,255,200,0.12) 35%,
                              transparent 65%);
  animation: bs-fx-radial-breath 4.2s ease-in-out infinite;
}

/* Counter — gold spark twinkle at the painted blade-cross center */
.bs-page .bs-move-card__art--counter::before {
  background: radial-gradient(circle 4% at center,
                              rgba(255,255,220,0.95) 0%,
                              rgba(255,217,122,0.6) 40%,
                              transparent 80%);
  animation: bs-fx-twinkle 2.4s ease-in-out infinite;
}

/* Power Strike — heated radial pulse on the painted impact crater */
.bs-page .bs-move-card__art--ability-powerstrike::before {
  background: radial-gradient(ellipse 70% 50% at center 75%,
                              rgba(255,90,42,0.45) 0%,
                              rgba(220,40,20,0.18) 40%,
                              transparent 70%);
  animation: bs-fx-radial-breath 2.8s ease-in-out infinite;
}

/* Arcane Blast — magenta beam shimmer traveling left to right */
.bs-page .bs-move-card__art--ability-arcaneblast::before {
  background: linear-gradient(90deg,
                              transparent 0%,
                              rgba(255,80,200,0.0) 30%,
                              rgba(255,120,220,0.45) 50%,
                              rgba(255,80,200,0.0) 70%,
                              transparent 100%);
  background-size: 200% 100%;
  animation: bs-fx-sweep-x 3.2s linear infinite;
}

/* Shadow Strike — diagonal sweep echoing the painted afterimage trail */
.bs-page .bs-move-card__art--ability-shadowstrike::before {
  background: linear-gradient(110deg,
                              transparent 0%,
                              transparent 35%,
                              rgba(120,220,240,0.35) 50%,
                              rgba(180,240,255,0.5) 52%,
                              transparent 65%,
                              transparent 100%);
  background-size: 220% 100%;
  animation: bs-fx-sweep-x 4.4s linear infinite;
}

/* Fortify — slow copper-warm radial heartbeat from the painted armor core */
.bs-page .bs-move-card__art--ability-fortify::before {
  background: radial-gradient(ellipse 55% 75% at center,
                              rgba(220,140,80,0.30) 0%,
                              rgba(180,100,60,0.12) 40%,
                              transparent 70%);
  animation: bs-fx-radial-breath 5.2s ease-in-out infinite;
}

/* Wild Card — slow rotating conic shimmer suggesting wheel motion */
.bs-page .bs-move-card__art--ability-wildcard::before {
  background: conic-gradient(from 0deg,
                             transparent 0deg,
                             rgba(255,90,200,0.30) 90deg,
                             transparent 180deg,
                             rgba(255,217,122,0.25) 270deg,
                             transparent 360deg);
  animation: bs-fx-rotate 12s linear infinite;
  opacity: 0.55;
}

/* ─── Idle keyframe primitives ─── */
@keyframes bs-fx-radial-breath {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}
@keyframes bs-fx-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bs-fx-seam-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}
@keyframes bs-fx-twinkle {
  0%, 70%, 100% { opacity: 0.25; transform: scale(0.85); }
  35%           { opacity: 1.0;  transform: scale(1.4); }
}
@keyframes bs-fx-sweep-x {
  from { background-position: -100% 0; }
  to   { background-position:  100% 0; }
}

/* ─── BESPOKE PER-MOVE HOVER PARTICLES ─── */

/* Common chassis for all bespoke hover FX particles */
.bs-page .bs-hybrid-fx--ring,
.bs-page .bs-hybrid-fx--guard-ring,
.bs-page .bs-hybrid-fx--mote,
.bs-page .bs-hybrid-fx--blade,
.bs-page .bs-hybrid-fx--beam,
.bs-page .bs-hybrid-fx--glint,
.bs-page .bs-hybrid-fx--halo,
.bs-page .bs-hybrid-fx--token,
.bs-page .bs-hybrid-fx--eye-glow,
.bs-page .bs-hybrid-fx--heal-bloom {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0;
  animation-play-state: paused;
  animation-delay: var(--fx-delay, 0s);
  animation-iteration-count: infinite;
}

/* Type 1: RING — Strike, Power Strike */
.bs-page .bs-hybrid-fx--ring {
  top: 50%; left: 50%;
  width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--fx-color, rgba(255, 248, 220, 0.7));
  box-shadow: 0 0 14px var(--fx-glow, rgba(255, 220, 160, 0.55));
  transform: translate(-50%, -50%) scale(0.35);
  animation-name: bs-fx-ring-expand;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
}

/* Type 2: GUARD-RING — single big cyan ring flash */
.bs-page .bs-hybrid-fx--guard-ring {
  top: 50%; left: 50%;
  width: 75%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid rgba(108, 196, 255, 0.85);
  box-shadow: 0 0 20px rgba(108, 196, 255, 0.7),
              inset 0 0 14px rgba(108, 196, 255, 0.4);
  transform: translate(-50%, -50%) scale(0.5);
  animation-name: bs-fx-guard-ring-flash;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
}

/* Type 3: MOTE — Ability (orbits the breach) */
.bs-page .bs-hybrid-fx--mote {
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d4 0%, #ffd97a 50%, transparent 80%);
  box-shadow: 0 0 8px rgba(180, 124, 245, 0.85);
  animation-name: bs-fx-orbit;
  animation-duration: 1.8s;
  animation-timing-function: linear;
}

/* Type 4: BLADE — Counter (horizontal flash sweep) */
.bs-page .bs-hybrid-fx--blade {
  top: 50%;
  left: -25%;
  width: 35%;
  height: 8px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
                              transparent 0%,
                              rgba(255, 235, 180, 0.95) 50%,
                              transparent 100%);
  filter: blur(2px);
  animation-name: bs-fx-blade-sweep;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
}
.bs-page .bs-hybrid-fx--blade:nth-of-type(even) {
  animation-name: bs-fx-blade-sweep-rev;
}

/* Type 5: BEAM — Arcane Blast (right-edge magenta flash) */
.bs-page .bs-hybrid-fx--beam {
  top: 50%;
  right: 5%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 240, 0.95) 0%, rgba(255, 80, 200, 0.6) 35%, transparent 70%);
  transform: translateY(-50%);
  animation-name: bs-fx-point-flash-right;
  animation-duration: 1.1s;
  animation-timing-function: ease-out;
}

/* Type 6: GLINT — Shadow Strike (cyan center flash) */
.bs-page .bs-hybrid-fx--glint {
  top: 50%; left: 55%;
  width: 28%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 250, 255, 0.95) 0%, rgba(120, 220, 240, 0.5) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  animation-name: bs-fx-point-flash;
  animation-duration: 0.85s;
  animation-timing-function: ease-out;
}

/* Type 7: HALO — Fortify (single warm copper halo) */
.bs-page .bs-hybrid-fx--halo {
  top: 50%; left: 50%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(220, 140, 80, 0.8);
  box-shadow: 0 0 16px rgba(255, 170, 100, 0.55);
  transform: translate(-50%, -50%) scale(0.4);
  animation-name: bs-fx-ring-expand;
  animation-duration: 2.0s;
  animation-timing-function: ease-out;
}

/* Type 8: TOKEN — Wild Card (orbiting tokens) */
.bs-page .bs-hybrid-fx--token {
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 217, 122, 0.95);
  box-shadow: 0 0 8px rgba(255, 90, 200, 0.7);
  animation-name: bs-fx-token-orbit;
  animation-duration: 2.4s;
  animation-timing-function: linear;
}

/* Type 9: EYE-GLOW — Heal (painted amber eye-pods ignite) */
.bs-page .bs-hybrid-fx--eye-glow {
  top: var(--fx-y, 50%);
  left: var(--fx-x, 50%);
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
                              rgba(255, 240, 180, 1) 0%,
                              rgba(255, 180, 80, 0.85) 30%,
                              rgba(255, 120, 50, 0.4) 60%,
                              transparent 80%);
  transform: translate(-50%, -50%) scale(0.4);
  animation-name: bs-fx-eye-ignite;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
}

/* Type 10: HEAL-BLOOM — Heal (central warm bloom) */
.bs-page .bs-hybrid-fx--heal-bloom {
  top: 50%; left: 50%;
  width: 95%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
                              rgba(255, 220, 130, 0.6) 0%,
                              rgba(180, 255, 200, 0.25) 35%,
                              rgba(108, 255, 176, 0.10) 55%,
                              transparent 75%);
  transform: translate(-50%, -50%) scale(0.5);
  animation-name: bs-fx-heal-bloom;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
}

/* ─── Hover keyframe primitives ─── */
@keyframes bs-fx-ring-expand {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.35); border-width: 2px; }
  18%  { opacity: 0.9;  border-width: 1.6px; }
  55%  { opacity: 0.45; border-width: 1px; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.4);  border-width: 0.5px; }
}
@keyframes bs-fx-guard-ring-flash {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5);  border-width: 1px; }
  25%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.0);  border-width: 3px; }
  80%  { opacity: 0.4;  transform: translate(-50%, -50%) scale(1.05); border-width: 2px; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.1);  border-width: 1px; }
}
@keyframes bs-fx-orbit {
  0%   { opacity: 0;    transform: translate(-50%, -50%) rotate(calc(var(--fx-angle, 0deg))) translateX(35%) rotate(calc(-1 * var(--fx-angle, 0deg))); }
  15%  { opacity: 0.95; }
  85%  { opacity: 0.9; }
  100% { opacity: 0;    transform: translate(-50%, -50%) rotate(calc(var(--fx-angle, 0deg) + 360deg)) translateX(35%) rotate(calc(-1 * (var(--fx-angle, 0deg) + 360deg))); }
}
@keyframes bs-fx-token-orbit {
  0%   { opacity: 0;    transform: translate(-50%, -50%) rotate(calc(var(--fx-angle, 0deg))) translateX(40%) rotate(calc(-1 * var(--fx-angle, 0deg))); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0;    transform: translate(-50%, -50%) rotate(calc(var(--fx-angle, 0deg) + 360deg)) translateX(40%) rotate(calc(-1 * (var(--fx-angle, 0deg) + 360deg))); }
}
@keyframes bs-fx-blade-sweep {
  0%   { opacity: 0;    transform: translateY(-50%) translateX(0); }
  35%  { opacity: 1; }
  100% { opacity: 0;    transform: translateY(-50%) translateX(360%); }
}
@keyframes bs-fx-blade-sweep-rev {
  0%   { opacity: 0;    transform: translateY(-50%) translateX(360%); }
  35%  { opacity: 1; }
  100% { opacity: 0;    transform: translateY(-50%) translateX(0); }
}
@keyframes bs-fx-point-flash {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
  25%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes bs-fx-point-flash-right {
  0%   { opacity: 0;    transform: translateY(-50%) scale(0.4); }
  25%  { opacity: 1;    transform: translateY(-50%) scale(1.0); }
  100% { opacity: 0;    transform: translateY(-50%) scale(1.6); }
}
@keyframes bs-fx-eye-ignite {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
  30%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.0); }
  55%  { opacity: 0.8; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes bs-fx-heal-bloom {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  35%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.3); }
}

/* ─── HOVER TRIGGER ─── */
.bs-page .arena-move-btn:hover .bs-move-card__art--strike,
.bs-page .arena-move-btn:hover .bs-move-card__art--guard,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability,
.bs-page .arena-move-btn:hover .bs-move-card__art--heal,
.bs-page .arena-move-btn:hover .bs-move-card__art--counter,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-powerstrike,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-arcaneblast,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-shadowstrike,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-fortify,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-wildcard {
  filter: brightness(1.14) saturate(1.18);
  transition: filter 220ms ease;
}
.bs-page .arena-move-btn:hover .bs-hybrid-fx--ring,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--guard-ring,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--mote,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--blade,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--beam,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--glint,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--halo,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--token,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--eye-glow,
.bs-page .arena-move-btn:hover .bs-hybrid-fx--heal-bloom {
  animation-play-state: running;
}
.bs-page .arena-move-btn:hover .bs-move-card__art--strike::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--guard::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--heal::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--counter::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-powerstrike::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-arcaneblast::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-shadowstrike::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-fortify::before,
.bs-page .arena-move-btn:hover .bs-move-card__art--ability-wildcard::before {
  animation-duration: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .bs-page .bs-move-card__art--strike::before,
  .bs-page .bs-move-card__art--guard::before,
  .bs-page .bs-move-card__art--ability::before,
  .bs-page .bs-move-card__art--heal::before,
  .bs-page .bs-move-card__art--counter::before,
  .bs-page .bs-move-card__art--ability-powerstrike::before,
  .bs-page .bs-move-card__art--ability-arcaneblast::before,
  .bs-page .bs-move-card__art--ability-shadowstrike::before,
  .bs-page .bs-move-card__art--ability-fortify::before,
  .bs-page .bs-move-card__art--ability-wildcard::before,
  .bs-page .bs-hybrid-fx--ring,
  .bs-page .bs-hybrid-fx--guard-ring,
  .bs-page .bs-hybrid-fx--mote,
  .bs-page .bs-hybrid-fx--blade,
  .bs-page .bs-hybrid-fx--beam,
  .bs-page .bs-hybrid-fx--glint,
  .bs-page .bs-hybrid-fx--halo,
  .bs-page .bs-hybrid-fx--token,
  .bs-page .bs-hybrid-fx--eye-glow,
  .bs-page .bs-hybrid-fx--heal-bloom {
    animation: none;
  }
}