/* SynMotion landing page motion: pure CSS (the page's CSP allows no scripts).
   One 6 s loop for every part: the playhead sweeps the timeline in the first 80 %, each keyframe
   pulses as the playhead reaches it (delay = 80 % of the loop × its position), the shape follows
   an eased curve (X and Y on nested boxes with different easing), the title's letters rise, and
   the render bar fills while the output format changes. */
:root { --loop: 6s; }
.ph i { animation: sweep var(--loop) linear infinite; }
@keyframes sweep { 0% { left: 0; } 80%, 100% { left: 100%; } }
.track .kf { animation: kp var(--loop) ease-out infinite; }
.k10 { animation-delay: 0.48s; } .k25 { animation-delay: 1.2s; } .k35 { animation-delay: 1.68s; } .k50 { animation-delay: 2.4s; }
.k60 { animation-delay: 2.88s; } .k75 { animation-delay: 3.6s; } .k85 { animation-delay: 4.08s; }
@keyframes kp { 0%, 100% { transform: rotate(45deg) scale(1); background: #facc15; } 3% { transform: rotate(45deg) scale(1.8); background: #fff; } 9% { transform: rotate(45deg) scale(1); background: #facc15; } }
.mx { animation: mx var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes mx { 0% { left: 6%; } 80%, 100% { left: 88%; } }
.my { animation: my var(--loop) cubic-bezier(0.1, 0.7, 0.3, 1) infinite; }
@keyframes my { 0% { top: 0; } 80%, 100% { top: -150px; } }
.dot { animation: spin var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes spin { 0% { transform: rotate(0); } 80%, 100% { transform: rotate(270deg); } }
.title-anim span { animation: rise var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.title-anim span:nth-child(2) { animation-delay: 0.06s; } .title-anim span:nth-child(3) { animation-delay: 0.12s; } .title-anim span:nth-child(4) { animation-delay: 0.18s; }
.title-anim span:nth-child(5) { animation-delay: 0.24s; } .title-anim span:nth-child(6) { animation-delay: 0.3s; } .title-anim span:nth-child(7) { animation-delay: 0.36s; }
.title-anim span:nth-child(8) { animation-delay: 0.42s; } .title-anim span:nth-child(9) { animation-delay: 0.48s; }
@keyframes rise { 0%, 4% { opacity: 0; transform: translateY(14px); } 14%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.prog i { animation: fill var(--loop) linear infinite; }
@keyframes fill { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
.fmt span { opacity: 0; animation: fmt var(--loop) infinite; }
.fmt span:nth-child(2) { animation-delay: 2s; } .fmt span:nth-child(3) { animation-delay: 4s; }
@keyframes fmt { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ph i, .track .kf, .mx, .my, .dot, .title-anim span, .prog i, .fmt span { animation: none; }
  .ph i { left: 55%; } .mx { left: 60%; } .my { top: -120px; } .prog i { transform: scaleX(0.6); }
  .fmt span:first-child { opacity: 1; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}