:root {
  --dtp-tunnel-green: #9dff4a;
  --dtp-tunnel-cyan: #7fd9ff;
}

.depth-tunnel-test-link {
  color: inherit;
  text-decoration: none;
}

.dtp-depth-tunnel {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(157, 255, 74, 0.1), transparent 28rem),
    #000;
  overflow: hidden;
  perspective: 980px;
}

.dtp-depth-tunnel.is-active {
  visibility: visible;
  opacity: 1;
}

.dtp-depth-tunnel__scan {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--dtp-tunnel-green), var(--dtp-tunnel-cyan), transparent);
  box-shadow:
    0 0 24px rgba(157, 255, 74, 0.64),
    0 0 56px rgba(157, 255, 74, 0.28);
  transform: scaleX(0.18);
}

.dtp-depth-tunnel__frame {
  position: absolute;
  width: min(76vw, 1040px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(157, 255, 74, 0.68);
  background:
    linear-gradient(90deg, rgba(157, 255, 74, 0.28), transparent 14%, transparent 86%, rgba(157, 255, 74, 0.22)),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    0 0 22px rgba(157, 255, 74, 0.22),
    inset 0 0 34px rgba(157, 255, 74, 0.08);
  opacity: 0;
  transform: translateZ(-720px) scale(0.42);
}

.dtp-depth-tunnel__frame::before,
.dtp-depth-tunnel__frame::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 1px;
  background: var(--dtp-tunnel-green);
  box-shadow: 0 0 18px rgba(157, 255, 74, 0.72);
}

.dtp-depth-tunnel__frame::before {
  top: -1px;
  left: -1px;
}

.dtp-depth-tunnel__frame::after {
  right: -1px;
  bottom: -1px;
}

.dtp-depth-tunnel__label {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  color: rgba(243, 246, 239, 0.72);
  font: 700 0.68rem/1.2 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  .dtp-depth-tunnel__frame,
  .dtp-depth-tunnel__scan,
  .dtp-depth-tunnel__label {
    transition: none !important;
    animation: none !important;
  }
}