/* Banner slide animations (trigger when element enters viewport) */
      .animate-from-left,
      .animate-from-right {
        opacity: 0;
        transform: translateX(0);
      }

      /* when .in-view is added by IntersectionObserver, run the animation */
      .animate-from-left.in-view {
        animation: slideInLeft 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
        animation-delay: var(--delay, 0s);
      }

      .animate-from-right.in-view {
        animation: slideInRight 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
        animation-delay: var(--delay, 0s);
      }

      .animate-from-left.delay-1 {
        --delay: 0s;
      }
      .animate-from-left.delay-2 {
        --delay: 0.12s;
      }
      .animate-from-left.delay-3 {
        --delay: 0.28s;
      }
      .animate-from-left.delay-4 {
        --delay: 0.44s;
      }
      .animate-from-left.delay-5 {
        --delay: 0.6s;
      }

      .animate-from-right.delay-1 {
        --delay: 0s;
      }
      .animate-from-right.delay-2 {
        --delay: 0.12s;
      }
      .animate-from-right.delay-3 {
        --delay: 0.28s;
      }
      .animate-from-right.delay-4 {
        --delay: 0.44s;
      }
      .animate-from-right.delay-5 {
        --delay: 0.6s;
      }

      /* bottom-to-top reveal (used for bio paragraphs, cards, etc.) */
      .animate-from-bottom {
        opacity: 0;
        transform: translateY(0);
      }

      .animate-from-bottom.in-view {
        animation: slideInUp 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
        animation-delay: var(--delay, 0s);
      }

      .animate-from-bottom.delay-1 {
        --delay: 0s;
      }
      .animate-from-bottom.delay-2 {
        --delay: 0.12s;
      }
      .animate-from-bottom.delay-3 {
        --delay: 0.28s;
      }
      .animate-from-bottom.delay-4 {
        --delay: 0.44s;
      }
      .animate-from-bottom.delay-5 {
        --delay: 0.6s;
      }

      @keyframes slideInLeft {
        from {
          opacity: 0;
          transform: translateX(-30px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(30px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }