/* ============================================================
   ORBIT LABS — display-letter FX
   Per-letter lock-on entrance + hover pop with orbit ring.
   Stroke (.stroke) and accent are inherited per-letter via the
   parent .dl wrapper, so hollow letters stay hollow.
   ============================================================ */

.dl{display:inline-block;white-space:nowrap}
.dl-ch{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
.dl-sp{width:.28em}

/* ---- entrance: letters drop in from above, slightly rotated,
   staggered by their global index --i. One orchestrated moment. */
.dl-ch.pre{
  opacity:0;
  transform:translateY(-.55em) rotate(-7deg) scale(.86);
}
.dl-ch.in{
  opacity:1;
  transform:none;
  transition:
    transform .6s var(--ease),
    opacity .45s linear;
  transition-delay:calc(var(--i) * 26ms);
}
@media (prefers-reduced-motion:reduce){
  .dl-ch.pre{opacity:1;transform:none}
}

/* ---- hover pop: lift + glow, and a tiny orbit ring spins around
   the letter. Restarted on each pointerenter via .fx class. */
.dl-ch.fx{
  animation:dl-pop .55s var(--ease);
  color:var(--signal);
}
/* keep hollow letters hollow on hover — stroke them cyan instead */
.dl.stroke .dl-ch.fx,
.dl.accent.stroke .dl-ch.fx{
  color:transparent;
  -webkit-text-stroke-color:var(--signal);
}
@keyframes dl-pop{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-.16em) scale(1.08) rotate(3deg)}
  100%{transform:translateY(0) scale(1)}
}
.dl-ch.fx::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:1.15em;height:1.15em;
  margin:-.575em;
  border:1px solid var(--signal);
  border-radius:50%;
  border-top-color:transparent;
  border-bottom-color:transparent;
  opacity:0;
  animation:dl-ring .55s var(--ease);
  pointer-events:none;
}
.dl-ch{position:relative}
@keyframes dl-ring{
  0%{opacity:0;transform:rotate(0deg) scale(.4)}
  30%{opacity:.9}
  100%{opacity:0;transform:rotate(200deg) scale(1.15)}
}

/* glow behind the hovered letter */
.dl-ch.fx::before{
  content:"";
  position:absolute;inset:-.1em;
  background:radial-gradient(circle,rgba(34,211,238,.35),transparent 62%);
  opacity:0;
  animation:dl-glow .55s var(--ease);
  pointer-events:none;z-index:-1;
}
@keyframes dl-glow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .dl-ch.fx,.dl-ch.fx::after,.dl-ch.fx::before{animation:none}
}