.intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.intro[hidden], html.no-intro .intro { display: none; }
.intro::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgb(var(--space-rgb) / 0.996);
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.intro-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 30px;
}

.intro-mark {
  position: relative;
  width: clamp(116px, 15vmin, 172px);
  aspect-ratio: 1;
  will-change: transform, opacity;
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.45s ease;
}
.intro-mark > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

.im-ring { opacity: 0; transform: scale(0.84); animation: im-ring 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards; }
.im-closed { opacity: 0; animation: im-closed 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.im-open { opacity: 0; transform: rotate(-42deg); animation: im-open 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s forwards; }

.im-horizon { bottom: auto; height: 68.4%; overflow: hidden; }
.im-sun {
  position: absolute;
  left: 41%;
  bottom: -13.16%;
  width: 18%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ember);
  transform: translateY(115%);
  animation: im-sun 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s forwards;
}

.im-glow {
  opacity: 0;
  background: radial-gradient(34% 34% at 50% 68.4%, rgb(255 78 26 / 0.55), rgb(255 179 71 / 0.16) 45%, rgb(255 179 71 / 0));
  clip-path: polygon(58.86% 68.4%, 41.14% 68.4%, 30.09% 54.54%, 34.03% 37.27%, 50% 29.58%, 65.97% 37.27%, 69.91% 54.54%);
  animation: im-fade 1s ease 1.2s forwards;
}

.intro-word {
  width: clamp(170px, 19vmin, 230px);
  aspect-ratio: 335.58 / 100;
  background: var(--text);
  -webkit-mask: url(../logo/wordmark.svg) center / contain no-repeat;
  mask: url(../logo/wordmark.svg) center / contain no-repeat;
  opacity: 0;
  transform: translateY(10px);
  animation: im-word 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s forwards;
  transition: opacity 0.3s ease;
}

.intro-bar {
  width: 112px;
  height: 1px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.12);
  opacity: 0;
  animation: im-fade 0.6s ease 1.5s forwards;
  transition: opacity 0.3s ease;
}
.intro-fill {
  height: 100%;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes im-ring { to { opacity: 1; transform: none; } }
@keyframes im-closed {
  0% { opacity: 0; transform: rotate(38deg); }
  45% { opacity: 1; transform: rotate(0deg); }
  100% { opacity: 0; transform: rotate(-26deg); }
}
@keyframes im-open { to { opacity: 1; transform: none; } }
@keyframes im-sun { to { transform: none; } }
@keyframes im-word { to { opacity: 1; transform: none; } }
@keyframes im-fade { to { opacity: 1; } }

.intro.is-exiting { pointer-events: none; }
.intro.is-exiting::before { opacity: 0; }
.intro.is-exiting .intro-word,
.intro.is-exiting .intro-bar { opacity: 0 !important; animation: none; }
.intro.is-landed .intro-mark { opacity: 0; }

html.intro-short .intro-mark > *,
html.intro-short .intro-word,
html.intro-short .intro-bar {
  animation-duration: 0.01s !important;
  animation-delay: 0s !important;
}