/* SynPDF landing page motion: pure CSS (the page's CSP allows no scripts).
   One 10 s loop over the hero document: highlight → sticky note → signature → redaction → stamp. */
:root { --loop: 10s; }

.hl { animation: hl var(--loop) cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes hl { 0%, 4% { width: 0; } 14%, 92% { width: calc(100% + 8px); } 97%, 100% { width: 0; } }

.note { animation: note var(--loop) ease-out infinite; }
@keyframes note { 0%, 18% { transform: rotate(4deg) scale(0); } 22% { transform: rotate(4deg) scale(1.08); } 24%, 92% { transform: rotate(4deg) scale(1); } 96%, 100% { transform: rotate(4deg) scale(0); } }

.sig path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: sig var(--loop) linear infinite; }
@keyframes sig { 0%, 30% { stroke-dashoffset: 420; } 48%, 92% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 420; opacity: 0; } }

.redact { animation: redact var(--loop) cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes redact { 0%, 54% { transform: scaleX(0); } 62%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }

.stamp { animation: stamp var(--loop) ease-out infinite; }
@keyframes stamp { 0%, 68% { transform: rotate(-12deg) scale(0); } 71% { transform: rotate(-12deg) scale(1.3); } 74%, 92% { transform: rotate(-12deg) scale(1); } 96%, 100% { transform: rotate(-12deg) scale(0); } }

.doc:not(.doc-back) { animation: float 6s ease-in-out infinite alternate; }
@keyframes float { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(-2deg) translateY(-8px); } }

/* Reduced motion: the finished document, no movement */
@media (prefers-reduced-motion: reduce) {
  .hl, .note, .sig path, .redact, .stamp, .doc:not(.doc-back) { animation: none; }
  .hl { width: calc(100% + 8px); }
  .note { transform: rotate(4deg) scale(1); }
  .sig path { stroke-dashoffset: 0; }
  .redact { transform: scaleX(1); }
  .stamp { transform: rotate(-12deg) scale(1); }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}