/* Per-letter scatter-converge hero entrance (see hero-letter-scatter.js).
   Each .ls-letter carries its own --x/--y/--r (random scattered start
   offset/rotation, set inline by the script) and --d (stagger delay).
   One-shot: animation-fill-mode forwards holds the converged end state,
   no loop-out, unlike the reference pattern this was adapted from. */
.ls-hero { overflow: visible; }
.ls-line { display: block; }
/* Wraps one real 3D depth-text host per letter (see .js) - the scatter
   transform/blur/opacity lives here, on the wrapper, not on .depth-text
   itself, so it never fights depth-text.js's own rAF-driven pointer-tilt
   transform on .depth-text__stage (a descendant, different element). A
   drop-shadow (not text-shadow) carries the glow, since this element has
   no direct text of its own anymore - text-shadow wouldn't paint through
   a wrapped 3D block. */
.ls-letter {
  display: inline-block;
  opacity: 0;
  filter:
    blur(14px)
    drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 85%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 50%, transparent));
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.4);
  animation: ls-letter-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--d);
  will-change: transform, opacity, filter;
}

@keyframes ls-letter-in {
  0% {
    opacity: 0;
    filter:
      blur(14px)
      drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 85%, transparent))
      drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 50%, transparent));
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.4);
  }
  60% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 85%, transparent))
      drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 50%, transparent));
  }
  100% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 3px color-mix(in srgb, var(--glow) 60%, transparent));
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-letter {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}