body.depth-3d-ready {
  perspective: 1600px;
  perspective-origin: center top;
}

.depth-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.depth-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.06)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.12), transparent 28%);
}

.depth-orb {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  top: var(--top);
  border-radius: 999px;
  opacity: 0.28;
  filter: blur(2px);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), var(--color) 58%, rgba(0, 0, 0, 0));
  animation: depth-drift var(--duration) ease-in-out infinite alternate;
  transform: translateZ(var(--z));
}

.depth-grid {
  position: absolute;
  inset: auto -10% -14% -10%;
  height: 38vh;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.18;
  transform: rotateX(72deg) translateZ(-120px);
  transform-origin: center top;
}

main,
.wrap,
.page,
.game-wrap {
  position: relative;
  z-index: 1;
}

.depth-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.depth-card.depth-rest {
  box-shadow: 0 18px 34px rgba(18, 24, 38, 0.12);
}

.depth-card > * {
  transform: translateZ(14px);
}

.depth-raise {
  transform: translateZ(24px);
}

@keyframes depth-drift {
  from {
    transform: translate3d(0, 0, var(--z)) scale(1);
  }
  to {
    transform: translate3d(20px, -18px, calc(var(--z) + 30px)) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-orb {
    animation: none;
  }

  .depth-card {
    transition: none;
  }
}