/* V1.37 · State-change language. Every effect stays local to the affected combatant. */
.vfx-state-seal {
  --vfx-state-primary: #dffaff;
  --vfx-state-secondary: #76ddff;
  --vfx-state-soft: rgba(76, 205, 255, .32);
  position: fixed;
  left: 0;
  top: 0;
  width: var(--vfx-state-size);
  height: var(--vfx-state-size);
  transform: translate3d(
    calc(var(--vfx-state-x) - var(--vfx-state-size) / 2),
    calc(var(--vfx-state-y) - var(--vfx-state-size) / 2),
    0
  );
  z-index: 171;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  contain: layout style;
  color: var(--vfx-state-primary);
  filter: saturate(1.12) contrast(1.06);
  animation: vfx-state-root var(--vfx-state-life) cubic-bezier(.14,.78,.18,1) both;
}

.vfx-state-seal > * {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.vfx-state-seal.is-secondary {
  z-index: 170;
}

.vfx-state-seal.is-secondary .vfx-state-wash {
  inset: 17%;
}

.vfx-state-seal.is-secondary .vfx-state-label {
  padding: .2em .54em .24em;
  letter-spacing: .08em;
}

.vfx-state-seal.is-repeated .vfx-state-frame,
.vfx-state-seal.is-repeated .vfx-state-core,
.vfx-state-seal.is-repeated .vfx-state-label {
  animation-name: vfx-state-repeat-pulse;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.12,.82,.18,1);
  animation-fill-mode: both;
}

.vfx-state-wash {
  inset: 10%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.72) 0 3%, var(--vfx-state-soft) 13%, transparent 64%);
  animation: vfx-state-wash calc(var(--vfx-state-life) * .7) ease-out both;
}

.vfx-state-frame {
  inset: 15%;
  opacity: 0;
  border: 2px solid var(--vfx-state-primary);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, var(--vfx-state-soft) 100%);
  box-shadow:
    0 0 5px rgba(255,255,255,.82),
    0 0 18px var(--vfx-state-soft),
    inset 0 0 18px var(--vfx-state-soft);
  animation: vfx-state-frame var(--vfx-state-life) cubic-bezier(.12,.8,.18,1) both;
}

.vfx-state-core {
  left: 50%;
  top: 50%;
  width: 32%;
  height: 32%;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg) scale(.36);
  border: 2px solid var(--vfx-state-secondary);
  background: linear-gradient(135deg, transparent 38%, rgba(255,255,255,.42) 49% 51%, transparent 62%);
  box-shadow: 0 0 14px var(--vfx-state-soft), inset 0 0 12px var(--vfx-state-soft);
  animation: vfx-state-core calc(var(--vfx-state-life) * .84) cubic-bezier(.14,.8,.18,1) both;
}

.vfx-state-lock {
  left: 50%;
  top: 50%;
  width: 58%;
  height: 3px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--vfx-state-secondary) 18%, #fff 50%, var(--vfx-state-primary) 82%, transparent);
  box-shadow: 0 0 10px var(--vfx-state-soft);
  animation: vfx-state-lock-a calc(var(--vfx-state-life) * .68) cubic-bezier(.1,.84,.16,1) both;
}

.vfx-state-lock-a { transform: translate(-50%,-50%) rotate(0) scaleX(.08); }
.vfx-state-lock-b {
  transform: translate(-50%,-50%) rotate(90deg) scaleX(.08);
  animation-name: vfx-state-lock-b;
  animation-delay: 24ms;
}

.vfx-state-label {
  left: 50%;
  top: 3%;
  min-width: 3.5em;
  padding: .24em .65em .28em;
  opacity: 0;
  transform: translate3d(-50%,8px,0) scale(.78);
  border: 1px solid color-mix(in srgb, var(--vfx-state-primary) 74%, transparent);
  border-radius: 999px;
  color: #fffdf2;
  background: linear-gradient(180deg, rgba(13,19,28,.96), rgba(4,7,12,.9));
  box-shadow: 0 5px 18px rgba(0,0,0,.48), 0 0 16px var(--vfx-state-soft);
  font: 900 clamp(12px, calc(var(--vfx-state-size) * .072), 18px)/1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .15em;
  text-align: center;
  text-indent: .15em;
  text-shadow: 0 1px 3px #000, 0 0 8px var(--vfx-state-secondary);
  white-space: nowrap;
  animation: vfx-state-label var(--vfx-state-life) cubic-bezier(.14,.8,.2,1) both;
}

.vfx-state-mote {
  left: 50%;
  top: 50%;
  width: clamp(3px, calc(var(--vfx-state-size) * .02), 6px);
  height: clamp(8px, calc(var(--vfx-state-size) * .065), 18px);
  margin-left: -2px;
  margin-top: -6px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, #fff, var(--vfx-state-secondary) 46%, transparent);
  box-shadow: 0 0 8px var(--vfx-state-soft);
  animation: vfx-state-mote calc(var(--vfx-state-life) * .76) cubic-bezier(.12,.82,.18,1) var(--vfx-state-mote-delay) both;
}

/* Cleanse: open circle and outward release. */
.vfx-state-cleanse {
  --vfx-state-primary: #e8fdff;
  --vfx-state-secondary: #78e8ff;
  --vfx-state-soft: rgba(88, 224, 255, .34);
}

.vfx-state-cleanse .vfx-state-frame {
  inset: 13%;
  border-style: dashed;
  border-width: 2px;
  background:
    conic-gradient(from 20deg, transparent 0 8%, rgba(179,248,255,.3) 9% 12%, transparent 13% 24%, rgba(255,255,255,.34) 25% 29%, transparent 30%),
    radial-gradient(circle, rgba(152,241,255,.18), transparent 62%);
  animation-name: vfx-state-cleanse-frame;
}

.vfx-state-cleanse .vfx-state-core {
  width: 27%;
  height: 27%;
  border-radius: 50%;
  border-color: #fff;
  background: radial-gradient(circle, #fff 0 5%, rgba(129,231,255,.52) 22%, transparent 66%);
  animation-name: vfx-state-cleanse-core;
}

.vfx-state-cleanse .vfx-state-lock {
  width: 44%;
  height: 2px;
}

/* Silence: opposing brackets clamp the skill shut. */
.vfx-state-silence {
  --vfx-state-primary: #eadcff;
  --vfx-state-secondary: #a56cff;
  --vfx-state-soft: rgba(130, 73, 238, .4);
}

.vfx-state-silence .vfx-state-frame {
  inset: 18% 10%;
  border: 0;
  border-left: 5px solid var(--vfx-state-primary);
  border-right: 5px solid var(--vfx-state-primary);
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--vfx-state-soft), transparent 16% 84%, var(--vfx-state-soft)),
    linear-gradient(180deg, transparent 47%, rgba(255,255,255,.58) 49% 51%, transparent 53%);
  animation-name: vfx-state-silence-frame;
}

.vfx-state-silence .vfx-state-core {
  width: 42%;
  height: 22%;
  border: 2px solid var(--vfx-state-secondary);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.4);
  background: linear-gradient(168deg, transparent 43%, #fff 45% 51%, var(--vfx-state-secondary) 53% 58%, transparent 60%);
  animation-name: vfx-state-silence-core;
}

.vfx-state-silence .vfx-state-lock-a { height: 4px; transform: translate(-50%,-50%) rotate(-8deg) scaleX(.08); }
.vfx-state-silence .vfx-state-lock-b { height: 4px; transform: translate(-50%,-50%) rotate(8deg) scaleX(.08); }

/* Curse: serrated descending seal. */
.vfx-state-curse {
  --vfx-state-primary: #f1d7ff;
  --vfx-state-secondary: #d24dff;
  --vfx-state-soft: rgba(175, 48, 230, .38);
}

.vfx-state-curse .vfx-state-wash {
  background: radial-gradient(circle, rgba(220,129,255,.3), rgba(84,14,121,.26) 28%, transparent 66%);
}

.vfx-state-curse .vfx-state-frame {
  inset: 12%;
  border-radius: 0;
  clip-path: polygon(50% 0,61% 15%,78% 7%,82% 24%,100% 31%,88% 47%,100% 64%,80% 68%,74% 88%,57% 79%,45% 100%,34% 80%,14% 88%,12% 68%,0 56%,12% 41%,2% 22%,23% 20%,31% 2%);
  background: conic-gradient(from 14deg, rgba(209,77,255,.18), transparent 9% 18%, rgba(244,200,255,.22) 19% 24%, transparent 25% 39%, rgba(121,26,172,.26) 40% 48%, transparent 49%);
  animation-name: vfx-state-curse-frame;
}

.vfx-state-curse .vfx-state-core {
  width: 36%;
  height: 36%;
  border-color: #e88bff;
  transform: translate(-50%,-50%) rotate(45deg) scale(.32);
  background:
    linear-gradient(45deg, transparent 45%, #fff 47% 51%, transparent 53%),
    linear-gradient(-45deg, transparent 45%, var(--vfx-state-secondary) 47% 51%, transparent 53%);
  animation-name: vfx-state-curse-core;
}

/* Ward: hexagonal shield and stable inner barrier. */
.vfx-state-ward {
  --vfx-state-primary: #fff4bd;
  --vfx-state-secondary: #72e1ff;
  --vfx-state-soft: rgba(91, 210, 255, .38);
}

.vfx-state-ward .vfx-state-frame {
  inset: 8% 18% 12%;
  border: 3px solid var(--vfx-state-primary);
  border-bottom-width: 5px;
  border-radius: 0;
  clip-path: polygon(50% 0,94% 18%,86% 72%,50% 100%,14% 72%,6% 18%);
  background:
    linear-gradient(90deg, transparent 48.8%, rgba(255,255,255,.62) 49% 51%, transparent 51.2%),
    linear-gradient(160deg, rgba(94,223,255,.22), transparent 62%);
  animation-name: vfx-state-ward-frame;
}

.vfx-state-ward .vfx-state-core {
  width: 27%;
  height: 34%;
  border-color: #fff4bd;
  clip-path: polygon(50% 0,100% 24%,86% 78%,50% 100%,14% 78%,0 24%);
  background: linear-gradient(155deg, rgba(255,255,255,.35), rgba(79,203,255,.16));
  animation-name: vfx-state-ward-core;
}

/* Control: targeting reticle locks inward. */
.vfx-state-control {
  --vfx-state-primary: #d9f7ff;
  --vfx-state-secondary: #ff71d5;
  --vfx-state-soft: rgba(255, 83, 196, .34);
}

.vfx-state-control .vfx-state-frame {
  inset: 10%;
  border-color: var(--vfx-state-secondary);
  border-style: dotted;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.42) 49.5% 50.5%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.42) 49.5% 50.5%, transparent 51%);
  animation-name: vfx-state-control-frame;
}

.vfx-state-control .vfx-state-core {
  width: 38%;
  height: 38%;
  border-radius: 50%;
  border-color: var(--vfx-state-secondary);
  background: radial-gradient(circle, #fff 0 3%, rgba(255,93,207,.3) 5% 18%, transparent 20%);
  animation-name: vfx-state-control-core;
}

/* Boon: rising crown/chevron language. */
.vfx-state-boon {
  --vfx-state-primary: #fff3b4;
  --vfx-state-secondary: #67ffae;
  --vfx-state-soft: rgba(78, 244, 154, .3);
}

.vfx-state-boon .vfx-state-frame {
  inset: 17%;
  border-radius: 50% 50% 44% 44%;
  border-color: #c8ffd7;
  background: conic-gradient(from 30deg, transparent, rgba(103,255,174,.24), transparent 18% 48%, rgba(255,239,164,.2), transparent 68%);
  animation-name: vfx-state-boon-frame;
}

.vfx-state-boon .vfx-state-core {
  width: 40%;
  height: 30%;
  border: 0;
  transform: translate(-50%,-50%) scale(.4);
  clip-path: polygon(0 100%,12% 24%,38% 58%,50% 0,62% 58%,88% 24%,100% 100%);
  background: linear-gradient(180deg, #fff9c4, #5dffaf 78%);
  box-shadow: none;
  filter: drop-shadow(0 0 10px var(--vfx-state-soft));
  animation-name: vfx-state-boon-core;
}

.vfx-state-boon .vfx-state-lock { transform: translate(-50%,-50%) rotate(90deg) scaleX(.08); }
.vfx-state-boon .vfx-state-lock-b { display: none; }

/* Counter: iris closes around the predicted action. */
.vfx-state-counter {
  --vfx-state-primary: #e1fbff;
  --vfx-state-secondary: #78dfff;
  --vfx-state-soft: rgba(77, 202, 255, .4);
}

.vfx-state-counter .vfx-state-frame {
  inset: 16% 7%;
  border-radius: 50% 12% 50% 12%;
  transform: rotate(45deg) scale(.46);
  border-color: var(--vfx-state-primary);
  background: radial-gradient(circle, rgba(255,240,163,.28), rgba(97,217,255,.18) 34%, transparent 66%);
  animation-name: vfx-state-counter-frame;
}

.vfx-state-counter .vfx-state-core {
  width: 30%;
  height: 30%;
  border-radius: 50%;
  border-color: #fff2a0;
  background: radial-gradient(circle, #09121c 0 17%, #fff5b0 19% 25%, #68dfff 27% 44%, transparent 46%);
  animation-name: vfx-state-counter-core;
}

/* Execution: decisive red-black cut with a brief gold edge. */
.vfx-state-execution {
  --vfx-state-primary: #ffe5a3;
  --vfx-state-secondary: #ff3e3a;
  --vfx-state-soft: rgba(255, 48, 43, .48);
}

.vfx-state-execution .vfx-state-wash {
  inset: 0;
  background: radial-gradient(circle, rgba(255,233,166,.34) 0 4%, rgba(255,42,38,.28) 14%, rgba(5,0,0,.4) 42%, transparent 69%);
  animation-name: vfx-state-execution-wash;
}

.vfx-state-execution .vfx-state-frame {
  inset: 6%;
  border-radius: 0;
  border: 3px solid #ff5a4f;
  clip-path: polygon(50% 0,58% 17%,79% 4%,82% 25%,100% 32%,86% 50%,100% 68%,80% 72%,76% 96%,56% 83%,50% 100%,42% 82%,19% 96%,19% 73%,0 65%,14% 49%,0 30%,22% 24%,22% 3%,42% 17%);
  background: radial-gradient(circle, transparent 42%, rgba(255,52,47,.24) 66%, transparent 68%);
  animation-name: vfx-state-execution-frame;
}

.vfx-state-execution .vfx-state-core {
  width: 74%;
  height: 5px;
  border: 0;
  transform: translate(-50%,-50%) rotate(-38deg) scaleX(.05);
  background: linear-gradient(90deg, transparent, #ff342f 13%, #fff2b0 48% 52%, #ff342f 87%, transparent);
  box-shadow: 0 0 8px #fff2b0, 0 0 24px rgba(255,45,40,.78);
  animation-name: vfx-state-execution-core;
}

.vfx-state-execution .vfx-state-lock-a {
  width: 62%;
  height: 3px;
  transform: translate(-50%,-50%) rotate(38deg) scaleX(.05);
}

.vfx-state-execution .vfx-state-lock-b { display: none; }
.vfx-state-execution .vfx-state-label { top: 3%; bottom: auto; }

@keyframes vfx-state-root {
  0% { opacity: 0; filter: saturate(.78) brightness(1.36); }
  8% { opacity: 1; filter: saturate(1.16) brightness(1.08); }
  72% { opacity: .92; }
  100% { opacity: 0; filter: saturate(.9) brightness(.86); }
}

@keyframes vfx-state-repeat-pulse {
  0% { opacity: .32; filter: brightness(1); }
  28% { opacity: 1; filter: brightness(1.34); }
  100% { opacity: .9; filter: brightness(1); }
}

@keyframes vfx-state-wash {
  0% { opacity: 0; transform: scale(.28); }
  14% { opacity: .9; transform: scale(.78); }
  46% { opacity: .34; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes vfx-state-frame {
  0% { opacity: 0; transform: rotate(-16deg) scale(.42); }
  16% { opacity: 1; transform: rotate(2deg) scale(1.06); }
  54% { opacity: .78; transform: rotate(8deg) scale(.96); }
  100% { opacity: 0; transform: rotate(24deg) scale(1.18); }
}

@keyframes vfx-state-core {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(.32); }
  18% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(1.08); }
  60% { opacity: .74; transform: translate(-50%,-50%) rotate(135deg) scale(.94); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(225deg) scale(1.16); }
}

@keyframes vfx-state-lock-a {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0) scaleX(.08); }
  20% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scaleX(1.08); }
  58% { opacity: .62; transform: translate(-50%,-50%) rotate(0) scaleX(.88); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(0) scaleX(1.24); }
}

@keyframes vfx-state-lock-b {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(90deg) scaleX(.08); }
  20% { opacity: .9; transform: translate(-50%,-50%) rotate(90deg) scaleX(1); }
  58% { opacity: .54; transform: translate(-50%,-50%) rotate(90deg) scaleX(.82); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(90deg) scaleX(1.16); }
}

@keyframes vfx-state-label {
  0% { opacity: 0; transform: translate3d(-50%,9px,0) scale(.76); }
  16% { opacity: 1; transform: translate3d(-50%,0,0) scale(1.06); }
  30% { opacity: 1; transform: translate3d(-50%,0,0) scale(1); }
  74% { opacity: .94; transform: translate3d(-50%,-2px,0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%,-12px,0) scale(.94); }
}

@keyframes vfx-state-mote {
  0% { opacity: 0; transform: rotate(var(--vfx-state-mote-angle)) translateY(0) scale(.3); }
  18% { opacity: .94; transform: rotate(var(--vfx-state-mote-angle)) translateY(calc(var(--vfx-state-mote-distance) * -.34)) scale(1); }
  62% { opacity: .58; transform: rotate(var(--vfx-state-mote-angle)) translateY(calc(var(--vfx-state-mote-distance) * -.78)) scale(.76); }
  100% { opacity: 0; transform: rotate(var(--vfx-state-mote-angle)) translateY(calc(var(--vfx-state-mote-distance) * -1)) scale(.32); }
}

@keyframes vfx-state-cleanse-frame {
  0% { opacity: 0; transform: rotate(-34deg) scale(.42); }
  18% { opacity: 1; transform: rotate(4deg) scale(.92); }
  58% { opacity: .78; transform: rotate(26deg) scale(1.04); }
  100% { opacity: 0; transform: rotate(62deg) scale(1.3); }
}

@keyframes vfx-state-cleanse-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(.88); }
  52% { opacity: .68; transform: translate(-50%,-50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.7); }
}

@keyframes vfx-state-silence-frame {
  0% { opacity: 0; transform: scaleX(1.5) scaleY(.7); }
  14% { opacity: 1; transform: scaleX(.76) scaleY(1.08); }
  26% { opacity: .96; transform: scaleX(1) scaleY(1); }
  76% { opacity: .72; transform: scaleX(.92) scaleY(1); }
  100% { opacity: 0; transform: scaleX(.62) scaleY(.92); }
}

@keyframes vfx-state-silence-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.28); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
  64% { opacity: .78; transform: translate(-50%,-50%) scale(.96); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.72); }
}

@keyframes vfx-state-curse-frame {
  0% { opacity: 0; transform: translateY(-12%) rotate(-18deg) scale(1.28); }
  18% { opacity: 1; transform: translateY(0) rotate(4deg) scale(.94); }
  60% { opacity: .8; transform: translateY(5%) rotate(16deg) scale(1.02); }
  100% { opacity: 0; transform: translateY(18%) rotate(38deg) scale(.76); }
}

@keyframes vfx-state-curse-core {
  0% { opacity: 0; transform: translate(-50%,-70%) rotate(0) scale(1.4); }
  20% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(.96); }
  64% { opacity: .72; transform: translate(-50%,-42%) rotate(128deg) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%,-20%) rotate(210deg) scale(.62); }
}

@keyframes vfx-state-ward-frame {
  0% { opacity: 0; transform: scaleX(1.36) scaleY(.64); }
  14% { opacity: 1; transform: scaleX(.86) scaleY(1.08); }
  27% { opacity: .98; transform: scale(1); }
  72% { opacity: .78; transform: scale(.98); }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes vfx-state-ward-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.42); }
  17% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  60% { opacity: .82; transform: translate(-50%,-50%) scale(.96); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.18); }
}

@keyframes vfx-state-control-frame {
  0% { opacity: 0; transform: rotate(-72deg) scale(1.34); }
  18% { opacity: 1; transform: rotate(6deg) scale(.94); }
  64% { opacity: .78; transform: rotate(24deg) scale(1.02); }
  100% { opacity: 0; transform: rotate(78deg) scale(.7); }
}

@keyframes vfx-state-control-core {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-42deg) scale(1.5); }
  20% { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(.9); }
  64% { opacity: .74; transform: translate(-50%,-50%) rotate(26deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(68deg) scale(.5); }
}

@keyframes vfx-state-boon-frame {
  0% { opacity: 0; transform: translateY(16%) scale(.58); }
  18% { opacity: 1; transform: translateY(0) scale(1.04); }
  64% { opacity: .76; transform: translateY(-7%) scale(.98); }
  100% { opacity: 0; transform: translateY(-24%) scale(1.14); }
}

@keyframes vfx-state-boon-core {
  0% { opacity: 0; transform: translate(-50%,-24%) scale(.42); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  64% { opacity: .76; transform: translate(-50%,-64%) scale(.98); }
  100% { opacity: 0; transform: translate(-50%,-108%) scale(1.18); }
}

@keyframes vfx-state-counter-frame {
  0% { opacity: 0; transform: rotate(45deg) scaleX(1.42) scaleY(.28); }
  18% { opacity: 1; transform: rotate(45deg) scaleX(.94) scaleY(1.06); }
  54% { opacity: .84; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scaleX(1.18) scaleY(.3); }
}

@keyframes vfx-state-counter-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(.92); }
  72% { opacity: .84; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
}

@keyframes vfx-state-execution-wash {
  0% { opacity: 0; transform: scale(.16); }
  10% { opacity: 1; transform: scale(.76); }
  28% { opacity: .46; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes vfx-state-execution-frame {
  0% { opacity: 0; transform: rotate(-28deg) scale(.22); }
  12% { opacity: 1; transform: rotate(4deg) scale(1.12); }
  24% { opacity: .96; transform: rotate(0) scale(.92); }
  68% { opacity: .74; transform: rotate(0) scale(1.02); }
  100% { opacity: 0; transform: rotate(12deg) scale(1.28); }
}

@keyframes vfx-state-execution-core {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-38deg) scaleX(.04); }
  14% { opacity: 1; transform: translate(-50%,-50%) rotate(-38deg) scaleX(1.12); }
  42% { opacity: .9; transform: translate(-50%,-50%) rotate(-38deg) scaleX(.94); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-38deg) scaleX(1.3); }
}

@media (max-width: 720px) {
  .vfx-state-seal { filter: saturate(1.08) contrast(1.04); }
  .vfx-state-label { top: 1%; }
  .vfx-state-execution .vfx-state-label { top: 1%; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-state-seal,
  .vfx-state-seal > * {
    animation-duration: 180ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}