/* SynSound landing page motion: pure CSS (the page's CSP allows no scripts).
   An 8 s loop: the playhead sweeps the arrangement, the counter ticks bar by bar, the meters
   bounce at their own rates (so they never move together), the faders ride like Touch
   automation and the record button pulses. */
:root { --loop: 8s; }
.phd i { animation: sweep var(--loop) linear infinite; }
@keyframes sweep { from { left: 0; } to { left: 100%; } }
.clock span { animation: tick var(--loop) steps(8) infinite; }
@keyframes tick { from { transform: translateY(0); } to { transform: translateY(-144px); } }
.meter i { animation: lvl 0.9s ease-in-out infinite alternate; }
.m2 i { animation-duration: 0.7s; animation-delay: -0.3s; } .m3 i { animation-duration: 1.1s; animation-delay: -0.5s; }
.m4 i { animation-duration: 0.6s; animation-delay: -0.2s; } .m5 i { animation-duration: 0.8s; animation-delay: -0.6s; }
.m6 i { animation-duration: 1s; animation-delay: -0.1s; } .m7 i { animation-duration: 0.75s; animation-delay: -0.4s; }
.m8 i { animation-duration: 0.95s; animation-delay: -0.7s; } .m9 i { animation-duration: 0.85s; animation-delay: -0.25s; }
.m10 i { animation-duration: 0.65s; animation-delay: -0.55s; }
@keyframes lvl { 0% { transform: scaleY(0.25); } 40% { transform: scaleY(0.85); } 70% { transform: scaleY(0.5); } 100% { transform: scaleY(0.72); } }
.fader i { animation: ride var(--loop) ease-in-out infinite alternate; }
.f2 i { animation-delay: -2s; } .f3 i { animation-delay: -4s; } .f4 i { animation-delay: -6s; } .f5 i { animation-delay: -3s; }
@keyframes ride { 0% { transform: translateY(0); } 50% { transform: translateY(26px); } 100% { transform: translateY(8px); } }
.tp .rec { animation: rec 1.2s ease-in-out infinite; }
.tp .rec::after { animation: ring 1.2s ease-out infinite; }
@keyframes rec { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.6; } }
@keyframes ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .phd i, .clock span, .meter i, .fader i, .tp .rec, .tp .rec::after { animation: none; }
  .phd i { left: 40%; } .meter i { transform: scaleY(0.6); }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}