* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



    .fade-up-1 { animation: fadeUp 0.6s ease forwards; opacity: 0; }
    .fade-up-2 { animation: fadeUp 0.8s ease forwards; opacity: 0; animation-delay: .2s; }
    .fade-up-3 { animation: fadeUp 1s ease forwards; opacity: 0; animation-delay: .4s; }
    .fade-up-4 { animation: fadeUp 1.2s ease forwards; opacity: 0; animation-delay: .6s; }
    .fade-up-5 { animation: fadeUp 1.4s ease forwards; opacity: 0; animation-delay: .8s; }
    .fade-up-6 { animation: fadeUp 1.6s ease forwards; opacity: 0; animation-delay: 1s; }
    .fade-up-7 { animation: fadeUp 1.8s ease forwards; opacity: 0; animation-delay: 1.2s; }

    @keyframes fadeUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .floating {
        animation: floaty 4s ease-in-out infinite;
    }

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

    .animate-glow {
        animation: glow 3s ease-in-out infinite;
    }

    @keyframes glow {
        0% { filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.3)); }
        50% { filter: drop-shadow(0 0 25px rgba(255, 230, 150, 0.7)); }
        100% { filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.3)); }
    }



      @keyframes float-slow {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
  }
  .animate-float-slow {
    animation: float-slow 4s ease-in-out infinite;
  }

   @keyframes slideFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .animate-slide-fade {
    animation: slideFadeIn 0.5s ease-out forwards;
  }
  @keyframes listIn {
    0% { opacity: 0; transform: translateX(-20px); height: 0; }
    100% { opacity: 1; transform: translateX(0); height: auto; }
  }
  .animate-list-in {
    animation: listIn 0.4s ease-out forwards;
  }





  @keyframes fade-slide {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-slide {
    animation: fade-slide 0.8s ease-out forwards;
  }


  /* JS-controlled hover state for special cards (like hoveredIndex in React) */
  .feature-arrow {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .feature-card.is-hovered .feature-arrow {
    opacity: 1;
    transform: translateX(0);
  }


  @keyframes flipIn {
    from {
      transform: rotateY(90deg);
      opacity: 0;
    }
    to {
      transform: rotateY(0deg);
      opacity: 1;
    }
  }

  .flip-in {
    animation: flipIn 0.5s ease;
  }

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

  .text-fade {
    animation: textFade 0.25s ease-out;
  }

  @keyframes fadeInUp {
    from { opacity:0; transform: translateY(20px); }
    to { opacity:1; transform: translateY(0); }
  }
  .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }

  @keyframes slideLeft {
    from { opacity:0; transform: translateX(-30px); }
    to { opacity:1; transform: translateX(0); }
  }
  .animate-slideLeft { animation: slideLeft 0.8s ease-out forwards; }

  @keyframes slideRight {
    from { opacity:0; transform: translateX(30px); }
    to { opacity:1; transform: translateX(0); }
  }
  .animate-slideRight { animation: slideRight 0.8s ease-out forwards; }




  @keyframes fadeInUp {
    from { opacity:0; transform: translateY(20px); }
    to { opacity:1; transform: translateY(0); }
  }
  .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }

  .delay-0 { animation-delay: 0s; }
  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.2s; }
  .delay-3 { animation-delay: 0.3s; }
  .delay-4 { animation-delay: 0.4s; }
  .delay-5 { animation-delay: 0.5s; }

    /* @keyframes slideFadeIn {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-fade {
        animation: slideFadeIn 0.5s ease-out forwards;
    }
    @keyframes listIn {
        0% { opacity: 0; transform: translateX(-20px); height: 0; }
        100% { opacity: 1; transform: translateX(0); height: auto; }
    }
    .animate-list-in {
        animation: listIn 0.4s ease-out forwards;
    } */