/* Native scroll timelines, independent of entrance motion. No polling or polyfill. */
@supports (animation-timeline: scroll()) and (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    /* Clip visual overflow without creating a non-scrolling timeline ancestor. */
    [data-motion-enabled="1"][data-motion-depth="1"] > .hero,
    [data-motion-enabled="1"][data-motion-depth="1"] > .closing { overflow: clip; }
    [data-motion-enabled="1"][data-motion-progress="1"]::before {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: 3px;
      z-index: 9999;
      background: var(--gold-500);
      pointer-events: none;
      transform-origin: left center;
      animation: esser-scroll-progress linear both;
      animation-timeline: scroll(root block);
    }
    .admin-bar [data-motion-enabled="1"][data-motion-progress="1"]::before { top: 32px; }
    [data-motion-enabled="1"][data-motion-depth="1"] [data-scroll="photo"] {
      view-timeline-name: --esser-photo;
      view-timeline-axis: block;
      --scroll-distance: 4%;
      --scroll-scale: 1.1;
    }
    [data-motion-enabled="1"][data-motion-depth="1"] [data-scroll="photo"] > img {
      transform-origin: center;
      animation: esser-scroll-depth linear both;
      animation-timeline: --esser-photo;
      animation-range: cover 0% cover 100%;
    }
    @media (max-width: 63.999rem) {
      [data-motion-enabled="1"][data-motion-depth="1"] [data-scroll="photo"] {
        --scroll-distance: 1.5%;
        --scroll-scale: 1.04;
      }
    }
    @media (max-width: 782px) {
      .admin-bar [data-motion-enabled="1"][data-motion-progress="1"]::before { top: 46px; }
    }
    /* Below 600px the WordPress admin bar scrolls away. */
    @media (max-width: 600px) {
      .admin-bar [data-motion-enabled="1"][data-motion-progress="1"]::before { top: 0; }
    }
  }
}
@keyframes esser-scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes esser-scroll-depth {
  from { transform: translateY(calc(-1 * var(--scroll-distance))) scale(var(--scroll-scale)); }
  to { transform: translateY(var(--scroll-distance)) scale(var(--scroll-scale)); }
}
@media print {
  [data-motion-enabled]::before { content: none !important; }
  [data-scroll="photo"] > img { animation: none !important; }
}