/* Animation Base Styles */
  .animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
  }

  /* Fade Up Animation */
  .animate-on-scroll.fade-up {
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Fade Down Animation */
  .animate-on-scroll.fade-down {
    transform: translateY(-30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Scale In Animation */
  .animate-on-scroll.scale-in {
    transform: scale(0.9) translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Active State */
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
  }

  /* Staggered Delays */
  .hero-eyebrow.animate-on-scroll { transition-delay: 0.2s; }
  .hero-title.animate-on-scroll { transition-delay: 0.4s; }
  .hero-title .hero-highlight.animate-on-scroll { transition-delay: 0.6s; }
  .hero-actions.animate-on-scroll { transition-delay: 0.8s; }

   /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .hero-highlight::after {
      animation: none;
      transform: scaleX(1);
    }
  }


   /* section-2 Animation Base Classes */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    /* Fade Up */
    .animate-on-scroll.fade-up {
        transform: translateY(40px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Fade Down */
    .animate-on-scroll.fade-down {
        transform: translateY(-30px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Scale In */
    .animate-on-scroll.scale-in {
        transform: scale(0.8);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Active State */
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

     /*section-3 Animation Base Classes */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    /* Fade Up - Smooth easing */
    .animate-on-scroll.fade-up {
        transform: translateY(50px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Scale In - Bounce effect */
    .animate-on-scroll.scale-in {
        transform: scale(0.8);
        transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Floating animation for background vectors */
    .animate-on-scroll.float-slow {
        transform: translateY(20px);
        transition: opacity 1.2s ease, transform 1.2s ease;
    }

    .animate-on-scroll.float-slow-reverse {
        transform: translateY(-20px);
        transition: opacity 1.2s ease, transform 1.2s ease;
    }

    /* Active State */
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

    /* Continuous float animation for vectors after reveal */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    @keyframes floatReverse {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(20px); }
    }

    .animate-on-scroll.is-visible.float-slow {
        animation: float 6s ease-in-out infinite;
    }

    .animate-on-scroll.is-visible.float-slow-reverse {
        animation: floatReverse 6s ease-in-out infinite;
    }

    /* Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        .animate-on-scroll {
            opacity: 1;
            transform: none;
            transition: none;
            animation: none;
        }
    }

     /*section-4 Only animation essentials - no design conflicts */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.fade-right {
        transform: translateX(-40px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .animate-on-scroll.fade-left {
        transform: translateX(40px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.9);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .animate-on-scroll.fade-right {
        transform: translateX(-40px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .animate-on-scroll.fade-left {
        transform: translateX(40px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.9);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

    /* Floating vectors */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
    }

    @keyframes floatReverse {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(15px); }
    }

    .animate-on-scroll.float-slow.is-visible {
        animation: float 5s ease-in-out infinite;
    }

    .animate-on-scroll.float-slow-reverse.is-visible {
        animation: floatReverse 5s ease-in-out infinite;
    }

    /*section-5 Animation Essentials Only */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.8);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

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

    /*section-6 Animation Essentials Only */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.fade-right {
        transform: translateX(-40px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.9);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

    /* Floating vectors */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
    }

    @keyframes floatReverse {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(15px); }
    }

    .animate-on-scroll.float-slow.is-visible {
        animation: float 5s ease-in-out infinite;
    }

    .animate-on-scroll.float-slow-reverse.is-visible {
        animation: floatReverse 5s ease-in-out infinite;
    }
    /*section-7 Animation Essentials Only */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.fade-down {
        transform: translateY(-30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.fade-right {
        transform: translateX(-50px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .animate-on-scroll.fade-left {
        transform: translateX(50px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.95);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

   /* Animation Essentials Only */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(40px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.9);
        transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    
    /*section-8 Animation Essentials Only */
    .animate-on-scroll {
        opacity: 0;
        will-change: transform, opacity;
    }

    .animate-on-scroll.fade-up {
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .animate-on-scroll.scale-in {
        transform: scale(0.8);
        transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0) scale(1);
    }

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