/* Site motion, step 1 (assets/motion.js holds the switch). Every rule hangs off html.mk-motion, so with the switch off
   none of this exists and the menus snap as before.
   In: about .18s, settling (--muck-ease). Out: about .12s, quicker than in, so closing never feels slow. */

@keyframes mk-drop-in  { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mk-drop-out { to   { opacity: 0; transform: translateY(-4px); } }
@keyframes mk-pop-in   { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes mk-pop-out  { to   { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes mk-item-in  { from { opacity: 0; transform: translateY(4px); } }
@keyframes mk-hold     { to   { opacity: 1; } }

/* The Games and How to Play menus (games-menu.js): the panel drops from the header's rule and lifts back into it. The tab
   stays until the panel is gone, so the panel never comes loose from the header. */
html.mk-motion .gm-menu { animation: mk-drop-in .18s var(--muck-ease); }
html.mk-motion .gm-menu.gm-out { animation: mk-drop-out .12s ease-in forwards; pointer-events: none; }
html.mk-motion .gm-tab.gm-out { animation: mk-hold .12s; pointer-events: none; }
html.mk-motion .gm-item { transition: background var(--muck-dur-fast) ease, transform var(--muck-dur-fast) var(--muck-ease); }
html.mk-motion .gm-item:active { transform: scale(.98); }

/* The lobby's account menu, desktop: grows out of the avatar button (top right) */
@media (min-width: 720px) {
  html.mk-motion .lobby-av-menu.lobby-av-menu--open { transform-origin: top right; animation: mk-pop-in .18s var(--muck-ease); }
  html.mk-motion .lobby-av-menu.lobby-av-menu--open.mk-out { animation: mk-pop-out .12s ease-in forwards; pointer-events: none; }
}

/* The account menu joined to the Shop pill, desktop (html.mk-join, its own switch in motion.js). The menu's colors, border,
   corners and shadow are pinned by older rules (lobby-design.css, lobby-sections-v2.css) that this file can't outrank,
   so the join is drawn over them, under the menu's items:
     ::before  the menu's outline again, in the pill's #383b39 (its own is #354445), on the pill's #1d1f1f;
     ::after   the bridge: as wide as the pill (--mk-pill-w), from the pill's bottom 10px into the menu's top 12px. It
               fills in the pill's two rounded bottom corners, rubs out the line between them, squares the menu's top
               right corner, and draws the pill's sides down into the menu. */
@media (min-width: 720px) {
  html.mk-join #lobby-av-wrap .lobby-av-menu.mk-joined {
    top: calc(100% - 1px); z-index: 1;
    --dlg-bg: #1d1f1f; --dlg-shadow: 0 18px 40px -12px #000c;
  }
  html.mk-join #lobby-av-wrap .lobby-av-menu.mk-joined::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    border: 1px solid #383b39; border-radius: 12px;
  }
  html.mk-join #lobby-av-wrap .lobby-av-menu.mk-joined::after {
    content: ''; position: absolute; top: -10px; right: -1px; z-index: -1; pointer-events: none;
    width: var(--mk-pill-w); height: 22px;
    background:
      linear-gradient(#383b39, #383b39) 0 0 / 1px 10px no-repeat,                          /* the pill's left side, down to the join */
      linear-gradient(#383b39, #383b39) 100% 0 / 1px 100% no-repeat,                       /* its right side, on into the menu's */
      linear-gradient(#1d1f1f, #1d1f1f) 0 9px / 100% calc(100% - 9px) no-repeat,           /* the line between them, and the menu's corner */
      radial-gradient(circle at 100% 0, transparent 8.5px, #1d1f1f 9px) 0 0 / 10px 10px no-repeat,   /* the pill's bottom-left curve */
      radial-gradient(circle at 0 0, transparent 8.5px, var(--mk-cog-bg, #1d1f1f) 9px) 100% 0 / 10px 10px no-repeat;   /* and bottom-right */
  }
  /* the cog's hover color (lobby-sections-v2.css) fills its corner, so the highlight is square too */
  html.mk-join #lobby-av-wrap:has(#lobby-av-btn:hover) .lobby-av-menu.mk-joined { --mk-cog-bg: #292b31; }
  /* Opening, it unfolds down out of the pill rather than popping: the bridge (above the clip) is there from the first frame */
  html.mk-motion.mk-join .lobby-av-menu.mk-joined.lobby-av-menu--open { animation: mk-unfold .2s var(--muck-ease); }
  html.mk-motion.mk-join .lobby-av-menu.mk-joined.lobby-av-menu--open.mk-out { animation: mk-fold .12s ease-in forwards; }
}
/* The table's menu. Desktop: it hangs from your seat card (desktop-table.css), so it unfolds down out of the card and folds
   back up into it, the card staying joined until it's gone. Phones: the header menu grows out of your avatar, top right. */
html.mk-motion body.desktop-game-active #avatar-menu .desktop-footer-menu:not([hidden]) { animation: mk-unfold .2s var(--muck-ease); }
html.mk-motion body.desktop-game-active #avatar-menu .desktop-footer-menu.mk-out { animation: mk-fold .12s ease-in forwards; pointer-events: none; }
/* a tournament's mini lobby unfolds out of its level field the same way (desktop-table.css #tourney-mini) */
html.mk-motion body.desktop-game-active #tourney-chip.is-open #tourney-mini { animation: mk-unfold .2s var(--muck-ease); }
html.mk-motion body.mobile-game-active #table-screen .header-nav.open { transform-origin: top right; animation: mk-pop-in .18s var(--muck-ease); }
html.mk-motion body.mobile-game-active #table-screen .header-nav.open.mk-out { animation: mk-pop-out .12s ease-in forwards; pointer-events: none; }

/* the top stays open well above the menu: the account menu's bridge and the table menu's outline round the card sit up there */
@keyframes mk-unfold { from { clip-path: inset(-400px -80px 100% -80px); } to { clip-path: inset(-400px -80px -80px -80px); } }
@keyframes mk-fold   { from { clip-path: inset(-400px -80px -80px -80px); } to { clip-path: inset(-400px -80px 100% -80px); } }

/* Phone hamburger panels: the lobby's (#lobby-av-wrap) and the site header's (#gh-drop). The panel drops in and its rows
   follow a beat behind, top to bottom; closing, the whole panel lifts away at once. */
@media (max-width: 719px) {
  html.mk-motion #lobby-av-wrap.lmh-mobile-open,
  html.mk-motion #gh-drop:not([hidden]) { transform-origin: top center; animation: mk-drop-in .2s var(--muck-ease); }
  html.mk-motion #lobby-av-wrap.lmh-mobile-open.mk-out,
  html.mk-motion #gh-drop.mk-out { animation: mk-drop-out .12s ease-in forwards; pointer-events: none; }
  html.mk-motion #lobby-av-wrap.lmh-mobile-open:not(.mk-out) .lmh-mobile-nav > *,
  html.mk-motion #gh-drop:not([hidden]):not(.mk-out) :is(.gh-drop-nav, .gh-drop-acct) > * { animation: mk-item-in .22s var(--muck-ease) backwards; }
  html.mk-motion #lobby-av-wrap .lmh-mobile-nav > :nth-child(2),
  html.mk-motion #gh-drop :is(.gh-drop-nav, .gh-drop-acct) > :nth-child(2) { animation-delay: .02s; }
  html.mk-motion #lobby-av-wrap .lmh-mobile-nav > :nth-child(3),
  html.mk-motion #gh-drop :is(.gh-drop-nav, .gh-drop-acct) > :nth-child(3) { animation-delay: .04s; }
  html.mk-motion #lobby-av-wrap .lmh-mobile-nav > :nth-child(4),
  html.mk-motion #gh-drop :is(.gh-drop-nav, .gh-drop-acct) > :nth-child(4) { animation-delay: .06s; }
  html.mk-motion #lobby-av-wrap .lmh-mobile-nav > :nth-child(5),
  html.mk-motion #gh-drop :is(.gh-drop-nav, .gh-drop-acct) > :nth-child(5) { animation-delay: .08s; }
  html.mk-motion #lobby-av-wrap .lmh-mobile-nav > :nth-child(n+6),
  html.mk-motion #gh-drop :is(.gh-drop-nav, .gh-drop-acct) > :nth-child(n+6) { animation-delay: .1s; }
}