:root {

  --sy-duration-hover: 120ms;
  --sy-duration-enter: 200ms;
  --sy-duration-page: 240ms;
  --sy-duration-tick: 400ms;
  --sy-duration-boot: 900ms;
  --sy-duration-pulse: 2000ms;


  --sy-duration-drift: 120000ms;
  --sy-duration-scan: 8000ms;


  --sy-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sy-ease-tick: ease-out;
  --sy-ease-pulse: ease-in-out;
  --sy-ease-ambient: linear;


  --sy-pulse-glow: currentColor;
}

@keyframes sy-anim-boot {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.sy-anim-boot {
  animation: sy-anim-boot var(--sy-duration-boot) var(--sy-ease-standard) 1 both;
}

@keyframes sy-anim-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--sy-pulse-glow);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 6px 2px var(--sy-pulse-glow);
  }
}

.sy-anim-pulse {
  animation: sy-anim-pulse var(--sy-duration-pulse) var(--sy-ease-pulse) infinite;
}

@keyframes sy-anim-tick {
  0% {
    transform: translateY(0.35em);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.sy-anim-tick {
  animation: sy-anim-tick var(--sy-duration-tick) var(--sy-ease-tick) 1 both;
}

@keyframes sy-anim-seat {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sy-anim-seat {
  animation: sy-anim-seat var(--sy-duration-enter) var(--sy-ease-standard) 1 both;
}

@keyframes sy-anim-draw {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.sy-anim-draw {
  transform-origin: var(--sy-draw-origin, left center);
  animation: sy-anim-draw var(--sy-duration-enter) var(--sy-ease-standard) 1 both;
}

@keyframes sy-anim-trace {
  0% {
    stroke-dashoffset: var(--sy-trace-length, 0);
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.sy-anim-trace {
  stroke-dasharray: var(--sy-trace-length, none);
  animation: sy-anim-trace var(--sy-duration-tick) var(--sy-ease-tick) 1 both;
}

@keyframes sy-anim-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(var(--grid-size, 32px), var(--grid-size, 32px), 0);
  }
}

.sy-anim-drift {
  animation: sy-anim-drift var(--sy-duration-drift) var(--sy-ease-ambient) infinite;
}

@keyframes sy-anim-scan {
  0% {
    transform: translate3d(0, var(--sy-scan-from, -10vh), 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, var(--sy-scan-to, 110vh), 0);
    opacity: 0;
  }
}

.sy-anim-scan {
  animation: sy-anim-scan var(--sy-duration-scan) var(--sy-ease-ambient) infinite;
}

:root[data-sy-ambient="paused"] .sy-anim-drift,
:root[data-sy-ambient="paused"] .sy-anim-scan {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .sy-anim-boot {
    animation: none;
    opacity: 1;
    clip-path: none;
  }

  .sy-anim-pulse {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--sy-pulse-glow);
  }

  .sy-anim-tick {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .sy-anim-seat {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .sy-anim-draw {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .sy-anim-trace {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .sy-anim-drift {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .sy-anim-scan {
    animation: none;
    display: none;
  }
}