:root {
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-spring: cubic-bezier(0.2, 0.9, 0.2, 1.18);
  --motion-focus: rgba(114, 230, 164, 0.44);
  --motion-glow: rgba(87, 200, 255, 0.22);
}

html.motion-booted {
  scroll-behavior: smooth;
}

body.motion-ready .motion-reveal {
  animation: motionReveal 680ms var(--motion-ease-out) both;
  animation-delay: var(--motion-delay, 0ms);
}

body:not(.motion-ready) .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
}

body.motion-ready :is(
  button,
  .mode-nav a,
  .hero-action,
  .start,
  .spin-button,
  .tool-button,
  .upgrade-page #upgrade-btn,
  .double-button,
  .side-button,
  .crash-button,
  .jackpot-button,
  .jackpot-inline-button,
  .race-button,
  .segment-button,
  .topup-modal__button,
  .inventory-card__action,
  .pagination button,
  .filter-pill,
  .status-filter,
  .room-card,
  .case-card,
  .inventory-card,
  .target-card,
  .pool-item,
  .modal-item
) {
  -webkit-tap-highlight-color: transparent;
}

body.motion-ready :is(
  button,
  a,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--motion-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(114, 230, 164, 0.1);
}

body.motion-ready :is(
  button,
  .mode-nav a,
  .hero-action,
  .start,
  .spin-button,
  .tool-button,
  .upgrade-page #upgrade-btn,
  .double-button,
  .side-button,
  .crash-button,
  .jackpot-button,
  .jackpot-inline-button,
  .race-button,
  .segment-button,
  .topup-modal__button,
  .inventory-card__action,
  .pagination button
) {
  position: relative;
  overflow: hidden;
  transform-origin: center;
}

body.motion-ready :is(
  button,
  .mode-nav a,
  .hero-action,
  .start,
  .spin-button,
  .tool-button,
  .upgrade-page #upgrade-btn,
  .double-button,
  .side-button,
  .crash-button,
  .jackpot-button,
  .jackpot-inline-button,
  .race-button,
  .segment-button,
  .topup-modal__button,
  .inventory-card__action
):not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -55% auto -55% -40%;
  width: 38%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transform: translateX(-120%) rotate(16deg);
  transition: transform 620ms var(--motion-ease-out), opacity 220ms ease;
  pointer-events: none;
}

body.motion-ready :is(
  button,
  .mode-nav a,
  .hero-action,
  .start,
  .spin-button,
  .tool-button,
  .upgrade-page #upgrade-btn,
  .double-button,
  .side-button,
  .crash-button,
  .jackpot-button,
  .jackpot-inline-button,
  .race-button,
  .segment-button,
  .topup-modal__button,
  .inventory-card__action
):not(:disabled):hover::after {
  opacity: 1;
  transform: translateX(420%) rotate(16deg);
}

body.motion-ready .motion-tap {
  animation: motionTap 280ms var(--motion-ease-spring);
}

.motion-ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: motionRipple 620ms var(--motion-ease-out) forwards;
}

body.motion-ready :is(
  .case-card,
  .featured-case,
  .profile-card,
  .showcase-summary__card,
  .inventory-card,
  .target-card,
  .selected-slot,
  .upgrade-stat,
  .double-stat,
  .crash-stat,
  .jackpot-stat,
  .case-stat,
  .slot-copy,
  .slot-board,
  .slot-controls,
  .room-card,
  .lane-card,
  .participant-card,
  .history-card,
  .winner-card,
  .current-drop-card,
  .risk-screen,
  .multiplier-screen,
  .case-visual,
  .growth-chart,
  .economy-card,
  .meta-card,
  .summary-card,
  .admin-section,
  .lot-form,
  .lot-list > li,
  .slot-rtp-row,
  .pool-item,
  .modal-item,
  #caseItemModal .modal-content,
  #drop-feed-list > li
) {
  backface-visibility: hidden;
  transform-origin: center;
}

body.motion-ready :is(
  .case-card,
  .featured-case,
  .profile-card,
  .showcase-summary__card,
  .inventory-card,
  .target-card,
  .selected-slot--filled,
  .room-card,
  .participant-card,
  .history-card,
  .winner-card,
  .lot-list > li,
  .slot-rtp-row,
  .pool-item,
  .modal-item,
  #drop-feed-list > li
):hover {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 42px var(--motion-glow);
}

body.motion-ready :is(
  .case-card,
  .inventory-card,
  .target-card,
  .pool-item,
  .modal-item,
  .current-drop-card,
  .case-result,
  .upgrade-result,
  .double-result,
  .crash-result
) img {
  transition: transform 360ms var(--motion-ease-out), filter 360ms ease;
}

body.motion-ready :is(
  .case-card,
  .inventory-card,
  .target-card,
  .pool-item,
  .modal-item,
  .current-drop-card,
  .case-result,
  .upgrade-result,
  .double-result,
  .crash-result
):hover img {
  transform: translate3d(0, -4px, 0) scale(1.04) rotate(-1deg);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.32));
}

body.motion-ready :is(
  .case-page .case-item-card__visual,
  .case-page .case-result__image-wrap,
  .home-page .case-card__spotlight-visual,
  .home-page .case-card__thumb-visual,
  .upgrade-page .inventory-card__media,
  .upgrade-page .target-card__media,
  .upgrade-page .target-preview__image,
  .profile-page .showcase-item__visual,
  .profile-page .inventory-card__media,
  .double-page .current-drop-card__visual,
  .crash-page .case-visual__drop-media,
  #drop-feed-list li
) {
  position: relative;
  isolation: isolate;
}

body.motion-ready :is(
  .case-page .case-item-card__visual,
  .case-page .case-result__image-wrap,
  .home-page .case-card__spotlight-visual,
  .home-page .case-card__thumb-visual,
  .upgrade-page .inventory-card__media,
  .upgrade-page .target-card__media,
  .upgrade-page .target-preview__image,
  .profile-page .showcase-item__visual,
  .profile-page .inventory-card__media,
  .double-page .current-drop-card__visual,
  .crash-page .case-visual__drop-media
) {
  overflow: hidden;
}

body.motion-ready :is(
  .case-page .case-item-card__visual,
  .case-page .case-result__image-wrap,
  .home-page .case-card__spotlight-visual,
  .home-page .case-card__thumb-visual,
  .upgrade-page .inventory-card__media,
  .upgrade-page .target-card__media,
  .upgrade-page .target-preview__image,
  .profile-page .showcase-item__visual,
  .profile-page .inventory-card__media,
  .double-page .current-drop-card__visual,
  .crash-page .case-visual__drop-media
)::after {
  content: "";
  position: absolute;
  inset: -18% -42%;
  z-index: 2;
  background: linear-gradient(
    108deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(114, 230, 164, 0.18) 52%,
    rgba(255, 255, 255, 0) 66%
  );
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-48%) skewX(-12deg);
  animation: motionSkinSweep 5.8s ease-in-out infinite;
}

body.motion-ready :is(
  .case-page .scope .list .list_item,
  .case-page .case-item-card,
  .home-page .case-card,
  .upgrade-page .inventory-card,
  .upgrade-page .target-card,
  .profile-page .showcase-item,
  .profile-page .inventory-card,
  .double-page .current-drop-card,
  .crash-page .case-visual__drop
):hover :is(
  .case-page .case-item-card__visual,
  .home-page .case-card__spotlight-visual,
  .home-page .case-card__thumb-visual,
  .upgrade-page .inventory-card__media,
  .upgrade-page .target-card__media,
  .profile-page .showcase-item__visual,
  .profile-page .inventory-card__media,
  .double-page .current-drop-card__visual,
  .crash-page .case-visual__drop-media
)::after {
  animation-duration: 1.15s;
}

body.motion-ready :is(
  .case-page .scope .list .list_item img,
  .case-page .case-item-card__visual img,
  .case-page .case-result__image,
  .home-page .case-card__spotlight-visual img,
  .home-page .case-card__thumb-visual img,
  .upgrade-page .inventory-card__media img,
  .upgrade-page .target-card__media img,
  .upgrade-page .target-preview__image img,
  .profile-page .showcase-item__visual img,
  .profile-page .inventory-card__media img,
  .double-page .current-drop-card__visual img,
  .crash-page .case-visual__drop-media img,
  #drop-feed-list img
) {
  will-change: transform, filter;
  animation: motionSkinFloat 4.8s ease-in-out infinite;
}

body.motion-ready :is(
  .case-page .scope .list .list_item:nth-child(3n + 1) img,
  .case-page .case-item-card:nth-child(3n + 1) img,
  .home-page .case-card:nth-child(3n + 1) img,
  .upgrade-page .inventory-card:nth-child(3n + 1) img,
  .upgrade-page .target-card:nth-child(3n + 1) img,
  .profile-page .inventory-card:nth-child(3n + 1) img
) {
  animation-delay: -1.4s;
}

body.motion-ready :is(
  .case-page .scope .list .list_item:nth-child(3n + 2) img,
  .case-page .case-item-card:nth-child(3n + 2) img,
  .home-page .case-card:nth-child(3n + 2) img,
  .upgrade-page .inventory-card:nth-child(3n + 2) img,
  .upgrade-page .target-card:nth-child(3n + 2) img,
  .profile-page .inventory-card:nth-child(3n + 2) img
) {
  animation-delay: -2.8s;
}

body.motion-ready :is(
  .case-page .scope .list .list_item:hover img,
  .case-page .case-item-card:hover img,
  .home-page .case-card:hover img,
  .upgrade-page .inventory-card:hover img,
  .upgrade-page .target-card:hover img,
  .profile-page .showcase-item:hover img,
  .profile-page .inventory-card:hover img,
  .double-page .current-drop-card:hover img,
  .crash-page .case-visual__drop:hover img
) {
  animation: none;
  transform: translate3d(0, -5px, 0) scale(1.055) rotate(-1.4deg);
  filter:
    drop-shadow(0 20px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 18px var(--rarity-shadow, var(--motion-glow)));
}

body.motion-ready :is(
  .topup-modal,
  .jackpot-modal,
  .race-modal,
  .drop-reveal
):not([hidden]) :is(
  .topup-modal__backdrop,
  .jackpot-modal__backdrop,
  .race-modal__backdrop,
  .drop-reveal__backdrop
) {
  animation: motionBackdropIn 260ms ease-out both;
}

body.motion-ready :is(
  .topup-modal,
  .jackpot-modal,
  .race-modal,
  .drop-reveal
):not([hidden]) :is(
  .topup-modal__dialog,
  .jackpot-modal__dialog,
  .race-modal__dialog,
  .drop-reveal__shell
) {
  animation: motionModalIn 520ms var(--motion-ease-out) both;
}

body.motion-ready #caseItemModal[style*="flex"] .modal-content {
  animation: motionModalIn 520ms var(--motion-ease-out) both;
}

body.motion-ready :is(.jackpot-modal__footer, .race-modal__footer, .topup-modal__footer) {
  box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.18);
}

body.motion-ready :is(
  .mode-nav a,
  .filter-pill,
  .status-filter,
  .jackpot-modal__tab,
  .segment-button,
  .side-button,
  .modes button
).is-active,
body.motion-ready :is(.filter-pill, .status-filter, .segment-button, .side-button, .modes button).active {
  animation: motionActivePop 420ms var(--motion-ease-spring);
}

body.motion-ready :is(.case-stage__badge, .live-badge, .double-phase-badge, .jackpot-room-badge, .race-room-badge) {
  animation: motionBadgePulse 1.9s ease-in-out infinite;
}

body.motion-ready :is(.scope, .slot-frame, .wheel-card, .flip-token, .growth-chart__surface, .jackpot-wheel, .race-arena) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.3);
}

body.motion-ready #drop-feed-list > li {
  animation-duration: 520ms;
}

@keyframes motionReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.982);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes motionTap {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.975);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes motionRipple {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(28);
  }
}

@keyframes motionBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes motionModalIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.965);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes motionActivePop {
  0% {
    transform: scale(0.96);
  }

  60% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes motionBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(114, 230, 164, 0);
  }

  50% {
    box-shadow: 0 0 26px rgba(114, 230, 164, 0.16);
  }
}

@keyframes motionSkinFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.26));
  }

  45% {
    transform: translate3d(0, -3px, 0) rotate(-0.55deg) scale(1.018);
    filter:
      drop-shadow(0 22px 28px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 12px var(--rarity-shadow, var(--motion-glow)));
  }

  72% {
    transform: translate3d(0, 1px, 0) rotate(0.35deg) scale(1.006);
  }
}

@keyframes motionSkinSweep {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-48%) skewX(-12deg);
  }

  66% {
    opacity: 0.72;
  }

  78% {
    opacity: 0;
    transform: translateX(48%) skewX(-12deg);
  }

  100% {
    opacity: 0;
    transform: translateX(48%) skewX(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-booted {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  body:not(.motion-ready) .motion-reveal,
  body.motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  body.motion-ready :is(
    .case-page .scope .list .list_item img,
    .case-page .case-item-card__visual img,
    .case-page .case-result__image,
    .home-page .case-card__spotlight-visual img,
    .home-page .case-card__thumb-visual img,
    .upgrade-page .inventory-card__media img,
    .upgrade-page .target-card__media img,
    .upgrade-page .target-preview__image img,
    .profile-page .showcase-item__visual img,
    .profile-page .inventory-card__media img,
    .double-page .current-drop-card__visual img,
    .crash-page .case-visual__drop-media img,
    #drop-feed-list img
  ) {
    animation: none !important;
    transform: none !important;
  }
}