.console[data-depth] {
  transform: perspective(1200px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--motion-order, 0) * 55ms);
}

.motion-ready .motion-reveal.is-visible { opacity: 1; transform: translateY(0); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(49, 94, 231, .28);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .console[data-depth] { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}