/* =========================================================
       SIMPLE, RESTRAINED TEXT ANIMATION SYSTEM
       - Same system used on the About page.
       - Elements fade + rise into place once, on scroll.
       - Respects prefers-reduced-motion.
    ========================================================= */

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }
    .reveal-delay-6 { transition-delay: 0.6s; }
    .reveal-delay-7 { transition-delay: 0.7s; }
    .reveal-delay-8 { transition-delay: 0.8s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }




    /* about animation  */

      /* =========================================================
         SIMPLE, RESTRAINED TEXT ANIMATION SYSTEM
         - Hero content animates in on load (staggered).
         - Everything below animates in once, on scroll.
         - Respects prefers-reduced-motion.
      ========================================================= */

      .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* stagger helper: add alongside .reveal, delay applied via style attr fallback */
      .reveal-delay-1 { transition-delay: 0.1s; }
      .reveal-delay-2 { transition-delay: 0.2s; }
      .reveal-delay-3 { transition-delay: 0.3s; }
      .reveal-delay-4 { transition-delay: 0.4s; }
      .reveal-delay-5 { transition-delay: 0.5s; }
      .reveal-delay-6 { transition-delay: 0.6s; }

      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }