/* Tamasha wordmark animation, 90s title screen style.
   tamasha-anim.js splits [data-tms-anim] text into letters. Each letter drops in once, then
   every 4.5s a silver streak sweeps across with a small hop. The streak is a silver copy of
   the letter inside a masked band: the band slides one way and the copy slides back, so the
   silver stays on the letter. Only transform, translate and opacity animate, so the
   compositor runs it without repainting the colour glyphs. */
@font-palette-values --tms-silver { font-family: Honk; base-palette: 0;
  override-colors: 0 #000000, 1 #000000, 2 #FFFFFF, 3 #F1F1F1, 4 #D6D6D6, 5 #BDBDBD, 6 #D9D9D9, 7 #F4F4F4; }

.tms-w { white-space: nowrap; }
.tms-ch { display: inline-block; position: relative; opacity: 0; will-change: transform, opacity; }
.tms-gl { position: absolute; inset: -.25em; pointer-events: none; overflow: hidden;
  font-palette: --tms-silver;
  -webkit-mask-image: linear-gradient(105deg, transparent 36%, #000 50%, transparent 64%);
          mask-image: linear-gradient(105deg, transparent 36%, #000 50%, transparent 64%);
  transform: translateX(-110%); will-change: transform; }
.tms-gl__in { display: block; padding: .25em; transform: translateX(110%); will-change: transform; }

.is-go .tms-ch {
  animation: tms-drop .6s cubic-bezier(.34,1.56,.64,1) both, tms-fade .2s linear both,
             tms-hop 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms), calc(var(--start) + var(--i) * 70ms);
}
.is-go .tms-gl { animation: tms-gl-out 4.5s linear infinite; animation-delay: calc(var(--start) + var(--i) * 70ms); }
.is-go .tms-gl__in { animation: tms-gl-in 4.5s linear infinite; animation-delay: calc(var(--start) + var(--i) * 70ms); }

/* One segment each, so the overshoot easing runs once and the landing is a single smooth bounce. */
@keyframes tms-drop { from { transform: translateY(-.7em); } to { transform: none; } }
@keyframes tms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tms-hop {
  0%, 14%, 100% { translate: 0 0; }
  6%            { translate: 0 -.08em; }
}
@keyframes tms-gl-out { 0% { transform: translateX(-110%); } 14%, 100% { transform: translateX(110%); } }
@keyframes tms-gl-in  { 0% { transform: translateX(110%); }  14%, 100% { transform: translateX(-110%); } }