/* The curtain is the only visual layer added to the approved hero. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  pointer-events: auto;
  animation: none !important;
  opacity: 1;
  isolation: isolate;
}
.intro.has-canvas { background: transparent; }
.intro.is-finishing { opacity: 0; transition: opacity .38s ease; pointer-events: none; }
.intro.is-done { display: none !important; }
.intro canvas { position: absolute; inset: 0; display: block; pointer-events: none; }
.intro-curtain { z-index: 0; width: 100%; height: 100%; }
.intro-wave { z-index: 1; width: 100%; height: 100%; }
.intro-activate {
  position: absolute;
  z-index: 4;
  top: calc(50% - 48px);
  left: 7%;
  width: 86%;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro[data-state="line"] .intro-activate { display: block; }
.intro .intro-hint {
  position: absolute;
  top: 87px;
  left: 0;
  width: 100%;
  font: 500 10px/1.6 var(--sans);
  letter-spacing: .16em;
  opacity: 0;
  animation: none !important;
  transition: opacity .45s ease;
}
.intro.is-awaiting .intro-hint { opacity: .8; }
.intro.is-awaiting:not(.is-reduced) .intro-wave {
  animation: intro-signal-wait 3.2s ease-in-out infinite;
}
@keyframes intro-signal-wait {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
.intro-activate:focus-visible { outline: 1px solid #ffffff80; outline-offset: 5px; }
.intro-phrase {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(90vw, 750px);
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  font: 600 clamp(14px, 1.2vw, 17px)/1.8 var(--sans);
  letter-spacing: .16em;
  transition: opacity .4s ease;
}
.intro[data-state="first"] [data-phrase="first"],
.intro[data-state="second"] [data-phrase="second"] { opacity: 1; }
.intro-mic,
.intro-skip {
  position: absolute;
  z-index: 3;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--paper);
  font: 600 10px var(--sans);
  letter-spacing: .16em;
  white-space: nowrap;
}
.intro-mic {
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid #ffffff80;
  transition: opacity .25s ease, border-color .25s ease;
}
.intro-mic:hover,
.intro-mic:focus-visible { border-color: #fff; }
.intro .intro-mic span { position: static; animation: none !important; font: inherit; letter-spacing: inherit; }
.intro-skip { top: 22px; right: 4vw; opacity: .72; }
.intro-skip:hover,
.intro-skip:focus-visible { opacity: 1; }
.intro[data-state="black"] .intro-mic,
.intro[data-state="wave"] .intro-mic,
.intro[data-state="reveal"] .intro-mic { opacity: 0; pointer-events: none; }
.intro[data-state="wave"] .intro-mic.is-on,
.intro[data-state="reveal"] .intro-mic.is-on { opacity: 1; }
.intro[data-state="line"] .intro-mic,
.intro[data-state="wave"] .intro-mic,
.intro[data-state="reveal"] .intro-mic { top: calc(50% + 106px); bottom: auto; }
.intro:focus-within .intro-mic:focus-visible,
.intro:focus-within .intro-skip:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
body.intro-active { overflow: hidden; }
body.intro-active .prestage .hero-depth,
body.intro-active .prestage .hero-top,
body.intro-active .prestage .hero-bottom { opacity: 0; }
body.intro-word-in .prestage .hero-depth,
body.intro-word-in .prestage .hero-top,
body.intro-word-in .prestage .hero-bottom { opacity: 1; transition: opacity .52s ease; }
@media (max-width: 767px) {
  .intro-phrase { font-size: 13px; line-height: 1.85; width: 84vw; }
  .intro-mic { bottom: 27%; min-width: 90px; }
  .intro-skip { top: 16px; right: 5vw; font-size: 9px; }
  .intro .intro-hint { font-size: 9px; letter-spacing: .11em; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: block !important; }
  .intro.is-finishing { transition: opacity .22s ease !important; }
  .intro-phrase { transition: none !important; }
  .intro-wave { animation: none !important; }
  body.intro-word-in .prestage .hero-depth,
  body.intro-word-in .prestage .hero-top,
  body.intro-word-in .prestage .hero-bottom { transition: none !important; }
}