/* A small light parts four rounded banks, using one uninterrupted exit. */
.mist-intro {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
.mist-banks { position: absolute; inset: 0; pointer-events: none; }
.fog-bank {
  position: absolute;
  width: 138vw;
  height: 84dvh;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition: transform 1600ms cubic-bezier(.45, 0, .25, 1), opacity 1600ms cubic-bezier(.45, 0, .25, 1);
}
.fog-vapor {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/assets/mist-cloud-v18.svg') center / 100% 100% no-repeat;
  animation: mist-curl 9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.fog-bank-one { left: -57%; top: -20%; --fog-x: -65vw; --fog-y: -12dvh; }
.fog-bank-two { right: -56%; top: -12%; --fog-x: 62vw; --fog-y: -17dvh; }
.fog-bank-three { left: -51%; bottom: -20%; --fog-x: -72vw; --fog-y: 16dvh; }
.fog-bank-four { right: -58%; bottom: -9%; --fog-x: 70vw; --fog-y: 18dvh; }
.fog-bank-two .fog-vapor { animation-delay: -4s; animation-direction: alternate-reverse; scale: 1.12; }
.fog-bank-three .fog-vapor { animation-delay: -2s; scale: 1.15; rotate: -9deg; }
.fog-bank-four .fog-vapor { animation-delay: -6s; scale: 1.05; rotate: 12deg; }
.mist-intro .intro-content { z-index: 2; }
.mist-intro .loading-fireflies { z-index: 1; transition: opacity 900ms ease; }
.is-ready .mist-intro { opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mist-intro.is-parting .fog-bank {
  transform: translate3d(var(--fog-x), var(--fog-y), 0) scale(1.12);
  opacity: 0;
  transition-delay: 250ms;
}
.is-ready .mist-intro .intro-content { transition: opacity 350ms ease; }
.is-ready .mist-intro .loading-fireflies { opacity: 0; }
.intro-firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  z-index: 3;
  pointer-events: none;
  animation: intro-firefly-arrive 1200ms cubic-bezier(.22, .65, .3, 1) both;
}
.intro-firefly-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffe36f;
  box-shadow: 0 0 7px 3px #fff6ba, 0 0 24px 8px #f8db8777;
  animation: intro-firefly-breathe 2200ms ease-in-out infinite alternate;
}
.intro-light-pulse {
  position: absolute;
  width: 44px;
  height: 44px;
  left: -18px;
  top: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dbae 0, #fff1c35c 27%, #fbe6b013 56%, transparent 72%);
  opacity: 0;
  transform: scale(.2);
}
.mist-intro.is-parting .intro-light-pulse { animation: intro-light-expand 1600ms cubic-bezier(.22, .61, .36, 1) both; }
.mist-intro.is-parting .intro-light-pulse-two { animation-delay: 280ms; }
.mist-intro.is-parting .intro-firefly-core { animation: intro-light-release 1700ms ease-in-out both; }
.firefly-dust i:nth-child(6) { left: 12%; top: 30%; animation-delay: -8s; width: 2px; height: 2px; }
.firefly-dust i:nth-child(7) { left: 87%; top: 80%; animation-delay: -11s; }
.firefly-dust i:nth-child(8) { left: 43%; top: 84%; animation-delay: -2s; width: 2px; height: 2px; }
/* Reveal the existing foreground through the fog, without a visibility pop. */
body.mist-loading :where(.forest > :is(.doors, .invitation, .carousel-controls, .forest-actions, .scene-header, .frame)) {
  visibility: visible !important;
  opacity: 0;
}
body.mist-revealing :where(.forest > :is(.doors, .invitation, .carousel-controls, .forest-actions, .scene-header, .frame)) {
  opacity: 1;
  transition: opacity 1500ms cubic-bezier(.45, 0, .25, 1);
}
@keyframes mist-curl {
  from { transform: translate3d(-3%, 1%, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(4%, -3%, 0) rotate(3deg) scale(1.08); }
}
@keyframes intro-firefly-arrive {
  0% { transform: translate3d(-42vw, 24dvh, 0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes intro-firefly-breathe {
  from { opacity: .75; transform: scale(.8); }
  to { opacity: 1; transform: scale(1.1); }
}
@keyframes intro-light-expand {
  0% { opacity: 0; transform: scale(.2); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: scale(22); }
}
@keyframes intro-light-release {
  0% { opacity: 1; transform: scale(1); }
  24% { opacity: 1; transform: scale(1.65); }
  100% { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
  .mist-intro { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fog-bank, .fog-vapor { animation: none !important; transition: none !important; }
  .intro-firefly, .intro-firefly-core, .intro-light-pulse { animation: none !important; transition: none !important; }
  .intro-firefly { transform: none; }
  .mist-intro.is-parting .intro-firefly { opacity: 0; }
  .fog-bank { transform: none; }
  .mist-intro.is-parting .fog-bank { transform: none; opacity: 0; }
  body.mist-revealing :where(.forest > :is(.doors, .invitation, .carousel-controls, .forest-actions, .scene-header, .frame)) { transition: none; }
}