/* Effect: letters — v0.1.0 (nieuw in djturbeau.com v0.5.0) */
.letter { display: inline-block; white-space: pre; }
/* vóór het afspelen verborgen (alleen met anim-aan, gezet door voorklaar.js) */
.anim-aan .hub-titel:not(.lt-klaar) .letter, .anim-aan .vlak-kaart b:not(.lt-klaar) .letter, .anim-aan .band b:not(.lt-klaar) .letter { opacity: 0; }
.lt.lt-speel .letter { animation-duration: 0.7s; animation-fill-mode: both; animation-delay: calc(var(--i) * 55ms + var(--start, 0ms)); }
/* flip: kantelt van achter naar voren (kop DJ TURBEAU) */
.lt-flip.lt-speel .letter { animation-name: lt-flip; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1.25); transform-origin: 50% 100%; }
@keyframes lt-flip { from { opacity: 0; transform: perspective(420px) rotateX(-100deg) translateY(-0.25em); } to { opacity: 1; transform: none; } }
/* slam: komt groot en wazig op je af en slaat vast (vaktitels) */
.lt-slam.lt-speel .letter { animation-name: lt-slam; animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1); animation-delay: calc(var(--i) * 45ms + var(--start, 0ms)); }
@keyframes lt-slam { from { opacity: 0; transform: scale(2.6) translateY(-0.2em); filter: blur(8px); } 70% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
/* drop: valt schuin naar binnen (volgende show) */
.lt-drop.lt-speel .letter { animation-name: lt-drop; animation-timing-function: cubic-bezier(0.3, 1.4, 0.4, 1); }
@keyframes lt-drop { from { opacity: 0; transform: translateY(-70%) rotate(-14deg); } to { opacity: 1; transform: none; } }
/* TURBEAU: neonbuis die aanslaat na de flip */
.lt-flip.lt-speel .t-naam { animation: lt-neon 1.3s steps(1, end) calc(var(--n) * 55ms + var(--start, 0ms) + 250ms) 1 both; }
@keyframes lt-neon { 0% { opacity: 1; } 12% { opacity: 0.25; } 18% { opacity: 1; } 30% { opacity: 0.4; } 36%, 100% { opacity: 1; } }
/* hover over een vak: de titel golft */
.vlak:hover .vlak-kaart b.lt-klaar .letter, .band:hover b.lt-klaar .letter { animation: lt-golf 0.6s ease calc(var(--i) * 35ms) 1; }
@keyframes lt-golf { 0%, 100% { transform: none; } 45% { transform: translateY(-5px) rotate(-3deg); color: var(--kl, #fff); } }
@media (prefers-reduced-motion: reduce) { .lt.lt-speel .letter, .lt-flip.lt-speel .t-naam, .vlak:hover .vlak-kaart b .letter { animation: none !important; opacity: 1 !important; } }