/* Extracted from KleptoMagia src/theme/theme.css. Do not redesign here.
   Regenerate with tools/port-main-menu.cjs; website adaptations live in menu-web.css. */
.mm-root {
  --mx: 0;
  --my: 0;
  --beat-pulse: 0;
  --beat-phase: 0;
  position: relative;
  overflow: visible;
  pointer-events: auto;
  background: #050309;
  isolation: isolate;
}

.mm-bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  animation: mmBackdropIn 1.4s cubic-bezier(.16, 1, .3, 1) both;
  transform: scale(1.02);
  will-change: transform, filter;
}

.mm-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.42), transparent 20%, transparent 70%, rgba(0,0,0,.7)),
    radial-gradient(ellipse 78% 85% at 48% 48%, transparent 0%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.mm-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mm-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2BE0FF;
  box-shadow: 0 0 16px #2BE0FF, 0 0 34px rgba(255,46,170,.6);
  animation: mmSpark 2.8s ease-in-out var(--d) infinite;
}

.mm-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  padding: 0;
  pointer-events: none;
}

.mm-brand {
  position: absolute;
  left: 112px;
  top: 300px;
  width: 1020px;
  pointer-events: none;
}

.mm-logotype {
  position: relative;
}

.mm-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 560px;
  margin-top: 46px;
  pointer-events: auto;
  animation: mmTitleIn .72s cubic-bezier(.16, 1, .3, 1) .72s both;
}

.mm-button {
  position: relative;
  height: 76px;
  width: 100%;
  border: 0;
  padding: 0 26px;
  background: rgba(7,4,16,.82);
  color: var(--paper);
  cursor: pointer;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: inset 0 0 0 2px rgba(244,239,227,.12), 0 12px 28px rgba(0,0,0,.45);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s, background .16s;
}

.mm-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-120%) skewX(-16deg);
  transition: transform .24s ease;
}

.mm-button:hover {
  transform: translateX(12px) scale(1.025);
}

.mm-button:hover::before {
  transform: translateX(120%) skewX(-16deg);
}

.mm-button-primary {
  background: linear-gradient(120deg, rgba(255,46,170,.32), rgba(7,4,16,.9) 54%, rgba(43,224,255,.18));
  box-shadow: inset 0 0 0 2px var(--magenta), 0 0 34px rgba(255,46,170,.34), 0 18px 32px rgba(0,0,0,.52);
}

.mm-button-secondary {
  box-shadow: inset 0 0 0 2px rgba(244,239,227,.2), 0 16px 28px rgba(0,0,0,.44);
}

.mm-button-ghost {
  height: 58px;
  opacity: .72;
}

.mm-button-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 3px;
  text-shadow: 0 0 14px rgba(255,46,170,.45);
}

.mm-root {
  --title-left: 88px;
  --title-top: 232px;
  --title-width: 760px;
  --menu-width: 520px;
  --menu-left: calc((var(--title-width) - var(--menu-width)) / 2);
  --menu-top: 232px;
  --song-center-x: 70%;
  --song-width: 900px;
  --hand-card-offset-x: 110px;
  --hand-card-offset-y: 125px;
}

.mm-root {
  background: #05050a;
}

.mm-bg {
  display: block;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.014);
  filter: none;
  will-change: opacity;
  animation: mmArtEnter 360ms cubic-bezier(.16, .9, .18, 1) both;
}

.mm-panel-quinta {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  will-change: opacity, transform;
  animation: mmPanelQuintaIn 340ms cubic-bezier(.16, .9, .18, 1) .1s both;
}

.mm-hand-card-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transform-origin: 72% 73%;
  scale: calc(1 + var(--beat-pulse) * .008);
  filter: none;
  will-change: opacity, transform;
  animation:
    mmHandCardEnter 430ms cubic-bezier(.16, .9, .18, 1) .16s both,
    mmHandCardFloat 5.4s ease-in-out .72s infinite;
  transition: scale 80ms linear, opacity 80ms linear;
}

.mm-character-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  clip-path: none;
  will-change: opacity, transform, filter;
  animation: mmCharacterLayerIn 390ms cubic-bezier(.16, .9, .18, 1) .13s both;
}

.mm-art-dim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(2,2,8,.68) 0%, rgba(2,2,8,.32) 30%, rgba(2,2,8,.03) 58%, rgba(2,2,8,.1) 100%),
    radial-gradient(ellipse 42% 64% at 28% 48%, rgba(2,2,8,.56), transparent 72%);
  pointer-events: none;
}

.mm-card-glow {
  position: absolute;
  z-index: 5;
  left: calc(75% + var(--hand-card-offset-x));
  top: calc(53% + var(--hand-card-offset-y));
  width: 620px;
  height: 760px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 34% 34% at 50% 49%, rgba(255,244,255,.5) 0%, rgba(255,77,213,.34) 28%, transparent 72%),
    radial-gradient(ellipse 58% 72% at 50% 50%, rgba(123,44,255,.3) 0%, rgba(255,46,170,.18) 46%, rgba(43,224,255,.08) 64%, transparent 82%);
  mix-blend-mode: screen;
  filter: none;
  contain: paint;
  scale: calc(1 + var(--beat-pulse) * .025);
  will-change: opacity, transform;
  animation: mmCardBloom 360ms cubic-bezier(.16, .9, .18, 1) .22s both, mmArcaneCardPulse 3.8s ease-in-out 1.2s infinite;
  pointer-events: none;
  transition: scale 80ms linear, opacity 80ms linear;
}

.mm-card-glow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 46%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,244,255,.5) 0%, rgba(255,46,170,.28) 30%, rgba(123,44,255,.12) 52%, transparent 76%);
  filter: none;
}

.mm-vignette {
  display: none;
  z-index: 6;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.24), transparent 24%, transparent 76%, rgba(0,0,0,.56)),
    radial-gradient(ellipse 94% 100% at 50% 52%, transparent 0%, rgba(0,0,0,.26) 100%);
}

.mm-title-sparks i {
  width: 4px;
  height: 4px;
  opacity: .8;
  background: #7df7ff;
  box-shadow: 0 0 12px #7df7ff, 0 0 26px rgba(255,46,170,.58);
  scale: calc(1 + var(--beat-pulse) * .25);
  filter: brightness(calc(1 + var(--beat-pulse) * .2));
  transition: scale 80ms linear, filter 80ms linear;
}

.mm-stage {
  z-index: 7;
}

.mm-brand {
  left: var(--title-left);
  top: var(--title-top);
  width: var(--title-width);
}

.mm-logotype {
  position: relative;
  width: var(--title-width);
  will-change: opacity, transform;
  animation: mmLogoSettle 320ms cubic-bezier(.16, .9, .18, 1) .12s both;
}

.mm-logotype::before {
  content: none;
}

.mm-logotype::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 10%;
  bottom: 12px;
  height: 18px;
  background: linear-gradient(90deg, transparent, rgba(43,224,255,.28), rgba(255,46,170,.2), transparent);
  filter: blur(10px);
  opacity: .75;
}

.mm-wordmark-art {
  position: relative;
  display: block;
  width: 100%;
  height: 170px;
  isolation: isolate;
  will-change: transform;
  animation: mmWordmarkBreathe 7s ease-in-out infinite;
}

.mm-wordmark-art::before,
.mm-wordmark-art::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--mm-wordmark-mask);
  mask-image: var(--mm-wordmark-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.mm-wordmark-art::before {
  background: #2be0ff;
  animation: mmWordmarkCopyCyan 7s cubic-bezier(.45, 0, .2, 1) infinite;
}

.mm-wordmark-art::after {
  background: #ff2eaa;
  animation: mmWordmarkCopyMagenta 7s cubic-bezier(.45, 0, .2, 1) infinite;
}

.mm-wordmark-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.72))
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(-2px 0 16px rgba(43,224,255,.18))
    drop-shadow(2px 0 18px rgba(255,46,170,.16));
  will-change: filter;
  animation: mmWordmarkGlow 7s ease-in-out infinite;
}

.mm-wordmark-sheen {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      transparent 14%,
      rgba(43,224,255,.08) 32%,
      rgba(198,155,255,.4) 49%,
      rgba(255,46,170,.2) 62%,
      transparent 80%);
  background-size: 220% 100%;
  background-position: 110% 50%;
  -webkit-mask-image: var(--mm-wordmark-mask);
  mask-image: var(--mm-wordmark-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: screen;
  opacity: .6;
  will-change: background-position, opacity;
  animation: mmWordmarkSheen 7s ease-in-out infinite;
}

.mm-subtitle {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 178px;
  pointer-events: none;
  font-family: var(--font-label);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 29px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: rgba(244, 239, 227, .88);
  text-shadow:
    0 2px 10px rgba(0,0,0,.78),
    0 0 14px rgba(43,224,255,.28),
    0 0 18px rgba(255,46,170,.18);
}

.mm-subtitle-concept,
.mm-subtitle-join {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.mm-subtitle-realtime {
  animation: mmConceptMergeLeft 620ms cubic-bezier(.16, 1, .3, 1) .32s both;
}

.mm-subtitle-deckbuilder {
  animation: mmConceptMergeRight 620ms cubic-bezier(.16, 1, .3, 1) .32s both;
}

.mm-subtitle-join {
  color: rgba(43,224,255,.92);
  font-size: 1.16em;
  text-shadow:
    0 0 10px rgba(43,224,255,.72),
    0 0 18px rgba(255,46,170,.5);
  animation: mmConceptJoin 300ms cubic-bezier(.16, 1.2, .3, 1) .7s both;
}

.mm-actions {
  position: absolute;
  left: var(--menu-left);
  top: var(--menu-top);
  width: var(--menu-width);
  margin-top: 0;
  gap: 12px;
  align-items: center;
  animation: none;
}

.mm-actions::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, transparent, rgba(244,239,227,.22), transparent);
  opacity: .7;
}

.mm-button {
  position: relative;
  width: 430px;
  height: 68px;
  margin: 0;
  padding: 0 28px;
  overflow: hidden;
  isolation: isolate;
  color: rgba(244, 239, 227, .88);
  background:
    linear-gradient(rgba(8, 4, 16, .88), rgba(8, 4, 16, .88)) padding-box,
    linear-gradient(90deg, rgba(255, 46, 170, .56), rgba(43, 224, 255, .46)) border-box;
  border: 2px solid transparent;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  grid-template-columns: 1fr;
  text-align: center;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .34);
  will-change: opacity, transform;
  animation: mmMenuSettle 250ms cubic-bezier(.16, .9, .18, 1) both;
  transform-origin: 50% 50%;
  transition:
    transform 140ms cubic-bezier(.2, .78, .18, 1),
    filter 140ms ease,
    box-shadow 140ms ease;
}

.mm-button:nth-child(1) { animation-delay: .2s; }

.mm-button:nth-child(2) { animation-delay: .25s; }

.mm-button:nth-child(3) { animation-delay: .3s; }

.mm-button:nth-child(4) { animation-delay: .35s; }

.mm-button:nth-child(5) { animation-delay: .4s; }

.mm-button::before {
  content: none;
  display: none;
}

.mm-button::after {
  content: none;
  display: none;
}

.mm-button:hover {
  transform: none;
  filter: brightness(1.08) saturate(1.08);
  color: #030207;
  background:
    linear-gradient(90deg, #ff2eaa, #2BE0FF) padding-box,
    linear-gradient(90deg, #ff2eaa, #2BE0FF) border-box;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, .42),
    0 0 26px rgba(43, 224, 255, .26),
    0 0 30px rgba(255, 46, 170, .20);
}

.mm-button:hover::before,
.mm-button:focus-visible::before {
  content: none;
  display: none;
}

.mm-button:hover::after,
.mm-button:focus-visible::after {
  content: none;
  display: none;
}

.mm-button:focus-visible {
  outline: 0;
  transform: none;
  filter: brightness(1.08) saturate(1.08);
  color: #030207;
  background:
    linear-gradient(90deg, #ff2eaa, #2BE0FF) padding-box,
    linear-gradient(90deg, #ff2eaa, #2BE0FF) border-box;
  box-shadow:
    0 0 0 2px rgba(244, 239, 227, .42),
    0 18px 28px rgba(0, 0, 0, .42),
    0 0 26px rgba(43, 224, 255, .26),
    0 0 30px rgba(255, 46, 170, .20);
}

.mm-button:active {
  transform: none;
}

.mm-button:disabled {
  opacity: .28;
  filter: grayscale(.72);
  cursor: not-allowed;
  color: rgba(244,239,227,.5);
  box-shadow: 0 8px 14px rgba(0,0,0,.24);
}

.mm-button:disabled:hover {
  transform: none;
  filter: grayscale(.72);
  color: rgba(244,239,227,.5);
  background:
    linear-gradient(rgba(8, 4, 16, .82), rgba(8, 4, 16, .82)) padding-box,
    linear-gradient(90deg, rgba(244, 239, 227, .18), rgba(244, 239, 227, .10)) border-box;
  box-shadow: 0 8px 14px rgba(0,0,0,.24);
}

.mm-button-primary {
  background:
    linear-gradient(rgba(8, 4, 16, .88), rgba(8, 4, 16, .88)) padding-box,
    linear-gradient(90deg, rgba(255, 46, 170, .66), rgba(43, 224, 255, .56)) border-box;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .34),
    0 0 18px rgba(255, 46, 170, .08);
}

.mm-button-secondary,
.mm-button-ghost {
  background:
    linear-gradient(rgba(8, 4, 16, .82), rgba(8, 4, 16, .82)) padding-box,
    linear-gradient(90deg, rgba(244, 239, 227, .18), rgba(244, 239, 227, .10)) border-box;
  opacity: 1;
}

.mm-button-label {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}

.mm-button:hover .mm-button-label,
.mm-button:focus-visible .mm-button-label {
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .mm-bg,
.mm-panel-quinta,
.mm-character-layer,
.mm-hand-card-layer,
.mm-card-glow,
.mm-title-sparks i,
.mm-logotype,
.mm-wordmark-art,
.mm-wordmark-art::before,
.mm-wordmark-art::after,
.mm-wordmark-image,
.mm-wordmark-sheen,
.mm-subtitle-concept,
.mm-subtitle-join,
.mm-actions {
    animation: none;
  }
}

.mm-black-fade {
  position: absolute;
  /* Cover the small overscan produced by the exiting art scale while the
     main-menu compositor clip is intentionally left open. */
  inset: -16px;
  z-index: 30;
  background: #030207;
  pointer-events: none;
  animation: mmFadeFromBlack 360ms cubic-bezier(.7, 0, .3, 1) .04s both;
}

@media (prefers-reduced-motion: reduce) {
  .mm-black-fade {
    animation: none;
    opacity: 0;
  }
}

@keyframes mmBackdropIn {
  0% { transform: scale(1.08); filter: saturate(.45) brightness(.18) blur(8px); }
  100% { transform: scale(1.02); filter: saturate(1.1) brightness(.8) blur(0); }
}

@keyframes mmTitleIn {
  0% { opacity: 0; transform: translateX(-90px) skewX(-12deg); filter: blur(10px); }
  64% { opacity: 1; transform: translateX(10px) skewX(-8deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) skewX(-8deg); filter: blur(0); }
}

@keyframes mmSpark {
  0%,100% { opacity: .12; transform: translateY(0) scale(.75); }
  45% { opacity: 1; transform: translateY(-22px) scale(1.1); }
}

@keyframes mmArcaneCardPulse {
  0%,100% { opacity: .44; transform: translate(-50%, -50%) scale(.96) rotate(-8deg); }
  50% { opacity: .78; transform: translate(-50%, -50%) scale(1.04) rotate(-8deg); }
}

@keyframes mmArtEnter {
  0% { opacity: 0; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1.014); }
}

@keyframes mmPanelQuintaIn {
  0% {
    opacity: 0;
    transform: translate3d(140px, 0, 0) skewX(-6deg);
  }
  68% {
    opacity: 1;
    transform: translate3d(-10px, 0, 0) skewX(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0);
  }
}

@keyframes mmCharacterLayerIn {
  0% {
    opacity: 0;
    transform: translate3d(18px, 0, 0) scale(1.018);
    filter: blur(2px) brightness(.78);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) brightness(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes mmLogoSettle {
  0% { opacity: 0; transform: translate3d(-92px, 0, 0) skewX(-9deg) scale(.99); }
  72% { opacity: 1; transform: translate3d(9px, 0, 0) skewX(-4deg) scale(1.01); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(0) scale(1); }
}

@keyframes mmMenuSettle {
  0% { opacity: 0; transform: translate3d(-82px, 0, 0) skewX(-10deg); }
  74% { opacity: 1; transform: translate3d(7px, 0, 0) skewX(-5deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) skewX(0); }
}

@keyframes mmCardBloom {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 80px)) scale(.96) rotate(-7deg); }
  100% { opacity: .58; transform: translate(-50%, -50%) scale(1) rotate(-7deg); }
}

@keyframes mmHandCardEnter {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--hand-card-offset-x) + 130px), var(--hand-card-offset-y), 0) skewX(-4deg);
  }
  72% {
    opacity: 1;
    transform: translate3d(calc(var(--hand-card-offset-x) - 8px), var(--hand-card-offset-y), 0) skewX(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--hand-card-offset-x), var(--hand-card-offset-y), 0) skewX(0);
  }
}

@keyframes mmHandCardFloat {
  0%, 100% {
    transform: translate3d(var(--hand-card-offset-x), var(--hand-card-offset-y), 0);
  }
  50% {
    transform: translate3d(var(--hand-card-offset-x), calc(var(--hand-card-offset-y) - 4px), 0);
  }
}

@keyframes mmFadeFromBlack {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mmConceptMergeLeft {
  0% {
    opacity: 0;
    transform: translateX(-42px);
    filter: blur(3px);
  }
  72% {
    opacity: 1;
    transform: translateX(3px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes mmConceptMergeRight {
  0% {
    opacity: 0;
    transform: translateX(42px);
    filter: blur(3px);
  }
  72% {
    opacity: 1;
    transform: translateX(-3px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes mmConceptJoin {
  0% {
    opacity: 0;
    transform: scale(.35) rotate(-12deg);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
  }
}

@keyframes mmWordmarkBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.004); }
}

@keyframes mmWordmarkCopyCyan {
  0%, 100% { transform: translate(-1px, 1px); opacity: .16; }
  34% { transform: translate(-3px, 1px); opacity: .34; }
  52% { transform: translate(-.5px, 0); opacity: .08; }
  72% { transform: translate(-1.5px, .5px); opacity: .2; }
}

@keyframes mmWordmarkCopyMagenta {
  0%, 100% { transform: translate(1px, -1px); opacity: .16; }
  34% { transform: translate(.5px, 0); opacity: .08; }
  62% { transform: translate(3px, -1px); opacity: .34; }
  82% { transform: translate(1.5px, -.5px); opacity: .2; }
}

@keyframes mmWordmarkGlow {
  0%, 100% {
    filter:
      drop-shadow(0 14px 18px rgba(0,0,0,.72))
      drop-shadow(0 0 8px rgba(255,255,255,.16))
      drop-shadow(-2px 0 14px rgba(43,224,255,.16))
      drop-shadow(2px 0 16px rgba(255,46,170,.14));
  }
  38% {
    filter:
      drop-shadow(0 14px 18px rgba(0,0,0,.72))
      drop-shadow(0 0 10px rgba(255,255,255,.2))
      drop-shadow(-3px 0 23px rgba(43,224,255,.34))
      drop-shadow(2px 0 14px rgba(255,46,170,.16));
  }
  68% {
    filter:
      drop-shadow(0 14px 18px rgba(0,0,0,.72))
      drop-shadow(0 0 10px rgba(255,255,255,.2))
      drop-shadow(-2px 0 14px rgba(43,224,255,.16))
      drop-shadow(3px 0 24px rgba(255,46,170,.34));
  }
}

@keyframes mmWordmarkSheen {
  0%, 12% { background-position: 110% 50%; opacity: .22; }
  48% { opacity: .68; }
  82%, 100% { background-position: -105% 50%; opacity: .26; }
}

@keyframes mmFadeFromBlack {
  0% { opacity: 1; }
  100% { opacity: 0; }
}