body.ghost-intro-lock,
body.intro-lock {
  overflow: hidden;
}

.ghost-intro {
  --ghost-intro-bg: #060608;
  --ghost-intro-word-y: clamp(13rem, 34vh, 22rem);
  --ghost-intro-word-size: clamp(4.125rem, 9vw, 7.75rem);
  --ghost-intro-mascot-size: clamp(12.8125rem, 18vw, 15.3125rem);
  --ghost-intro-mascot-rest: clamp(9.1875rem, calc(7.3rem + 4.72vw), 11.375rem);

  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  background: var(--ghost-intro-bg);
  color: #f7f7f4;
  isolation: isolate;
  animation: ghost-intro-fail-open 2.5s steps(1, end) forwards;
}

.ghost-intro.is-preparing {
  animation: none;
}

.ghost-intro.is-playing {
  animation: ghost-intro-handoff 17.8s linear both;
}

.ghost-intro.is-hidden,
.ghost-intro[hidden] {
  display: none;
}

.ghost-intro__skip,
.ghost-intro-replay {
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(8 8 10 / 0.72);
  color: #aaaab1;
  font: 700 0.625rem/1 Inter, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ghost-intro__skip {
  position: absolute;
  z-index: 100;
  inset-block-start: max(1.125rem, env(safe-area-inset-top));
  inset-inline-end: max(1.125rem, env(safe-area-inset-right));
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
}

.ghost-intro-replay {
  position: fixed;
  z-index: 80;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  padding: 0.6875rem 0.875rem;
  border-radius: 0.625rem;
  visibility: hidden;
  pointer-events: none;
}

.ghost-intro.is-controlled + .ghost-intro-replay {
  visibility: visible;
  pointer-events: auto;
}

.ghost-intro__skip:hover,
.ghost-intro-replay:hover {
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}

.ghost-intro__corner {
  position: absolute;
  z-index: 90;
  inset-block-start: 1.6875rem;
  inset-inline-start: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ghost-intro__stage {
  position: absolute;
  z-index: 10;
  inset: 0;
}

.ghost-intro__wordmark {
  position: absolute;
  z-index: 12;
  inset-block-start: var(--ghost-intro-word-y);
  inset-inline-start: 50%;
  color: #f7f7f4;
  font-size: var(--ghost-intro-word-size);
  font-weight: 680;
  line-height: 0.85;
  letter-spacing: -0.07em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: opacity 360ms ease;
  will-change: transform, opacity;
}

.ghost-intro__wordmark.is-visible {
  opacity: 1;
}

.ghost-intro__wordmark.is-launched {
  animation: ghost-intro-word-launch 1s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.ghost-intro__mascot {
  position: absolute;
  z-index: 11;
  inset-block-start: calc(var(--ghost-intro-word-y) + var(--ghost-intro-mascot-rest));
  inset-inline-start: 50%;
  inline-size: var(--ghost-intro-mascot-size);
  block-size: var(--ghost-intro-mascot-size);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(16.875rem) rotate(-2160deg) scale(0.62);
  transform-origin: 52% 46%;
  will-change: transform, translate;
}

.ghost-intro__mascot-image {
  position: relative;
  z-index: 3;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: none;
}

/* The authored raster's first stable non-transparent helmet pixel is 238/1024
   from the top. Contact is measured from this live transformed probe, not the
   transparent square image boundary. */
.ghost-intro__contact-probe {
  position: absolute;
  inset-block-start: 23.2422%;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}

.ghost-intro__mascot-shadow {
  position: absolute;
  z-index: 1;
  inset-inline: 24%;
  inset-block-end: 2%;
  block-size: 0.875rem;
  background: radial-gradient(ellipse, rgb(255 107 0 / 0.3), transparent 72%);
  filter: blur(8px);
}

.ghost-intro__mascot.is-rising {
  animation: ghost-intro-rise 2.16s cubic-bezier(0.12, 0.78, 0.22, 1) both;
}

.ghost-intro__mascot.is-stable {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1);
}

.ghost-intro__mascot.is-winding {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0.875rem) rotate(0deg) scale(1);
  transition: transform 500ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.ghost-intro__mascot.is-contact {
  animation: ghost-intro-contact 760ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.ghost-intro__mascot.is-spinning-off {
  opacity: 1;
  animation: ghost-intro-spin-off 1.04s cubic-bezier(0.45, 0.02, 0.75, 0.48) both;
}

.ghost-intro .ghost-whisper--intro {
  z-index: 6;
  --ghost-whisper-width: min(22.5rem, 40vw);
  --ghost-whisper-desktop-inline: 70%;
  --ghost-whisper-desktop-block-end: 72%;
}

.ghost-intro__cut,
.ghost-intro__final {
  position: absolute;
  inset: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.ghost-intro__cut {
  z-index: 30;
  overflow: hidden;
  background: #09090b;
  transition: opacity 650ms ease-in-out;
}

.ghost-intro__cut.is-active {
  opacity: 1;
}

.ghost-intro__cut::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 5 7 / 0.56), transparent 52%),
    linear-gradient(to top, rgb(5 5 7 / 0.5), transparent 44%);
}

.ghost-intro__cut video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.016);
}

.ghost-intro__cut.is-active video {
  animation: ghost-intro-cut-drift 2.62s ease-out both;
}

.ghost-intro__cut-copy {
  position: absolute;
  z-index: 3;
  inset-inline-start: clamp(1.6875rem, 6vw, 5.75rem);
  inset-block-end: clamp(2.375rem, 7vw, 5.9375rem);
  opacity: 0;
  transform: translateY(0.625rem);
}

.ghost-intro__cut.is-active .ghost-intro__cut-copy {
  animation: ghost-intro-cut-copy 2.62s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.ghost-intro__cut-copy small {
  display: block;
  margin-block-end: 0.75rem;
  color: #ff9851;
  font: 800 0.5625rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ghost-intro__cut-copy strong {
  font-size: clamp(2.8125rem, 7vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.065em;
}

.ghost-intro__final {
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.875rem;
  background: var(--ghost-intro-bg);
  text-align: center;
  transition: opacity 700ms ease;
}

.ghost-intro[data-phase="final"] .ghost-intro__final {
  opacity: 1;
}

.ghost-intro__final h2 {
  margin: 0;
  font-size: clamp(3.375rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.07em;
}

.ghost-intro__final h2 strong {
  font-weight: 730;
}

.ghost-intro__final p {
  margin: 1.3125rem 0 0;
  color: #9999a0;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.mascot-float > .ghost-blink-layer {
  z-index: 5;
}

.mascot-float > .ghost-whisper--hero {
  z-index: 6;
  --ghost-whisper-width: min(20rem, calc(100vw - 2rem));
  --ghost-whisper-surface: rgba(27, 28, 31, 0.98);
  --ghost-whisper-desktop-inline: 60%;
  --ghost-whisper-desktop-block-end: 76%;
}

@keyframes ghost-intro-handoff {
  0%,
  94.94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes ghost-intro-fail-open {
  0%,
  99.99% {
    visibility: visible;
    pointer-events: auto;
  }
  100% {
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes ghost-intro-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(16.875rem) rotate(-2160deg) scale(0.62);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(10.75rem) rotate(-1530deg) scale(0.72);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(5.25rem) rotate(-810deg) scale(0.86);
  }
  74% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(1.75rem) rotate(-270deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes ghost-intro-contact {
  0% {
    translate: 0 0;
  }
  48%,
  60% {
    translate: 0 var(--ghost-contact-y, -4.625rem);
  }
  100% {
    translate: 0 0;
  }
}

@keyframes ghost-intro-word-launch {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-1rem) rotate(-1deg);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-4.75rem) rotate(-7deg);
  }
  38% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-2.1875rem) rotate(2deg);
  }
  56%,
  100% {
    opacity: 1;
    transform: translate(-70vw, -52vh) rotate(-12deg) scale(0.74);
  }
}

@keyframes ghost-intro-spin-off {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1);
  }
  14% {
    transform: translate(-50%, -50%) translateX(-0.5rem) rotate(-14deg) scale(0.96);
  }
  100% {
    transform: translate(-50%, -50%) translateX(110vw) translateY(-4.5rem) rotate(720deg) scale(1);
  }
}

@keyframes ghost-intro-cut-drift {
  from {
    transform: scale(1.016);
  }
  to {
    transform: scale(1);
  }
}

@keyframes ghost-intro-cut-copy {
  0%,
  18% {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  40%,
  76% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}

@media (max-width: 32.5rem) {
  .ghost-intro {
    --ghost-intro-word-y: clamp(11rem, 30vh, 15rem);
    --ghost-intro-word-size: clamp(3.75rem, 19vw, 5rem);
    --ghost-intro-mascot-size: min(11.875rem, 48vw);
    --ghost-intro-mascot-rest: 8.75rem;
  }

  .ghost-intro__corner {
    inset-block-start: max(1.3125rem, env(safe-area-inset-top));
    inset-inline-start: max(1.125rem, env(safe-area-inset-left));
  }

  .ghost-intro__skip {
    max-inline-size: calc(50vw - 1.5rem);
  }

  .ghost-intro-replay {
    inline-size: 2.75rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .ghost-intro-replay::before {
    content: "↻";
    font-size: 1rem;
    line-height: 1;
  }

  .ghost-intro .ghost-whisper--intro {
    --ghost-whisper-width: min(18rem, calc(100vw - 2rem));
    --ghost-whisper-placement-inline: 50%;
    --ghost-whisper-placement-block-end: 79%;
  }

  .ghost-intro__cut::after {
    background: linear-gradient(to top, rgb(5 5 7 / 0.7), transparent 68%);
  }

  .ghost-intro__cut-copy {
    inset-inline: 1.5rem;
    inset-block-end: max(2.75rem, env(safe-area-inset-bottom));
  }

  .ghost-intro__cut-copy strong {
    font-size: clamp(2.875rem, 15vw, 4.5rem);
  }

  .ghost-intro__final h2 {
    max-inline-size: 8em;
    font-size: clamp(3rem, 15vw, 4.75rem);
  }

  .ghost-intro__final p {
    max-inline-size: 19rem;
    line-height: 1.45;
  }

  .mascot-float > .ghost-whisper--hero {
    --ghost-whisper-width: min(18.75rem, calc(100vw - 1.5rem));
    --ghost-whisper-placement-inline: 50%;
    --ghost-whisper-placement-block-end: 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ghost-intro-lock,
  body.intro-lock {
    overflow: auto;
  }

  .ghost-intro,
  .ghost-intro-replay {
    display: none !important;
  }
}