html {
  scroll-behavior: auto;
}

body.home {
  color: var(--lx-ink);
  background: #080b09;
}

.scroll-world {
  --scroll-world-progress: 0;
  --n00-opacity: 1;
  --n01-opacity: 0;
  --n01-n02-opacity: 0;
  --landing-progress: 0;
  --prompt-progress: 0;
  --n01-content-progress: 0;
  position: relative;
  min-height: 330svh;
  background: #080b09;
}

.scroll-world__sticky {
  position: sticky;
  z-index: 6;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #080b09;
}

.scroll-world.is-route-handoff .scroll-world__sticky {
  visibility: hidden;
}

.scroll-world__media,
.scroll-world__video,
.scroll-world__poster-wrap,
.scroll-world__poster,
.scroll-world__fallback-wrap,
.scroll-world__fallback,
.scroll-world__grade,
.scroll-world__copy-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scroll-world__media {
  z-index: -3;
  background: #080b09;
}

.scroll-world__video,
.scroll-world__poster,
.scroll-world__fallback {
  object-fit: cover;
  object-position: center;
}

.scroll-world__video {
  will-change: opacity;
}

.scroll-world__video--n00 {
  z-index: 1;
  opacity: var(--n00-opacity);
}

.scroll-world__video--n01 {
  z-index: 2;
  opacity: var(--n01-opacity);
}

.scroll-world__video--n01-n02 {
  z-index: 3;
  opacity: var(--n01-n02-opacity);
}

.scroll-world__poster-wrap {
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}

.scroll-world.is-video-ready .scroll-world__poster-wrap {
  opacity: 0;
}

.scroll-world__fallback-wrap {
  z-index: 4;
  display: none;
  pointer-events: none;
}

.scroll-world.has-n00-error .scroll-world__poster-wrap {
  display: none;
}

.scroll-world.has-n00-error .scroll-world__fallback-wrap {
  display: block;
}

.scroll-world__grade {
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 5, 4, 0.42), transparent 26%, transparent 66%, rgba(2, 5, 4, 0.58)),
    linear-gradient(90deg, rgba(3, 6, 5, 0.18), transparent 36%, transparent 80%, rgba(3, 6, 5, 0.12));
}

.scroll-world__copy-shade {
  z-index: 6;
  pointer-events: none;
  opacity: clamp(0, calc((var(--landing-progress) + var(--n01-content-progress)) * 0.9), 0.9);
  background: linear-gradient(90deg, rgba(4, 8, 6, 0.94) 0%, rgba(4, 8, 6, 0.76) 32%, rgba(4, 8, 6, 0.28) 58%, rgba(4, 8, 6, 0.04) 74%, transparent 82%);
}

.scroll-world__controls {
  position: absolute;
  z-index: 80;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}

.scroll-world__controls .lx-control {
  min-height: 38px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(6, 10, 8, 0.44);
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  backdrop-filter: blur(12px);
}

.scroll-world__controls .lx-control:hover,
.scroll-world__controls .lx-control:focus-visible {
  color: #fff;
  background: rgba(6, 10, 8, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
}

.scroll-world__replay {
  display: none;
}

.scroll-world.is-intro-complete .scroll-world__skip {
  display: none;
}

.scroll-world.is-intro-complete .scroll-world__replay {
  display: inline-flex;
}

.scroll-world.is-intro-complete .scroll-world__controls {
  opacity: 0;
  pointer-events: none;
}

.scroll-world__landing {
  position: absolute;
  z-index: 35;
  top: var(--lx-header-height);
  bottom: 0;
  left: max(6vw, calc((100vw - var(--lx-content-wide)) / 2));
  width: min(510px, 42vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3vh 0 9vh;
  opacity: var(--landing-progress);
  filter: blur(0);
  transform: translate3d(0, calc((1 - var(--landing-progress)) * 20px), 0);
  pointer-events: none;
  will-change: opacity, filter, transform;
}

.scroll-world.is-landing-arriving .scroll-world__landing {
  animation: scroll-world-landing-arrive 880ms var(--lx-ease-out) both;
}

.scroll-world.is-landing-arriving .scroll-world__copy-shade {
  animation: scroll-world-shade-arrive 760ms ease-out both;
}

.scroll-world__landing[aria-hidden="false"] {
  pointer-events: auto;
}

.scroll-world__landing .node-index {
  margin: 0;
  color: #e2bd70;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.scroll-world__landing h1 {
  max-width: 10ch;
  margin: 12px 0 0;
  color: #fff;
  font-family: var(--lx-font-display);
  font-size: 68px;
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: 0;
}

.scroll-world__landing .lead {
  max-width: 39ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.6;
}

.scroll-world__landing .service-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  font-weight: 760;
}

.scroll-world__landing .service-line span:first-child {
  color: #e2bd70;
}

.scroll-world__landing .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.scroll-world__landing .action-primary,
.scroll-world__landing .action-secondary {
  border-radius: 4px;
}

.scroll-world__landing .action-secondary {
  color: #fff;
  background: rgba(8, 12, 10, 0.34);
  border-color: rgba(255, 255, 255, 0.42);
}

.scroll-world__landing .action-secondary:hover,
.scroll-world__landing .action-secondary:focus-visible {
  color: var(--lx-ink);
  background: #fff;
  border-color: #fff;
}

.scroll-world__continue {
  position: absolute;
  z-index: 42;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: max(6vw, calc((100vw - var(--lx-content-wide)) / 2));
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.66);
  opacity: var(--landing-progress);
  pointer-events: none;
}

.scroll-world__continue span {
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.scroll-world__continue i,
.scroll-world__dock-prompt i {
  position: relative;
  width: 42px;
  height: 1px;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.scroll-world__continue i::after,
.scroll-world__dock-prompt i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #e2bd70;
  transform: translateX(-100%);
  animation: scroll-world-cue 1.8s var(--lx-ease-out) infinite;
}

.scroll-world__dock-prompt {
  position: absolute;
  z-index: 44;
  bottom: max(34px, env(safe-area-inset-bottom));
  left: max(6vw, calc((100vw - var(--lx-content-wide)) / 2));
  color: #fff;
  opacity: var(--prompt-progress);
  transform: translate3d(0, calc((1 - var(--prompt-progress)) * 14px), 0);
  pointer-events: none;
}

.scroll-world.is-n01-docked .scroll-world__dock-prompt::before {
  position: absolute;
  top: -18px;
  left: 0;
  width: 76px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #e2bd70, transparent);
}

.scroll-world__dock-prompt > p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.scroll-world__dock-prompt > p span {
  margin-right: 10px;
  color: #e2bd70;
}

.scroll-world__dock-prompt > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scroll-world__dock-prompt strong {
  font-size: 13px;
  font-weight: 680;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.scroll-world__node {
  position: absolute;
  z-index: 40;
  top: var(--lx-header-height);
  bottom: 0;
  left: max(6vw, calc((100vw - var(--lx-content-wide)) / 2));
  width: min(700px, 54vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh 0 8vh;
  pointer-events: none;
}

.scroll-world__node[aria-hidden="false"] {
  pointer-events: auto;
}

.scroll-world__node-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.scroll-world__node-meta::after {
  width: 78px;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.28);
  transform: scaleX(var(--beat-progress, 0));
  transform-origin: left center;
}

.scroll-world__node-meta p,
.scroll-world__node-meta span {
  margin: 0;
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.scroll-world__node-meta p {
  color: #e2bd70;
}

.scroll-world__node-meta span {
  color: rgba(255, 255, 255, 0.58);
}

.scroll-world__node [data-scroll-beat] {
  --beat-progress: 0;
  opacity: var(--beat-progress);
  transform: translate3d(0, calc((1 - var(--beat-progress)) * 18px), 0);
  will-change: opacity, transform;
}

.scroll-world__node [data-scroll-beat="0"] {
  clip-path: inset(calc((1 - var(--beat-progress)) * 100%) 0 0 0);
  transform: translate3d(0, calc((1 - var(--beat-progress)) * 26px), 0);
}

.scroll-world__node [data-scroll-beat="1"] {
  filter: blur(calc((1 - var(--beat-progress)) * 3px));
}

.scroll-world__node-content {
  position: relative;
}

.scroll-world__node-content .node-index {
  display: none;
}

.scroll-world__node-content h2 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-family: var(--lx-font-display);
  font-size: 60px;
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.76);
}

.scroll-world__node-content .lead {
  max-width: 48ch;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.65;
}

.scroll-world__node-content .fact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 26px;
  margin-top: 28px;
}

.scroll-world__node-content .fact-list section {
  min-width: 0;
  padding: 16px 10px 4px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  transition: border-color 180ms ease, transform 220ms var(--lx-ease-out);
}

.scroll-world__node-content .fact-list section:hover {
  background: transparent;
  border-color: rgba(226, 189, 112, 0.74);
  transform: translateY(-1px);
}

.scroll-world__node-content .fact-list h3 {
  margin: 0;
  color: #fff;
  font-family: var(--lx-font-sans);
  font-size: 14.5px;
  font-weight: 760;
  line-height: 1.3;
}

.scroll-world__node-content .fact-list p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.58;
}

.scroll-world__progress {
  position: absolute;
  z-index: 75;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.scroll-world__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lx-cinnabar);
  transform: scaleX(var(--scroll-world-progress));
  transform-origin: left center;
}

.scroll-world__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.scroll-world.is-still-return .scroll-world__landing {
  animation: scroll-world-still-arrive 520ms var(--lx-ease-out) both;
}

@keyframes scroll-world-landing-arrive {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 24px, 0);
  }
  52% {
    opacity: 0.72;
  }
  100% {
    opacity: var(--landing-progress);
    filter: blur(0);
    transform: translate3d(0, calc((1 - var(--landing-progress)) * 20px), 0);
  }
}

@keyframes scroll-world-shade-arrive {
  from { opacity: 0; }
}

@keyframes scroll-world-still-arrive {
  0% {
    opacity: 0.28;
    filter: blur(7px);
    transform: translate3d(0, 12px, 0) scale(1.01);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.scroll-world:not(.is-video-ready) .scroll-world__status {
  clip: auto;
  width: auto;
  height: auto;
  right: 18px;
  bottom: 18px;
  padding: 7px 9px;
  color: rgba(255, 255, 255, 0.64);
  background: rgba(4, 8, 6, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 11px;
}

@keyframes scroll-world-cue {
  0% { transform: translateX(-100%); }
  48%, 100% { transform: translateX(100%); }
}

@media (max-width: 960px) {
  .scroll-world__landing {
    width: min(520px, 58vw);
  }

  .scroll-world__landing h1 {
    font-size: 58px;
  }

  .scroll-world__node {
    width: min(570px, 58vw);
  }
}

@media (max-width: 700px) {
  .scroll-world {
    min-height: 390svh;
  }

  .scroll-world__sticky {
    min-height: 0;
  }

  .scroll-world__copy-shade {
    opacity: clamp(0, calc((var(--landing-progress) + var(--n01-content-progress)) * 0.88), 0.9);
    background: linear-gradient(0deg, rgba(4, 8, 6, 0.98) 0%, rgba(4, 8, 6, 0.86) 42%, rgba(4, 8, 6, 0.22) 72%, transparent 88%);
  }

  .scroll-world__controls {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
  }

  .scroll-world.is-intro-complete .scroll-world__controls {
    opacity: 0;
    pointer-events: none;
  }

  .scroll-world__landing {
    top: 0;
    right: 20px;
    bottom: 0;
    left: 20px;
    width: auto;
    justify-content: flex-end;
    padding: calc(var(--lx-header-height) + 48px) 0 max(94px, calc(env(safe-area-inset-bottom) + 74px));
  }

  .scroll-world__landing h1 {
    max-width: 8.5ch;
    font-size: 44px;
  }

  .scroll-world__landing .lead {
    margin-top: 12px;
    font-size: 15px;
  }

  .scroll-world__landing .service-line {
    gap: 6px 12px;
    margin-top: 15px;
    font-size: 12px;
  }

  .scroll-world__landing .actions {
    margin-top: 18px;
  }

  .scroll-world__continue,
  .scroll-world__dock-prompt {
    right: 20px;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 20px;
  }

  .scroll-world__node {
    top: 0;
    right: 20px;
    bottom: 0;
    left: 20px;
    width: auto;
    justify-content: flex-end;
    padding: calc(var(--lx-header-height) + 46px) 0 max(38px, calc(env(safe-area-inset-bottom) + 24px));
  }

  .scroll-world__node-meta {
    margin-bottom: 11px;
  }

  .scroll-world__node-content h2 {
    font-size: 38px;
  }

  .scroll-world__node-content .lead {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  .scroll-world__node-content .fact-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 16px;
  }

  .scroll-world__node-content .fact-list section {
    padding: 10px 0;
  }

  .scroll-world__node-content .fact-list h3 {
    font-size: 13.5px;
  }

  .scroll-world__node-content .fact-list p {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.48;
  }

  .scroll-world:not(.is-video-ready) .scroll-world__status {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 380px), (max-height: 700px) and (max-width: 700px) {
  .scroll-world__landing h1 {
    font-size: 38px;
  }

  .scroll-world__landing .lead {
    font-size: 13px;
  }

  .scroll-world__landing .actions {
    margin-top: 14px;
  }

  .scroll-world__node-content h2 {
    font-size: 32px;
  }

  .scroll-world__node-content .lead {
    font-size: 13px;
  }

  .scroll-world__node-content .fact-list {
    margin-top: 12px;
  }

  .scroll-world__node-content .fact-list section {
    padding: 6px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-world {
    min-height: 260svh;
  }

  .scroll-world__poster-wrap,
  .scroll-world__video,
  .scroll-world__landing,
  .scroll-world__node [data-scroll-beat] {
    transition: none;
  }

  .scroll-world.is-landing-arriving .scroll-world__landing,
  .scroll-world.is-landing-arriving .scroll-world__copy-shade {
    animation: none;
  }

  .scroll-world__continue i::after,
  .scroll-world__dock-prompt i::after {
    animation: none;
    transform: none;
  }
}
