.welcome-screen:not([hidden]) {
  animation: motion-fade-in .42s ease-out both;
}

.welcome-screen:not([hidden]) .welcome-shell {
  animation: motion-rise-in .52s cubic-bezier(.2, .72, .25, 1) both;
}

.welcome-screen:not([hidden]) .welcome-kicker,
.welcome-screen:not([hidden]) .welcome-story h1,
.welcome-screen:not([hidden]) .welcome-story > p,
.welcome-screen:not([hidden]) .welcome-art,
.welcome-screen:not([hidden]) .welcome-promise,
.welcome-screen:not([hidden]) .welcome-loyalty-summary,
.welcome-screen:not([hidden]) .welcome-start-heading,
.welcome-screen:not([hidden]) .welcome-options,
.welcome-screen:not([hidden]) .welcome-start > button,
.welcome-screen:not([hidden]) .welcome-note {
  animation: motion-rise-in .4s cubic-bezier(.2, .72, .25, 1) both;
}

.welcome-screen:not([hidden]) .welcome-story h1 { animation-delay: 45ms; }
.welcome-screen:not([hidden]) .welcome-story > p { animation-delay: 85ms; }
.welcome-screen:not([hidden]) .welcome-art { animation-delay: 120ms; }
.welcome-screen:not([hidden]) .welcome-promise { animation-delay: 155ms; }
.welcome-screen:not([hidden]) .welcome-start-heading { animation-delay: 70ms; }
.welcome-screen:not([hidden]) .welcome-options { animation-delay: 110ms; }
.welcome-screen:not([hidden]) .welcome-start > button:nth-of-type(1) { animation-delay: 145ms; }
.welcome-screen:not([hidden]) .welcome-start > button:nth-of-type(2) { animation-delay: 185ms; }
.welcome-screen:not([hidden]) .welcome-start > button:nth-of-type(3) { animation-delay: 220ms; }
.welcome-screen:not([hidden]) .welcome-note { animation-delay: 250ms; }

.welcome-screen:not([hidden]) .welcome-dashboard-card {
  animation: motion-rise-in .42s cubic-bezier(.2, .72, .25, 1) both;
}

.welcome-screen:not([hidden]) .welcome-dashboard-card:nth-child(2) { animation-delay: 75ms; }
.welcome-screen:not([hidden]) .welcome-dashboard-card:nth-child(3) { animation-delay: 125ms; }

.welcome-playing-card {
  animation: welcome-card-drift 6s ease-in-out infinite;
}

.welcome-card-face { animation-delay: -2s; }
.welcome-card-suit { animation-delay: -4s; }

.app-shell:not([inert]) .topbar,
.app-shell:not([inert]) .game-layout {
  animation: motion-rise-in .48s cubic-bezier(.2, .72, .25, 1) both;
}

.app-shell:not([inert]) .game-layout { animation-delay: 55ms; }

.app-shell:not([inert]) .score-card,
.app-shell:not([inert]) .table-area {
  animation: motion-rise-in .48s cubic-bezier(.2, .72, .25, 1) both;
}

.app-shell:not([inert]) .table-area { animation-delay: 90ms; }

.modal-backdrop:not([hidden]) {
  animation: motion-fade-in .18s ease-out both;
}

.modal-backdrop:not([hidden]) > .modal-card {
  animation: motion-modal-in .26s cubic-bezier(.2, .72, .25, 1) both;
}

.online-lobby-panel:not([hidden]),
.account-signed-in:not([hidden]),
.score-breakdown:not([hidden]),
#online-entry:not([hidden]),
#online-room-view:not([hidden]),
#account-signed-out:not([hidden]),
.trick-history[open] .trick-history-list {
  animation: motion-rise-in .24s ease-out both;
}

.modal-backdrop:not([hidden]) > .modal-card > :not(.modal-close):nth-child(n + 2) {
  animation: motion-rise-in .26s ease-out both;
}

.modal-backdrop:not([hidden]) > .modal-card > :nth-child(3) { animation-delay: 30ms; }
.modal-backdrop:not([hidden]) > .modal-card > :nth-child(4) { animation-delay: 55ms; }
.modal-backdrop:not([hidden]) > .modal-card > :nth-child(n + 5) { animation-delay: 80ms; }

.membership-plans > *,
.training-answers > *,
.stats-history > *,
.friend-inbox > * {
  animation: motion-row-in .22s ease-out both;
}

.membership-plans > :nth-child(2),
.training-answers > :nth-child(even),
.stats-history > :nth-child(even) { animation-delay: 45ms; }

.training-feedback:not(:empty),
.account-error:not(:empty),
.online-error:not(:empty),
.friend-status:not(:empty),
.dashboard-error:not(:empty) {
  animation: motion-message-in .2s ease-out both;
}

.chat-panel:not([hidden]) {
  transform-origin: bottom right;
  animation: motion-chat-in .24s cubic-bezier(.2, .72, .25, 1) both;
}

.chat-message {
  animation: motion-message-in .2s ease-out both;
}

.public-room-list > .public-room-card,
.public-room-list > .lobby-empty,
.dashboard-public-list > .public-room-card,
.dashboard-public-list > .lobby-empty,
.friend-list > .friend-row,
.dashboard-friend-list > .friend-row,
.friend-inbox > * {
  animation: motion-row-in .24s ease-out both;
}

.public-room-list > :nth-child(2),
.dashboard-public-list > :nth-child(2),
.friend-list > :nth-child(2),
.dashboard-friend-list > :nth-child(2) { animation-delay: 35ms; }

.public-room-list > :nth-child(3),
.dashboard-public-list > :nth-child(3),
.friend-list > :nth-child(3),
.dashboard-friend-list > :nth-child(3) { animation-delay: 65ms; }

.public-room-list > :nth-child(n + 4),
.dashboard-public-list > :nth-child(n + 4),
.friend-list > :nth-child(n + 4),
.dashboard-friend-list > :nth-child(n + 4) { animation-delay: 90ms; }

.felt-table,
.score-card,
.table-note,
.action-dock,
.player-badge,
.seat .avatar,
.turn-pill,
.trick-result,
.welcome-dashboard-card,
.public-room-card,
.friend-row,
.room-player,
.chat-toggle,
.icon-button,
.online-button,
.new-game-button,
.bid-button,
.call-button,
.confirm-button,
.dashboard-account-link,
.dashboard-create-actions button,
.refresh-rooms-button {
  transition: transform .2s ease, box-shadow .24s ease, border-color .2s ease, background-color .2s ease, color .2s ease, filter .2s ease;
}

button:not(.card):not(.modal-close):not(.chat-header button),
a,
.public-room-card,
.friend-row,
.welcome-dashboard-card {
  -webkit-tap-highlight-color: transparent;
}

button:not(.card):not(.modal-close):not(.chat-header button):not(:disabled),
a,
.dashboard-account-link,
.public-room-card,
.friend-row,
.welcome-dashboard-card {
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

button:not(.card):not(.modal-close):not(.chat-header button):not(:disabled):hover,
a:hover,
.public-room-card:hover,
.friend-row:hover,
.welcome-dashboard-card:hover {
  translate: 0 -2px;
}

button:not(.card):not(.modal-close):not(.chat-header button):not(:disabled):active,
a:active {
  translate: 0 1px;
}

.public-room-card:hover,
.friend-row:hover,
.welcome-dashboard-card:hover {
  border-color: #d4c69f;
  box-shadow: 0 8px 20px #14292310;
}

.felt-table {
  transition: box-shadow .35s ease, filter .35s ease;
}

.seat.active-seat .avatar,
.player-bar.active-seat .avatar {
  animation: motion-turn-glow 2.6s ease-in-out infinite;
}

.seat .avatar {
  transition: box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}

.turn-pill,
.player-badge,
.table-note {
  transition: background-color .24s ease, color .24s ease, border-color .24s ease;
}

.turn-pill.is-local-turn {
  background-color: #e0eadb;
  color: #426c4c;
}

.turn-pill.state-change,
#table-message.state-change {
  animation: motion-label-change .34s ease-out both;
}

.action-dock.phase-change {
  animation: motion-phase-shift .38s ease-out both;
}

.turn-clock:not([hidden]) {
  animation: motion-rise-in .22s ease-out both;
}

.turn-clock:not([hidden]).urgent {
  animation: turn-clock-urgent 1s ease-in-out infinite alternate;
}

.trick-result.show {
  animation: motion-result-pop .28s cubic-bezier(.2, .72, .25, 1) both;
}

.welcome-story em,
.welcome-mark,
.brand-mark {
  transition: color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.welcome-mark:not(.profile-shortcut):hover,
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 4px 12px #6f582022;
}

.online-lobby-tab::after {
  transition: inset .22s ease, background-color .22s ease;
}

.online-lobby-tab:hover {
  color: #425b49;
}

.dashboard-refresh.refreshing,
.refresh-rooms-button.refreshing {
  animation: motion-spin .7s ease-in-out infinite;
}

@keyframes motion-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-rise-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-modal-in {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-chat-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-message-in {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes motion-row-in {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes welcome-card-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@keyframes motion-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes motion-turn-glow {
  0%, 100% { box-shadow: 0 0 0 3px #e2cb8877, 0 0 14px #e2cb8844; }
  50% { box-shadow: 0 0 0 5px #e2cb8899, 0 0 22px #e2cb8870; }
}

@keyframes motion-label-change {
  0% { filter: brightness(.88); }
  55% { filter: brightness(1.16); }
  100% { filter: brightness(1); }
}

@keyframes motion-phase-shift {
  0% { box-shadow: 0 0 0 0 #c9ad6633, var(--shadow); }
  45% { box-shadow: 0 0 0 4px #c9ad6644, 0 6px 20px #14292316; }
  100% { box-shadow: var(--shadow); }
}

@keyframes motion-result-pop {
  from { opacity: 0; scale: .94; }
  to { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

body.reduced-motion .welcome-screen:not([hidden]),
body.reduced-motion .welcome-screen:not([hidden]) *,
body.reduced-motion .app-shell:not([inert]) .topbar,
body.reduced-motion .app-shell:not([inert]) .game-layout,
body.reduced-motion .app-shell:not([inert]) .score-card,
body.reduced-motion .app-shell:not([inert]) .table-area,
body.reduced-motion .modal-backdrop:not([hidden]),
body.reduced-motion .modal-backdrop:not([hidden]) > .modal-card,
body.reduced-motion .online-lobby-panel:not([hidden]),
body.reduced-motion .account-signed-in:not([hidden]),
body.reduced-motion .score-breakdown:not([hidden]),
body.reduced-motion .chat-panel:not([hidden]),
body.reduced-motion .chat-message,
body.reduced-motion .public-room-list > *,
body.reduced-motion .dashboard-public-list > *,
body.reduced-motion .friend-list > *,
body.reduced-motion .dashboard-friend-list > *,
body.reduced-motion .friend-inbox > *,
body.reduced-motion .dashboard-refresh.refreshing,
body.reduced-motion .refresh-rooms-button.refreshing {
  animation: none !important;
}

body.reduced-motion .modal-backdrop:not([hidden]) > .modal-card > *,
body.reduced-motion #online-entry:not([hidden]),
body.reduced-motion #online-room-view:not([hidden]),
body.reduced-motion #account-signed-out:not([hidden]),
body.reduced-motion .trick-history[open] .trick-history-list,
body.reduced-motion .membership-plans > *,
body.reduced-motion .training-answers > *,
body.reduced-motion .stats-history > *,
body.reduced-motion .training-feedback:not(:empty),
body.reduced-motion .account-error:not(:empty),
body.reduced-motion .online-error:not(:empty),
body.reduced-motion .friend-status:not(:empty),
body.reduced-motion .dashboard-error:not(:empty),
body.reduced-motion .seat.active-seat .avatar,
body.reduced-motion .player-bar.active-seat .avatar,
body.reduced-motion .turn-pill.state-change,
body.reduced-motion #table-message.state-change,
body.reduced-motion .action-dock.phase-change,
body.reduced-motion .turn-clock:not([hidden]),
body.reduced-motion .trick-result.show {
  animation: none !important;
}