/* =========================================================================
   LanorTrad — Animations & reveals au scroll
   ========================================================================= */

/* Reveal : état initial, retiré quand .in (via IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: transform, opacity; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal].in { opacity: 1; transform: none; }

/* délais en cascade */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseGlow {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Marquee de genres */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
/* défile de la gauche vers la droite (la piste démarre décalée puis revient à 0) */
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* La banderole reste animée même en mode "animations réduites" (effet décoratif voulu) */
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: marquee 38s linear infinite !important; }
}
.marquee .pill {
  padding: 10px 20px; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--line); background: var(--glass); color: var(--txt-soft);
}