.app-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
}

.app-loading-screen--exiting {
  animation: court-node-splash-exit 550ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  pointer-events: none;
}

.app-loading-screen--exiting .app-loading-logo {
  animation: court-node-logo-exit 550ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.app-loading-logo {
  position: absolute;
  top: var(--cn-visible-viewport-center, 50%);
  left: 50%;
  width: clamp(72px, 18vw, 112px);
  height: auto;
  transform-origin: center;
  animation: court-node-bounce 1.8s infinite;
  will-change: transform;
}

@keyframes court-node-bounce {
  0% {
    top: var(--cn-visible-viewport-center, 50%);
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }

  8% {
    top: calc(var(--cn-visible-viewport-center, 50%) + 8px);
    transform: translate(-50%, -50%) rotate(14deg) scale(1);
  }

  38% {
    top: calc(
      var(--cn-visible-viewport-height, 100vh) - max(56px, calc(env(safe-area-inset-bottom) + 16px))
    );
    transform: translate(-50%, -100%) rotate(170deg) scale(1);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  43% {
    top: calc(
      var(--cn-visible-viewport-height, 100vh) - max(56px, calc(env(safe-area-inset-bottom) + 16px))
    );
    transform: translate(-50%, -100%) rotate(180deg) scaleX(1.1) scaleY(0.88);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  86% {
    top: var(--cn-visible-viewport-center, 50%);
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }

  100% {
    top: var(--cn-visible-viewport-center, 50%);
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}

@keyframes court-node-splash-exit {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes court-node-logo-exit {
  from {
    top: var(--cn-visible-viewport-center, 50%);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    top: var(--cn-visible-viewport-center, 50%);
    transform: translate(calc(50vw + 100%), -50%) rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-logo,
  .app-loading-screen--exiting {
    animation: none;
  }
}