/* DepthText — styles for the extruded hero headline.
 * Deliberately inherits font-size / weight / letter-spacing / line-height from
 * the existing .h1 scale so it tracks the site's responsive clamp() sizing and
 * the normalized -.02ch tracking. Do not hardcode type values here. */

.depth-text {
  isolation: isolate;
}

.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: start;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.depth-text__layer,
.depth-text__face {
  grid-area: 1 / 1;
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  white-space: nowrap;
  user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

.depth-text__layer {
  pointer-events: none;
  filter: saturate(.95) brightness(.92);
}

/* Layer text comes from the attribute, not a text node — keeps the rendered
   DOM from carrying ~19 duplicate copies of the page's <h1> string. */
.depth-text__layer::after {
  content: attr(data-t);
}

.depth-text__face {
  position: relative;
  z-index: 1;
  color: var(--depth-text-face-color, #ff6a00);
  transform: translateZ(.6px);
}

@media (prefers-reduced-motion: reduce) {
  .depth-text__stage { will-change: auto; }
}

/* The stage is an inline-grid so it centres with the text (see site.css).
 * All layers render the same string at the same size, so they stay stacked. */
.hero-home__title .depth-text__stage {
  place-items: center;
}