/* BBDT depth hero: "Ballroom" set into the scene, the dancers in front of it.
   Layers, bottom to top: .dh-back (the whole frame), .dh-word, .dh-front (the dancers). */

.dh-root { position: absolute; inset: 0; overflow: hidden; background: #07070A; }
.dh-layer { position: absolute; inset: 0; }
.dh-slide { position: absolute; inset: 0; transition: opacity 700ms cubic-bezier(.33,0,.2,1); }
.dh-slide.dh-out { opacity: 0; pointer-events: none; }
.dh-slide .oh-svg, .dh-slide canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the clips' grade, as the photo hero applies it; per layer, not on the whole stage */
.dh-slide .oh-svg, .dh-slide canvas { filter: saturate(1.22) contrast(1.08); }
.dh-pool { position: absolute; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.dh-slide canvas { opacity: 0; transition: opacity 520ms cubic-bezier(.33,0,.2,1); }
.dh-slide.dh-play canvas { opacity: 1; }
.dh-slide.dh-play .oh-svg { opacity: 0; transition: opacity 520ms cubic-bezier(.33,0,.2,1); }
.dh-back .oh-line { display: none; }                /* the lines are drawn once, on the front */
.dh-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* the word */
.dh-word { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); overflow: visible; }
.dh-word path { vector-effect: non-scaling-stroke; }
/* the drawn line: a steady white stroke laid down behind a bright, glowing head */
.dh-word .ln { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  animation: dh-draw var(--d) cubic-bezier(.7,0,.25,1) var(--t) both, dh-fade 1100ms ease var(--lt) both; }
.dh-word .gl { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0.05 2; stroke-dashoffset: 0.05; opacity: 0;
  animation: dh-glint var(--d) cubic-bezier(.7,0,.25,1) var(--t) both; }
.dh-word .glint { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,120,150,.8)); }
.dh-word .fl { fill: #fff; stroke: none; }
/* between clips the glint runs the letters once more */
.dh-word.dh-again .gl { animation: dh-glint 1000ms cubic-bezier(.6,0,.3,1) calc(var(--i) * 50ms) both; }
@keyframes dh-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes dh-glint { 0% { stroke-dashoffset: 0.05; opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -0.97; opacity: 0; } }
@keyframes dh-fade { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dh-word .ln, .dh-word .gl { animation: none; opacity: 0; }
  .dh-slide, .dh-slide canvas, .dh-slide .oh-svg { transition: none; }
}