/* Promo strip theme «fighter» (SiteSetting promo_theme=fighter): an 8-bit,
   Dendy-style «car smash» bonus stage next to the poster card. GENERATED by
   scripts/make_fighter_promo.py — edit the script, not this file.
   Sprites are 1x PNG sheets scaled ×4 with image-rendering: pixelated; every
   moving part is a CSS animation on one shared 9.6s loop (step-end = frame by frame). */

.kz-promo--fighter {
  --sf-loop: 9.6s;
  --kz-amber: #fcd800;
  --kz-amber2: #fc9800;
  --kz-red: #d82800;
  --kz-red2: #a01800;
  font-family: "Press Start 2P", "Courier New", monospace;
  background:
    linear-gradient(180deg, rgba(12, 12, 56, 0) 0%, rgba(12, 12, 56, .78) 10%, rgba(12, 12, 56, .94) 30%, #1c1050 70%, #4c1448 100%);
}
.kz-promo--fighter .sf-city {
  position: absolute; left: 0; right: 0; bottom: 20px; height: 96px;
  background: url("../img/promo/fighter/skyline.png?v=3") repeat-x left bottom / 480px 96px;
  image-rendering: pixelated; opacity: .8;
}
.kz-promo--fighter .sf-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: #545454 url("../img/promo/fighter/ground.png?v=3") repeat-x left top / 32px 16px;
  image-rendering: pixelated; box-shadow: inset 0 4px 0 #000;
}

/* the stage: fighter, car, HUD, captions */
.sf-stage {
  position: absolute; right: 200px; bottom: 8px; width: 440px; height: 168px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  pointer-events: auto; cursor: pointer;
  animation: sf-shake var(--sf-loop) step-end infinite;
}
.sf-stage:focus-visible { outline: 3px dashed #fcd800; outline-offset: 4px; }
.sf-start {
  align-self: flex-start; margin-top: 6px; font-size: 8px; color: #fcd800; text-shadow: 2px 2px 0 #000;
  animation: sf-blink 1s steps(1, end) infinite; cursor: pointer;
}
@keyframes sf-blink { 0%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0; } }
.sf-fighter {
  position: absolute; left: 66px; bottom: 0; width: 120px; height: 136px;
  background: url("../img/promo/fighter/fighter.png?v=3") no-repeat 0 0 / 840px 136px;
  image-rendering: pixelated;
  animation: sf-fighter var(--sf-loop) step-end infinite;
}
.sf-car {
  position: absolute; left: 172px; bottom: 0; width: 232px; height: 104px;
  background: url("../img/promo/fighter/car.png?v=3") no-repeat 0 0 / 928px 104px;
  image-rendering: pixelated;
  animation: sf-car var(--sf-loop) step-end infinite;
}
.sf-spark {
  position: absolute; width: 52px; height: 52px; opacity: 0;
  background: url("../img/promo/fighter/spark.png?v=3") no-repeat 0 0 / 52px 52px;
  image-rendering: pixelated;
}
.sf-spark.h0, .sf-spark.h2 { left: 150px; bottom: 82px; }
.sf-spark.h1, .sf-spark.h3 { left: 150px; bottom: 56px; }
.sf-spark.h0 { animation: sf-spark-0 var(--sf-loop) step-end infinite; }
.sf-spark.h1 { animation: sf-spark-1 var(--sf-loop) step-end infinite; }
.sf-spark.h2 { animation: sf-spark-2 var(--sf-loop) step-end infinite; }
.sf-spark.h3 { animation: sf-spark-3 var(--sf-loop) step-end infinite; }
.sf-shard { position: absolute; left: 180px; bottom: 76px; opacity: 0; box-shadow: 2px 2px 0 #000; }
.sf-shard.h1, .sf-shard.h3 { bottom: 52px; }

/* HUD: life bars + KO, like the arcade cabinet */
.sf-hud {
  position: absolute; left: 150px; right: 0; top: 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  font-size: 8px; color: #fcfcfc; text-shadow: 2px 2px 0 #000;
}
.sf-bar { position: relative; height: 12px; background: #d82800; border: 2px solid #fcfcfc; box-shadow: 2px 2px 0 #000; }
.sf-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.sf-bar--p1 i { right: 0; width: 100%; background: #fcd800; }
.sf-bar--p2 i { left: 0; }
.sf-bar--p2 .lag { background: #fcfcfc; animation: sf-hp-lag var(--sf-loop) step-end infinite; }
.sf-bar--p2 .hp { background: #fcd800; animation: sf-hp var(--sf-loop) step-end infinite; }
.sf-ko { position: relative; font-size: 11px; color: #d82800; background: #fcd800; padding: 3px 4px; box-shadow: 2px 2px 0 #000; }
.sf-ko b { position: absolute; inset: 0; background: #d82800; color: #fcd800; padding: 3px 4px; font-weight: 400;
           animation: sf-ko var(--sf-loop) step-end infinite; }
.sf-name { grid-row: 2; font-size: 8px; }
.sf-name--p2 { grid-column: 3; text-align: right; }

/* big captions */
.sf-say {
  position: absolute; left: 150px; right: 0; top: 62px; text-align: center; opacity: 0;
  font-size: 18px; line-height: 1; color: #fcd800; letter-spacing: 1px;
  text-shadow: 3px 3px 0 #d82800, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 5px 5px 0 #000;
  white-space: nowrap;
}
.sf-say--bonus { animation: sf-say-bonus var(--sf-loop) step-end infinite; font-size: 14px; }
.sf-say--fight { animation: sf-say-fight var(--sf-loop) step-end infinite; font-size: 26px; top: 58px; }
.sf-say--perfect { animation: sf-say-perfect var(--sf-loop) step-end infinite; font-size: 20px; }

/* the poster card goes 8-bit too */
.kz-promo--fighter .kz-promo__cta {
  border-radius: 0; border: 4px solid #fcfcfc;
  background: #0c0c38;
  box-shadow: 0 0 0 4px #000, 8px 8px 0 4px rgba(0, 0, 0, .55);
  backdrop-filter: none;
}
.kz-promo--fighter .kz-promo__poster { border-radius: 0; box-shadow: 0 0 0 3px #000; background: #1c1050; }
.kz-promo--fighter .kz-promo__eyebrow {
  border-radius: 0; font-size: 8px; letter-spacing: 0; padding: 4px 6px; color: #000; text-transform: uppercase;
  box-shadow: 2px 2px 0 #000;
}
.kz-promo--fighter .kz-promo__title {
  font-size: 13px; line-height: 1.45; letter-spacing: 0; color: #fcd800;
  text-shadow: 2px 2px 0 #d82800, 3px 3px 0 #000;
}
.kz-promo--fighter .kz-promo__meta { font-family: Manrope, system-ui, sans-serif; color: #bcbcfc; }
.kz-promo--fighter .kz-promo__age { border-radius: 0; border-color: #bcbcfc; color: #fcfcfc; }
.kz-promo--fighter .kz-promo__btn {
  border-radius: 0; font-size: 9px; padding: 8px 10px; letter-spacing: 0;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 2px #000;
  animation: sf-press 1.2s steps(1, end) infinite;
}
@keyframes sf-press { 0%, 70% { transform: translate(0, 0); } 70.01%, 100% { transform: translate(2px, 2px); } }
.kz-promo--fighter .kz-promo__close { border-radius: 0; background: #000; border: 2px solid #fcfcfc; font-family: inherit; font-size: 12px; }

@media (max-width: 1240px) {
  .sf-stage { transform-origin: right bottom; scale: .72; right: 190px; }
}
@media (max-width: 960px) {
  .sf-stage { display: none; }
}
@media (max-width: 640px) {
  .kz-promo--fighter .kz-promo__title { font-size: 11px; }
  .kz-promo--fighter .kz-promo__btn { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-stage, .sf-stage * { animation: none !important; }
  .sf-say--fight, .sf-bar--p2 .hp, .sf-bar--p2 .lag { opacity: 1; width: 100%; }
}

.sf-shard.h0.n0 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-0-0 var(--sf-loop) linear infinite; }
.sf-shard.h0.n1 { width: 8px; height: 8px; background: #c81c14; animation: sf-shard-0-1 var(--sf-loop) linear infinite; }
.sf-shard.h0.n2 { width: 4px; height: 4px; background: #fcfcfc; animation: sf-shard-0-2 var(--sf-loop) linear infinite; }
.sf-shard.h0.n3 { width: 8px; height: 8px; background: #3cbcfc; animation: sf-shard-0-3 var(--sf-loop) linear infinite; }
.sf-shard.h0.n4 { width: 4px; height: 4px; background: #c81c14; animation: sf-shard-0-4 var(--sf-loop) linear infinite; }
.sf-shard.h0.n5 { width: 8px; height: 8px; background: #fcfcfc; animation: sf-shard-0-5 var(--sf-loop) linear infinite; }
.sf-shard.h0.n6 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-0-6 var(--sf-loop) linear infinite; }
.sf-shard.h1.n0 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-1-0 var(--sf-loop) linear infinite; }
.sf-shard.h1.n1 { width: 8px; height: 8px; background: #c81c14; animation: sf-shard-1-1 var(--sf-loop) linear infinite; }
.sf-shard.h1.n2 { width: 4px; height: 4px; background: #fcfcfc; animation: sf-shard-1-2 var(--sf-loop) linear infinite; }
.sf-shard.h1.n3 { width: 8px; height: 8px; background: #3cbcfc; animation: sf-shard-1-3 var(--sf-loop) linear infinite; }
.sf-shard.h1.n4 { width: 4px; height: 4px; background: #c81c14; animation: sf-shard-1-4 var(--sf-loop) linear infinite; }
.sf-shard.h1.n5 { width: 8px; height: 8px; background: #fcfcfc; animation: sf-shard-1-5 var(--sf-loop) linear infinite; }
.sf-shard.h1.n6 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-1-6 var(--sf-loop) linear infinite; }
.sf-shard.h2.n0 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-2-0 var(--sf-loop) linear infinite; }
.sf-shard.h2.n1 { width: 8px; height: 8px; background: #c81c14; animation: sf-shard-2-1 var(--sf-loop) linear infinite; }
.sf-shard.h2.n2 { width: 4px; height: 4px; background: #fcfcfc; animation: sf-shard-2-2 var(--sf-loop) linear infinite; }
.sf-shard.h2.n3 { width: 8px; height: 8px; background: #3cbcfc; animation: sf-shard-2-3 var(--sf-loop) linear infinite; }
.sf-shard.h2.n4 { width: 4px; height: 4px; background: #c81c14; animation: sf-shard-2-4 var(--sf-loop) linear infinite; }
.sf-shard.h2.n5 { width: 8px; height: 8px; background: #fcfcfc; animation: sf-shard-2-5 var(--sf-loop) linear infinite; }
.sf-shard.h2.n6 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-2-6 var(--sf-loop) linear infinite; }
.sf-shard.h3.n0 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-3-0 var(--sf-loop) linear infinite; }
.sf-shard.h3.n1 { width: 8px; height: 8px; background: #c81c14; animation: sf-shard-3-1 var(--sf-loop) linear infinite; }
.sf-shard.h3.n2 { width: 4px; height: 4px; background: #fcfcfc; animation: sf-shard-3-2 var(--sf-loop) linear infinite; }
.sf-shard.h3.n3 { width: 8px; height: 8px; background: #3cbcfc; animation: sf-shard-3-3 var(--sf-loop) linear infinite; }
.sf-shard.h3.n4 { width: 4px; height: 4px; background: #c81c14; animation: sf-shard-3-4 var(--sf-loop) linear infinite; }
.sf-shard.h3.n5 { width: 8px; height: 8px; background: #fcfcfc; animation: sf-shard-3-5 var(--sf-loop) linear infinite; }
.sf-shard.h3.n6 { width: 4px; height: 4px; background: #3cbcfc; animation: sf-shard-3-6 var(--sf-loop) linear infinite; }

@keyframes sf-fighter {
  0% { background-position-x: 0px; }
  20.833% { background-position-x: -120px; }
  25% { background-position-x: 0px; }
  31.25% { background-position-x: -240px; }
  35.417% { background-position-x: 0px; }
  41.667% { background-position-x: -120px; }
  45.833% { background-position-x: 0px; }
  52.083% { background-position-x: -240px; }
  56.25% { background-position-x: 0px; }
  58.333% { background-position-x: -360px; }
  97.917% { background-position-x: 0px; }
  100% { background-position-x: 0px; }
}

@keyframes sf-car {
  0% { background-position-x: 0px; }
  20.833% { background-position-x: -232px; }
  31.25% { background-position-x: -464px; }
  52.083% { background-position-x: -696px; }
  100% { background-position-x: -696px; }
}

@keyframes sf-hp {
  0% { width: 100%; }
  20.833% { width: 70%; }
  31.25% { width: 45%; }
  41.667% { width: 22%; }
  52.083% { width: 0%; }
  100% { width: 0%; }
}

@keyframes sf-hp-lag {
  0% { width: 100%; }
  27.083% { width: 70%; }
  37.5% { width: 45%; }
  47.917% { width: 22%; }
  58.333% { width: 0%; }
  100% { width: 0%; }
}

@keyframes sf-say-bonus {
  0% { opacity: 1; }
  12.5% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-say-fight {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  20.833% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-say-perfect {
  0% { opacity: 0; }
  62.5% { opacity: 1; }
  64.583% { opacity: 0; }
  66.667% { opacity: 1; }
  68.75% { opacity: 0; }
  70.833% { opacity: 1; }
  72.917% { opacity: 0; }
  75% { opacity: 1; }
  77.083% { opacity: 0; }
  79.167% { opacity: 1; }
  81.25% { opacity: 0; }
  83.333% { opacity: 1; }
  85.417% { opacity: 0; }
  87.5% { opacity: 1; }
  89.583% { opacity: 0; }
  91.667% { opacity: 1; }
  93.75% { opacity: 0; }
  95.833% { opacity: 1; }
  97.917% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-ko {
  0% { opacity: 0; }
  52.083% { opacity: 1; }
  54.167% { opacity: 0; }
  56.25% { opacity: 1; }
  58.333% { opacity: 0; }
  60.417% { opacity: 1; }
  62.5% { opacity: 0; }
  64.583% { opacity: 1; }
  66.667% { opacity: 0; }
  68.75% { opacity: 1; }
  70.833% { opacity: 0; }
  72.917% { opacity: 1; }
  75% { opacity: 0; }
  77.083% { opacity: 1; }
  79.167% { opacity: 0; }
  81.25% { opacity: 1; }
  83.333% { opacity: 0; }
  85.417% { opacity: 1; }
  87.5% { opacity: 0; }
  89.583% { opacity: 1; }
  91.667% { opacity: 0; }
  93.75% { opacity: 1; }
  95.833% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-shake {
  0% { transform: translate(0, 0); }
  20.833% { transform: translate(4px, -2px); }
  21.875% { transform: translate(-3px, 1px); }
  22.917% { transform: translate(0, 0); }
  31.25% { transform: translate(4px, -2px); }
  32.292% { transform: translate(-3px, 1px); }
  33.333% { transform: translate(0, 0); }
  41.667% { transform: translate(4px, -2px); }
  42.708% { transform: translate(-3px, 1px); }
  43.75% { transform: translate(0, 0); }
  52.083% { transform: translate(4px, -2px); }
  53.125% { transform: translate(-3px, 1px); }
  54.167% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes sf-spark-0 {
  0% { opacity: 0; }
  20.833% { opacity: 1; }
  22.917% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-0 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(44px, -31px) rotate(135deg); }
  27.5% { opacity: 0; transform: translate(74px, 37px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-1 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(29px, -38px) rotate(90deg); }
  27.5% { opacity: 0; transform: translate(48px, 26px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-2 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(44px, -32px) rotate(90deg); }
  27.5% { opacity: 0; transform: translate(74px, 21px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-3 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(-52px, -44px) rotate(90deg); }
  27.5% { opacity: 0; transform: translate(-87px, 52px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-4 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(27px, -64px) rotate(135deg); }
  27.5% { opacity: 0; transform: translate(45px, 46px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-5 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(46px, -67px) rotate(90deg); }
  27.5% { opacity: 0; transform: translate(77px, 37px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-0-6 {
  0%, 20.812% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20.833% { opacity: 1; transform: translate(0, 0) rotate(0); }
  24.167% { opacity: 1; transform: translate(48px, -57px) rotate(180deg); }
  27.5% { opacity: 0; transform: translate(80px, 41px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-spark-1 {
  0% { opacity: 0; }
  31.25% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-0 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(47px, -43px) rotate(90deg); }
  37.917% { opacity: 0; transform: translate(79px, 41px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-1 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(19px, -54px) rotate(180deg); }
  37.917% { opacity: 0; transform: translate(31px, 26px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-2 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(38px, -68px) rotate(90deg); }
  37.917% { opacity: 0; transform: translate(64px, 36px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-3 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(-71px, -64px) rotate(225deg); }
  37.917% { opacity: 0; transform: translate(-118px, 27px) rotate(450deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-4 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(18px, -65px) rotate(180deg); }
  37.917% { opacity: 0; transform: translate(30px, 38px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-5 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(26px, -34px) rotate(135deg); }
  37.917% { opacity: 0; transform: translate(44px, 22px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-1-6 {
  0%, 31.229% { opacity: 0; transform: translate(0, 0) rotate(0); }
  31.25% { opacity: 1; transform: translate(0, 0) rotate(0); }
  34.583% { opacity: 1; transform: translate(58px, -35px) rotate(90deg); }
  37.917% { opacity: 0; transform: translate(97px, 34px) rotate(180deg); }
  100% { opacity: 0; }
}

@keyframes sf-spark-2 {
  0% { opacity: 0; }
  41.667% { opacity: 1; }
  43.75% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-0 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(65px, -47px) rotate(180deg); }
  48.333% { opacity: 0; transform: translate(108px, 49px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-1 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(24px, -53px) rotate(135deg); }
  48.333% { opacity: 0; transform: translate(40px, 42px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-2 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(32px, -34px) rotate(135deg); }
  48.333% { opacity: 0; transform: translate(54px, 30px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-3 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(-48px, -59px) rotate(180deg); }
  48.333% { opacity: 0; transform: translate(-80px, 44px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-4 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(29px, -50px) rotate(135deg); }
  48.333% { opacity: 0; transform: translate(48px, 23px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-5 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(14px, -50px) rotate(180deg); }
  48.333% { opacity: 0; transform: translate(24px, 45px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-2-6 {
  0%, 41.646% { opacity: 0; transform: translate(0, 0) rotate(0); }
  41.667% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(41px, -43px) rotate(135deg); }
  48.333% { opacity: 0; transform: translate(68px, 40px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-spark-3 {
  0% { opacity: 0; }
  52.083% { opacity: 1; }
  54.167% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-0 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(74px, -55px) rotate(135deg); }
  58.75% { opacity: 0; transform: translate(123px, 49px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-1 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(32px, -38px) rotate(180deg); }
  58.75% { opacity: 0; transform: translate(53px, 35px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-2 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(44px, -67px) rotate(180deg); }
  58.75% { opacity: 0; transform: translate(74px, 45px) rotate(360deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-3 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(-53px, -38px) rotate(225deg); }
  58.75% { opacity: 0; transform: translate(-88px, 52px) rotate(450deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-4 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(19px, -33px) rotate(135deg); }
  58.75% { opacity: 0; transform: translate(31px, 27px) rotate(270deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-5 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(24px, -57px) rotate(225deg); }
  58.75% { opacity: 0; transform: translate(40px, 24px) rotate(450deg); }
  100% { opacity: 0; }
}

@keyframes sf-shard-3-6 {
  0%, 52.062% { opacity: 0; transform: translate(0, 0) rotate(0); }
  52.083% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55.417% { opacity: 1; transform: translate(65px, -68px) rotate(180deg); }
  58.75% { opacity: 0; transform: translate(108px, 49px) rotate(360deg); }
  100% { opacity: 0; }
}