/* Cosmos: lensed light behind the hero, a star layer that reacts to scroll, and a big-bang intro. */
.hero__cosmos {
  position: absolute; left: 0; top: 0; width: 100%; z-index: -1; display: block; pointer-events: none;
  opacity: 0; transition: opacity 2.2s var(--ease-out);
}
.hero__cosmos.is-lit { opacity: 1; }
.cosmos-gl .hero::before, .cosmos-gl .hero__canvas { display: none; }
.motion-studio.cosmos-gl .hero__glow { opacity: .22; }
.motion-studio.cosmos-gl .hero__orb { opacity: .06; }
/* Keeps the headline legible over the brightest part of the disk. */
.cosmos-gl .hero__inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 40px;
  width: min(980px, 110vw); height: 620px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(13, 15, 20, .72), rgba(13, 15, 20, .38) 55%, transparent);
}
.motion-studio.cosmos-gl .hero__title { text-shadow: none; }
.cosmos-gl .hero__title .line { filter: drop-shadow(0 4px 22px rgba(13, 15, 20, .9)); }
.cosmos-gl .hero .lead { color: #c9cdd8; text-shadow: 0 1px 16px rgba(13, 15, 20, .9); }

.cosmos-layer {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30;
  pointer-events: none;
}

/* Intro: the mark collapses to a singularity, then the universe begins. */
.cosmos .loader__inner { transition: transform .38s cubic-bezier(.7, 0, .84, 0), opacity .38s, filter .38s; }
.js.cosmos .loader.is-done { clip-path: inset(0); opacity: 0; transition: opacity .55s .45s ease-out; }
.cosmos .loader.is-done .loader__inner { transform: scale(.02); opacity: 0; filter: blur(3px) brightness(3); }
.cosmos .loader::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd39e 22%, #ff5b2e 45%, rgba(122, 92, 255, .4) 62%, transparent 72%);
  opacity: 0; transform: scale(0); pointer-events: none;
}
.cosmos .loader.is-done::after { animation: big-bang .75s .34s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes big-bang { 0% { opacity: 1; transform: scale(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(90); } }

/* The hero copy falls toward the event horizon as the camera dives in. */
@supports (animation-timeline: scroll()) {
  .cosmos-gl .hero__copy { transform-origin: 50% 35%; animation: fall-in linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes fall-in { to { opacity: 0; scale: .84; translate: 0 -56px; } }
}

/* Reveals come into focus: rise, settle and sharpen. */
.js.cosmos .reveal { filter: blur(10px); scale: .97; transition: opacity 1.1s var(--ease-out), translate 1.1s var(--ease-out), scale 1.1s var(--ease-out), filter 1.1s var(--ease-out), transform .5s var(--ease-out), box-shadow .4s, border-color .4s, background .5s; }
.js.cosmos .reveal.is-visible { filter: none; scale: 1; }
.js.cosmos .split .w > span { opacity: .15; filter: blur(6px); transition: transform 1s var(--ease-out), opacity 1s var(--ease-out), filter 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.js.cosmos .split.is-visible .w > span { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__cosmos, .cosmos-layer { display: none; }
}