/* V1.35: material-specific combat aftermath. No viewport motion. */
.vfx-material-aftermath {
  --vfx-material-x: 50vw;
  --vfx-material-y: 50vh;
  --vfx-material-size: 180px;
  --vfx-material-life: 720ms;
  --vfx-material-angle: 0rad;
  --vfx-material-primary: #ff916f;
  --vfx-material-primary-soft: rgba(255, 145, 111, .34);
  --vfx-material-secondary: #fff1c0;
  --vfx-material-secondary-soft: rgba(255, 241, 192, .28);
  position: fixed;
  left: var(--vfx-material-x);
  top: var(--vfx-material-y);
  z-index: 115;
  width: var(--vfx-material-size);
  height: var(--vfx-material-size);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--vfx-material-angle));
  contain: layout style paint;
  isolation: isolate;
  mix-blend-mode: screen;
}

.vfx-material-aftermath > i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vfx-material-halo {
  inset: 13%;
  border: 1px solid var(--vfx-material-primary);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 12px var(--vfx-material-primary-soft),
    inset 0 0 18px var(--vfx-material-secondary-soft);
  animation: vfxMaterialHalo var(--vfx-material-life) linear both;
}

.vfx-material-signature {
  inset: 23%;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 2%, var(--vfx-material-secondary) 5%, var(--vfx-material-primary) 12%, transparent 54%),
    conic-gradient(from 12deg, transparent 0 8%, var(--vfx-material-primary-soft) 9%, transparent 11% 29%, var(--vfx-material-secondary-soft) 30%, transparent 33% 58%, var(--vfx-material-primary-soft) 59%, transparent 62% 84%, var(--vfx-material-secondary-soft) 85%, transparent 88%);
  filter: saturate(1.24);
  animation: vfxMaterialSignature var(--vfx-material-life) linear both;
}

.vfx-material-scar {
  inset: 31%;
  border-radius: 50%;
  opacity: 0;
  border: 1px dashed var(--vfx-material-secondary);
  box-shadow: 0 0 9px var(--vfx-material-primary-soft);
  animation: vfxMaterialScar var(--vfx-material-life) linear both;
}

.vfx-material-mote {
  left: 50%;
  top: 50%;
  width: clamp(2px, calc(var(--vfx-material-size) * .014), 4px);
  height: clamp(8px, calc(var(--vfx-material-size) * .075), 19px);
  margin: -4px 0 0 -1px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, var(--vfx-material-secondary), var(--vfx-material-primary));
  box-shadow: 0 0 7px var(--vfx-material-primary), 0 0 13px var(--vfx-material-secondary-soft);
  animation: vfxMaterialMote var(--vfx-material-life) var(--vfx-material-mote-delay) cubic-bezier(.1,.7,.2,1) both;
}

.vfx-material-aftermath.is-heavy .vfx-material-halo {
  border-width: 2px;
  filter: brightness(1.14) saturate(1.15);
}

/* Guard: geometric compression and a locked shield silhouette. */
.vfx-material-guard .vfx-material-halo {
  inset: 9%;
  border-width: 3px;
  border-radius: 26%;
  transform: rotate(45deg);
  animation-name: vfxMaterialHaloDiamond;
}

.vfx-material-guard .vfx-material-signature {
  inset: 22%;
  border-radius: 24%;
  background:
    linear-gradient(135deg, transparent 21%, var(--vfx-material-secondary) 22% 24%, transparent 25% 75%, var(--vfx-material-primary) 76% 78%, transparent 79%),
    radial-gradient(circle, rgba(255,255,255,.92), var(--vfx-material-primary) 14%, var(--vfx-material-primary-soft) 34%, transparent 66%);
  animation-name: vfxMaterialGuard;
}

.vfx-material-guard .vfx-material-scar {
  inset: 34%;
  border-style: solid;
  border-width: 2px;
  border-radius: 22%;
  transform: rotate(45deg);
  animation-name: vfxMaterialScarDiamond;
}

/* Fire: expanding combustion bloom with ember tails. */
.vfx-material-fire .vfx-material-halo {
  border-style: dashed;
  filter: blur(.2px) saturate(1.4);
}

.vfx-material-fire .vfx-material-signature {
  inset: 16%;
  background:
    radial-gradient(circle, #fff 0 2%, var(--vfx-material-secondary) 5%, var(--vfx-material-primary) 16%, transparent 48%),
    conic-gradient(from -12deg, transparent 0 5%, var(--vfx-material-primary) 6% 9%, transparent 11% 21%, var(--vfx-material-secondary-soft) 23% 27%, transparent 29% 42%, var(--vfx-material-primary-soft) 44% 50%, transparent 52% 70%, var(--vfx-material-secondary-soft) 72% 77%, transparent 79%);
  filter: blur(.35px) saturate(1.55);
  animation-name: vfxMaterialFire;
}

.vfx-material-fire .vfx-material-scar {
  border: 0;
  background: radial-gradient(ellipse at 50% 62%, var(--vfx-material-primary-soft), transparent 66%);
}

.vfx-material-fire .vfx-material-mote {
  width: 5px;
  height: 11px;
  border-radius: 70% 30% 60% 40%;
}

/* Frost: angular fracture, crisp concentric crystallization. */
.vfx-material-frost .vfx-material-halo {
  border-radius: 24%;
  transform: rotate(45deg);
  animation-name: vfxMaterialHaloDiamond;
}

.vfx-material-frost .vfx-material-signature {
  inset: 18%;
  border-radius: 0;
  clip-path: polygon(50% 0,61% 31%,88% 12%,69% 39%,100% 50%,69% 61%,88% 88%,61% 69%,50% 100%,39% 69%,12% 88%,31% 61%,0 50%,31% 39%,12% 12%,39% 31%);
  background:
    radial-gradient(circle, #fff 0 3%, var(--vfx-material-secondary) 8%, var(--vfx-material-primary) 18%, var(--vfx-material-primary-soft) 36%, transparent 67%);
  animation-name: vfxMaterialFrost;
}

.vfx-material-frost .vfx-material-scar {
  border-style: solid;
  border-radius: 22%;
  transform: rotate(45deg);
  animation-name: vfxMaterialScarDiamond;
}

/* Shadow: collapse inward before leaving a rotating void seal. */
.vfx-material-shadow .vfx-material-halo {
  border-style: dotted;
  box-shadow: 0 0 18px var(--vfx-material-primary-soft), inset 0 0 30px rgba(0,0,0,.78);
  animation-name: vfxMaterialShadowHalo;
}

.vfx-material-shadow .vfx-material-signature {
  inset: 14%;
  background:
    radial-gradient(circle, rgba(0,0,0,.94) 0 13%, var(--vfx-material-primary) 18%, var(--vfx-material-primary-soft) 26%, transparent 56%),
    repeating-conic-gradient(from 0deg, transparent 0 10deg, var(--vfx-material-secondary-soft) 12deg 15deg, transparent 17deg 31deg);
  filter: saturate(1.42) contrast(1.2);
  animation-name: vfxMaterialShadow;
}

.vfx-material-shadow .vfx-material-scar {
  inset: 25%;
  border-style: dotted;
  animation-name: vfxMaterialShadowScar;
}

/* Holy: ordered radial rays and a stable halo. */
.vfx-material-holy .vfx-material-signature {
  inset: 11%;
  background:
    radial-gradient(circle, #fff 0 3%, var(--vfx-material-secondary) 7%, var(--vfx-material-primary) 13%, transparent 42%),
    repeating-conic-gradient(from 0deg, var(--vfx-material-secondary-soft) 0 2deg, transparent 3deg 15deg);
  animation-name: vfxMaterialHoly;
}

.vfx-material-holy .vfx-material-scar {
  inset: 38%;
  border-style: solid;
  box-shadow: 0 0 14px var(--vfx-material-secondary), 0 0 28px var(--vfx-material-primary-soft);
}

/* Nature and venom: organic spores and a breathing ring. */
.vfx-material-nature .vfx-material-halo {
  border-style: dotted;
  border-width: 2px;
}

.vfx-material-nature .vfx-material-signature {
  inset: 14%;
  background:
    radial-gradient(circle at 34% 35%, var(--vfx-material-secondary) 0 3%, transparent 5%),
    radial-gradient(circle at 68% 31%, var(--vfx-material-primary) 0 4%, transparent 6%),
    radial-gradient(circle at 72% 68%, var(--vfx-material-secondary) 0 3%, transparent 5%),
    radial-gradient(circle at 31% 72%, var(--vfx-material-primary) 0 4%, transparent 6%),
    radial-gradient(circle, rgba(255,255,255,.88), var(--vfx-material-primary) 12%, var(--vfx-material-primary-soft) 31%, transparent 64%);
  animation-name: vfxMaterialNature;
}

.vfx-material-nature .vfx-material-mote {
  width: 7px;
  height: 7px;
  border-radius: 60% 40% 62% 38%;
}

/* Storm: broken angular pulse and fast electrical spokes. */
.vfx-material-storm .vfx-material-halo {
  border-style: dashed;
  border-radius: 18%;
  transform: rotate(45deg);
  animation-name: vfxMaterialHaloDiamond;
}

.vfx-material-storm .vfx-material-signature {
  inset: 12%;
  clip-path: polygon(48% 0,60% 35%,82% 14%,66% 43%,100% 46%,70% 57%,91% 87%,61% 68%,53% 100%,43% 66%,14% 88%,34% 58%,0 50%,34% 42%,13% 15%,42% 34%);
  background: radial-gradient(circle, #fff 0 4%, var(--vfx-material-secondary) 8%, var(--vfx-material-primary) 18%, var(--vfx-material-primary-soft) 34%, transparent 70%);
  animation-name: vfxMaterialStorm;
}

.vfx-material-storm .vfx-material-mote {
  height: 22px;
  width: 2px;
}

/* Bleed and physical: directional cuts remain readable and short. */
.vfx-material-bleed .vfx-material-halo,
.vfx-material-physical .vfx-material-halo {
  border-radius: 42% 58% 46% 54%;
}

.vfx-material-bleed .vfx-material-signature,
.vfx-material-physical .vfx-material-signature {
  inset: 8% 2%;
  border-radius: 0;
  background:
    linear-gradient(168deg, transparent 37%, var(--vfx-material-primary) 40%, #fff 43%, var(--vfx-material-secondary) 46%, transparent 49%),
    linear-gradient(194deg, transparent 45%, var(--vfx-material-primary-soft) 48%, var(--vfx-material-secondary) 50%, transparent 53%);
  animation-name: vfxMaterialCut;
}

.vfx-material-bleed .vfx-material-scar {
  inset: 28% 12%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(174deg, transparent 46%, var(--vfx-material-primary) 48% 51%, transparent 53%);
}

.vfx-material-arcane .vfx-material-halo {
  border-radius: 28%;
  transform: rotate(45deg);
  animation-name: vfxMaterialHaloDiamond;
}

.vfx-material-arcane .vfx-material-signature {
  inset: 15%;
  background:
    radial-gradient(circle, #fff 0 2%, var(--vfx-material-secondary) 6%, var(--vfx-material-primary) 13%, transparent 48%),
    repeating-conic-gradient(from 22deg, transparent 0 17deg, var(--vfx-material-primary-soft) 18deg 21deg, transparent 22deg 43deg);
  animation-name: vfxMaterialArcane;
}

@keyframes vfxMaterialHalo {
  0% { opacity: 0; transform: scale(.28); }
  15% { opacity: .86; transform: scale(.68); }
  48% { opacity: .48; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.32); }
}

@keyframes vfxMaterialHaloDiamond {
  0% { opacity: 0; transform: scale(.28) rotate(45deg); }
  15% { opacity: .86; transform: scale(.68) rotate(45deg); }
  48% { opacity: .48; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(1.32) rotate(45deg); }
}

@keyframes vfxMaterialSignature {
  0% { opacity: 0; transform: scale(.18) rotate(-12deg); }
  12% { opacity: .92; transform: scale(.68) rotate(-2deg); }
  38% { opacity: .56; transform: scale(1) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.18) rotate(24deg); }
}

@keyframes vfxMaterialScar {
  0%, 18% { opacity: 0; transform: scale(.42) rotate(-18deg); }
  34% { opacity: .72; transform: scale(.82) rotate(0); }
  72% { opacity: .34; transform: scale(1) rotate(16deg); }
  100% { opacity: 0; transform: scale(1.08) rotate(28deg); }
}

@keyframes vfxMaterialScarDiamond {
  0%, 18% { opacity: 0; transform: scale(.42) rotate(27deg); }
  34% { opacity: .72; transform: scale(.82) rotate(45deg); }
  72% { opacity: .34; transform: scale(1) rotate(61deg); }
  100% { opacity: 0; transform: scale(1.08) rotate(73deg); }
}

@keyframes vfxMaterialMote {
  0% { opacity: 0; transform: rotate(var(--vfx-material-mote-angle)) translateX(10px) scale(.2); }
  14% { opacity: .88; transform: rotate(var(--vfx-material-mote-angle)) translateX(22px) scale(1); }
  58% { opacity: .42; transform: rotate(var(--vfx-material-mote-angle)) translateX(calc(var(--vfx-material-mote-distance) * .72)) scale(.7); }
  100% { opacity: 0; transform: rotate(var(--vfx-material-mote-angle)) translateX(var(--vfx-material-mote-distance)) scale(.12); }
}

@keyframes vfxMaterialGuard {
  0% { opacity: 0; transform: scale(1.28) rotate(45deg); }
  18% { opacity: .94; transform: scale(.72) rotate(45deg); }
  52% { opacity: .56; transform: scale(.92) rotate(45deg); }
  100% { opacity: 0; transform: scale(1.04) rotate(45deg); }
}

@keyframes vfxMaterialFire {
  0% { opacity: 0; transform: scale(.12) rotate(-10deg); filter: brightness(2.4) blur(2px); }
  10% { opacity: 1; transform: scale(.66) rotate(0); filter: brightness(1.7) blur(0); }
  38% { opacity: .62; transform: scale(1.08) rotate(12deg); }
  78% { opacity: .42; transform: scale(1.28) rotate(22deg); }
  92% { opacity: .22; transform: scale(1.37) rotate(27deg); }
  100% { opacity: 0; transform: scale(1.42) rotate(30deg); filter: brightness(.9) blur(3px); }
}

@keyframes vfxMaterialFrost {
  0% { opacity: 0; transform: scale(.2) rotate(-18deg); filter: brightness(2); }
  13% { opacity: .98; transform: scale(.72) rotate(-4deg); }
  42% { opacity: .66; transform: scale(1) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.18) rotate(18deg); filter: brightness(.92) blur(1.2px); }
}

@keyframes vfxMaterialShadowHalo {
  0% { opacity: 0; transform: scale(1.42) rotate(-28deg); }
  20% { opacity: .72; transform: scale(.92) rotate(-8deg); }
  58% { opacity: .54; transform: scale(.68) rotate(18deg); }
  100% { opacity: 0; transform: scale(.44) rotate(52deg); }
}

@keyframes vfxMaterialShadow {
  0% { opacity: 0; transform: scale(1.48) rotate(-34deg); filter: blur(3px); }
  22% { opacity: .86; transform: scale(.92) rotate(-8deg); filter: blur(.4px); }
  62% { opacity: .68; transform: scale(.58) rotate(20deg); }
  78% { opacity: .58; transform: scale(.48) rotate(38deg); }
  92% { opacity: .34; transform: scale(.39) rotate(56deg); }
  100% { opacity: 0; transform: scale(.34) rotate(66deg); filter: blur(2px); }
}

@keyframes vfxMaterialShadowScar {
  0%, 24% { opacity: 0; transform: scale(1.22) rotate(-24deg); }
  44% { opacity: .74; transform: scale(.82) rotate(2deg); }
  78% { opacity: .38; transform: scale(.62) rotate(28deg); }
  100% { opacity: 0; transform: scale(.42) rotate(52deg); }
}

@keyframes vfxMaterialHoly {
  0% { opacity: 0; transform: scale(.18) rotate(-8deg); filter: brightness(2.5); }
  13% { opacity: 1; transform: scale(.72) rotate(0); filter: brightness(1.65); }
  46% { opacity: .58; transform: scale(1) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.26) rotate(16deg); filter: brightness(.9) blur(1.4px); }
}

@keyframes vfxMaterialNature {
  0% { opacity: 0; transform: scale(.24) rotate(-16deg); }
  18% { opacity: .9; transform: scale(.68) rotate(-4deg); }
  54% { opacity: .58; transform: scale(1.02) rotate(14deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(32deg); filter: blur(1.6px); }
}

@keyframes vfxMaterialStorm {
  0% { opacity: 0; transform: scale(.18) rotate(-8deg); filter: brightness(2.6); }
  7% { opacity: 1; transform: scale(.72) rotate(2deg); }
  14% { opacity: .38; transform: scale(.9) rotate(-3deg); }
  22% { opacity: .94; transform: scale(1) rotate(7deg); }
  52% { opacity: .42; transform: scale(1.12) rotate(14deg); }
  100% { opacity: 0; transform: scale(1.28) rotate(24deg); filter: brightness(.9) blur(1px); }
}

@keyframes vfxMaterialCut {
  0% { opacity: 0; transform: scaleX(.08) scaleY(.6); filter: brightness(2.4) blur(1.5px); }
  9% { opacity: 1; transform: scaleX(.84) scaleY(1); filter: brightness(1.6) blur(0); }
  22% { opacity: .72; transform: scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: scaleX(1.12) scaleY(.82); filter: brightness(.9) blur(1px); }
}

@keyframes vfxMaterialArcane {
  0% { opacity: 0; transform: scale(.18) rotate(-32deg); }
  16% { opacity: .96; transform: scale(.7) rotate(-8deg); }
  52% { opacity: .58; transform: scale(1) rotate(22deg); }
  100% { opacity: 0; transform: scale(1.14) rotate(66deg); }
}

@media (max-width: 720px) {
  .vfx-material-aftermath { opacity: .86; }
  .vfx-material-signature { inset: 25%; }
  .vfx-material-fire .vfx-material-signature,
  .vfx-material-frost .vfx-material-signature,
  .vfx-material-storm .vfx-material-signature { inset: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-material-aftermath { display: none !important; }
}