/* Generated by tools/seq-css.py; do not edit. */
.tile-demo .demo-t1 {
  --tap-x: 13.5%;
  --tap-y: 12.0%;
}

.tile-demo .demo-t2 {
  --tap-x: 50.0%;
  --tap-y: 65.6%;
}

.tile-demo .demo-t3 {
  --tap-x: 50.0%;
  --tap-y: 71.4%;
}

.seq-digidoc .t2 {
  --tap-x: 49.7%;
  --tap-y: 41.6%;
}

.seq-digidoc .t3 {
  --tap-x: 78.6%;
  --tap-y: 90.9%;
}

.seq-digidoc .t4 {
  --tap-x: 49.9%;
  --tap-y: 69.3%;
}

.seq-olecus .t2 {
  --tap-x: 50%;
  --tap-y: 90.8%;
}

.seq-olecus .t3 {
  --tap-x: 50%;
  --tap-y: 23.8%;
}

.seq-olecus .t4 {
  --tap-x: 50%;
  --tap-y: 72%;
}

.seq-rentgo .t2 {
  --tap-x: 50%;
  --tap-y: 84.6%;
}

.seq-rentgo .t3 {
  --tap-x: 50%;
  --tap-y: 32.7%;
}

.seq-summerswap .t2 {
  --tap-x: 70.7%;
  --tap-y: 5.5%;
}

.seq-summerswap .t3 {
  --tap-x: 49.8%;
  --tap-y: 56.9%;
}

.seq-printincity .t2 {
  --tap-x: 28.7%;
  --tap-y: 52.6%;
}

@media (prefers-reduced-motion: no-preference) {
  .tile-demo .demo-s2 {
    animation: demo-slide-2 12s infinite both;
  }

  .tile-demo .flow-bar .demo-s2 {
    animation-name: demo-url-2;
  }

  .tile-demo .demo-t1 {
    animation: demo-tap-1 12s infinite both;
  }

  .tile-demo .demo-s3 {
    animation: demo-slide-3 12s infinite both;
  }

  .tile-demo .flow-bar .demo-s3 {
    animation-name: demo-url-3;
  }

  .tile-demo .demo-t2 {
    animation: demo-tap-2 12s infinite both;
  }

  .tile-demo .demo-s4 {
    animation: demo-slide-4 12s infinite both;
  }

  .tile-demo .flow-bar .demo-s4 {
    animation-name: demo-url-4;
  }

  .tile-demo .demo-t3 {
    animation: demo-tap-3 12s infinite both;
  }

  .tile-demo .demo-s5 {
    animation: demo-slide-5 12s infinite both;
  }

  .tile-demo .flow-bar .demo-s5 {
    animation-name: demo-url-5;
  }

  .seq-digidoc .s2 {
    animation: digidoc-s2 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .t2 {
    animation: digidoc-t2 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s3 {
    animation: digidoc-s3 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .t3 {
    animation: digidoc-t3 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s4 {
    animation: digidoc-s4 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .t4 {
    animation: digidoc-t4 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s5 {
    animation: digidoc-s5 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s6 {
    animation: digidoc-s6 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s7 {
    animation: digidoc-s7 16s var(--delay, 0s) infinite both;
  }

  .seq-digidoc .s8 {
    animation: digidoc-s8 16s var(--delay, 0s) infinite both;
  }

  .seq-olecus .s2 {
    animation: olecus-s2 14s var(--delay, 0s) infinite both;
  }

  .seq-olecus .t2 {
    animation: olecus-t2 14s var(--delay, 0s) infinite both;
  }

  .seq-olecus .s3 {
    animation: olecus-s3 14s var(--delay, 0s) infinite both;
  }

  .seq-olecus .t3 {
    animation: olecus-t3 14s var(--delay, 0s) infinite both;
  }

  .seq-olecus .s4 {
    animation: olecus-s4 14s var(--delay, 0s) infinite both;
  }

  .seq-olecus .t4 {
    animation: olecus-t4 14s var(--delay, 0s) infinite both;
  }

  .seq-rentgo .s2 {
    animation: rentgo-s2 10s var(--delay, 0s) infinite both;
  }

  .seq-rentgo .t2 {
    animation: rentgo-t2 10s var(--delay, 0s) infinite both;
  }

  .seq-rentgo .s3 {
    animation: rentgo-s3 10s var(--delay, 0s) infinite both;
  }

  .seq-rentgo .t3 {
    animation: rentgo-t3 10s var(--delay, 0s) infinite both;
  }

  .seq-summerswap .s2 {
    animation: summerswap-s2 10s var(--delay, 0s) infinite both;
  }

  .seq-summerswap .t2 {
    animation: summerswap-t2 10s var(--delay, 0s) infinite both;
  }

  .seq-summerswap .s3 {
    animation: summerswap-s3 10s var(--delay, 0s) infinite both;
  }

  .seq-summerswap .t3 {
    animation: summerswap-t3 10s var(--delay, 0s) infinite both;
  }

  .seq-printincity .s2 {
    animation: printincity-s2 8s var(--delay, 0s) infinite both;
  }

  .seq-printincity .t2 {
    animation: printincity-t2 8s var(--delay, 0s) infinite both;
  }
}

@keyframes demo-slide-2 {
  0%,
  19% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  25%,
  92% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes demo-url-2 {
  0%,
  21% {
    opacity: 0;
  }

  25%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes demo-tap-1 {
  0%,
  12% {
    opacity: 0;
    transform: scale(0.6);
  }

  13.5% {
    opacity: 1;
    transform: scale(1);
  }

  15.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  18%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes demo-slide-3 {
  0%,
  41% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  47%,
  92% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes demo-url-3 {
  0%,
  43% {
    opacity: 0;
  }

  47%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes demo-tap-2 {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.6);
  }

  34.5% {
    opacity: 1;
    transform: scale(1);
  }

  36.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  39%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes demo-slide-4 {
  0%,
  63% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  69%,
  92% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes demo-url-4 {
  0%,
  65% {
    opacity: 0;
  }

  69%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes demo-tap-3 {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.6);
  }

  56.5% {
    opacity: 1;
    transform: scale(1);
  }

  58.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  61%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes demo-slide-5 {
  0%,
  77% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  83%,
  92% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes demo-url-5 {
  0%,
  79% {
    opacity: 0;
  }

  83%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes digidoc-s2 {
  0%,
  13% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  19%,
  95% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes digidoc-t2 {
  0%,
  6% {
    opacity: 0;
    transform: scale(0.6);
  }

  7.5% {
    opacity: 1;
    transform: scale(1);
  }

  9.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  12%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes digidoc-s3 {
  0%,
  32% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  38%,
  95% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes digidoc-t3 {
  0%,
  25% {
    opacity: 0;
    transform: scale(0.6);
  }

  26.5% {
    opacity: 1;
    transform: scale(1);
  }

  28.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  31%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes digidoc-s4 {
  0%,
  51% {
    opacity: 0;
  }

  54%,
  95% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes digidoc-t4 {
  0%,
  44% {
    opacity: 0;
    transform: scale(0.6);
  }

  45.5% {
    opacity: 1;
    transform: scale(1);
  }

  47.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  50%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes digidoc-s5 {
  0%,
  60% {
    opacity: 0;
  }

  62%,
  95% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes digidoc-s6 {
  0%,
  67% {
    opacity: 0;
  }

  69%,
  95% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes digidoc-s7 {
  0%,
  75% {
    opacity: 0;
  }

  78%,
  95% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes digidoc-s8 {
  0%,
  85% {
    opacity: 0;
  }

  89%,
  95% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes olecus-s2 {
  0%,
  17% {
    opacity: 0;
  }

  21%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes olecus-t2 {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.6);
  }

  11.5% {
    opacity: 1;
    transform: scale(1);
  }

  13.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  16%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes olecus-s3 {
  0%,
  42% {
    opacity: 0;
  }

  46%,
  92% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes olecus-t3 {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.6);
  }

  36.5% {
    opacity: 1;
    transform: scale(1);
  }

  38.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  41%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes olecus-s4 {
  0%,
  62% {
    transform: translateY(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  69%,
  92% {
    transform: translateY(0);
    opacity: 1;
  }

  99% {
    transform: translateY(0);
    opacity: 0;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes olecus-t4 {
  0%,
  55% {
    opacity: 0;
    top: var(--tap-y);
  }

  56.5% {
    opacity: 1;
    top: var(--tap-y);
    animation-timing-function: ease-in-out;
  }

  62.5% {
    opacity: 1;
    top: calc(var(--tap-y) + -40%);
  }

  64%,
  100% {
    opacity: 0;
    top: calc(var(--tap-y) + -40%);
  }
}

@keyframes rentgo-s2 {
  0%,
  22% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  30%,
  90% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes rentgo-t2 {
  0%,
  15% {
    opacity: 0;
    transform: scale(0.6);
  }

  16.5% {
    opacity: 1;
    transform: scale(1);
  }

  18.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  21%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes rentgo-s3 {
  0%,
  52% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  60%,
  90% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes rentgo-t3 {
  0%,
  45% {
    opacity: 0;
    transform: scale(0.6);
  }

  46.5% {
    opacity: 1;
    transform: scale(1);
  }

  48.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  51%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes summerswap-s2 {
  0%,
  22% {
    opacity: 0;
  }

  27%,
  90% {
    opacity: 1;
  }

  99%,
  100% {
    opacity: 0;
  }
}

@keyframes summerswap-t2 {
  0%,
  15% {
    opacity: 0;
    transform: scale(0.6);
  }

  16.5% {
    opacity: 1;
    transform: scale(1);
  }

  18.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  21%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes summerswap-s3 {
  0%,
  52% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  60%,
  90% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes summerswap-t3 {
  0%,
  45% {
    opacity: 0;
    transform: scale(0.6);
  }

  46.5% {
    opacity: 1;
    transform: scale(1);
  }

  48.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  51%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes printincity-s2 {
  0%,
  35% {
    transform: translateX(100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  45%,
  90% {
    transform: translateX(0);
    opacity: 1;
  }

  99% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes printincity-t2 {
  0%,
  25% {
    opacity: 0;
    transform: scale(0.6);
  }

  26.5% {
    opacity: 1;
    transform: scale(1);
  }

  28.5% {
    opacity: 1;
    transform: scale(0.85);
  }

  33%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}