/* A static reading mask, with one transform-only moving film layer. */
body { isolation: isolate; }
.film-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 0%, #000 8%, #0006 20%, transparent 34%, transparent 66%, #0006 80%, #000 92%, #000 100%);
}
.filmstrip {
  position: absolute;
  top: -10%;
  left: -20%;
  width: 140%;
  height: 120%;
  max-width: none;
  opacity: .65;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.hero { isolation: auto; overflow: visible; }
.hero h1, .hero .lead { text-shadow: 0 2px 8px #080b09; }
.hero-app { margin-top: 60px; position: relative; }
.product-image img { display: block; width: 100%; height: auto; }
.section-heading > div, .section-heading > h2, .section-heading > p,
.strategy > div, .price > div, .latest article {
  background-color: #080b09ed;
  border-radius: 8px;
}
html { scroll-behavior: auto; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .filmstrip {
      animation: film-page-depth linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes film-page-depth {
      0% { transform: perspective(1400px) translate3d(-100px, -90px, 0) rotateX(8deg) rotateZ(-7deg); }
      25% { transform: perspective(1400px) translate3d(-50px, -45px, 0) rotateX(5deg) rotateZ(-4deg); }
      50% { transform: perspective(1400px) translate3d(0, 0, 0) rotateX(2deg) rotateZ(-1deg); }
      75% { transform: perspective(1400px) translate3d(50px, 45px, 0) rotateX(0deg) rotateZ(2deg); }
      100% { transform: perspective(1400px) translate3d(100px, 90px, 0) rotateX(-2deg) rotateZ(5deg); }
    }
  }
}
@media (max-width: 650px) {
  .film-backdrop {
    mask-image: linear-gradient(90deg, #000 0%, #0008 8%, transparent 23%, transparent 77%, #0008 92%, #000 100%);
  }
  .filmstrip { left: -45%; width: 190%; opacity: .5; }
  .hero-app { margin-top: 35px; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .filmstrip { animation-name: film-page-mobile; }
      @keyframes film-page-mobile {
        0% { transform: translate3d(-30px, -45px, 0) rotate(-4deg); }
        25% { transform: translate3d(-15px, -22px, 0) rotate(-2deg); }
        50% { transform: translate3d(0, 0, 0) rotate(0deg); }
        75% { transform: translate3d(15px, 22px, 0) rotate(2deg); }
        100% { transform: translate3d(30px, 45px, 0) rotate(4deg); }
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}