/* The same water artwork and choreography as the React ARC demo. */
.arc-transition {
  position: fixed;
  z-index: 99998;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}
.arc-transition-leaving .arc-transition,
.arc-transition-entering .arc-transition,
.arc-transition-covered .arc-transition { display: block; pointer-events: auto; }
.arc-transition__curtain { position: absolute; z-index: 0; inset: 0; opacity: 0; background: #052a47; }
.arc-transition__mist { position: absolute; z-index: 1; left: 50%; top: 50%; width: 102vmax; height: 102vmax; border-radius: 50%; opacity: 0; background: #052a47; transform: translate3d(-50%, -50%, 0) scale(.001); backface-visibility: hidden; }
.arc-transition__drop { position: absolute; z-index: 4; left: 50%; top: 0; width: 72px; height: 96px; opacity: 0; transform-origin: center bottom; }
.arc-transition__drop img { width: 100%; height: 100%; }
.arc-transition__splash { position: absolute; z-index: 3; left: 50%; top: 50%; width: 260px; height: 120px; opacity: 0; }
.arc-transition__splash > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc-transition__spray { position: absolute; left: 50%; bottom: 22px; width: 14px; height: 22px; border: 1px solid rgba(108,190,229,.34); border-radius: 68% 32% 64% 36% / 70% 42% 58% 30%; background: linear-gradient(145deg, #3e9acb, #062b48); opacity: 0; }
.arc-transition__spray:first-of-type, .arc-transition__spray:last-of-type { width: 11px; height: 17px; }
.arc-transition__ripple { position: absolute; z-index: 2; left: 50%; top: 50%; width: 130px; height: 130px; border: 24px solid rgba(75,163,218,.2); border-radius: 50%; opacity: 0; }
.arc-transition__mark { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); color: rgba(255,255,255,.88); font-size: 10px; font-weight: 800; letter-spacing: .28em; white-space: nowrap; opacity: 0; }
.arc-transition-entering .arc-transition__curtain,
.arc-transition-covered .arc-transition__curtain,
.arc-transition-entering .arc-transition__mark,
.arc-transition-covered .arc-transition__mark { opacity: 1; }
.arc-transition-covered .arc-transition__mist,
.arc-transition-covered .arc-transition__drop,
.arc-transition-covered .arc-transition__splash,
.arc-transition-covered .arc-transition__ripple { visibility: hidden; }

/* Keep the new hero's introduction for the moment the curtain is lifted. */
.arc-transition-entering .hero-enter,
.arc-transition-entering .home-hero__image,
.arc-transition-entering .hero__eyebrow,
.arc-transition-entering .hero__title-line span,
.arc-transition-entering .hero__footer { animation-play-state: paused; }

@media (max-width: 600px) {
  .arc-transition__drop { width: 58px; height: 78px; }
  .arc-transition__splash { width: 220px; height: 102px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-transition { display: none !important; }
}