/* Wireslate — Motion
   The wire is the brand: a flowing dashed connector is the signature animation.
   Always honor prefers-reduced-motion. */

:root {
  --ease-lift: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-hover: 0.18s;       /* @kind other */
  --dur-flow: 1.1s;         /* @kind other */
  --dur-marquee: 56s;       /* @kind other */
  --dur-float: 2s;          /* @kind other */
  --lift-card: -4px;        /* interactive card hover translateY */
  --lift-button: -1px;
}

/* Signature wire flow — apply to the colored animated path on a connector.
   `flowmove` is the marketing/long-dash variant; `edge-flow` mirrors the product
   app's edge animation exactly (18px dash loop, 1.8s linear). */
@keyframes flowmove { to { stroke-dashoffset: -32; } }
@keyframes edge-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

/* Gentle nudge for "try it" hints */
@keyframes floatHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Seamless marquee (duplicate row contents for the loop) */
@keyframes marqA { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqB { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}