/* SynPhoto landing page motion: pure CSS (the page's CSP allows no scripts).
   A 9 s loop: the before/after wipe sweeps, layers build up, sliders move, the title fades in. */
:root { --loop: 9s; }
.before-wrap { animation: wipe-clip var(--loop) ease-in-out infinite; }
.wipe { animation: wipe-pos var(--loop) ease-in-out infinite; }
@keyframes wipe-clip { 0%, 8% { clip-path: inset(0 15% 0 0); } 45%, 55% { clip-path: inset(0 85% 0 0); } 92%, 100% { clip-path: inset(0 15% 0 0); } }
@keyframes wipe-pos { 0%, 8% { left: 85%; } 45%, 55% { left: 15%; } 92%, 100% { left: 85%; } }
.layer { animation: layer-in var(--loop) ease-out infinite both; }
.l0 { animation-name: none; }
.l1 { animation-delay: 0.6s; } .l2 { animation-delay: 1.4s; } .l3 { animation-delay: 2.2s; }
@keyframes layer-in { 0% { opacity: 0; transform: translateY(-8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-8px); } }
.title-layer { animation: title-in var(--loop) ease-out 2.2s infinite both; }
@keyframes title-in { 0% { opacity: 0; transform: translate(-50%, 10px); } 8%, 86% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; } }
.knob { animation: slide var(--loop) ease-in-out infinite; }
.k1 { --a: 40%; --b: 62%; } .k2 { --a: 50%; --b: 70%; animation-delay: 0.5s; } .k3 { --a: 30%; --b: 78%; animation-delay: 1s; }
@keyframes slide { 0%, 10% { left: var(--a); } 45%, 60% { left: var(--b); } 95%, 100% { left: var(--a); } }
@media (prefers-reduced-motion: reduce) {
  .before-wrap, .wipe, .layer, .title-layer, .knob { animation: none; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}