@layer fx {
  .app[data-ready='false'] .topbar,
  .app[data-ready='false'] .rail,
  .app[data-ready='false'] .dock,
  .app[data-ready='false'] .cabinet,
  .app[data-ready='false'] .chat {
    opacity: 0;
  }

  .app[data-ready='true'] .topbar {
    animation: enter-down 0.7s var(--ease-out) both;
  }

  .app[data-ready='true'] .cabinet {
    animation: cabinet-drop 0.95s var(--ease-spring) 0.08s both;
  }

  .app[data-ready='true'] .rail--left {
    animation: enter-left 0.75s var(--ease-out) 0.3s both;
  }

  .app[data-ready='true'] .rail--right {
    animation: enter-right 0.75s var(--ease-out) 0.3s both;
  }

  .app[data-ready='true'] .dock {
    animation: enter-up 0.8s var(--ease-spring) 0.2s both;
  }

  .app[data-ready='true'] .chat {
    animation: enter-up 0.7s var(--ease-out) 0.5s both;
  }

  .cabinet.is-leaving .cab__body {
    animation: body-leave 0.42s var(--ease-in) both;
  }

  .cabinet.is-leaving .cab__meter {
    animation: fade-drop 0.35s var(--ease-in) both;
  }

  .cabinet.is-arriving .cab__body {
    animation: body-arrive 0.72s var(--ease-spring) both;
  }

  .cabinet.is-arriving .cab__meter {
    animation: pop-in 0.6s var(--ease-spring) 0.25s both;
  }

  .cab__plaque.is-flipping .cab__name {
    animation: plaque-flip 1.05s var(--ease-soft) both;
  }

  .pay-tally {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 91;
    translate: -50% 0;
    padding: 2px 9px 3px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    color: #9dff8a;
    background: rgba(8, 4, 18, 0.78);
    box-shadow: 0 0 0 1px rgba(120, 255, 110, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    pointer-events: none;
  }

  .pay-tally[data-wallet='spins'] {
    color: #ffe27a;
    box-shadow: 0 0 0 1px rgba(255, 210, 80, 0.55), 0 4px 10px rgba(0, 0, 0, 0.45);
  }

  @keyframes spin-slow {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes enter-down {
    from {
      opacity: 0;
      transform: translateY(-110%);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes enter-up {
    from {
      opacity: 0;
      transform: translateY(80%);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes enter-left {
    from {
      opacity: 0;
      transform: translateX(-60%);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes enter-right {
    from {
      opacity: 0;
      transform: translateX(60%);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes cabinet-drop {
    0% {
      opacity: 0;
      transform: translateY(-14%) scale(0.92);
    }

    60% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes body-leave {
    to {
      transform: translateY(8%) scale(0.96);
      filter: blur(6px) brightness(0.6);
      opacity: 0;
    }
  }

  @keyframes body-arrive {
    from {
      transform: translateY(-10%) scale(0.95);
      filter: blur(6px) brightness(1.6);
      opacity: 0;
    }

    to {
      transform: none;
      filter: none;
      opacity: 1;
    }
  }

  @keyframes fade-drop {
    to {
      opacity: 0;
      transform: translate(-50%, 40%);
    }
  }

  @keyframes pop-in {
    from {
      opacity: 0;
      transform: translate(-50%, 30%) scale(0.8);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }

  @keyframes plaque-flip {
    0% {
      transform: rotateX(0deg);
      opacity: 1;
    }

    40% {
      transform: rotateX(90deg);
      opacity: 0;
    }

    60% {
      transform: rotateX(-90deg);
      opacity: 0;
    }

    100% {
      transform: rotateX(0deg);
      opacity: 1;
    }
  }

  @keyframes pulse-glow {
    0%,
    100% {
      filter: brightness(1);
    }

    50% {
      filter: brightness(1.35);
    }
  }

  @keyframes glow-breathe {
    0%,
    100% {
      opacity: 0.55;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes wobble {
    0%,
    100% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(-9deg);
    }

    40% {
      transform: rotate(8deg);
    }

    60% {
      transform: rotate(-5deg);
    }

    80% {
      transform: rotate(3deg);
    }
  }

  @keyframes shine-sweep {
    from {
      transform: translateX(-120%) skewX(-18deg);
    }

    to {
      transform: translateX(220%) skewX(-18deg);
    }
  }

  @keyframes value-bump {
    0% {
      transform: scale(1);
    }

    35% {
      transform: scale(1.18);
    }

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