/* MultiplyOS Intro · Focus. No page element receives a filter. */
html.mo-intro-pending {
  background-color: var(--mo-intro-ground, var(--ground, var(--mo-page, white)));
}
html.mo-intro-pending body {
  visibility: hidden;
  animation: mo-intro-failsafe 1ms steps(1, end) 2499ms forwards;
}
html.mo-intro-playing [data-mo-intro]:is(svg,img),
html.mo-intro-playing [data-mo-intro] :is(svg,img) {
  visibility: hidden !important;
}
@keyframes mo-intro-failsafe {
  to { visibility: visible; }
}
.mo-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  /* Also uncovers the page if execution fails after creating the overlay. */
  animation: mo-intro-failsafe-overlay 1ms steps(1, end) 2499ms forwards;
}
.mo-intro-overlay, .mo-intro-overlay * { pointer-events: none !important; }
.mo-intro-page-ground, .mo-intro-ground, .mo-intro-focus-ground {
  position: absolute;
  inset: 0;
}
.mo-intro-page-ground, .mo-intro-focus-ground {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.mo-intro-mark {
  position: absolute;
  transform-origin: top left;
}
.mo-intro-light-clip { position: absolute; inset: 0; overflow: hidden; }
.mo-intro-light {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 12%;
  opacity: 0;
  background: rgb(255 255 255 / 0.45);
  box-shadow: 0 0 14px 12px rgb(255 255 255 / 0.3);
}
@keyframes mo-intro-failsafe-overlay {
  to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html.mo-intro-pending body { visibility: visible; animation: none; }
  .mo-intro-overlay { display: none; }
}

/* Static proof page only; no rules here affect an adopting app. */
body[data-mo-intro-demo] { margin: 0; background: var(--mo-page); }
[data-mo-intro-demo] .mo-page { padding-top: 12vh; }
[data-mo-intro-demo] .mo-page__inner { max-width: 400px; }
[data-mo-intro-demo] .mo-brand { gap: 16px; font-size: 28px; }
[data-mo-intro-demo] form { display: grid; gap: 24px; }
[data-mo-intro-demo] .mo-field { height: 56px; font-size: 17px; }
[data-mo-intro-demo] .mo-button--main { min-height: 56px; width: 100%; }
[data-mo-intro-demo] .mo-h1 { margin: 0; }
html[data-theme="dark"] body[data-mo-intro-demo] { background: var(--mo-page); }