/* SynVector landing page animations: pure CSS + SVG (the page's CSP allows no scripts). */

/* Hero: the curve draws itself, then anchors and handles appear. */
.draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards; }
.draw-soft { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop 0.45s ease-out forwards; }
.pop.d1 { animation-delay: 0.4s; } .pop.d2 { animation-delay: 1.5s; } .pop.d3 { animation-delay: 2.8s; }
.pop.d4 { animation-delay: 3.1s; } .pop.d5 { animation-delay: 3.3s; }
@keyframes pop { 0% { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
.fade-in { opacity: 0; animation: fade 0.6s ease-out 3s forwards; }
@keyframes fade { to { opacity: 1; } }
.nib { opacity: 0; animation: fade 0.2s linear 0.3s forwards, fadeout 0.4s linear 3s forwards; }
@keyframes fadeout { to { opacity: 0; } }

/* Headline selection box appears after the curve. */
.selected { animation: select 0.4s ease-out 2.9s both; }
.selected .h, .size-tag { animation: fade 0.3s ease-out 3s both; }
@keyframes select { from { outline-color: transparent; } to { outline-color: var(--blue); } }

/* Feature: Pathfinder — two shapes slide together and unite. */
.pf-a { animation: pf-a 4s ease-in-out infinite; }
.pf-b { animation: pf-b 4s ease-in-out infinite; }
.pf-u { opacity: 0; animation: pf-u 4s ease-in-out infinite; }
@keyframes pf-a { 0%, 15% { transform: translateX(-28px); } 45%, 100% { transform: translateX(0); } }
@keyframes pf-b { 0%, 15% { transform: translateX(28px); } 45%, 100% { transform: translateX(0); } }
@keyframes pf-u { 0%, 50% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* Feature: a gradient sweeps across the shape. */
.sweep { animation: sweep 5s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-120px); } to { transform: translateX(120px); } }

/* Respect reduced motion: show the finished drawing, no movement. */
@media (prefers-reduced-motion: reduce) {
  .draw, .draw-soft { animation: none; stroke-dashoffset: 0; }
  .pop, .fade-in, .selected, .selected .h, .size-tag { animation: none; opacity: 1; }
  .nib { display: none; }
  .pf-a, .pf-b, .pf-u, .sweep { animation: none; }
  .pf-u { opacity: 1; }
  .gallery figure, .btn { transition: none; }
  html { scroll-behavior: auto; }
}