/* Page Elevator: full-frame scroll cinema with live, accessible page copy. */
.page-elevator {
  --page-elevator-progress: 0;
  position: relative;
  min-height: 0;
  height: 620vh;
  height: 620svh;
  display: block;
  padding: 0;
  background: #050506;
  color: #f7f7f5;
  isolation: isolate;
}

.page-elevator__sticky {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  display: grid;
  overflow: hidden;
  background: #050506;
  isolation: isolate;
}

.page-elevator__media,
.page-elevator__shade,
.page-elevator__chapters {
  position: absolute;
  inset: 0;
}

.page-elevator__media {
  z-index: 0;
  overflow: hidden;
  background: #050506;
}

.page-elevator__canvas,
.page-elevator__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.page-elevator__canvas {
  z-index: 1;
}

.page-elevator__poster {
  z-index: 2;
  opacity: 1;
  transition: opacity 280ms ease;
}

.page-elevator__poster.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.page-elevator__shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 3, 4, 0.34) 0%, transparent 24%, transparent 67%, rgba(3, 3, 4, 0.68) 100%),
    linear-gradient(90deg, rgba(3, 3, 4, 0.94) 0%, rgba(3, 3, 4, 0.72) 24%, rgba(3, 3, 4, 0.18) 48%, transparent 66%);
  transition: background 420ms ease;
  pointer-events: none;
}

.page-elevator[data-active-side="right"] .page-elevator__shade {
  background:
    linear-gradient(180deg, rgba(3, 3, 4, 0.34) 0%, transparent 24%, transparent 67%, rgba(3, 3, 4, 0.68) 100%),
    linear-gradient(270deg, rgba(3, 3, 4, 0.94) 0%, rgba(3, 3, 4, 0.72) 24%, rgba(3, 3, 4, 0.18) 48%, transparent 66%);
}

.page-elevator__chapters {
  z-index: 2;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
}

.page-elevator__chapter {
  --chapter-opacity: 0;
  --chapter-shift: 28px;
  position: absolute;
  top: 50%;
  width: min(37vw, 530px);
  display: grid;
  justify-items: start;
  gap: 0;
  margin: 0;
  color: #f7f7f5;
  opacity: var(--chapter-opacity);
  transform: translate3d(var(--chapter-shift), -50%, 0);
  transition: visibility 0s linear 220ms;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.page-elevator__chapter:first-child {
  --chapter-opacity: 1;
  --chapter-shift: 0px;
}

.page-elevator__chapter--left {
  left: var(--page-gutter);
}

.page-elevator__chapter--right {
  right: var(--page-gutter);
}

.page-elevator__chapter.is-active {
  z-index: 2;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.page-elevator__label {
  margin-bottom: clamp(14px, 2.2vh, 24px);
  color: #ff3d47;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
  font-weight: 650;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-elevator__chapter h1,
.page-elevator__chapter h2 {
  max-width: 10.5ch;
  margin: 0;
  color: #f7f7f5;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3.1rem, 5.3vw, 5.8rem);
  font-weight: 650;
  letter-spacing: -0.064em;
  line-height: 0.91;
  text-wrap: balance;
}

.page-elevator__chapter p {
  max-width: 34rem;
  margin: clamp(20px, 3vh, 30px) 0 0;
  color: rgba(247, 247, 245, 0.78);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.page-elevator__chapter .button {
  min-width: min(100%, 210px);
  margin-top: clamp(24px, 4vh, 38px);
  pointer-events: auto;
}

.page-elevator__chapter .button:focus-visible {
  outline: 3px solid #f7f7f5;
  outline-offset: 4px;
}

.page-elevator__cue {
  --cue-opacity: 1;
  --cue-shift: 0px;
  position: absolute;
  z-index: 3;
  right: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(247, 247, 245, 0.7);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  opacity: var(--cue-opacity);
  transform: translate3d(0, var(--cue-shift), 0);
  pointer-events: none;
}

.page-elevator__cue svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  animation: page-elevator-cue 1.8s ease-in-out infinite;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.page-elevator--media-error .page-elevator__media {
  background:
    radial-gradient(circle at 50% 42%, rgba(214, 31, 44, 0.26), transparent 32%),
    linear-gradient(145deg, #170709, #050506 62%);
}

@keyframes page-elevator-cue {

  0%,
  100% {
    transform: translate3d(0, -2px, 0);
  }

  50% {
    transform: translate3d(0, 4px, 0);
  }
}

@media (max-width: 1100px) and (min-width: 900px) {
  .page-elevator__chapter {
    width: min(39vw, 440px);
  }

  .page-elevator__chapter h1,
  .page-elevator__chapter h2 {
    font-size: clamp(3rem, 5.4vw, 4.6rem);
  }
}

@media (max-width: 899px) {
  .page-elevator {
    height: 560vh;
    height: 560svh;
  }

  .page-elevator__sticky {
    display: grid;
  }

  .page-elevator__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-elevator__canvas,
  .page-elevator__poster {
    object-fit: cover;
  }

  .page-elevator__shade,
  .page-elevator[data-active-side="right"] .page-elevator__shade {
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(3, 3, 4, 0.08) 0%,
        rgba(3, 3, 4, 0.16) 38%,
        rgba(3, 3, 4, 0.58) 66%,
        rgba(3, 3, 4, 0.82) 100%);
  }

  .page-elevator__chapters {
    position: absolute;
    inset: 0;
    background: transparent;
  }

  .page-elevator__chapter {
    top: auto;
    right: var(--page-gutter);
    bottom: clamp(40px, 8vh, 80px);
    left: var(--page-gutter);
    width: auto;
    background: transparent;
    transform: translate3d(var(--chapter-shift), 0, 0);
  }

  .page-elevator__chapter h1,
  .page-elevator__chapter h2 {
    max-width: 12ch;
    font-size: clamp(2.55rem, 8.4vw, 4.9rem);
    line-height: 0.94;
  }

  .page-elevator__chapter p {
    max-width: 38rem;
    font-size: clamp(0.98rem, 2.3vw, 1.12rem);
  }

  .page-elevator__chapter .button {
    margin-top: clamp(20px, 3.4vh, 30px);
  }

  .page-elevator__cue {
    right: var(--page-gutter);
  }
}

@media (max-width: 520px) {
  .page-elevator {
    height: 520vh;
    height: 520svh;
  }

  .page-elevator__chapter {
    bottom: max(28px, env(safe-area-inset-bottom));
  }

  .page-elevator__label {
    margin-bottom: 12px;
  }

  .page-elevator__chapter h1,
  .page-elevator__chapter h2 {
    font-size: clamp(2.25rem, 10.8vw, 3.35rem);
  }

  .page-elevator__chapter p {
    margin-top: 16px;
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .page-elevator__chapter .button {
    min-height: 44px;
    margin-top: 20px;
  }

  .page-elevator__cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-elevator {
    height: auto;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .page-elevator__sticky {
    position: relative;
    top: auto;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .page-elevator__canvas {
    display: none;
  }

  .page-elevator__poster {
    opacity: 1;
  }

  .page-elevator__chapter {
    display: none;
    transform: translate3d(0, -50%, 0);
    opacity: 1;
    visibility: visible;
  }

  .page-elevator__chapter:first-child {
    display: grid;
  }

  .page-elevator__cue {
    display: none;
  }

  .page-elevator__cue svg {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .page-elevator__sticky {
    height: auto;
    display: flex;
  }

  .page-elevator__chapters {
    min-height: 430px;
  }

  .page-elevator__chapter,
  .page-elevator__chapter:first-child {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 34px var(--page-gutter) 64px;
    transform: none;
  }
}

html:not(.js) .page-elevator {
  height: auto;
  min-height: calc(100vh - var(--header-height));
}

html:not(.js) .page-elevator__sticky {
  position: relative;
  top: auto;
  min-height: calc(100vh - var(--header-height));
}

html:not(.js) .page-elevator__chapter:not(:first-child),
html:not(.js) .page-elevator__canvas,
html:not(.js) .page-elevator__cue {
  display: none;
}