/* SynSheet landing page motion: pure CSS (the page's CSP allows no scripts).
   A 10 s loop: rows fill, the formula types, the total appears, data bars and the chart grow. */
:root { --loop: 10s; }
.row.r2, .row.r3, .row.r4, .row.r5 { animation: fill var(--loop) ease-out infinite both; }
.r3 { animation-delay: 0.25s; } .r4 { animation-delay: 0.5s; } .r5 { animation-delay: 0.75s; }
@keyframes fill { 0% { opacity: 0; transform: translateY(-6px); } 6%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.formula { animation: typeit var(--loop) steps(11, end) infinite; }
@keyframes typeit { 0%, 14% { width: 0; } 30%, 92% { width: 11ch; } 97%, 100% { width: 0; } }
.row.total { animation: total var(--loop) ease-out infinite both; }
@keyframes total { 0%, 31% { opacity: 0; } 35%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.bar em { animation: grow var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes grow { 0%, 38% { transform: scaleX(0); } 50%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.chart b { animation: rise var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.chart b:nth-child(2) { animation-delay: 0.15s; } .chart b:nth-child(3) { animation-delay: 0.3s; } .chart b:nth-child(4) { animation-delay: 0.45s; }
@keyframes rise { 0%, 50% { transform: scaleY(0); } 62%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .row, .formula, .bar em, .chart b { animation: none; }
  .formula { width: 11ch; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}