/* Cinematic scroll — homepage only. Everything is visible by default; rules apply only with motion allowed. */
@media (prefers-reduced-motion: no-preference) {
  /* Mobile: one quiet fade-up per section, class added once by JS (never tied to scroll position) */
  @media (max-width: 767px) {
    .cin-m .cin-r:not(.cin-in) { opacity: 0; transform: translate3d(0,10px,0); }
    .cin-m .cin-r.cin-in { transition: opacity .3s ease-out, transform .3s ease-out; }
  }

  @media (min-width: 768px) {
    .hero { position: relative; isolation: isolate; overflow: hidden; }
    .hero::before {
      content: ""; position: absolute; inset: -6%; z-index: -1; pointer-events: none;
      background: radial-gradient(60% 50% at 70% 30%, rgba(28,95,209,.35), transparent 70%);
      animation: cin-glow 22s ease-in-out infinite alternate;
    }
    @keyframes cin-glow { to { translate: -5% 6%; } }

    @supports (animation-timeline: view()) {
      @keyframes cin-mask { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: .4; transform: translate3d(0,14px,0); }
                            to { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; transform: none; } }
      @keyframes cin-card { from { opacity: 0; transform: translate3d(0,32px,0); } to { opacity: 1; transform: none; } }

      /* Light version: no pinned hero, nothing above the fold is hidden. Headings and cards below reveal on entry. */
      /* Headings: gradient mask reveal */
      .tools-title h2 {
        -webkit-mask: linear-gradient(90deg,#000 50%,transparent 100%) 100% 0 / 200% 100% no-repeat;
        mask: linear-gradient(90deg,#000 50%,transparent 100%) 100% 0 / 200% 100% no-repeat;
        animation: cin-mask cubic-bezier(.2,.7,.2,1) both;
        animation-timeline: view(); animation-range: entry 10% entry 70%;
      }
      .fix-card, .tool-card {
        animation: cin-card cubic-bezier(.2,.7,.2,1) backwards;
        animation-timeline: view(); animation-range: entry 0% entry 55%;
      }
    }
  }
}