/* V1.33: unified impact clarity. All motion is local to the hit point. */
html body:not(.maintenance-mode).vfx-screen-shake,
html body:not(.maintenance-mode).vfx-screen-shake-medium,
html body:not(.maintenance-mode).vfx-screen-shake-strong,
html body:not(.maintenance-mode) :is(.vfx-screen-shake, .vfx-screen-shake-medium, .vfx-screen-shake-strong) {
  animation: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) .card-vfx-impact {
  animation: vfxTargetImpactClarity 340ms cubic-bezier(.12, .78, .18, 1) both !important;
}

.vfx-local-impact-echo {
  --vfx-local-x: 50vw;
  --vfx-local-y: 50vh;
  --vfx-local-size: 150px;
  --vfx-local-life: 490ms;
  --vfx-local-edge: rgba(255, 232, 165, .94);
  --vfx-local-glow: rgba(115, 211, 255, .48);
  position: fixed;
  left: var(--vfx-local-x);
  top: var(--vfx-local-y);
  z-index: 119;
  width: var(--vfx-local-size);
  height: var(--vfx-local-size);
  pointer-events: none;
  transform: translate(-50%, -50%);
  contain: layout style paint;
  isolation: isolate;
  mix-blend-mode: screen;
}

.vfx-local-impact-echo > i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vfx-local-impact-flash {
  inset: 24%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .96) 0 5%, var(--vfx-local-edge) 10%, var(--vfx-local-glow) 34%, transparent 68%);
  filter: blur(.3px) saturate(1.24);
  animation: vfxLocalImpactFlash var(--vfx-local-life) cubic-bezier(.08, .82, .16, 1) both;
}

.vfx-local-impact-ring {
  inset: 19%;
  border: 2px solid var(--vfx-local-edge);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 8px var(--vfx-local-edge),
    0 0 22px var(--vfx-local-glow),
    inset 0 0 14px var(--vfx-local-glow);
}

.vfx-local-impact-ring-a {
  animation: vfxLocalImpactRingA var(--vfx-local-life) cubic-bezier(.1, .78, .18, 1) both;
}

.vfx-local-impact-ring-b {
  inset: 31%;
  border-width: 1px;
  animation: vfxLocalImpactRingB var(--vfx-local-life) 34ms cubic-bezier(.1, .8, .18, 1) both;
}

.vfx-local-impact-glint {
  inset: 8%;
  opacity: 0;
  animation: vfxLocalImpactGlint var(--vfx-local-life) steps(3, end) both;
}

.vfx-local-impact-glint::before,
.vfx-local-impact-glint::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--vfx-local-edge) 26%, rgba(255, 255, 255, .98) 50%, var(--vfx-local-glow) 74%, transparent);
  box-shadow: 0 0 10px var(--vfx-local-edge), 0 0 18px var(--vfx-local-glow);
  transform: translate(-50%, -50%);
}

.vfx-local-impact-glint::before {
  width: 100%;
  height: 2px;
}

.vfx-local-impact-glint::after {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--vfx-local-glow) 26%, rgba(255, 255, 255, .98) 50%, var(--vfx-local-edge) 74%, transparent);
}

.vfx-local-impact-echo.is-heavy .vfx-local-impact-ring {
  border-width: 3px;
  filter: brightness(1.14) saturate(1.2);
}

.vfx-impact-punctuation .vfx-impact-after-ring,
.vfx-impact-punctuation .vfx-impact-reticle {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

.vfx-impact-after-ring {
  inset: -4%;
  border: 1px solid var(--vfx-impact-primary);
  box-shadow: 0 0 18px var(--vfx-impact-primary-soft), inset 0 0 18px var(--vfx-impact-secondary-soft);
  animation: vfxImpactAfterRing var(--vfx-impact-life) 42ms cubic-bezier(.12, .76, .2, 1) both;
}

.vfx-impact-reticle {
  inset: 18%;
  border: 1px dashed var(--vfx-impact-secondary);
  box-shadow: 0 0 12px var(--vfx-impact-secondary-soft);
  animation: vfxImpactReticle var(--vfx-impact-long-life) cubic-bezier(.1, .8, .16, 1) both;
}

.vfx-impact-punctuation-standard .vfx-impact-vignette {
  background:
    radial-gradient(circle at var(--vfx-impact-x) var(--vfx-impact-y), var(--vfx-impact-primary-soft) 0, transparent 17%),
    radial-gradient(circle at var(--vfx-impact-x) var(--vfx-impact-y), transparent 0 22%, rgba(2, 4, 10, .08) 62%, rgba(1, 2, 6, .26) 100%);
}

.vfx-impact-punctuation-heavy .vfx-impact-after-ring,
.vfx-impact-punctuation-critical .vfx-impact-after-ring {
  border-width: 2px;
  filter: brightness(1.16) saturate(1.18);
}

.vfx-impact-punctuation-blocked .vfx-impact-reticle {
  border-style: solid;
  border-width: 3px;
  border-radius: 28%;
  transform: rotate(45deg);
}

@keyframes vfxTargetImpactClarity {
  0% { filter: brightness(1) saturate(1) contrast(1); }
  12% { filter: brightness(1.42) saturate(1.28) contrast(1.1) drop-shadow(0 0 8px rgba(255, 244, 205, .62)); }
  32% { filter: brightness(1.16) saturate(1.14) contrast(1.06) drop-shadow(0 0 14px rgba(112, 207, 255, .34)); }
  100% { filter: brightness(1) saturate(1) contrast(1); }
}

@keyframes vfxLocalImpactFlash {
  0% { opacity: 0; transform: scale(.18); filter: brightness(2.2) blur(2px); }
  10% { opacity: .98; transform: scale(.76); filter: brightness(1.36) blur(0); }
  28% { opacity: .54; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.34); filter: brightness(.9) blur(2px); }
}

@keyframes vfxLocalImpactRingA {
  0% { opacity: 0; transform: scale(.24); }
  14% { opacity: .96; transform: scale(.56); }
  52% { opacity: .52; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes vfxLocalImpactRingB {
  0% { opacity: 0; transform: scale(.2) rotate(0); }
  18% { opacity: .88; transform: scale(.64) rotate(22deg); }
  56% { opacity: .42; transform: scale(1) rotate(48deg); }
  100% { opacity: 0; transform: scale(1.28) rotate(78deg); }
}

@keyframes vfxLocalImpactGlint {
  0% { opacity: 0; transform: scale(.3) rotate(-8deg); }
  9% { opacity: 1; transform: scale(.86) rotate(0); }
  22% { opacity: .44; transform: scale(1.02) rotate(4deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(8deg); }
}

@keyframes vfxImpactAfterRing {
  0% { opacity: 0; transform: scale(.22); }
  17% { opacity: .88; transform: scale(.68); }
  54% { opacity: .46; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.56); }
}

@keyframes vfxImpactReticle {
  0% { opacity: 0; transform: scale(.3) rotate(-26deg); }
  16% { opacity: .86; transform: scale(.7) rotate(-6deg); }
  56% { opacity: .5; transform: scale(1) rotate(18deg); }
  100% { opacity: 0; transform: scale(1.24) rotate(46deg); }
}

@media (max-width: 720px) {
  .vfx-local-impact-echo { opacity: .88; }
  .vfx-local-impact-glint { inset: 14%; }
  .vfx-impact-reticle { inset: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-local-impact-echo,
  .vfx-impact-after-ring,
  .vfx-impact-reticle {
    display: none !important;
  }

  html body:not(.maintenance-mode) .card-vfx-impact {
    animation: none !important;
  }
}