:root {
  --sr-title-travel: 12px;
  --sr-continuum-shift: 0px;
  --sr-continuum-dim: 0;
}

html[data-scroll-narrative="booting"] body {
  visibility: hidden;
}

html[data-scroll-narrative="ready"],
html[data-scroll-narrative="static"] {
  scroll-behavior: auto;
}

html[data-scroll-narrative="ready"] body,
html[data-scroll-narrative="static"] body {
  visibility: visible;
}

.scroll-continuum {
  position: fixed;
  z-index: 0;
  top: calc(var(--sticky-nav-height) + env(safe-area-inset-top));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--canvas);
  pointer-events: none;
  transform: translate3d(0, var(--sr-continuum-shift), 0);
  transform-origin: 50% 0;
  contain: layout paint;
  will-change: transform;
}

.scroll-continuum .hero-renders,
.scroll-continuum .hero-shade,
.scroll-continuum__dim {
  position: absolute;
  inset: 0;
}

.scroll-continuum .hero-renders {
  z-index: 0;
}

.scroll-continuum .hero-shade {
  z-index: 1;
}

.scroll-continuum__dim {
  z-index: 2;
  background: rgb(8 9 10);
  opacity: var(--sr-continuum-dim);
}

.scroll-continuum[data-continuum-offscreen="true"] {
  visibility: hidden;
}

.scroll-continuum .hero-render {
  transition-duration: var(--hero-transition-ms, 1600ms);
}

.scroll-continuum[data-hero-controlled="true"] .hero-render {
  opacity: calc(var(--hero-weight, 0) * 0.9);
  transition: none;
}

main {
  position: relative;
  z-index: 1;
}

#top,
#find {
  background: transparent;
}

#top .hero__inner,
#find > .chapter-page__inner {
  position: relative;
  z-index: 2;
}

#find::after {
  z-index: 1;
  background:
    radial-gradient(ellipse 74% 62% at 53% 50%, rgb(8 9 10 / 0.08) 0 58%, rgb(8 9 10 / 0.24) 100%),
    linear-gradient(90deg, rgb(8 9 10 / 0.22) 0%, transparent 18%, transparent 82%, rgb(8 9 10 / 0.22) 100%);
}

.find-chapter-bg {
  background: none;
  filter: none;
  opacity: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-scroll-narrative="ready"] [data-sr-title] {
  transform-origin: 50% 50%;
  will-change: opacity, filter, translate;
}

html[data-scroll-narrative="ready"] [data-sr-title-state="pending"] {
  opacity: 0.58;
  filter: brightness(0.64);
  translate: 0 var(--sr-title-travel);
}

html[data-scroll-narrative="ready"] [data-sr-title-state="running"] {
  animation: sr-title-emerge 500ms both;
}

html[data-scroll-narrative="ready"] [data-sr-title-state="settled"],
html[data-scroll-narrative="ready"] [data-validation-geometry-measure="true"] [data-sr-title] {
  opacity: 1;
  filter: none;
  translate: 0 0;
}

@keyframes sr-title-emerge {
  0% {
    opacity: 0.58;
    filter: brightness(0.64);
    translate: 0 var(--sr-title-travel);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  50% {
    opacity: 0.82;
    filter: brightness(0.84);
    translate: 0 calc(var(--sr-title-travel) * 0.38);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  100% {
    opacity: 1;
    filter: none;
    translate: 0 0;
  }
}

html[data-scroll-narrative="ready"] [data-sr-brush] {
  --sr-brush: 0;
  clip-path: inset(0 calc((1 - var(--sr-brush)) * 100%) 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
  will-change: clip-path, -webkit-mask-size, mask-size;
}

html[data-scroll-narrative="ready"] [data-sr-reveal] {
  --sr-reveal: 0;
  opacity: var(--sr-reveal);
  clip-path: inset(0 calc((1 - var(--sr-reveal)) * 8%) 0 0);
  will-change: opacity, clip-path;
}

html[data-scroll-narrative="ready"] [data-sr-reveal] .validation-scout-copy__emoji {
  opacity: var(--sr-reveal);
}

html[data-scroll-narrative="ready"] [data-sr-mode="stroke"] {
  --sr-reveal: 0;
  opacity: max(0.18, var(--sr-reveal));
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--sr-reveal));
  will-change: opacity, stroke-dashoffset;
}

html[data-scroll-narrative="ready"] [data-sr-interactive="true"][data-sr-visible="false"] {
  pointer-events: none;
}

.sr-handoff-layer {
  position: fixed;
  z-index: 70;
  inset: 0;
  overflow: hidden;
  background: var(--canvas);
  pointer-events: auto;
  contain: strict;
  isolation: isolate;
}

.sr-handoff-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--canvas);
  pointer-events: none;
  will-change: transform;
}

.sr-handoff-fragment {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.sr-handoff-fragment > .sr-handoff-clone {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.sr-handoff-clone,
.sr-handoff-clone *,
.sr-handoff-clone::before,
.sr-handoff-clone::after,
.sr-handoff-clone *::before,
.sr-handoff-clone *::after {
  animation: none !important;
  transition: none !important;
  caret-color: transparent !important;
}

.sr-handoff-clone .scroll-continuum {
  position: absolute;
  top: 0;
}

@media (max-width: 1040px) {
  :root {
    --sr-title-travel: 9px;
  }
}

@media (max-width: 760px) {
  :root {
    --sr-title-travel: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-continuum,
  .scroll-continuum .hero-render {
    transition: none !important;
  }

  html[data-scroll-narrative="ready"] [data-sr-title],
  html[data-scroll-narrative="ready"] [data-sr-brush],
  html[data-scroll-narrative="ready"] [data-sr-reveal],
  html[data-scroll-narrative="ready"] [data-sr-mode="stroke"] {
    opacity: 1 !important;
    filter: none !important;
    translate: 0 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transition: none !important;
  }

  html[data-scroll-narrative="ready"] .validation-scout-copy__emoji {
    opacity: 1 !important;
  }
}