/* Native scroll timelines; no scroll interception, timers or animation loop.
   Unsupported browsers keep the previous appearance. */
@supports (animation-timeline: scroll()) and (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      pointer-events: none;
      background: var(--color-vyra);
      transform-origin: left center;
      animation: mk-reading-progress linear both;
      animation-timeline: scroll(root block);
    }

    /* Separate translate/scale channels leave Framer's transforms intact. */
    main > section:first-child .pointer-events-none:has(> canvas) {
      animation: mk-ambient-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 100vh;
    }

    main:has(canvas) section .card:has(> pre) {
      animation: mk-code-depth linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 42%;
      transform-origin: center center;
    }

    /* The existing section boundaries draw in as their content enters. */
    main:has(canvas) > section.border-t {
      position: relative;
    }
    main:has(canvas) > section.border-t::before {
      content: '';
      position: absolute;
      top: -1px;
      left: max(16px, calc((100% - 1192px) / 2));
      right: max(16px, calc((100% - 1192px) / 2));
      height: 1px;
      pointer-events: none;
      background: var(--color-vyra);
      transform-origin: left center;
      animation: mk-section-line linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 90%;
    }

    @keyframes mk-reading-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
    @keyframes mk-ambient-parallax {
      from { translate: 0 0; opacity: 1; }
      to { translate: 0 80px; opacity: .6; }
    }
    @keyframes mk-code-depth {
      from { scale: .96; translate: 0 26px; }
      to { scale: 1; translate: 0 0; }
    }
    @keyframes mk-section-line {
      from { transform: scaleX(0); opacity: 0; }
      to { transform: scaleX(1); opacity: .28; }
    }

    @media (max-width: 767px) {
      main > section:first-child .pointer-events-none:has(> canvas) {
        animation-name: mk-ambient-parallax-mobile;
      }
      main:has(canvas) section .card:has(> pre) {
        animation-name: mk-code-depth-mobile;
      }
      @keyframes mk-ambient-parallax-mobile {
        from { translate: 0 0; opacity: 1; }
        to { translate: 0 32px; opacity: .7; }
      }
      @keyframes mk-code-depth-mobile {
        from { scale: .985; translate: 0 12px; }
        to { scale: 1; translate: 0 0; }
      }
    }
  }
}