@layer animations {
  /* ==========================================================================
     Keyframes — restrained fades only; the system is calm by design
     ========================================================================== */
  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Kept for compatibility; intentionally motionless */
  .animate-pulse-soft {
    animation: none;
  }

  /* Legacy element — hidden in the editorial system */
  .scroll-progress-bar {
    display: none;
  }

  /* ==========================================================================
     Scroll-driven reveals (native CSS timeline where supported)
     ========================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {

      .scroll-reveal {
        animation: reveal-up auto linear backwards;
        animation-timeline: view();
        animation-range: entry 5% entry 40%;
      }

      .scroll-reveal-slow {
        animation: reveal-up auto linear backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }

      .scroll-fade {
        animation: fade-in auto linear backwards;
        animation-timeline: view();
        animation-range: entry 5% entry 35%;
      }
    }
  }

  /* ==========================================================================
     Reduced motion
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-delay: 0s !important;
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }

    .scroll-reveal, .scroll-reveal-slow, .scroll-fade {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }
}