/* Title wave animation triggered when clicking Planet Zeeb on start screen */
/* Simple per-letter wave using a small bit of CSS and a --i index set on spans */

#startTitle {
  display: inline-block; /* allow transforms without layout issues */
  will-change: transform;
}

/* Wave class applied to the title container. Child spans use staggered delays via --i */
#startTitle.title-wave span {
  display: inline-block;
  animation: title-wave 600ms ease-out both;
  animation-delay: calc(var(--i) * 50ms);
}

@keyframes title-wave {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px); }
  70%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}