/* A phone screen that taps its login button: the login page slides in
   from the right over the site while the address bar stays and only its
   URL fades, like the browser it was taken in. Tiles start 2s apart, so
   the story reads in order: log in once on eesti.ee via TARA,
   then every other site only continues the GovSSO session. One 8s loop:
   tap at 25-35%, slide in 35-45%, hold, fade back to the site at 90-100%.
   Reduced motion: the site screen stays. */
.tile-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #eee;
}

.flow-page,
.flow-bar {
  position: relative;
  overflow: hidden;
}

.flow-page {
  flex: 1;
}

/* The bar keeps its own proportions (1125 x 176 source pixels; the demo
   recording's bar is 886 x 135). */
.flow-bar {
  aspect-ratio: 1125 / 176;
}

.tile-demo .flow-bar {
  aspect-ratio: 886 / 135;
}

.flow-page img,
.flow-bar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.flow-page .flow-next {
  transform: translateX(100%);
}

.flow-bar .flow-next {
  opacity: 0;
}

.flow-tap {
  position: absolute;
  left: var(--tap-x);
  top: var(--tap-y);
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .flow-page .flow-next,
  .flow-bar .flow-next,
  .flow-tap {
    animation-duration: 8s;
    animation-delay: var(--delay, 0s);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  .flow-page .flow-next {
    animation-name: flow-slide;
  }

  .flow-bar .flow-next {
    animation-name: flow-url;
  }

  .flow-tap {
    animation-name: flow-tap;
  }
}

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

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

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

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

@keyframes flow-slide {
  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 flow-url {
  0%,
  37% {
    opacity: 0;
  }

  45%,
  90% {
    opacity: 1;
  }

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

/* The TARA demo login as five screens in one 12s loop: tap Log in, slide
   to TARA, tap Smart-ID, slide, tap Jätka, slide to "please wait", then
   the logged-in dashboard (ID code blurred). The Smart-ID app itself is
   skipped. Same parts as .tile-flow; each screen and tap has its own
   keyframes, generated from the timeline in this comment's rule order. */
.tile-demo .flow-page img + img {
  transform: translateX(100%);
}

.tile-demo .flow-bar img + img {
  opacity: 0;
}

/* Step sequences: an app's screens in turn, each entering by a slide
   (page change) or a fade (sheet or state change), some after a tap. The
   keyframes are generated by tools/seq-css.py
   from one timeline per sequence; edit the timeline there. */
.tile-seq .is-slide {
  transform: translateX(100%);
}

.tile-seq .is-fade {
  opacity: 0;
}

.tile-seq .is-up {
  transform: translateY(100%);
}

/* A web app's own bottom nav plus the address bar (886 x 255 source px). */
.flow-bar-app {
  aspect-ratio: 886 / 255;
}