/* Decorative effects stay within the guest experience. */
.night-fog {
  position: absolute;
  inset: 8% 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 57%, #000 30%, transparent 73%);
}
.night-fog i {
  position: absolute;
  inset: 14% -24% -8%;
  background:
    radial-gradient(ellipse at 26% 60%, #c5d79830, transparent 44%),
    radial-gradient(ellipse at 70% 72%, #d7c9ac3a, transparent 42%),
    radial-gradient(ellipse at 44% 90%, #99ab8b3b, transparent 54%);
  animation: night-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.night-fog i + i {
  inset: 20% -30% -5%;
  background:
    radial-gradient(ellipse at 35% 48%, #e6ac6c26, transparent 43%),
    radial-gradient(ellipse at 68% 70%, #c5d7983b, transparent 50%);
  animation-duration: 31s;
  animation-delay: -14s;
  animation-direction: alternate-reverse;
}
.night-in-view .night-fog i {
  animation-play-state: running;
}
@keyframes night-drift {
  from {
    transform: translate3d(-7%, 4%, 0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translate3d(9%, -5%, 0) scale(1.12);
    opacity: 1;
  }
}

.night-lantern {
  position: absolute;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    #ffe7ad24 0%,
    #ffb66c12 30%,
    transparent 68%
  );
  transform: translate3d(var(--lantern-x, -500px), var(--lantern-y, -500px), 0)
    translate(-50%, -50%);
  transition: opacity 350ms ease;
}
.lantern-active .night-lantern {
  opacity: 1;
}

/* JS only arms elements below the viewport. With no JS all content stays visible. */
.night-reveal {
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.night-reveal-pending {
  opacity: 0;
  translate: 0 22px;
}
.night-reveal:focus-within {
  opacity: 1;
  translate: none;
  transition-delay: 0ms;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .night-lantern {
    display: none;
  }
  .night-fog {
    opacity: 0.7;
  }
  .night-fog i {
    animation-duration: 36s;
  }
  .night-fog i + i {
    display: none;
  }
  .night-reveal {
    transition-duration: 400ms;
    transition-delay: 0ms;
  }
  .night-reveal-pending {
    translate: 0 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .night-fog i {
    animation: none;
    opacity: 0.65;
  }
  .night-lantern {
    display: none;
  }
  .night-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
.team-route .night-fog,
.team-route .night-lantern {
  display: none;
}