/*
 * Minimal Atlas presentation
 *
 * Both retained pages use the original Lusion runtime. The homepage keeps its
 * interactive hero canvas while its scroll range is locked to one viewport.
 */

/* Keep only the Thesis destination in the primary and mobile navigation. */
#site-header-nav li[data-id="jdm"],
#site-header-nav li[data-id="contact"],
#site-mobile-menu__nav li[data-id="jdm"],
#site-mobile-menu__nav li:has(a[href="/contact"]),
#site-header-cta,
#site-header-cta__separator {
  display: none !important;
}

/* Remove Contact and Order calls-to-action from the retained Thesis footer. */
#site-footer a[href="/contact"] {
  display: none !important;
}

/*
 * Give both initial loaders the same #181818 backdrop beneath the shared
 * background-grid canvas. Keeping this outside #preloader preserves the
 * grid's original warm-white color instead of tinting it with an overlay.
 */
body:has(#preloader:not([style*="display: none"]))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--color-black);
}

/*
 * Keep the homepage itself fully hidden while the loader is active. As soon
 * as the homepage animation starts, minimal-home-reveal.js removes the gray
 * loader backdrop and reveals the already-colored WebGL scene in one frame.
 */
body.minimal-home:not(.is-home-revealing):has(
    #preloader:not([style*="display: none"])
  )
  #site-header,
body.minimal-home:not(.is-home-revealing):has(
    #preloader:not([style*="display: none"])
  )
  #site-content,
body.minimal-home:not(.is-home-revealing):has(
    #preloader:not([style*="display: none"])
  )
  #scroll-indicator {
  opacity: 0 !important;
}

body.minimal-home.is-home-revealing:has(
    #preloader:not([style*="display: none"])
  )::before {
  background-color: transparent;
}

/*
 * The Lusion router swaps page elements without updating the body class.
 * Scope route-specific presentation to the page currently mounted instead.
 */
body:has(#pages-container > #home) #site-header-nav ul {
  display: none !important;
}

/* Keep the Thesis page header limited to the Atlas logo. */
body:has(#pages-container > #thesis)
  #site-header-nav
  li[data-id="thesis"],
body:has(#pages-container > #thesis) #site-header-cta__subtitle,
body:has(#pages-container > #thesis) #site-header-mobile-menu-button,
body:has(#pages-container > #thesis) #site-mobile-menu {
  display: none !important;
}

/* Present the Thesis as one continuous editorial text column. */
body:has(#pages-container > #thesis) #thesis {
  --thesis-content-gap: calc(46 * 100vw / 1440);
  min-height: 100vh;
}

/*
 * Keep the original Lusion terrain/contour canvas visible behind the entire
 * Thesis. The HEIGHT texture is rendered by the native WebGL scene.
 */
body:has(#pages-container > #thesis) {
  background-color: var(--color-black);
}

body:has(#pages-container > #thesis) #canvas {
  display: block !important;
  z-index: 0;
  opacity: 1;
}

body:has(#pages-container > #thesis) #ui {
  position: relative;
  z-index: 1;
}

body:has(#pages-container > #thesis) #site-content,
body:has(#pages-container > #thesis) #pages-container,
body:has(#pages-container > #thesis) #thesis,
body:has(#pages-container > #thesis) #thesis > .page__inner {
  background-color: transparent;
}

body:has(#pages-container > #thesis) #thesis > .page__inner {
  position: relative;
}

body:has(#pages-container > #thesis)
  #thesis
  > .page__inner
  > .section:not(#thesis-hero) {
  position: absolute !important;
  inset: 0;
  height: 100vh !important;
  overflow: hidden;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Keep the original Lusion thesis hero in normal flow. Its native runtime
 * measures this title and animates the background grid to its final bounds.
 */
body:has(#pages-container > #thesis) #thesis-hero {
  position: relative !important;
  min-height: 0;
  visibility: visible !important;
  overflow: visible;
}

body:has(#pages-container > #thesis) #thesis-hero .section__inner {
  height: auto;
  min-height: 0;
  padding-bottom: var(--thesis-content-gap);
}

body:has(#pages-container > #thesis) #thesis-hero__title {
  --grid-column-span: 18;
  --grid-column-start: 4;
}

body:has(#pages-container > #thesis) #thesis-hero__desc {
  height: 0;
  margin: 0;
  padding-top: 0;
  overflow: hidden;
}

body:has(#pages-container > #thesis) #thesis-artwork {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

body:has(#pages-container > #thesis) #thesis-artwork .o-grid {
  height: auto;
}

body:has(#pages-container > #thesis) #thesis-artwork img {
  --grid-column-span: 18;
  --grid-column-start: 4;
  display: block;
  width: 100%;
  height: auto;
}

body:has(#pages-container > #thesis) #thesis-essay {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: var(--thesis-content-gap) var(--site-outer-padding-x)
    calc(112 * 100vw / 1440);
}

body:has(#pages-container > #thesis) #thesis-essay__copy {
  width: min(47vw, 850px);
  margin-inline: auto;
}

body:has(#pages-container > #thesis) #thesis-essay__copy p {
  margin: 0 0 2.15em;
  font-size: clamp(22px, calc(24 * 100vw / 1440), 34px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

body:has(#pages-container > #thesis) #thesis-essay__copy p:last-child {
  margin-bottom: 0;
}

body:has(#pages-container > #thesis) #site-footer {
  display: none !important;
}

body:has(#pages-container > #home) #site-header-cta-container {
  display: flex !important;
}

body:has(#pages-container > #home) #site-header-cta {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
}

body:has(#pages-container > #home)
  #site-header-cta
  a
  > div:nth-child(5) {
  margin-right: 0;
}

body:has(#pages-container > #home) #site-header-cta__subtitle,
body:has(#pages-container > #home) #site-header-mobile-menu-button {
  display: none !important;
}

/* The homepage is one fixed viewport: interactive cloud artwork and navigation. */
body:has(#pages-container > #home) {
  width: 100vw;
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100svh;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #181818;
}

#minimal-grid {
  display: none;
}

body:has(#pages-container > #home) #canvas {
  display: block !important;
  z-index: 0;
}

body:has(#pages-container > #home) #ui {
  position: relative;
  z-index: 2;
}

body:has(#pages-container > #home) #site-content {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100vh !important;
  height: 100svh !important;
  overflow: hidden !important;
}

/*
 * Preserve the original section geometry for the WebGL scene, but never paint
 * those sections inside the locked homepage viewport.
 */
body:has(#pages-container > #home)
  #home
  > .page__inner
  > .section:not(#home-hero) {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:has(#pages-container > #home) #site-footer,
body:has(#pages-container > #home) #scroll-indicator,
body:has(#pages-container > #home) #site-mobile-menu {
  display: none !important;
}

body:has(#pages-container > #home) #home-hero__scroll-to-explore {
  display: block !important;
  opacity: 1 !important;
}

@media (max-width: 767.98px) {
  #site-header-cta__subtitle {
    display: none !important;
  }

  /*
   * On the mobile Thesis, show the Atlas mark at the top of the page but let
   * it scroll away with the opening section instead of overlapping the essay.
   */
  body:has(#pages-container > #thesis) #site-header {
    position: absolute;
  }

  body:has(#pages-container > #thesis) #thesis {
    --thesis-content-gap: calc(24 * 100vw / 375);
  }

  body:has(#pages-container > #thesis) #thesis-hero__title {
    --grid-column-span: 10;
    --grid-column-start: 2;
    margin-top: calc(
      0.4 *
        (calc(var(--vh) * 100) - 1lh - 2 * var(--site-padding-y))
    );
  }

  /*
   * The original scroll animation resets the title's character transforms
   * after the hero leaves the viewport, then replays them on the way back.
   * Keep the mobile title at its settled position so it remains centered
   * inside the resized background grid through every scroll cycle.
   */
  body:has(#pages-container > #thesis) #thesis-hero__title .char {
    transform: translateZ(0) !important;
  }

  body:has(#pages-container > #thesis) #thesis-essay {
    padding-top: var(--thesis-content-gap);
    padding-right: calc(var(--site-padding-x) + var(--grid-span-width));
    padding-bottom: calc(72 * 100vw / 375);
    padding-left: calc(var(--site-padding-x) + var(--grid-span-width));
  }

  body:has(#pages-container > #thesis) #thesis-essay__copy {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow-wrap: break-word;
  }

  body:has(#pages-container > #thesis) #thesis-essay__copy p {
    margin-bottom: 1.9em;
    font-size: calc(20 * 100vw / 375);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  body:has(#pages-container > #thesis) #thesis-artwork img {
    --grid-column-span: 10;
    --grid-column-start: 2;
  }

  body:has(#pages-container > #home) #site-header-mobile-menu-button {
    display: none !important;
  }
}