.landing-shell {
  overflow-x: clip;
  overflow-y: visible;
}

.landing-scroll-story {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: clip;
  isolation: isolate;
  background: #020713;
}

.landing-scroll-story[data-fp-scroll-mode="scrub"] {
  min-height: 800vh;
}

.landing-scroll-story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #020713;
  z-index: 90;
}

.landing-scroll-story__media,
.landing-scroll-story__poster,
.landing-scroll-story__video,
.landing-scroll-story__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-scroll-story__media {
  z-index: 0;
  background: #020713 url("/static/media/landing-scroll/fitpocket-outdoor-squat-poster.jpg") center / cover no-repeat;
}

.landing-scroll-story__poster,
.landing-scroll-story__video {
  object-fit: cover;
  object-position: center;
}

.landing-scroll-story__poster {
  display: block;
}

.landing-scroll-story__video,
.landing-scroll-story__canvas {
  display: none;
}

.landing-scroll-story[data-fp-scroll-mode="scrub"] .landing-scroll-story__canvas {
  display: block;
  opacity: 0;
  transition: opacity 240ms ease;
}

.landing-scroll-story[data-fp-scroll-mode="scrub"] .landing-scroll-story__canvas.is-visible {
  opacity: 1;
}

.landing-scroll-story[data-fp-scroll-mode="mobile"] .landing-scroll-story__video {
  display: block;
}

.landing-scroll-story__keywords {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.landing-scroll-story[data-fp-scroll-mode="scrub"] .landing-scroll-story__keywords {
  display: block;
}

.landing-scroll-story__keyword {
  --fp-keyword-opacity: 0;
  --fp-keyword-shift: 24px;
  --fp-keyword-scale: .96;
  position: absolute;
  display: block;
  margin: 0;
  color: #f8fbff;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: clamp(2.8rem, 7.25vw, 8.25rem);
  font-weight: 850;
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--fp-keyword-opacity);
  text-shadow: 0 .2rem 1.2rem rgba(2, 7, 19, .68), 0 1.2rem 3.5rem rgba(2, 7, 19, .52);
  transform: translate3d(0, var(--fp-keyword-shift), 0) scale(var(--fp-keyword-scale));
  transform-origin: left center;
  will-change: opacity, transform;
}

.landing-scroll-story__keyword::after {
  content: "";
  display: block;
  width: clamp(3rem, 8vw, 8rem);
  height: clamp(2px, .2vw, 4px);
  margin-top: clamp(.65rem, 1vw, 1rem);
  border-radius: 999px;
  background: linear-gradient(90deg, #06c1b0, #7c5cff);
  box-shadow: 0 0 1.25rem rgba(6, 193, 176, .46);
  transform: scaleX(var(--fp-keyword-opacity));
  transform-origin: left center;
}

.landing-scroll-story__keyword:nth-child(1) {
  top: 18%;
  left: clamp(1.25rem, 5vw, 5.5rem);
}

.landing-scroll-story__keyword:nth-child(2) {
  top: 20%;
  right: clamp(1.25rem, 3.5vw, 4rem);
  font-size: clamp(2.6rem, 5.25vw, 6rem);
  text-align: right;
  transform-origin: right center;
}

.landing-scroll-story__keyword:nth-child(3) {
  bottom: 28%;
  left: clamp(1.25rem, 5vw, 5.5rem);
}

.landing-scroll-story__keyword:nth-child(4) {
  right: clamp(1.25rem, 5vw, 5.5rem);
  bottom: 14%;
  text-align: right;
  transform-origin: right center;
}

.landing-scroll-story__keyword:nth-child(even)::after {
  margin-left: auto;
  transform-origin: right center;
}

.landing-scroll-story__scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, .75rem, 0);
  transition: opacity 280ms ease, transform 280ms ease;
  will-change: opacity, transform;
}

.landing-scroll-story[data-fp-scroll-mode="scrub"] .landing-scroll-story__scroll-cue,
.landing-scroll-story[data-fp-scroll-mode="mobile"] .landing-scroll-story__scroll-cue,
.landing-scroll-story[data-fp-scroll-mode="reduced"] .landing-scroll-story__scroll-cue {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.landing-scroll-story[data-fp-scroll-mode="scrub"][data-fp-scroll-cue-hidden="true"] .landing-scroll-story__scroll-cue {
  opacity: 0;
  transform: translate3d(-50%, .75rem, 0);
}

.landing-scroll-story__scroll-cue-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(2, 7, 19, .56);
  box-shadow: 0 .5rem 1.8rem rgba(2, 7, 19, .3);
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-shadow: 0 1px .5rem rgba(2, 7, 19, .72);
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-scroll-story__scroll-mouse {
  position: relative;
  width: 1rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.landing-scroll-story__scroll-wheel {
  position: absolute;
  top: .28rem;
  left: 50%;
  width: 2px;
  height: .34rem;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  animation: landing-scroll-story-wheel 1.55s ease-in-out infinite;
}

.landing-scroll-story__scroll-chevron {
  width: .55rem;
  height: .55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .9;
  transform: rotate(45deg);
  animation: landing-scroll-story-chevron 1.55s ease-in-out infinite;
}

.landing-scroll-story__scroll-cue-mobile {
  display: none;
}

@keyframes landing-scroll-story-wheel {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -.08rem, 0);
  }
  25% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
    transform: translate3d(-50%, .42rem, 0);
  }
}

@keyframes landing-scroll-story-chevron {
  0%,
  100% {
    opacity: .45;
    transform: translate3d(0, -.12rem, 0) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, .16rem, 0) rotate(45deg);
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .landing-scroll-story,
  .landing-scroll-story[data-fp-scroll-mode="scrub"] {
    min-height: 100vh;
    min-height: 100svh;
  }

  .landing-scroll-story__stage {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .landing-scroll-story__keywords {
    display: none !important;
  }

  .landing-scroll-story__scroll-cue {
    bottom: max(1.4rem, env(safe-area-inset-bottom));
  }

  .landing-scroll-story__scroll-mouse,
  .landing-scroll-story__scroll-cue-desktop {
    display: none;
  }

  .landing-scroll-story__scroll-cue-mobile {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll-story,
  .landing-scroll-story[data-fp-scroll-mode="scrub"] {
    min-height: 100vh;
    min-height: 100svh;
  }

  .landing-scroll-story__stage {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .landing-scroll-story__video,
  .landing-scroll-story__canvas,
  .landing-scroll-story__keywords {
    display: none !important;
    transition: none;
  }

  .landing-scroll-story__scroll-cue,
  .landing-scroll-story__scroll-wheel,
  .landing-scroll-story__scroll-chevron {
    animation: none;
    transition: none;
  }
}