/* SynDeck landing page motion: pure CSS (the page's CSP allows no scripts).
   A 10 s loop: the selection moves down the slide strip, the slide's bullets build one by one,
   the chart's bars grow, and the presenter timer ticks. */
:root { --loop: 10s; }
.sel { animation: pick var(--loop) steps(1, end) infinite; }
@keyframes pick { 0% { transform: translateY(0); } 33% { transform: translateY(58px); } 66% { transform: translateY(116px); } 100% { transform: translateY(0); } }
.slide li { opacity: 0; animation: build var(--loop) ease-out infinite both; }
.slide li:nth-child(1) { animation-delay: 0.6s; } .slide li:nth-child(2) { animation-delay: 1.4s; } .slide li:nth-child(3) { animation-delay: 2.2s; }
@keyframes build { 0% { opacity: 0; transform: translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.bars b { animation: grow var(--loop) cubic-bezier(0.2, 0.9, 0.3, 1.15) infinite both; }
.bars b:nth-child(1) { animation-delay: 3s; } .bars b:nth-child(2) { animation-delay: 3.2s; } .bars b:nth-child(3) { animation-delay: 3.4s; } .bars b:nth-child(4) { animation-delay: 3.6s; }
@keyframes grow { 0% { transform: scaleY(0); } 8%, 82% { transform: scaleY(1); } 90%, 100% { transform: scaleY(0); } }
.pv .timer span { animation: tick var(--loop) steps(10) infinite; }
@keyframes tick { from { transform: translateY(0); } to { transform: translateY(-160px); } }
.pv .dot { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .sel, .slide li, .bars b, .pv .timer span, .pv .dot { animation: none; }
  .slide li { opacity: 1; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}