/* Secondary candidate: the host clock owns opacity; no autonomous animation. */
.ms-region-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #f6f0df;
  color: #455650;
  opacity: 0;
}
.ms-region-transition__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, #fffbef 0%, #fffbef00 70%);
}
.ms-region-transition__clouds::before,
.ms-region-transition__clouds::after {
  content: "";
  position: absolute;
  width: min(66vw, 46rem);
  height: min(27vw, 19rem);
  border-radius: 50%;
  background: #e8e7d8;
  opacity: .42;
}
.ms-region-transition__clouds::before { top: -10%; left: -18%; box-shadow: 12rem 2rem 0 2rem #e8e7d8; }
.ms-region-transition__clouds::after { right: -19%; bottom: -11%; box-shadow: -12rem -2rem 0 2rem #e8e7d8; }
.ms-region-transition__caption {
  position: relative;
  margin: 0;
  padding: 1.5rem;
  max-width: 28rem;
  font: 500 clamp(1rem, 3vw, 1.5rem)/1.5 Georgia, serif;
  text-align: center;
  letter-spacing: .02em;
  text-wrap: balance;
}