/* === Animations === */
  /* Base animation classes */
  [data-animate] {
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-animate].animated {
    opacity: 1;
    transform: none;
  }

  /* Fade animations */
  [data-animate="fade"] {
    opacity: 0;
  }

  [data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
  }

  [data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-30px);
  }

  [data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(30px);
  }

  [data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-30px);
  }

  /* Scale animations */
  [data-animate="scale-up"] {
    opacity: 0;
    transform: scale(0.95);
  }

  [data-animate="scale-down"] {
    opacity: 0;
    transform: scale(1.05);
  }

  /* Timing variations */
  [data-delay="100"] { transition-delay: 100ms; }
  [data-delay="200"] { transition-delay: 200ms; }
  [data-delay="300"] { transition-delay: 300ms; }
  [data-delay="400"] { transition-delay: 400ms; }
  [data-delay="500"] { transition-delay: 500ms; }

  /* Duration variations */
  [data-duration="fast"] { transition-duration: 400ms; }
  [data-duration="slow"] { transition-duration: 800ms; }

  /* Easing variations */
  [data-easing="bounce"] { transition-timing-function: cubic-bezier(0.87, -0.41, 0.19, 1.44); }
  [data-easing="smooth"] { transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  [data-easing="spring"] { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }

  /* Scroll-based reveal animations */
  .reveal-section > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .reveal-section.in-view > * {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-section.in-view > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-section.in-view > *:nth-child(2) { transition-delay: 100ms; }
  .reveal-section.in-view > *:nth-child(3) { transition-delay: 200ms; }
  .reveal-section.in-view > *:nth-child(4) { transition-delay: 300ms; }
  .reveal-section.in-view > *:nth-child(5) { transition-delay: 400ms; }
  .reveal-section.in-view > *:nth-child(6) { transition-delay: 500ms; }

  /* Legacy support */
  .fade-in {
    animation: fadeIn 1s ease-out;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }