:root {
  --motion-fast: 140ms;
  --motion-state: 240ms;
  --motion-enter: 520ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes royal-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes royal-soft-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes royal-pulse-ring {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 190, 48, 0);
  }
  50% {
    box-shadow: 0 0 22px 0 rgba(255, 190, 48, 0.16);
  }
}

.motion-ready .navbar-container,
.motion-ready .banner,
.motion-ready .case-inventory-name-container,
.motion-ready .cases-container,
.motion-ready .update-name-container,
.motion-ready .upgrade-containers,
.motion-ready .inventory-main-containers,
.motion-ready .repl-main-container,
.motion-ready .upper-info,
.motion-ready .mines-main-container {
  animation: royal-rise var(--motion-enter) var(--ease-out-expo) both;
  animation-delay: calc(min(var(--motion-index, 0), 8) * 55ms);
}

.motion-ready .case-cell,
.motion-ready .upgrade-item-cell,
.motion-ready .case-item-cell,
.motion-ready .mines-game-cell,
.motion-ready .user-cell,
.motion-ready .payment-button-container,
.motion-ready .item-cell {
  animation: royal-soft-pop 420ms var(--ease-out-quint) both;
  animation-delay: calc(min(var(--motion-index, 0), 12) * 38ms);
}

.balance-plus-button,
.settings-button,
.telegram-sign-button,
.banner-button,
.case-open-button,
.case-open-num-button,
.upgrade-button,
.item-cell-upgrade-button,
.filter-container-main,
.upgrade-filter-container-main,
.case_roulet_fast-button,
.activate-promocode-button,
.payment-button-container,
.upper-copy-button,
.promocode-generate,
.user-cell,
.item-cell-sell-button,
.repl-promocode {
  transition:
    transform var(--motion-fast) var(--ease-out-expo),
    filter var(--motion-state) var(--ease-out-quart),
    box-shadow var(--motion-state) var(--ease-out-quart),
    opacity var(--motion-state) var(--ease-out-quart);
}

@media (hover: hover) and (pointer: fine) {
  .balance-plus-button:hover,
  .settings-button:hover,
  .telegram-sign-button:hover,
  .banner-button:hover,
  .case-open-button:hover,
  .upgrade-button:hover,
  .item-cell-upgrade-button:hover,
  .activate-promocode-button:hover,
  .promocode-generate:hover,
  .repl-promocode:hover,
  .upper-copy-button:hover {
    transform: translate3d(0, -2px, 0) scale(1.025);
    filter: brightness(1.08) saturate(1.08);
    box-shadow: 0 10px 26px rgba(230, 148, 27, 0.18);
  }

  .case-cell:hover,
  .upgrade-item-cell:hover,
  .case-item-cell:hover,
  .item-cell:hover,
  .payment-button-container:hover,
  .user-cell:hover {
    transform: translate3d(0, -3px, 0);
    filter: brightness(1.05);
  }

  .navbar-main:hover .ilogo {
    transform: rotate(-5deg) scale(1.04);
  }
}

.balance-plus-button:active,
.settings-button:active,
.telegram-sign-button:active,
.banner-button:active,
.case-open-button:active,
.case-open-num-button:active,
.upgrade-button:active,
.item-cell-upgrade-button:active,
.activate-promocode-button:active {
  transform: translate3d(0, 0, 0) scale(0.96);
  filter: brightness(0.96);
}

.payment-button-container:active,
.promocode-generate:active,
.upper-copy-button:active,
.repl-promocode:active,
.item-cell-sell-button:active {
  transform: translate3d(0, 0, 0) scale(0.97);
  filter: brightness(0.96);
}

.case-cell,
.upgrade-item-cell,
.case-item-cell,
.mines-game-cell,
.user-cell,
.payment-button-container,
.item-cell,
.ilogo,
.ihead,
.icoin,
.case-roulet-arrow,
.case_roulet_fast-button-animation-part-2,
.banner-img,
.background-coin-1,
.background-coin-2,
.repl-bonus-img,
.promocode-window,
.promocode-window-bonus-img,
.case-icon-container-img,
.upgrade-chair-item,
.upgrade-chair-item-right {
  transition:
    transform var(--motion-state) var(--ease-out-quart),
    filter var(--motion-state) var(--ease-out-quart),
    opacity var(--motion-state) var(--ease-out-quart);
  will-change: transform, opacity, filter;
}

.case-open-num-button.selected,
.case-open-num-button:first-child,
.upgrade-circle-container-dec-3,
.case_roulet_fast-button-animation-cont {
  animation: royal-pulse-ring 2800ms var(--ease-out-quart) infinite;
}

.case_roulet_fast-button-animation-part-2 {
  transform-origin: center;
}

.case_roulet_fast-button:active .case_roulet_fast-button-animation-part-2 {
  transform: translateX(13px);
}

.motion-ready .case-roulet-arrows-horizontal,
.motion-ready .case-roulet-arrows-vertical {
  animation: royal-soft-pop 360ms var(--ease-out-expo) both;
  animation-delay: 220ms;
}

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