.hero-video-stage {
  --hero-video-opacity: 0.4;
  --hero-overlay-opacity: 0;
  --hero-video-blur: 0;
  --hero-video-scale: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--color-surface-hero-stage);
}

.hero-video-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(calc(var(--hero-video-blur) * 1px));
  opacity: var(--hero-video-opacity);
  transform: scale(calc(1 + var(--hero-video-scale)));
  transform-origin: center;
  transition: opacity 220ms ease;
  will-change: opacity, transform;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: var(--page-background);
  opacity: var(--hero-overlay-opacity);
  will-change: opacity;
}

.scroll-prompt {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate3d(-50%, 0, 0);
  width: 760px;
  max-width: calc(100vw - 40px);
  min-height: 0;
  z-index: 20;
  border-radius: 7px;
  background: var(--color-surface-overlay-panel);
  color: var(--color-text-on-dark-primary);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  box-shadow: none;
  border: 1px solid var(--border-color);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  animation: scrollPromptIntro 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  isolation: isolate;
}

.scroll-prompt::after {
  content: none;
}

.scroll-prompt-copy {
  position: relative;
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-family: "Fragment Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.28px;
  text-transform: none;
  color: var(--color-text-content-overlay-copy);
  text-shadow: none;
}

.scroll-prompt-copy-presence {
  display: none;
  color: var(--color-text-content-overlay-presence);
  position: absolute;
  inset: 0;
  padding: inherit;
  white-space: nowrap;
  pointer-events: none;
}

.scroll-prompt-copy-presence::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  color: var(--color-text-transparent);
  background: var(--fx-presence-shimmer-gradient);
  background-size: 220% 100%;
  background-position: 120% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: scrollPromptPresenceShimmer 1.7s linear infinite;
  pointer-events: none;
}

.scroll-prompt-copy-message {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.scroll-prompt-copy.is-presence-active .scroll-prompt-copy-presence {
  display: inline-block;
}

.scroll-prompt-copy.is-presence-active .scroll-prompt-copy-message {
  opacity: 0;
  transform: translate3d(0, 2px, 0);
}

.scroll-prompt-copy.is-presence-handoff .scroll-prompt-copy-presence {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, -2px, 0);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-prompt-copy.is-presence-handoff .scroll-prompt-copy-message {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-prompt-copy-text {
  white-space: normal;
}

.scroll-prompt-copy.is-typing:not(.is-presence-active) .scroll-prompt-copy-message::after,
.scroll-prompt-copy.is-typed:not(.is-presence-active) .scroll-prompt-copy-message::after {
  content: "▋";
  display: inline-block;
  margin-left: 2px;
  pointer-events: none;
  color: var(--color-text-content-overlay-cursor);
  animation: scrollPromptCursorBlink 900ms steps(1, end) infinite;
}

.scroll-prompt-rail {
  width: 100%;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  color: var(--color-text-content-overlay-rail);
  background: var(--color-surface-overlay-rail);
  pointer-events: none;
}

.scroll-prompt-arrow {
  flex: 0 0 auto;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.26px;
  transform-origin: center;
  animation: scrollPromptArrowPulse 1300ms ease-in-out infinite;
  color: var(--color-text-content-overlay-rail-icon);
}

.scroll-prompt-label-en {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Fragment Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.28px;
  white-space: nowrap;
  text-align: center;
  color: var(--color-text-content-overlay-rail);
  text-shadow: var(--fx-scroll-label-shadow);
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.scroll-prompt.is-rail-visible .scroll-prompt-label-en {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scroll-prompt.is-rail-visible.is-rail-label-settled .scroll-prompt-label-en {
  opacity: 0.5;
}

.scroll-prompt.is-poofing {
  animation: scrollPromptPoof 280ms cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

.scroll-prompt.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -12px, 0) scale(1);
}

@keyframes scrollPromptArrowPulse {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(2.5px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
}

@keyframes scrollPromptPoof {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -12px, 0) scale(1);
  }
}

@keyframes scrollPromptIntro {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 14px, 0) scale(0.985);
  }
  65% {
    opacity: 1;
    transform: translate3d(-50%, -1px, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes scrollPromptCursorBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes scrollPromptPresenceShimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}