/* Native view timelines only; normal, visible content is the fallback. */
@supports (animation-timeline: view()) and (animation-range: entry 0% exit 100%) {
  @media (prefers-reduced-motion: no-preference) {
    :root { --view-inset: 12%; --entry-start: 0%; --entry-end: 80%; }

    body::before {
      content: ""; position: fixed; inset: 0 0 auto; height: 2px;
      background: var(--accent); transform-origin: left; pointer-events: none; z-index: 100;
      animation: page-scroll-progress 1ms linear both;
      animation-timeline: scroll(root block);
    }

    /* Separate entry/exit ranges preserve a fully visible reading interval, even
       for cards taller than the screen. Backwards entry fill never overrides exit;
       forwards exit fill never overrides entry. No scroll handlers are needed. */
    /* Keep base specificity low so each content family can choose its motion. */
    :where(section.content > .section-title, .film-transcript-panel, .developer-copy,
        .framework-orbit, .closing, #features .feature, .icon-feature-block,
        .detail-bento > article, .use-case, .deliverable-card, .plan,
        .muscle-icon-tile, .collection-overview-art) {
      animation-name: section-enter, section-exit;
      animation-duration: 1ms, 1ms;
      animation-timing-function: linear, linear;
      animation-fill-mode: backwards, forwards;
      animation-timeline: view(block 0% var(--view-inset)), view(block 0% var(--view-inset));
      animation-range: entry var(--entry-start) entry var(--entry-end), exit 65% exit 100%;
    }

    #features .feature { animation-name: feature-enter, feature-exit; transform-origin: center bottom; }
    .icon-feature-block, .use-case { animation-name: showcase-enter, showcase-exit; --motion-x: 20px; }
    .icon-feature-block:nth-child(even), .use-case:nth-child(even) { --motion-x: -20px; }
    .detail-bento > article { animation-name: detail-enter, detail-exit; }
    .deliverable-card { animation-name: deliverable-enter, deliverable-exit; }
    .plan { animation-name: plan-enter, plan-exit; --plan-tilt: 1.5deg; transform-origin: center bottom; }
    .plan:nth-child(2) { --plan-tilt: -1.5deg; }
    .muscle-icon-tile { animation-name: icon-enter, icon-exit; --entry-end: 100%; }
    .collection-overview-art { animation-name: collection-enter, collection-exit; }
    .framework-orbit { animation-name: orbit-enter, orbit-exit; }

    /* Small per-column offsets on tablets/desktops; no artificial delay in a phone's single column. */
    :is(.features, .detail-bento, .use-case-grid, .deliverable-grid, .pricing-grid) > :nth-child(3n + 2) { --entry-start: 6%; }
    :is(.features, .detail-bento, .use-case-grid, .deliverable-grid, .pricing-grid) > :nth-child(3n) { --entry-start: 12%; }

    /* Reveal focused content immediately, including keyboard-opened transcripts. */
    :is(section.content > .section-title, .film-transcript-panel, .developer-copy,
        .framework-orbit, .closing, #features .feature, .icon-feature-block,
        .detail-bento > article, .use-case, .deliverable-card, .plan):focus-within { animation: none !important; }

    @keyframes page-scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes section-enter { from { opacity: .15; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
    @keyframes section-exit { from { opacity: 1; translate: 0 0; } to { opacity: .15; translate: 0 -18px; } }
    @keyframes feature-enter { from { opacity: .15; scale: .94 1; translate: 0 18px; } to { opacity: 1; scale: 1; translate: 0 0; } }
    @keyframes feature-exit { from { opacity: 1; scale: 1; translate: 0 0; } to { opacity: .2; scale: .97 1; translate: 0 -14px; } }
    @keyframes showcase-enter { from { opacity: .15; translate: var(--motion-x) 0; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
    @keyframes showcase-exit { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: .2; translate: calc(-1 * var(--motion-x)) 0; scale: .98; } }
    @keyframes detail-enter { from { opacity: .15; scale: .94; } to { opacity: 1; scale: 1; } }
    @keyframes detail-exit { from { opacity: 1; scale: 1; } to { opacity: .2; scale: .96; } }
    @keyframes deliverable-enter { from { opacity: .15; clip-path: inset(0 6% round 24px); } to { opacity: 1; clip-path: inset(0 round 24px); } }
    @keyframes deliverable-exit { from { opacity: 1; clip-path: inset(0 round 24px); } to { opacity: .2; clip-path: inset(0 4% round 24px); } }
    @keyframes plan-enter { from { opacity: .15; translate: 0 24px; rotate: var(--plan-tilt); scale: .97; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
    @keyframes plan-exit { from { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } to { opacity: .2; translate: 0 -16px; rotate: calc(-1 * var(--plan-tilt)); scale: .98; } }
    @keyframes icon-enter { from { opacity: .2; scale: .82; rotate: -3deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
    @keyframes icon-exit { from { opacity: 1; scale: 1; rotate: 0deg; } to { opacity: .25; scale: .88; rotate: 2deg; } }
    @keyframes collection-enter { from { opacity: .25; clip-path: inset(0 12% round 24px); } to { opacity: 1; clip-path: inset(0); } }
    @keyframes collection-exit { from { opacity: 1; clip-path: inset(0); } to { opacity: .3; clip-path: inset(0 8% round 24px); } }
    @keyframes orbit-enter { from { opacity: .2; scale: .9; rotate: -3deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
    @keyframes orbit-exit { from { opacity: 1; scale: 1; rotate: 0deg; } to { opacity: .25; scale: .94; rotate: 2deg; } }

    @media (max-width: 700px) {
      :root { --view-inset: 10%; --entry-end: 75%; }
      :is(.features, .detail-bento, .use-case-grid, .deliverable-grid, .pricing-grid) > :nth-child(n) { --entry-start: 0%; }
      .use-case, .icon-feature-block { --motion-x: 12px; }
      .use-case:nth-child(even), .icon-feature-block:nth-child(even) { --motion-x: -12px; }
      .plan:nth-child(n) { --plan-tilt: .75deg; }
      .plan:nth-child(2) { --plan-tilt: -.75deg; }
    }
    @media (max-height: 500px) { :root { --view-inset: 8%; --entry-end: 65%; } }
  }
}