/* ============================================================
   LegacyMark — header lockup + stick-fencer bouts
   Import once, e.g. from src/layouts/Layout.astro.
   Replaces the old .legacy-capsule rules.
   Brand tokens: #16182A bar, #FFC400 gold, Oswald display,
   Pinyon Script accent (already loaded site-wide).
   ============================================================ */

.fm-lockup { display: flex; align-items: center; gap: 16px; min-width: 0 }

/* ---- logo slot: wordmark and crest share one box, so width never changes ---- */
.fm-logo { position: relative; flex: none; width: 66px; height: 66px; display: block }
.fm-logo img { position: absolute; transition: opacity .7s cubic-bezier(.2,.7,.3,1) }
.fm-logo-word {
  inset: 0; width: 66px; height: 66px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 3px; box-sizing: border-box;
}
/* crest is portrait (3318x4693) — shown at its own ratio, never square-cropped */
.fm-logo-crest { top: 2px; left: 11px; width: 44px; height: 62px; object-fit: cover; border-radius: 3px }
[data-logo="0"] .fm-logo-word  { opacity: 1 }
[data-logo="0"] .fm-logo-crest { opacity: 0 }
[data-logo="1"] .fm-logo-word  { opacity: 0 }
[data-logo="1"] .fm-logo-crest { opacity: 1 }

.fm-rule { flex: none; width: 1px; height: 44px; background: rgba(255,255,255,.16) }

/* ---- legacy mark: three faces in a fixed slot, so the nav never shifts ---- */
.fm-mark { position: relative; flex: none; width: 176px; height: 56px }
.fm-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transition: opacity .7s cubic-bezier(.2,.7,.3,1);
  font-family: Oswald, sans-serif;
}
[data-face="0"] .fm-face-1,
[data-face="1"] .fm-face-2,
[data-face="2"] .fm-face-3 { opacity: 1 }

.fm-face-1 { gap: 3px }
.fm-face-1-top { display: flex; align-items: baseline; gap: 7px }
.fm-face-1 .fm-num   { font-size: 30px; font-weight: 700; line-height: .84; letter-spacing: -.035em; color: #FFC400 }
.fm-face-1 .fm-years { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff }
.fm-sub {
  font-size: 10.5px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.6); line-height: 1.25;
}
.fm-sub b { color: rgba(255,196,0,.95); font-weight: 600 }

.fm-face-2 { gap: 4px }
.fm-face-2-top { display: flex; align-items: baseline; gap: 7px }
.fm-face-2 .fm-num   { font-size: 34px; font-weight: 700; line-height: .8; letter-spacing: -.03em; color: #FFC400 }
.fm-face-2 .fm-years { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff }
.fm-script { font-family: 'Pinyon Script', cursive; font-size: 17px; line-height: 1; color: rgba(255,196,0,.86) }

.fm-face-3 {
  gap: 3px; font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
}
.fm-line-lead { color: #FFC400; font-weight: 700; font-size: 16px; letter-spacing: .04em }

/* ---- bout slot: fills the dead space between the mark and the nav ---- */
.fm-bout-slot { flex: 1 1 auto; min-width: 200px; height: 76px; overflow: hidden; cursor: pointer }
.fm-bout-slot:focus-visible { outline: 1px solid rgba(255,196,0,.6); outline-offset: -2px }
.fm-bout { display: block }

/* ---- mobile ---- */
@media (max-width: 900px) {
  .fm-lockup { gap: 11px }
  .fm-logo, .fm-logo-word { width: 50px; height: 50px }
  .fm-logo-crest { top: 1px; left: 8px; width: 34px; height: 48px }
  .fm-rule { height: 36px }
  .fm-mark { width: 128px; height: 46px }
  .fm-face-1 .fm-num { font-size: 24px }
  .fm-face-1 .fm-years { font-size: 11px; letter-spacing: .16em }
  .fm-sub { font-size: 9px; letter-spacing: .12em }
  .fm-face-2 .fm-num { font-size: 26px }
  .fm-face-2 .fm-years { font-size: 10px; letter-spacing: .18em }
  .fm-script { font-size: 14px }
  .fm-face-3 { font-size: 9px; letter-spacing: .14em }
  .fm-line-lead { font-size: 13px }
  .fm-bout-slot { min-width: 72px; height: 68px }
}

/* ============================================================
   Bout choreography — one keyframe set, both breakpoints.
   Amplitude is set per SVG via --kx / --ky:
     desktop  --kx: 1.7   --ky: 1
     mobile   --kx: .4    --ky: .4
   Colour system (no new colours, red stays reserved for the CTA):
     near fencer  white 58%      far fencer  white 42%
     blades/guards white 85%     spark  #fff     scoring touch  #FFC400
   ============================================================ */

.fm-bout g { transform-box: view-box }
  .fm-bout .scene { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.3,1) }
  .fm-bout[data-w="0"] .foil,
  .fm-bout[data-w="1"] .sabre,
  .fm-bout[data-w="2"] .epee,
  .fm-bout[data-w="done"] .epee,
  .fm-bout[data-w="park"] .epee { opacity: 1 }
  .fm-bout .fA, .fm-bout .fB, .fm-bout .lgA, .fm-bout .bkA, .fm-bout .lgB, .fm-bout .bkB,
  .fm-bout .aA, .fm-bout .aB, .fm-bout .spark, .fm-bout .touch, .fm-bout .trail {
    animation-duration: var(--fight, 8s); animation-iteration-count: 1; animation-fill-mode: both;
  }
  .fm-bout .scene.off .fA, .fm-bout .scene.off .fB, .fm-bout .scene.off .lgA, .fm-bout .scene.off .bkA,
  .fm-bout .scene.off .lgB, .fm-bout .scene.off .bkB, .fm-bout .scene.off .aA, .fm-bout .scene.off .aB,
  .fm-bout .scene.off .spark, .fm-bout .scene.off .touch, .fm-bout .scene.off .trail { animation-name: none !important }
  .fm-bout .bkA, .fm-bout .bkB { --lg: -.45 }
  .fm-bout .lgA, .fm-bout .lgB { --lg: 1 }

  .fm-bout .foil .fA { animation-name: koFoilA }
  .fm-bout .foil .fB { animation-name: koFoilB }
  .fm-bout .foil .lgA, .fm-bout .foil .bkA { animation-name: koFoilLegA }
  .fm-bout .foil .lgB, .fm-bout .foil .bkB { animation-name: koFoilLegB }
  .fm-bout .foil .aA { animation-name: koFoilArmA }
  .fm-bout .foil .aB { animation-name: koFoilArmB }
  .fm-bout .foil .spark { animation-name: koFoilSpark; animation-timing-function: linear }
  .fm-bout .foil .touch { animation-name: koFoilTouch; animation-timing-function: linear }
  .fm-bout .foil .fA, .fm-bout .foil .fB, .fm-bout .foil .lgA, .fm-bout .foil .bkA,
  .fm-bout .foil .lgB, .fm-bout .foil .bkB, .fm-bout .foil .aA, .fm-bout .foil .aB { animation-timing-function: cubic-bezier(.92,0,.08,1) }

  .fm-bout .sabre .fA { animation-name: koSabreA }
  .fm-bout .sabre .fB { animation-name: koSabreB }
  .fm-bout .sabre .lgA, .fm-bout .sabre .bkA { animation-name: koSabreLegA }
  .fm-bout .sabre .lgB, .fm-bout .sabre .bkB { animation-name: koSabreLegB }
  .fm-bout .sabre .aA { animation-name: koSabreArmA }
  .fm-bout .sabre .aB { animation-name: koSabreArmB }
  .fm-bout .sabre .spark { animation-name: koSabreSpark; animation-timing-function: linear }
  .fm-bout .sabre .touch { animation-name: koSabreTouch; animation-timing-function: linear }
  .fm-bout .sabre .trail { animation-name: koSabreTrail; animation-timing-function: linear }
  .fm-bout .sabre .fA, .fm-bout .sabre .fB, .fm-bout .sabre .lgA, .fm-bout .sabre .bkA,
  .fm-bout .sabre .lgB, .fm-bout .sabre .bkB, .fm-bout .sabre .aA, .fm-bout .sabre .aB { animation-timing-function: cubic-bezier(.86,0,.12,1) }

  .fm-bout .epee .fA { animation-name: koEpeeA }
  .fm-bout .epee .fB { animation-name: koEpeeB }
  .fm-bout .epee .lgA, .fm-bout .epee .bkA { animation-name: koEpeeLegA }
  .fm-bout .epee .lgB, .fm-bout .epee .bkB { animation-name: koEpeeLegB }
  .fm-bout .epee .aA { animation-name: koEpeeArmA }
  .fm-bout .epee .aB { animation-name: koEpeeArmB }
  .fm-bout .epee .spark { animation-name: koEpeeSpark; animation-timing-function: linear }
  .fm-bout .epee .touch { animation-name: koEpeeTouch; animation-timing-function: linear }
  .fm-bout .epee .fA, .fm-bout .epee .fB, .fm-bout .epee .lgA, .fm-bout .epee .bkA,
  .fm-bout .epee .lgB, .fm-bout .epee .bkB, .fm-bout .epee .aA, .fm-bout .epee .aB { animation-timing-function: cubic-bezier(.8,0,.16,1) }

  @keyframes koFoilA {
    0%, 12% { transform: translate(0, 0) }
    18%, 22% { transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 5px)) }
    27% { transform: translate(calc(var(--kx) * 2px), calc(var(--ky) * -2px)) }
    34%, 38% { transform: translate(calc(var(--kx) * -14px), calc(var(--ky) * -3px)) }
    45%, 50% { transform: translate(calc(var(--kx) * 26px), calc(var(--ky) * -5px)) }
    55% { transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 2px)) }
    60%, 64% { transform: translate(calc(var(--kx) * -12px), calc(var(--ky) * 3px)) }
    68%, 72% { transform: translate(calc(var(--kx) * 30px), calc(var(--ky) * -3px)) }
    78% { transform: translate(calc(var(--kx) * 8px), 0) }
    82%, 87% { transform: translate(calc(var(--kx) * 42px), calc(var(--ky) * 4px)) }
    93%, 100% { transform: translate(0, 0) }
  }
  @keyframes koFoilB {
    0%, 12% { transform: translate(0, 0) }
    18%, 22% { transform: translate(calc(var(--kx) * 12px), calc(var(--ky) * -3px)) }
    27% { transform: translate(calc(var(--kx) * 3px), calc(var(--ky) * 2px)) }
    34%, 38% { transform: translate(calc(var(--kx) * -30px), calc(var(--ky) * -4px)) }
    45%, 50% { transform: translate(calc(var(--kx) * 10px), calc(var(--ky) * 3px)) }
    55% { transform: translate(calc(var(--kx) * 2px), calc(var(--ky) * -2px)) }
    60%, 64% { transform: translate(calc(var(--kx) * -26px), calc(var(--ky) * 4px)) }
    68%, 72% { transform: translate(calc(var(--kx) * 14px), calc(var(--ky) * -3px)) }
    78% { transform: translate(calc(var(--kx) * 4px), 0) }
    83% { transform: translate(calc(var(--kx) * 26px), calc(var(--ky) * 2px)) }
    86% { transform: translate(calc(var(--kx) * 36px), calc(var(--ky) * 5px)) }
    90% { transform: translate(calc(var(--kx) * 31px), calc(var(--ky) * 4px)) }
    95%, 100% { transform: translate(0, 0) }
  }
  @keyframes koFoilLegA {
    0%, 12% { transform: rotate(0deg) }
    18%, 22% { transform: rotate(calc(var(--lg) * 24deg)) }
    27% { transform: rotate(calc(var(--lg) * 3deg)) }
    34%, 38% { transform: rotate(calc(var(--lg) * -7deg)) }
    45%, 50% { transform: rotate(calc(var(--lg) * 19deg)) }
    55% { transform: rotate(0deg) }
    60%, 64% { transform: rotate(calc(var(--lg) * -7deg)) }
    68%, 72% { transform: rotate(calc(var(--lg) * 21deg)) }
    82%, 87% { transform: rotate(calc(var(--lg) * 28deg)) }
    93%, 100% { transform: rotate(0deg) }
  }
  @keyframes koFoilLegB {
    0%, 12% { transform: rotate(0deg) }
    18%, 22% { transform: rotate(calc(var(--lg) * -7deg)) }
    34%, 38% { transform: rotate(calc(var(--lg) * 24deg)) }
    45%, 50% { transform: rotate(calc(var(--lg) * -6deg)) }
    60%, 64% { transform: rotate(calc(var(--lg) * 21deg)) }
    68%, 72% { transform: rotate(calc(var(--lg) * -7deg)) }
    83%, 90% { transform: rotate(calc(var(--lg) * -12deg)) }
    95%, 100% { transform: rotate(0deg) }
  }
  @keyframes koFoilArmA {
    0%, 5% { transform: rotate(-54deg) }
    9%, 12% { transform: rotate(0deg) }
    18%, 22% { transform: rotate(-7deg) }
    27% { transform: rotate(4deg) }
    34% { transform: rotate(15deg) }
    38% { transform: rotate(19deg) }
    45%, 50% { transform: rotate(-9deg) }
    55% { transform: rotate(2deg) }
    60%, 64% { transform: rotate(12deg) }
    68%, 72% { transform: rotate(-10deg) }
    82%, 87% { transform: rotate(-5deg) }
    93%, 100% { transform: rotate(0deg) }
  }
  @keyframes koFoilArmB {
    0%, 5% { transform: rotate(54deg) }
    9%, 12% { transform: rotate(0deg) }
    18% { transform: rotate(13deg) }
    22% { transform: rotate(17deg) }
    27% { transform: rotate(2deg) }
    34%, 38% { transform: rotate(-9deg) }
    45% { transform: rotate(11deg) }
    50% { transform: rotate(15deg) }
    60%, 64% { transform: rotate(-10deg) }
    68% { transform: rotate(12deg) }
    72% { transform: rotate(15deg) }
    83% { transform: rotate(7deg) }
    86%, 90% { transform: rotate(24deg) }
    95%, 100% { transform: rotate(0deg) }
  }
  @keyframes koFoilSpark {
    0%, 20% { opacity: 0; transform: translate(calc(var(--kx) * 23px), calc(var(--ky) * 1px)) scale(.4) }
    22% { opacity: 1; transform: translate(calc(var(--kx) * 23px), calc(var(--ky) * 1px)) scale(1) }
    25% { opacity: 0; transform: translate(calc(var(--kx) * 23px), calc(var(--ky) * 1px)) scale(.4) }
    36% { opacity: 0; transform: translate(calc(var(--kx) * -22px), calc(var(--ky) * -3px)) scale(.4) }
    38% { opacity: 1; transform: translate(calc(var(--kx) * -22px), calc(var(--ky) * -3px)) scale(1) }
    41% { opacity: 0; transform: translate(calc(var(--kx) * -22px), calc(var(--ky) * -3px)) scale(.4) }
    48% { opacity: 0; transform: translate(calc(var(--kx) * 18px), calc(var(--ky) * -1px)) scale(.4) }
    50% { opacity: 1; transform: translate(calc(var(--kx) * 18px), calc(var(--ky) * -1px)) scale(1) }
    53% { opacity: 0; transform: translate(calc(var(--kx) * 18px), calc(var(--ky) * -1px)) scale(.4) }
    70% { opacity: 0; transform: translate(calc(var(--kx) * 22px), calc(var(--ky) * -3px)) scale(.4) }
    72% { opacity: 1; transform: translate(calc(var(--kx) * 22px), calc(var(--ky) * -3px)) scale(1) }
    75%, 100% { opacity: 0; transform: translate(calc(var(--kx) * 22px), calc(var(--ky) * -3px)) scale(.4) }
  }
  @keyframes koFoilTouch {
    0%, 81% { opacity: 0; transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 3px)) scale(.3) }
    83% { opacity: 1; transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 3px)) scale(1) }
    89% { opacity: 0; transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 3px)) scale(1.7) }
    90%, 100% { opacity: 0; transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 3px)) scale(.3) }
  }

  @keyframes koSabreA {
    0%, 12% { transform: translate(0, 0) }
    20%, 25% { transform: translate(calc(var(--kx) * 38px), calc(var(--ky) * 4px)) }
    32% { transform: translate(calc(var(--kx) * 4px), calc(var(--ky) * -3px)) }
    42%, 47% { transform: translate(calc(var(--kx) * -18px), calc(var(--ky) * -5px)) }
    56%, 61% { transform: translate(calc(var(--kx) * 30px), calc(var(--ky) * -6px)) }
    68% { transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 3px)) }
    76%, 81% { transform: translate(calc(var(--kx) * 46px), calc(var(--ky) * 2px)) }
    89%, 100% { transform: translate(0, 0) }
  }
  @keyframes koSabreB {
    0%, 12% { transform: translate(0, 0) }
    20%, 25% { transform: translate(calc(var(--kx) * 16px), calc(var(--ky) * -4px)) }
    32% { transform: translate(calc(var(--kx) * 3px), calc(var(--ky) * 2px)) }
    42%, 47% { transform: translate(calc(var(--kx) * -36px), calc(var(--ky) * -4px)) }
    56%, 61% { transform: translate(calc(var(--kx) * 18px), calc(var(--ky) * 4px)) }
    68% { transform: translate(calc(var(--kx) * 2px), calc(var(--ky) * -2px)) }
    77% { transform: translate(calc(var(--kx) * 30px), calc(var(--ky) * 3px)) }
    80% { transform: translate(calc(var(--kx) * 42px), calc(var(--ky) * 7px)) }
    85% { transform: translate(calc(var(--kx) * 36px), calc(var(--ky) * 5px)) }
    91%, 100% { transform: translate(0, 0) }
  }
  @keyframes koSabreLegA {
    0%, 12% { transform: rotate(0deg) }
    20%, 25% { transform: rotate(calc(var(--lg) * 30deg)) }
    32% { transform: rotate(calc(var(--lg) * 4deg)) }
    42%, 47% { transform: rotate(calc(var(--lg) * -9deg)) }
    56%, 61% { transform: rotate(calc(var(--lg) * 24deg)) }
    68% { transform: rotate(0deg) }
    76%, 81% { transform: rotate(calc(var(--lg) * 34deg)) }
    89%, 100% { transform: rotate(0deg) }
  }
  @keyframes koSabreLegB {
    0%, 12% { transform: rotate(0deg) }
    20%, 25% { transform: rotate(calc(var(--lg) * -9deg)) }
    42%, 47% { transform: rotate(calc(var(--lg) * 30deg)) }
    56%, 61% { transform: rotate(calc(var(--lg) * -8deg)) }
    68% { transform: rotate(0deg) }
    80%, 85% { transform: rotate(calc(var(--lg) * -15deg)) }
    91%, 100% { transform: rotate(0deg) }
  }
  @keyframes koSabreArmA {
    0%, 5% { transform: rotate(-58deg) }
    9%, 12% { transform: rotate(0deg) }
    16% { transform: rotate(-36deg) }
    20%, 25% { transform: rotate(30deg) }
    32% { transform: rotate(-6deg) }
    38% { transform: rotate(-40deg) }
    42%, 47% { transform: rotate(-34deg) }
    52% { transform: rotate(-38deg) }
    56%, 61% { transform: rotate(32deg) }
    68% { transform: rotate(-4deg) }
    72% { transform: rotate(-42deg) }
    76%, 81% { transform: rotate(34deg) }
    89%, 100% { transform: rotate(0deg) }
  }
  @keyframes koSabreArmB {
    0%, 5% { transform: rotate(58deg) }
    9%, 12% { transform: rotate(0deg) }
    20%, 25% { transform: rotate(36deg) }
    32% { transform: rotate(4deg) }
    38% { transform: rotate(38deg) }
    42%, 47% { transform: rotate(-32deg) }
    56%, 61% { transform: rotate(34deg) }
    68% { transform: rotate(2deg) }
    77% { transform: rotate(30deg) }
    80%, 85% { transform: rotate(46deg) }
    91%, 100% { transform: rotate(0deg) }
  }
  @keyframes koSabreSpark {
    0%, 23% { opacity: 0; transform: translate(calc(var(--kx) * 27px), calc(var(--ky) * -1px)) scale(.4) }
    25% { opacity: 1; transform: translate(calc(var(--kx) * 27px), calc(var(--ky) * -1px)) scale(1) }
    29% { opacity: 0; transform: translate(calc(var(--kx) * 27px), calc(var(--ky) * -1px)) scale(.4) }
    45% { opacity: 0; transform: translate(calc(var(--kx) * -27px), calc(var(--ky) * -5px)) scale(.4) }
    47% { opacity: 1; transform: translate(calc(var(--kx) * -27px), calc(var(--ky) * -5px)) scale(1) }
    51% { opacity: 0; transform: translate(calc(var(--kx) * -27px), calc(var(--ky) * -5px)) scale(.4) }
    59% { opacity: 0; transform: translate(calc(var(--kx) * 24px), calc(var(--ky) * -1px)) scale(.4) }
    61% { opacity: 1; transform: translate(calc(var(--kx) * 24px), calc(var(--ky) * -1px)) scale(1) }
    65%, 100% { opacity: 0; transform: translate(calc(var(--kx) * 24px), calc(var(--ky) * -1px)) scale(.4) }
  }
  @keyframes koSabreTouch {
    0%, 75% { opacity: 0; transform: translate(calc(var(--kx) * 38px), calc(var(--ky) * -2px)) scale(.3) }
    78% { opacity: 1; transform: translate(calc(var(--kx) * 38px), calc(var(--ky) * -2px)) scale(1) }
    84% { opacity: 0; transform: translate(calc(var(--kx) * 38px), calc(var(--ky) * -2px)) scale(1.8) }
    85%, 100% { opacity: 0; transform: translate(calc(var(--kx) * 38px), calc(var(--ky) * -2px)) scale(.3) }
  }
  @keyframes koSabreTrail {
    0%, 16% { opacity: 0 }
    19% { opacity: .5 }
    26% { opacity: 0 }
    38% { opacity: 0 }
    41% { opacity: .5 }
    48% { opacity: 0 }
    53% { opacity: 0 }
    57% { opacity: .5 }
    63% { opacity: 0 }
    73% { opacity: 0 }
    77% { opacity: .55 }
    83%, 100% { opacity: 0 }
  }

  @keyframes koEpeeA {
    0%, 14% { transform: translate(0, 0) }
    24%, 31% { transform: translate(calc(var(--kx) * 34px), calc(var(--ky) * 7px)) }
    40% { transform: translate(calc(var(--kx) * -4px), calc(var(--ky) * -3px)) }
    52%, 60% { transform: translate(calc(var(--kx) * -22px), calc(var(--ky) * -5px)) }
    70%, 76% { transform: translate(calc(var(--kx) * 36px), calc(var(--ky) * -2px)) }
    81%, 87% { transform: translate(calc(var(--kx) * 22px), calc(var(--ky) * 5px)) }
    94%, 100% { transform: translate(0, 0) }
  }
  @keyframes koEpeeB {
    0%, 14% { transform: translate(0, 0) }
    24%, 31% { transform: translate(calc(var(--kx) * 18px), calc(var(--ky) * -4px)) }
    40% { transform: translate(calc(var(--kx) * 4px), calc(var(--ky) * 3px)) }
    52%, 60% { transform: translate(calc(var(--kx) * -38px), calc(var(--ky) * 5px)) }
    70%, 76% { transform: translate(calc(var(--kx) * 16px), calc(var(--ky) * -3px)) }
    81%, 87% { transform: translate(calc(var(--kx) * -10px), calc(var(--ky) * 5px)) }
    94%, 100% { transform: translate(0, 0) }
  }
  @keyframes koEpeeLegA {
    0%, 14% { transform: rotate(0deg) }
    24%, 31% { transform: rotate(calc(var(--lg) * 26deg)) }
    40% { transform: rotate(0deg) }
    52%, 60% { transform: rotate(calc(var(--lg) * -10deg)) }
    70%, 76% { transform: rotate(calc(var(--lg) * 24deg)) }
    81%, 87% { transform: rotate(calc(var(--lg) * 32deg)) }
    94%, 100% { transform: rotate(0deg) }
  }
  @keyframes koEpeeLegB {
    0%, 14% { transform: rotate(0deg) }
    24%, 31% { transform: rotate(calc(var(--lg) * -9deg)) }
    40% { transform: rotate(0deg) }
    52%, 60% { transform: rotate(calc(var(--lg) * 28deg)) }
    70%, 76% { transform: rotate(calc(var(--lg) * -8deg)) }
    81%, 87% { transform: rotate(calc(var(--lg) * 30deg)) }
    94%, 100% { transform: rotate(0deg) }
  }
  @keyframes koEpeeArmA {
    0%, 5% { transform: rotate(-50deg) }
    10%, 14% { transform: rotate(2deg) }
    24%, 31% { transform: rotate(10deg) }
    40% { transform: rotate(0deg) }
    52%, 60% { transform: rotate(-13deg) }
    70%, 76% { transform: rotate(-5deg) }
    81%, 87% { transform: rotate(8deg) }
    94%, 100% { transform: rotate(2deg) }
  }
  @keyframes koEpeeArmB {
    0%, 5% { transform: rotate(50deg) }
    10%, 14% { transform: rotate(-2deg) }
    24%, 31% { transform: rotate(-11deg) }
    40% { transform: rotate(0deg) }
    52%, 60% { transform: rotate(11deg) }
    70%, 76% { transform: rotate(-10deg) }
    81%, 87% { transform: rotate(-8deg) }
    94%, 100% { transform: rotate(-2deg) }
  }
  @keyframes koEpeeSpark {
    0%, 29% { opacity: 0; transform: translate(calc(var(--kx) * 26px), calc(var(--ky) * 2px)) scale(.4) }
    31% { opacity: 1; transform: translate(calc(var(--kx) * 26px), calc(var(--ky) * 2px)) scale(1) }
    35% { opacity: 0; transform: translate(calc(var(--kx) * 26px), calc(var(--ky) * 2px)) scale(.4) }
    57% { opacity: 0; transform: translate(calc(var(--kx) * -30px), calc(var(--ky) * 0px)) scale(.4) }
    60% { opacity: 1; transform: translate(calc(var(--kx) * -30px), calc(var(--ky) * 0px)) scale(1) }
    64%, 100% { opacity: 0; transform: translate(calc(var(--kx) * -30px), calc(var(--ky) * 0px)) scale(.4) }
  }
  @keyframes koEpeeTouch {
    0%, 80% { opacity: 0; transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 5px)) scale(.3) }
    83% { opacity: 1; transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 5px)) scale(1.3) }
    90% { opacity: 0; transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 5px)) scale(2.1) }
    91%, 100% { opacity: 0; transform: translate(calc(var(--kx) * 6px), calc(var(--ky) * 5px)) scale(.3) }
  }
  @media (prefers-reduced-motion: reduce) {
    .fm-bout .fA, .fm-bout .fB, .fm-bout .lgA, .fm-bout .bkA, .fm-bout .lgB, .fm-bout .bkB,
    .fm-bout .aA, .fm-bout .aB, .fm-bout .spark, .fm-bout .touch, .fm-bout .trail { animation: none }
    .fm-bout .spark, .fm-bout .touch, .fm-bout .trail { opacity: 0 }
  }