/* ============================================================
   INTRO
   ============================================================ */
html.ayi-intro-pending,
html.ayi-intro-pending body {
  overflow: hidden;
}

html.ayi-intro-pending .app > .topbar,
html.ayi-intro-measuring .app > .topbar,
html.ayi-intro-animating .app > .topbar {
  z-index: 120;
  border-bottom-color: transparent;
  opacity: 0 !important;
  pointer-events: none;
  animation: none !important;
}

html.ayi-intro-pending .topbar-meta,
html.ayi-intro-pending .status,
html.ayi-intro-pending #screen-1 > :not(#title-1),
html.ayi-intro-pending .foot,
html.ayi-intro-pending .whatsapp-float,
html.ayi-intro-measuring .topbar-meta,
html.ayi-intro-measuring .status,
html.ayi-intro-measuring #screen-1 > :not(#title-1),
html.ayi-intro-measuring .foot,
html.ayi-intro-measuring .whatsapp-float,
html.ayi-intro-animating .topbar-meta,
html.ayi-intro-animating .status,
html.ayi-intro-animating #screen-1 > :not(#title-1),
html.ayi-intro-animating .foot,
html.ayi-intro-animating .whatsapp-float {
  opacity: 0 !important;
  pointer-events: none;
  animation: none !important;
}

html.ayi-intro-pending #title-1 {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 110;
  width: min(616px, calc(100vw - 40px));
  max-width: none;
  margin: 0;
  opacity: 1 !important;
  transform: translate3d(-50%, -50%, 0);
  animation: none !important;
  will-change: transform;
}

html.ayi-intro-locked #title-1 {
  transform: translate3d(0, 0, 0) !important;
}

html.ayi-intro-measuring #title-1 {
  opacity: 0 !important;
  animation: none !important;
}

html.ayi-intro-animating #title-1 {
  opacity: 1 !important;
  animation: none !important;
  will-change: transform;
}

html.ayi-intro-complete .app > .topbar,
html.ayi-intro-complete .foot,
html.ayi-intro-complete #screen-1 .reveal,
html.ayi-intro-complete #screen-1 .baustein {
  animation: none !important;
}

@media (max-width: 640px) {
  html.ayi-intro-pending #title-1 {
    width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ayi-intro-pending,
  html.ayi-intro-pending body { overflow: auto; }
  html.ayi-intro-pending .topbar-meta,
  html.ayi-intro-pending .status,
  html.ayi-intro-pending #screen-1 > :not(#title-1),
  html.ayi-intro-pending .foot,
  html.ayi-intro-pending .whatsapp-float {
    opacity: 1;
    pointer-events: auto;
  }
  html.ayi-intro-pending #title-1 {
    position: static;
    width: auto;
    max-width: 22ch;
    transform: none;
  }
}