@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .point[data-astro-cid-oxgmilyn], .rule[data-astro-cid-oxgmilyn] {
      animation: linear both point-in;
      animation-timeline: view();
      animation-range: entry 25% cover 40%;
    }

    .rule[data-astro-cid-oxgmilyn] {
      transform-origin: 0;
      animation-name: rule-in;
    }

    @media (width >= 1024px) and (height >= 680px) {
      .pin-track[data-astro-cid-oxgmilyn] {
        height: 190vh;
        view-timeline: --pin block;
      }

      .pin-sticky[data-astro-cid-oxgmilyn] {
        position: sticky;
        top: 4.75rem;
        display: flex;
        align-items: center;
        height: calc(100vh - 4.75rem);
        padding-block: 0;
      }

      .point[data-astro-cid-oxgmilyn], .rule[data-astro-cid-oxgmilyn] {
        animation-timeline: --pin;
        animation-range: contain calc(5% + var(--i) * 25%) contain calc(22% + var(--i) * 25%);
      }
    }
  }
}

@keyframes point-in {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
}

@keyframes rule-in {
  from {
    scale: 0 1;
  }
}
.reveal[data-astro-cid-lcdefpme] {
  animation: .9s cubic-bezier(.2, .7, .2, 1) both line-up;
  animation-delay: var(--d);
}

@keyframes line-up {
  from {
    translate: 0 105%;
  }
}

.site-header[data-astro-cid-lcdefpme]:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 12px 30px -14px #00000073;
}

.step-dot[data-astro-cid-lcdefpme]:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
}

.depth-layer[data-astro-cid-lcdefpme] {
  will-change: transform, translate;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero[data-astro-cid-lcdefpme] {
      view-timeline: --hero block;
    }

    .rise-sm[data-astro-cid-lcdefpme], .rise-md[data-astro-cid-lcdefpme], .rise-lg[data-astro-cid-lcdefpme] {
      animation: linear both rise-sm;
      animation-timeline: --hero;
      animation-range: exit;
    }

    .rise-md[data-astro-cid-lcdefpme] {
      animation-name: rise-md;
    }

    .rise-lg[data-astro-cid-lcdefpme] {
      animation-name: rise-lg;
    }

    .rise-line[data-astro-cid-lcdefpme] {
      animation: linear both line-up;
      animation-timeline: view();
      animation-range: entry 30% cover 40%;
    }

    .rise-line-2[data-astro-cid-lcdefpme] {
      animation-range: entry 55% cover 45%;
    }

    .site-header[data-astro-cid-lcdefpme]:after {
      animation: linear both shadow-in;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }

    .steps[data-astro-cid-lcdefpme] {
      view-timeline: --steps block;
    }

    .track-fill[data-astro-cid-lcdefpme] {
      transform-origin: top;
      animation: linear both fill-down;
      animation-timeline: --steps;
      animation-range: cover 25% cover 55%;
    }

    .step-dot[data-astro-cid-lcdefpme]:after, .step-num[data-astro-cid-lcdefpme] {
      animation: linear both step-on;
      animation-timeline: --steps;
      animation-range: cover calc(25% + var(--i) * 8%) cover calc(27% + var(--i) * 8%);
    }

    .step-num[data-astro-cid-lcdefpme] {
      animation-name: number-on;
    }

    @media (width >= 1024px) {
      .track-fill[data-astro-cid-lcdefpme] {
        transform-origin: 0;
        animation-name: fill-across;
      }

      .deck[data-astro-cid-lcdefpme] {
        view-timeline: --deck block;
      }

      .deal[data-astro-cid-lcdefpme] {
        animation: linear both deal;
        animation-timeline: --deck;
        animation-range: entry cover 45%;
      }

      .deal-caption[data-astro-cid-lcdefpme] {
        animation: linear both fade-in;
        animation-timeline: --deck;
        animation-range: cover 36% cover 46%;
      }
    }
  }
}

@keyframes rise-sm {
  to {
    translate: 0 -40px;
  }
}

@keyframes rise-md {
  to {
    translate: 0 -110px;
  }
}

@keyframes rise-lg {
  to {
    translate: 0 -190px;
  }
}

@keyframes shadow-in {
  to {
    opacity: 1;
  }
}

@keyframes fill-down {
  from {
    scale: 1 0;
  }
}

@keyframes fill-across {
  from {
    scale: 0 1;
  }
}

@keyframes step-on {
  from {
    scale: 0;
  }
}

@keyframes number-on {
  from {
    opacity: .25;
  }
}

@keyframes deal {
  from {
    translate: var(--from-x) 1.5rem;
    rotate: var(--from-r);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}