/* Paging: every section is uncovered from beneath the one before it, like
   turning pages. Each page waits stuck to the bottom of the screen under
   a dark veil that fades as it is uncovered. The menu film is a long scroll
   track rather than one screen, so it tucks its first screen up under the
   pillars page instead, its pinned stage waiting there to be uncovered. */
.cta {
  position: relative;
}

.page-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
}

.cta__inner {
  transform: translate3d(0, calc((1 - var(--page-reveal, 1)) * var(--space-8)), 0);
}

:root:not(.a11y-still) .cta__inner {
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (overflow: clip) {
    /* FIXED REVEAL FOOTER:
       main sits above the footer with a dark surface and shadow.
       Its margin-bottom matches the footer's height so main rolls up
       and reveals the fixed footer underneath like a curtain. */
    /* FIXED REVEAL FOOTER:
       main sits above the footer. Strictly NO shadow on reveal so the prefooter
       snaps flush into place on top of the footer. */
    :root:not(.a11y-still) main {
      position: relative;
      z-index: 2;
      background-color: var(--color-night);
      box-shadow: none;
      border-bottom: none;
      margin-bottom: var(--footer-h, 240px);
    }

    :root:not(.a11y-still) main > * {
      position: relative;
    }

    :root:not(.a11y-still) .hero {
      z-index: 7;
    }

    :root:not(.a11y-still) .order {
      z-index: 6;
    }

    :root:not(.a11y-still) .pillars {
      z-index: 5;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .film--menu {
      z-index: 4;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .critics-tribunal {
      z-index: 3;
      box-shadow: none;
      border-bottom: none;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .cta {
      z-index: 2;
      box-shadow: none;
      border-bottom: none;
    }

    /* Fixed footer: sits pinned at the bottom of the viewport behind main with strictly NO shadow */
    :root:not(.a11y-still):not(.a11y-zoomed) .site-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1;
      pointer-events: auto;
      box-shadow: none;
    }

    /* Argon Terminal / Google Cloud AI Partner dialog & tooltip elevation above main */
    :root:not(.a11y-still):not(.a11y-zoomed) .wp-block-template-part:has(.argon-terminal-badge:is(:hover, :focus-within, .is-active)),
    :root:not(.a11y-still):not(.a11y-zoomed) .wp-block-template-part.has-open-terminal,
    :root:not(.a11y-still):not(.a11y-zoomed) .wp-block-template-part.has-hovered-badge {
      position: relative;
      z-index: 1000;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .site-footer:has(.argon-terminal-badge:is(:hover, :focus-within, .is-active)),
    :root:not(.a11y-still):not(.a11y-zoomed) .site-footer.has-open-terminal,
    :root:not(.a11y-still):not(.a11y-zoomed) .site-footer.has-hovered-badge {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1000;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) :is(.order, .pillars, .critics-tribunal):not(.is-tall) {
      position: sticky;
      bottom: 0;
      display: grid;
      align-content: center;
      min-height: 100vh;
      min-height: 100svh;
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .cta:not(.is-tall) {
      position: sticky;
      bottom: 0;
      display: grid;
      align-content: center;
      min-height: calc(100vh - var(--footer-h, 200px));
      min-height: calc(100svh - var(--footer-h, 200px));
    }

    :root:not(.a11y-still):not(.a11y-zoomed) :is(.order, .pillars, .critics-tribunal) {
      padding-block: clamp(var(--space-6), 8vh, var(--space-15));
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .cta {
      padding-block: clamp(var(--space-2), 2vh, var(--space-4));
    }

    :root:not(.a11y-still):not(.a11y-zoomed) .is-covered {
      opacity: 0;
    }

    /* The menu film starts one screen early, underneath the pillars page,
       and its track grows by that screen so the scrub keeps its length. */
    :root.js:not(.a11y-still):not(.a11y-zoomed) .film--menu.has-sequence {
      margin-top: -100vh;
      margin-top: -100svh;
      height: calc(var(--scrub) + 100vh);
      height: calc(var(--scrub) + 100svh);
    }

    :root.js:not(.a11y-still):not(.a11y-zoomed) .pillars.is-tall + .film--menu.has-sequence {
      margin-top: 0;
      height: var(--scrub);
    }

    /* Notice: .site-footer is STRICTLY EXCLUDED from ::after veil so it is NEVER greyed out! */
    :root:not(.a11y-still):not(.a11y-zoomed) :is(.order, .pillars, .critics-tribunal, .cta):not(.is-tall)::after,
    :root.js:not(.a11y-still):not(.a11y-zoomed) .film--menu.has-sequence .film__stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background-color: var(--color-night);
      opacity: calc((1 - var(--page-reveal, 1)) * 0.85);
      pointer-events: none;
      will-change: opacity;
    }

    /* Upper sections share shadow; .critics-tribunal and .cta are strictly excluded so their deep reveal shadows are never overwritten */
    :root:not(.a11y-still):not(.a11y-zoomed) :is(.hero, .order, .pillars, .film--menu) {
      box-shadow: 0 var(--space-4) var(--space-8) var(--color-shadow-a60);
    }
  }
}