/* Generated by src/site/flow.ts. */
@media (prefers-reduced-motion: no-preference) {
@keyframes flow-0 {
  0% { opacity: 1; transform: none }
  18.571% { opacity: 1; animation-timing-function: linear }
  19.286% { opacity: 0; transform: none }
  93.81% { opacity: 0; transform: translateY(calc(4 * var(--u))); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  95.524% { opacity: 1 }
  95.81% { transform: none }
  100% { opacity: 1 }
}
.scene .s-taken { animation: flow-0 21s linear infinite both; }
@keyframes flow-1 {
  0% { opacity: 0 }
  19.333% { opacity: 0; transform: translateY(calc(4 * var(--u))); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  21.048% { opacity: 1 }
  21.333% { transform: none }
  44.762% { opacity: 1; animation-timing-function: linear }
  45.476% { opacity: 0; transform: none }
  100% { opacity: 0 }
}
.scene .s-watch { animation: flow-1 21s linear infinite both; }
@keyframes flow-2 {
  0% { opacity: 0 }
  45.524% { opacity: 0; transform: translateY(calc(4 * var(--u))); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  47.238% { opacity: 1 }
  47.524% { transform: none }
  93.81% { opacity: 1; animation-timing-function: linear }
  93.857% { opacity: 0; transform: none }
  100% { opacity: 0 }
}
.scene .s-free { animation: flow-2 21s linear infinite both; }
@keyframes flow-3 {
  0% { opacity: 1; transform: none }
  44.762% { opacity: 1; animation-timing-function: linear }
  45.476% { opacity: 0; transform: none }
  93.81% { opacity: 0; transform: translateY(calc(4 * var(--u))); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  95.524% { opacity: 1 }
  95.81% { transform: none }
  100% { opacity: 1 }
}
.scene .s-busy { animation: flow-3 21s linear infinite both; }
@keyframes flow-4 {
  0% { opacity: 1 }
  26.667% { opacity: 1; animation-timing-function: linear }
  29.048% { opacity: 0 }
  59.524% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  61.905% { opacity: 1 }
  91.429% { opacity: 1; animation-timing-function: linear }
  93.81% { opacity: 0 }
  96.19% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  98.571% { opacity: 1 }
  100% { opacity: 1 }
}
.scene .app { animation: flow-4 21s linear infinite both; }
@keyframes flow-5 {
  0% { opacity: 0 }
  18.571% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  20.952% { opacity: 1 }
  44.762% { opacity: 1; animation-timing-function: linear }
  47.143% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .halo { animation: flow-5 21s linear infinite both; }
@keyframes flow-6 {
  0% { opacity: 0 }
  62.667% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  65.619% { opacity: 1 }
  93.81% { opacity: 1 }
  93.857% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .p2 .sock-free { animation: flow-6 21s linear infinite both; }
@keyframes flow-7 {
  0% { opacity: 1 }
  65.619% { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  67.048% { opacity: 0 }
  93.81% { opacity: 0 }
  93.857% { opacity: 1 }
  100% { opacity: 1 }
}
.scene .p2 .sock-occ { animation: flow-7 21s linear infinite both; }
@keyframes flow-8 {
  0% { opacity: 0 }
  61.429% { opacity: 1 }
  66.429% { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  68.429% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .sweep { animation: flow-8 21s linear infinite both; }
@keyframes flow-9 {
  0% { stroke-dashoffset: 100 }
  61.429% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1) }
  65.952% { stroke-dashoffset: 0 }
  100% { stroke-dashoffset: 0 }
}
.scene .sweep circle { animation: flow-9 21s linear infinite both; }
@keyframes flow-10 {
  0% { opacity: 1 }
  36.19% { opacity: 1; animation-timing-function: linear }
  37.619% { opacity: 0 }
  93.81% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  95.238% { opacity: 1 }
  100% { opacity: 1 }
}
.scene .status .t-before { animation: flow-10 21s linear infinite both; }
@keyframes flow-11 {
  0% { opacity: 0 }
  37.619% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  39.048% { opacity: 1 }
  93.81% { opacity: 1; animation-timing-function: linear }
  93.857% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .status .t-after { animation: flow-11 21s linear infinite both; }
@keyframes flow-12 {
  0% { opacity: 0; transform: scale(0.7) }
  14.762% { opacity: 0; transform: scale(0.7); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  15.476% { opacity: 1; transform: scale(1) }
  17.143% { opacity: 1; transform: scale(1); animation-timing-function: linear }
  18.333% { opacity: 0; transform: scale(1) }
  100% { opacity: 0; transform: scale(1) }
}
.scene .touch-button { animation: flow-12 21s linear infinite both; }
@keyframes flow-13 {
  0% { opacity: 0; transform: scale(0) }
  15% { opacity: 1; transform: scale(0); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  17.857% { opacity: 1; transform: scale(1) }
  19.524% { opacity: 1; transform: scale(1) }
  19.571% { opacity: 0; transform: scale(0) }
  100% { opacity: 0; transform: scale(0) }
}
.scene .ripple { animation: flow-13 21s linear infinite both; }
@keyframes flow-14 {
  0% { opacity: 0 }
  27.857% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  30.714% { opacity: 1 }
  44.762% { opacity: 1; animation-timing-function: linear }
  47.143% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .aod { animation: flow-14 21s linear infinite both; }
@keyframes flow-15 {
  0% { opacity: 1 }
  36.19% { opacity: 1; animation-timing-function: linear }
  38.571% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .aod .t-before { animation: flow-15 21s linear infinite both; }
@keyframes flow-16 {
  0% { opacity: 0 }
  37.619% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  40% { opacity: 1 }
  100% { opacity: 1 }
}
.scene .aod .t-after { animation: flow-16 21s linear infinite both; }
@keyframes flow-17 {
  0% { opacity: 0 }
  44.762% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  47.143% { opacity: 1 }
  60.476% { opacity: 1; animation-timing-function: linear }
  62.619% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .lock { animation: flow-17 21s linear infinite both; }
@keyframes flow-18 {
  0% { opacity: 0; transform: translateY(calc(24 * var(--u))) }
  46.429% { opacity: 0; transform: translateY(calc(24 * var(--u))); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  49.286% { opacity: 1; transform: none }
  100% { opacity: 1; transform: none }
}
.scene .lock-note { animation: flow-18 21s linear infinite both; }
@keyframes flow-19 {
  0% { opacity: 0; transform: scale(0.7) }
  55.714% { opacity: 0; transform: scale(0.7); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  56.429% { opacity: 1; transform: scale(1) }
  58.095% { opacity: 1; transform: scale(1); animation-timing-function: linear }
  59.286% { opacity: 0; transform: scale(1) }
  100% { opacity: 0; transform: scale(1) }
}
.scene .touch-note { animation: flow-19 21s linear infinite both; }
@keyframes flow-20 {
  0% { opacity: 1 }
  36.19% { opacity: 1; animation-timing-function: linear }
  38.571% { opacity: 0 }
  93.81% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  96.667% { opacity: 1 }
  100% { opacity: 1 }
}
.scene .big-clock .t-before { animation: flow-20 21s linear infinite both; }
@keyframes flow-21 {
  0% { opacity: 0 }
  38.095% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  40.952% { opacity: 1 }
  92.381% { opacity: 1; animation-timing-function: linear }
  94.762% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .big-clock .t-after { animation: flow-21 21s linear infinite both; }
@keyframes flow-22 {
  0% { opacity: 1; transform: none }
  26.667% { opacity: 1; animation-timing-function: linear }
  28.095% { opacity: 0; transform: none }
  93.81% { opacity: 0; transform: translateY(0.25rem); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  96.19% { opacity: 1 }
  96.667% { transform: none }
  100% { opacity: 1 }
}
.scene .cap1 { animation: flow-22 21s linear infinite both; }
@keyframes flow-23 {
  0% { opacity: 0 }
  28.333% { opacity: 0; transform: translateY(0.25rem); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  30.714% { opacity: 1 }
  31.19% { transform: none }
  44.762% { opacity: 1; animation-timing-function: linear }
  46.19% { opacity: 0; transform: none }
  100% { opacity: 0 }
}
.scene .cap2 { animation: flow-23 21s linear infinite both; }
@keyframes flow-24 {
  0% { opacity: 0 }
  46.429% { opacity: 0; transform: translateY(0.25rem); animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  48.81% { opacity: 1 }
  49.286% { transform: none }
  91.429% { opacity: 1; animation-timing-function: linear }
  92.857% { opacity: 0; transform: none }
  100% { opacity: 0 }
}
.scene .cap3 { animation: flow-24 21s linear infinite both; }
@keyframes flow-25 {
  0% { opacity: 1 }
  26.667% { opacity: 1; animation-timing-function: linear }
  32.381% { opacity: 0 }
  96.19% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  100% { opacity: 1; opacity: 1 }
}
.scene .glow-blue { animation: flow-25 21s linear infinite both; }
@keyframes flow-26 {
  0% { opacity: 0 }
  61.429% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1) }
  67.143% { opacity: 1 }
  91.429% { opacity: 1; animation-timing-function: linear }
  95.238% { opacity: 0 }
  100% { opacity: 0 }
}
.scene .glow-green { animation: flow-26 21s linear infinite both; }
.scene .halo > span { animation: flow-breathe 2.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate both; }
@keyframes flow-breathe { from { opacity: 0.15; } to { opacity: 1; } }
}