/* All art stays intact. These finite overlays share the image's coordinate space. */
.game-card--lol .lf-hint,
.game-card--lol .lf-action { opacity: 0; }
.game-card--lol .lf-spirit,
.game-card--lol .lf-spirit-trail,
.game-card--lol .lf-cut,
.game-card--lol .lf-thread,
.game-card--lol .lf-whirlwind,
.game-card--lol .lf-wind-scatter {
  transform-box: fill-box;
  transform-origin: center;
}
.game-card--lol .is-fx-hint .lf-kindred-hint { animation: lf-glint 720ms steps(7, end) both; }
.game-card--lol .is-fx-hint .lf-gwen-hint { animation: lf-glint 600ms steps(6, end) both; }
.game-card--lol .is-fx-hint .lf-yasuo-hint { animation: lf-wind-hint 620ms steps(7, end) both; }
.game-card--lol .is-fx-active .lf-spirit-left { animation: lf-spirit-left 1040ms steps(12, end) both; }
.game-card--lol .is-fx-active .lf-spirit-right { animation: lf-spirit-right 1040ms steps(12, end) both; }
.game-card--lol .is-fx-active .lf-spirit-trail { animation: lf-spirit-trail 1010ms steps(10, end) both; }
.game-card--lol .lf-cut-border { stroke: #359adb; stroke-width: 23; }
.game-card--lol .lf-cut-core { stroke: #e9ffff; stroke-width: 9; }
.game-card--lol .lf-cut-two .lf-cut-border { stroke: #50d5fa; stroke-width: 31; }
.game-card--lol .lf-cut-two .lf-cut-core { stroke-width: 12; }
.game-card--lol .is-fx-active .lf-cut-one { animation: lf-scissor-cut 340ms steps(6, end) both; }
.game-card--lol .is-fx-active .lf-cut-two { animation: lf-scissor-cut 380ms 280ms steps(7, end) both; }
.game-card--lol .is-fx-active .lf-thread-left { animation: lf-thread-left 480ms 290ms steps(7, end) both; }
.game-card--lol .is-fx-active .lf-thread-right { animation: lf-thread-right 480ms 290ms steps(7, end) both; }
.game-card--lol .is-fx-active .lf-sword-wind { animation: lf-sword-wind 430ms steps(8, end) both; }
.game-card--lol .is-fx-active .lf-whirlwind { animation: lf-whirlwind 870ms 280ms steps(12, end) both; }
.game-card--lol .is-fx-active .lf-wind-sweep { animation: lf-wind-sweep 220ms 280ms steps(5, end) 3; }
.game-card--lol .is-fx-active .lf-wind-scatter { animation: lf-wind-scatter 440ms 740ms steps(8, end) both; }

@keyframes lf-glint {
  0%, 100% { opacity: 0; }
  18%, 58% { opacity: .95; }
  38% { opacity: .45; }
  80% { opacity: .7; }
}
@keyframes lf-wind-hint {
  0% { opacity: 0; stroke-dasharray: 0 240; }
  28% { opacity: .85; }
  65% { opacity: .7; stroke-dasharray: 240 240; }
  100% { opacity: 0; stroke-dasharray: 240 240; }
}
@keyframes lf-spirit-left {
  0% { opacity: 0; transform: translate(25px, 21px) scale(.75); }
  18% { opacity: .9; }
  46% { opacity: 1; transform: translate(-14px, -24px) scale(1.08); }
  70% { opacity: .8; transform: translate(-8px, -10px) scale(1); }
  100% { opacity: 0; transform: translate(25px, 16px) scale(.7); }
}
@keyframes lf-spirit-right {
  0% { opacity: 0; transform: translate(-25px, 21px) scale(.75); }
  18% { opacity: .9; }
  46% { opacity: 1; transform: translate(14px, -24px) scale(1.08); }
  70% { opacity: .8; transform: translate(8px, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-25px, 16px) scale(.7); }
}
@keyframes lf-spirit-trail {
  0%, 10% { opacity: 0; transform: scale(.85); }
  35% { opacity: 1; transform: scale(1); }
  68% { opacity: .7; transform: scale(1.03) translateY(-14px); }
  100% { opacity: 0; transform: scale(1) translateY(-28px); }
}
@keyframes lf-scissor-cut {
  0% { opacity: 0; transform: scale(.45); }
  20% { opacity: 1; transform: scale(.92); }
  38% { opacity: 1; transform: scale(1.04); }
  66% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes lf-thread-left {
  0% { opacity: 0; transform: translate(14px, -6px); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-13px, 21px); }
}
@keyframes lf-thread-right {
  0% { opacity: 0; transform: translate(-12px, -7px); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(21px, 18px); }
}
@keyframes lf-sword-wind {
  0% { opacity: 0; stroke-dasharray: 0 700; }
  18% { opacity: .95; }
  55% { opacity: .95; stroke-dasharray: 700 700; }
  100% { opacity: 0; stroke-dasharray: 700 700; }
}
@keyframes lf-whirlwind {
  0% { opacity: 0; transform: scale(.45, .35) translateY(90px); }
  18% { opacity: .9; transform: scale(.85, .8) translateY(15px); }
  35% { opacity: .95; transform: scale(1); }
  63% { opacity: .9; transform: scale(.95, 1.08) translateY(-8px); }
  80% { opacity: .65; transform: scale(1.03, 1.08) translateY(-14px); }
  100% { opacity: 0; transform: scale(1.08, 1.1) translateY(-26px); }
}
@keyframes lf-wind-sweep {
  0% { opacity: .4; stroke-dasharray: 15 100; stroke-dashoffset: 0; }
  50% { opacity: 1; }
  100% { opacity: .4; stroke-dasharray: 15 100; stroke-dashoffset: -115; }
}
@keyframes lf-wind-scatter {
  0% { opacity: 0; transform: scale(.86); }
  24% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.04) translateY(-15px); }
}

@media (prefers-reduced-motion: reduce) {
  .game-card--lol .is-fx-active .lf-action,
  .game-card--lol .is-fx-active .lf-action * {
    animation: none !important;
    transform: none !important;
  }
  .game-card--lol .is-fx-active .lf-spirit,
  .game-card--lol .is-fx-active .lf-cut-two,
  .game-card--lol .is-fx-active .lf-yasuo-hint { opacity: .8; }
}