/* Fade in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: var(--delay, 0s);
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Slide in animations */
  .slide-in-left {
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards;
    animation-delay: var(--delay, 0s);
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .slide-in-right {
    opacity: 0;
    animation: slideInRight 0.8s ease forwards;
    animation-delay: var(--delay, 0s);
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Pulse animation */
  .pulse {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Water filling animation */
  .water-fill {
    animation: waterFill 1.5s ease-out forwards;
  }
  
  @keyframes waterFill {
    from {
      height: 0%;
    }
    to {
      height: var(--fill-level);
    }
  }
  
  /* Number counter animation */
  .count-up {
    animation: countUp 2s ease-out forwards;
  }
  
  @keyframes countUp {
    from {
      content: "0";
    }
    to {
      content: attr(data-target);
    }
  }
  
  /* Chart animation */
  .chart-animate {
    animation: chartGrow 1.5s ease-out forwards;
  }
  
  @keyframes chartGrow {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--chart-height);
      opacity: 1;
    }
  }
  
  /* Shake animation for validation errors */
  .shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-3px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(3px, 0, 0);
    }
  }
  
  /* Rotate animation */
  .rotate {
    animation: rotate 1s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Bounce animation */
  .bounce {
    animation: bounce 1s ease infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
  }
  
  /* Scale animation */
  .scale {
    animation: scale 0.5s ease forwards;
  }
  
  @keyframes scale {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  
  /* Fade out animation */
  .fade-out {
    animation: fadeOut 0.5s ease forwards;
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  /* Slide up animation */
  .slide-up {
    animation: slideUp 0.5s ease forwards;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Slide down animation */
  .slide-down {
    animation: slideDown 0.5s ease forwards;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }