/* Depth-text hero effect — vanilla port of react-bits DepthText, same
   recipe validated live on bio.html's SHANE GRAFFITI hero. Extracted
   verbatim from bio.html into a shared file so research pages can reuse
   the exact same, already-working mechanism instead of a reimplementation. */
.depth-text {
  display: inline-block;
  perspective: var(--dt-perspective, 900px);
  perspective-origin: 50% 48%;
  isolation: isolate;
}
.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-2.4deg) rotateY(3.15deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.depth-text__layer, .depth-text__face {
  grid-area: 1 / 1;
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  text-rendering: geometricPrecision;
}
.depth-text__layer { position: absolute; inset: 0; z-index: 0; filter: saturate(0.95) brightness(0.92); pointer-events: none; text-shadow: none; }
.depth-text .depth-text__face { position: relative; z-index: 1; color: var(--dt-face); text-shadow: var(--dt-shadow, none); transform: translateZ(0.6px); }
@media (hover: hover) and (pointer: fine) { .depth-text { cursor: default; } }
@media (prefers-reduced-motion: reduce) { .depth-text__stage { will-change: auto; } }