.fx { position: absolute; pointer-events: none; opacity: 0; }
.fx i { position: absolute; display: block; pointer-events: none; }

.pillar-evo { position: relative; display: block; line-height: 0; }
.fx--evolve { --th-accent: var(--spot-c); inset: 0; background: var(--th-accent);
  -webkit-mask: url(/assets/images/eevee/133.png) center / contain no-repeat; mask: url(/assets/images/eevee/133.png) center / contain no-repeat; }

.h-evo-row > li { position: relative; }
.h-evo-row .fx--swift { left: 0; right: 0; top: -2px; height: 7px; }
.h-evo-row .fx--swift i { top: 0; right: calc(var(--n) * 12px); width: 7px; height: 7px; background: var(--th-soft); transform: rotate(45deg); }
.h-evo-row .fx--swift i:nth-child(n + 4) { display: none; }
.h-evo-row .fx--swift i:nth-child(2) { opacity: .6; }
.h-evo-row .fx--swift i:nth-child(3) { opacity: .3; }

.trip-road .fx--swift { inset: 0; opacity: 1; }
.trip-road .fx--swift i { top: 1px; left: calc(var(--n) * 20% + 8%); width: 8px; height: 8px; background: var(--th-accent); opacity: 0; transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .fx--evolve.fx-on { animation: fx-evolve 720ms steps(1, end) both; }
  .pillar-evo:has(> .fx-on:not(.fx-done)) > img { animation: fx-evolve-img 720ms steps(1, end) both, fx-land var(--m-lock, 240ms) steps(4, end) 720ms; }
  .h-evo-row .fx--swift.fx-on { animation: fx-run 640ms steps(8, end) calc(var(--fx-i, 0) * 90ms) both; }
  .trip-road .fx--swift.fx-on i { animation: fx-pop 560ms steps(2, end) calc(var(--n) * 500ms + 220ms) both; }
}
@keyframes fx-evolve { 0% { opacity: 1; } 25% { opacity: 0; } 40% { opacity: 1; } 58% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-evolve-img { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: 0; } 58% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fx-land { 0% { transform: translateY(-8px); } 75% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes fx-run { 0% { opacity: 0; transform: translateX(-100%); } 1% { opacity: 1; transform: translateX(-100%); } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes fx-pop { 0% { opacity: 0; transform: translateY(0) rotate(45deg); } 15% { opacity: 1; transform: translateY(-6px) rotate(45deg); } 70% { opacity: 1; transform: translateY(-12px) rotate(45deg); } 100% { opacity: 0; transform: translateY(-16px) rotate(45deg); } }