.spatial-page {
  --spatial-page-title: 48px;
  --spatial-section-title: 40px;
  --spatial-body: 18px;
}

.spatial-page .brand,
.spatial-page .desktop-nav a,
.spatial-page .mobile-menu a {
  text-decoration: none;
}

.spatial-page .desktop-nav a:not(.header-cta) {
  position: relative;
  padding: 12px 0;
  color: rgba(238, 243, 255, 0.56);
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  transition: color 220ms ease;
}

.spatial-page .desktop-nav a:not(.header-cta)::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--cyan);
  transition: right 240ms var(--ease-orbit);
}

.spatial-page .desktop-nav a:hover,
.spatial-page .desktop-nav a:focus-visible,
.spatial-page .desktop-nav a[aria-current="page"] {
  color: var(--ink);
}

.spatial-page .desktop-nav a[aria-current="page"]::after {
  right: 0;
}

.spatial-page .spatial-copy {
  width: min(58vw, 880px);
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 58px;
}

.spatial-page .spatial-copy h1,
.spatial-page .spatial-copy h2 {
  max-width: 820px;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.spatial-page .spatial-copy h1 {
  font-size: var(--spatial-page-title);
}

.spatial-page .spatial-copy h2 {
  font-size: var(--spatial-section-title);
}

.spatial-copy__body {
  max-width: 790px;
  margin-top: 28px;
  color: rgba(231, 237, 248, 0.78);
  font-size: var(--spatial-body);
  line-height: 1.62;
  text-wrap: pretty;
}

.spatial-copy__body p {
  margin: 0;
}

.spatial-copy__body p + p {
  margin-top: 16px;
}

.spatial-copy__body p:first-child {
  color: rgba(246, 249, 255, 0.94);
}

.spatial-page .spatial-action {
  margin-top: 28px;
}

.spatial-page .scene-art__shade {
  background:
    linear-gradient(90deg, rgba(5, 7, 13, 0.96) 0%, rgba(5, 7, 13, 0.82) 42%, rgba(5, 7, 13, 0.18) 78%, rgba(5, 7, 13, 0.35) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.22), rgba(5, 7, 13, 0.52));
}

.spatial-page.is-last .scene-counter,
.spatial-page.is-last .scroll-cue {
  opacity: 0;
  pointer-events: none;
}

.spatial-page .scene-index,
.spatial-page .scene-counter,
.spatial-page .scroll-cue {
  transition: opacity 220ms ease;
}

.spatial-page .scene-counter {
  left: clamp(40px, 7.3vw, 140px);
}

.spatial-page .scroll-cue {
  right: auto;
  left: calc(clamp(40px, 7.3vw, 140px) + 108px);
  bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 16px;
  width: min(360px, calc(100vw - 250px));
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(97, 230, 255, 0.24);
  background: rgba(5, 13, 22, 0.72);
  color: rgba(238, 243, 255, 0.82);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.spatial-page .scroll-cue > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.spatial-page .scroll-cue strong,
.spatial-page .scroll-cue small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-page .scroll-cue strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spatial-page .scroll-cue small {
  color: rgba(206, 218, 236, 0.62);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.spatial-page .scroll-cue i {
  position: relative;
  width: 16px;
  height: 26px;
  overflow: visible;
  border: 1px solid rgba(97, 230, 255, 0.52);
  border-radius: 10px;
  background: transparent;
}

.spatial-page .scroll-cue i::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: var(--cyan);
  animation: spatialCueWheel 900ms ease-out 350ms 2 both;
}

.spatial-page .scroll-cue:hover,
.spatial-page .scroll-cue:focus-visible {
  border-color: rgba(97, 230, 255, 0.68);
  background: rgba(8, 24, 38, 0.9);
  color: var(--ink);
}

.spatial-page[data-scene="6"]:not(.is-last) .scene-counter {
  opacity: 1;
  pointer-events: none;
}

.spatial-page[data-scene="6"]:not(.is-last) .scroll-cue {
  opacity: 1;
  pointer-events: auto;
}

@keyframes spatialCueWheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

.spatial-page .mobile-menu__inner {
  gap: 0;
}

.spatial-page .mobile-menu {
  transition: opacity 220ms ease, visibility 220ms ease;
}

.spatial-page .menu-toggle span {
  transition: transform 220ms var(--ease-orbit);
}

.spatial-page .mobile-menu .mobile-route {
  display: block;
  margin: 0;
  padding: 12px 0;
  border: 0;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.spatial-page .mobile-menu .mobile-route[aria-current="page"] {
  color: var(--cyan);
}

.spatial-page .mobile-menu .mobile-proposal {
  display: flex;
  margin-top: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(238, 243, 255, 0.13);
  color: rgba(238, 243, 255, 0.72);
  font-size: 14px;
}

@media (max-width: 1200px) {
  .spatial-page {
    --spatial-page-title: 40px;
    --spatial-section-title: 36px;
  }

  .spatial-page .spatial-copy {
    width: min(64vw, 820px);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .spatial-page .spatial-copy {
    padding-top: calc(var(--header-height) + 18px);
    padding-bottom: 42px;
  }

  .spatial-copy__body {
    margin-top: 20px;
    line-height: 1.52;
  }

  .spatial-copy__body p + p {
    margin-top: 12px;
  }
}

@media (max-width: 900px) {
  .spatial-page {
    --spatial-page-title: 34px;
    --spatial-section-title: 32px;
    --spatial-body: 17px;
  }

  .spatial-page .scene,
  .spatial-page .scene[data-index="2"],
  .spatial-page .scene[data-index="3"],
  .spatial-page .scene[data-index="4"] {
    min-height: 100svh;
  }

  .spatial-page .spatial-copy,
  .spatial-page .scene[data-index="2"] .spatial-copy,
  .spatial-page .scene[data-index="3"] .spatial-copy,
  .spatial-page .scene[data-index="4"] .spatial-copy {
    width: 100%;
    min-height: 100svh;
    padding: 112px 24px 64px;
    justify-content: flex-end;
  }

  .spatial-page .spatial-copy h1,
  .spatial-page .spatial-copy h2 {
    max-width: 620px;
    letter-spacing: -0.028em;
    line-height: 1.1;
  }

  .spatial-copy__body {
    max-width: 620px;
    margin-top: 24px;
    line-height: 1.58;
  }

  .spatial-page .scene-art__shade {
    background:
      linear-gradient(180deg, rgba(5, 7, 13, 0.12), rgba(5, 7, 13, 0.48) 32%, rgba(5, 7, 13, 0.96) 68%, #05070d 100%),
      linear-gradient(90deg, rgba(5, 7, 13, 0.62), transparent 76%);
  }

  .spatial-page .scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-page .scene--active,
  .spatial-page .scene--previous,
  .spatial-page .scene--active .scene__content,
  .spatial-page .scene--previous .scene__content,
  .spatial-page .transition-lens,
  .spatial-page .scene-art__image,
  .spatial-page .scene-art__flare {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }


  .spatial-page .scroll-cue i::after {
    animation: none;
    opacity: 1;
    transform: translateY(4px);
  }
}