:root {
  --ml-flow-ms: 820ms;
  --ml-question-ms: 560ms;
  --ml-flow-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.ml-intro-avatar {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg, #fcfcfa);
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: transform var(--ml-flow-ms) var(--ml-flow-ease);
  will-change: transform;
}

.ml-intro-avatar__canvas {
  display: block;
  opacity: 0;
  transition: opacity 500ms ease;
}

.ml-intro-avatar.is-visible .ml-intro-avatar__canvas {
  opacity: 1;
}

html.ml-intro-active #app {
  transform: translate3d(0, 100%, 0);
}

html.ml-intro-active.ml-intro-leaving #app {
  transform: translate3d(0, 0, 0);
  transition: transform var(--ml-flow-ms) var(--ml-flow-ease);
  will-change: transform;
}

.ml-intro-avatar.is-leaving {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}

/* Welcome -> Question 01. Both pages are children of one two-page track, so
   Question 01 moves with the Welcome page and stays connected to its lower edge. */
.ml-flow-stage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: 200vh;
  height: 200dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #fcfcfa);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--ml-flow-ms) var(--ml-flow-ease);
  will-change: transform;
}

.ml-flow-stage.is-leaving {
  transform: translate3d(0, -50%, 0);
}

.ml-flow-stage > .ml-flow-page,
.ml-flow-stage > #app {
  flex: 0 0 100vh;
  flex-basis: 100dvh;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg, #fcfcfa);
}

.ml-flow-stage > #app {
  position: relative;
}

/* Questions continue the same upward grammar with slightly quicker timing. */
.q-slider-track {
  transition: transform var(--ml-question-ms) var(--ml-flow-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.ml-intro-active #app {
    opacity: 0;
    transform: none;
  }

  html.ml-intro-active.ml-intro-leaving #app {
    opacity: 1;
    transform: none;
    transition: opacity 320ms ease;
  }

  .ml-intro-avatar {
    transform: none;
    transition: opacity 320ms ease;
  }

  .ml-intro-avatar.is-leaving {
    opacity: 0;
    transform: none;
  }

  .ml-intro-avatar__canvas {
    opacity: 1;
    transition: none;
  }

  .ml-flow-stage,
  .q-slider-track {
    transition: none !important;
    transform: none;
  }
}