/* Drift Wall's depth, lift and edge falloff, using the live AAG tiles. */
.depth-wall-viewport {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.depth-wall-plane { position: absolute; inset: 0; transform-style: preserve-3d; }
.depth-wall-viewport:has(.wall.is-honor) { z-index: 2; }
.wall .depth-buffer-band { display: none; }
.is-depth .wall .depth-buffer-band {
  display: block;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
}
.depth-wall-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 88% at 50% 48%, transparent 40%, rgba(12,10,8,.65) 100%);
  opacity: var(--depth-mix, 0);
}
.is-depth .depth-wall-plane {
  will-change: transform;
}
.is-depth .wall { overflow: visible; transform-style: preserve-3d; }
.is-depth .band, .is-depth .track, .is-depth .tile { transform-style: preserve-3d; }
.is-depth .wall.is-live .tile { transition: transform 240ms cubic-bezier(.22,1,.36,1); }
.is-depth .tile-shift {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), var(--depth-lift, 0px));
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}
.is-depth .face {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 38px -16px rgba(0,0,0,.65);
}
.is-depth .face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #060010;
  opacity: calc(.42 * var(--depth-mix, 0));
  transition: opacity 420ms cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .is-depth .tile:hover:not(.is-source):not(.is-held):not(.is-depth-selected) { --depth-lift: calc(64px * var(--depth-mix, 1)); }
  .is-depth .tile:hover .face::after { opacity: 0; }
}
.is-depth .tile:focus-visible { --depth-lift: calc(64px * var(--depth-mix, 1)); outline: none; }
.is-depth .tile:focus-visible .face { outline: 2px solid var(--dark-text, #f9f3e9); outline-offset: -3px; }
.is-depth .tile:focus-visible .face::after, .is-depth .tile.is-depth-selected .face::after { opacity: 0; }
.is-depth .wall.is-live .tile.is-depth-selected {
  transform: rotateY(calc(-1 * var(--depth-ry, -14deg))) rotateX(calc(-1 * var(--depth-rx, 16deg)));
  --depth-lift: 0px;
}
@media (prefers-reduced-motion: reduce) {
  .is-depth .depth-wall-plane { will-change: auto; }
  .is-depth .tile, .is-depth .tile-shift, .is-depth .face::after { transition: none !important; }
  .is-depth .tile { --depth-lift: 0px !important; }
}