/* Scroll choreography is progressive enhancement; the page is visible by default. */
:root {
  --motion-travel: 76px;
  --motion-rise: 32px;
  --motion-turn: 5deg;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.scroll-progress,
.motion-sheen {
  display: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Replace the original page-load fade with a coordinated entrance. */
  .motion-ready .hero-copy,
  .motion-ready .hero-visual {
    animation: none;
  }

  [data-reveal] {
    --reveal-x: 0px;
    --reveal-y: var(--motion-rise);
    --reveal-turn: 0deg;
    --reveal-roll: 0deg;
    --reveal-pitch: 0deg;
    --reveal-scale: .985;
  }

  [data-reveal="left"] {
    --reveal-x: calc(-1 * var(--motion-travel));
    --reveal-turn: var(--motion-turn);
    --reveal-roll: -.75deg;
    transform-origin: left center;
  }

  [data-reveal="right"] {
    --reveal-x: var(--motion-travel);
    --reveal-turn: calc(-1 * var(--motion-turn));
    --reveal-roll: .75deg;
    transform-origin: right center;
  }

  [data-reveal="unfold"] {
    --reveal-y: 44px;
    --reveal-pitch: 4deg;
    --reveal-scale: .975;
    transform-origin: center bottom;
  }

  [data-reveal="rise"] {
    --reveal-pitch: 2deg;
  }

  .motion-ready [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transition: none;
    transform: perspective(1200px)
      translate3d(var(--reveal-x), var(--reveal-y), 0)
      rotateX(var(--reveal-pitch)) rotateY(var(--reveal-turn))
      rotateZ(var(--reveal-roll)) scale(var(--reveal-scale));
  }

  .motion-ready [data-reveal].is-revealing {
    transition: transform 900ms var(--motion-ease) var(--reveal-delay, 0ms),
      opacity 560ms ease-out var(--reveal-delay, 0ms);
    will-change: transform, opacity;
  }

  .motion-ready .feature-card,
  .motion-ready .subscription-card {
    position: relative;
  }

  .motion-ready .motion-sheen {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
  }

  .motion-sheen::after {
    content: "";
    position: absolute;
    inset: -30% -50%;
    background: linear-gradient(110deg, transparent 36%, #c1dfff12 48%, #e4e4ff20 50%, transparent 64%);
    opacity: 0;
    transform: translate3d(-55%, 0, 0);
  }

  .is-revealing > .motion-sheen::after {
    animation: motion-sheen 920ms var(--motion-ease) var(--reveal-delay, 0ms) both;
  }

  @keyframes motion-sheen {
    20% { opacity: 0; }
    45% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(55%, 0, 0); }
  }

  .motion-ready [data-depth] {
    /* Individual translate composes with the artwork's existing rotations. */
    translate: 0 var(--depth-y, 0px);
  }

  .motion-ready .scroll-progress {
    display: block;
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: linear-gradient(90deg, #6ebbe9, #a3e7ff 65%, #e0f6ff);
    transform: scaleX(0);
    transform-origin: left;
  }

  @supports (animation-timeline: scroll()) and (animation-timeline: view()) {
    .motion-ready.motion-native-scroll [data-depth] {
      animation: motion-depth linear both;
      animation-duration: auto;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }

    .motion-ready.motion-native-scroll .scroll-progress {
      transform: none;
      animation: motion-scroll-progress linear both;
      animation-duration: auto;
      animation-timeline: scroll(root block);
    }

    @keyframes motion-depth {
      from { translate: 0 calc(0px - var(--depth-distance, 0px)); }
      to { translate: 0 var(--depth-distance, 0px); }
    }

    @keyframes motion-scroll-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

@media (max-width: 960px) {
  :root {
    --motion-travel: 52px;
    --motion-rise: 26px;
    --motion-turn: 3.5deg;
  }
}

@media (max-width: 600px) {
  :root {
    --motion-travel: 30px;
    --motion-rise: 20px;
    --motion-turn: 2.5deg;
  }

  [data-reveal="unfold"] {
    --reveal-y: 26px;
    --reveal-pitch: 3deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-depth] {
    translate: none !important;
  }
}