/* SynDoc landing page motion: pure CSS (the page's CSP allows no scripts).
   A 12 s loop: the heading types, the body renders, a word is changed with track changes on,
   a comment lands in the margin, a footnote appears, and the file saves as .docx, then PDF. */
:root { --loop: 12s; }
.typed { animation: typeit var(--loop) steps(20, end) infinite; }
@keyframes typeit { 0%, 3% { width: 0; } 20%, 92% { width: 10.4em; } 97%, 100% { width: 0; } }
.tbar .h1 { animation: h1on var(--loop) infinite; }
@keyframes h1on { 0%, 2% { background: #fff; } 3%, 20% { background: #dbeafe; } 22%, 100% { background: #fff; } }
.page .sub, .page p.body, .line { animation: render var(--loop) ease-out infinite both; }
.page p.body { animation-delay: 0.3s; }
.line.l1 { animation-delay: 0.45s; } .line.l2 { animation-delay: 0.6s; } .line.l3 { animation-delay: 0.75s; } .line.l4 { animation-delay: 0.9s; }
@keyframes render { 0%, 18% { opacity: 0; transform: scaleX(0.6); } 26%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.page del { animation: strike var(--loop) infinite both; }
@keyframes strike { 0%, 36% { color: inherit; text-decoration: none; } 38%, 100% { color: #be185d; text-decoration: line-through; } }
.page ins { animation: pop var(--loop) infinite both; }
@keyframes pop { 0%, 39% { opacity: 0; } 42%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.page mark { animation: hl var(--loop) infinite both; }
@keyframes hl { 0%, 48% { background: transparent; } 50%, 92% { background: #fef3c7; } 97%, 100% { background: transparent; } }
.balloon { animation: slidein var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes slidein { 0%, 50% { opacity: 0; transform: translateX(18px); } 55%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.page sup, .fnote { animation: note var(--loop) infinite both; }
@keyframes note { 0%, 62% { opacity: 0; } 65%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.save .s1 { animation: s1 var(--loop) infinite both; }
.save .s2 { animation: s2 var(--loop) infinite both; }
@keyframes s1 { 0%, 72% { opacity: 0; } 74%, 82% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes s2 { 0%, 83% { opacity: 0; } 85%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.tbar .save { animation: savebg var(--loop) infinite both; }
@keyframes savebg { 0%, 72% { opacity: 0; } 74%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typed, .tbar .h1, .page .sub, .page p.body, .line, .page del, .page ins, .page mark, .balloon, .page sup, .fnote, .save .s1, .save .s2, .tbar .save { animation: none; }
  .typed { width: 10.4em; }
  .save .s1 { opacity: 0; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}