/* Add to your global CSS file or <style> block */
@keyframes float {
  0% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-10px); opacity: 0.8; }
  100% { transform: translateY(0); opacity: 0.9; }
}

@keyframes float-slow {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(15px); opacity: 0.6; }
  100% { transform: translateY(0); opacity: 0.7; }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

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


/* Example glassmorphic utility class */
    .glassmorphic {
      background: rgba(255, 255, 255, 0.877); /* Slightly transparent white */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); /* Safari support */
      border: 1px solid rgba(255, 255, 255, 0.877);
    }

    /* A soft gradient background for the body */
    body {
      background: linear-gradient(135deg, #eef0efec 0%, #ffffff 100%);
      min-height: 100vh;
      margin: 0;
      font-family: 'Inter', sans-serif;
    }

    /* For subtle transitions on hoverable elements */
    .transition-base {
      transition: all 0.3s ease-in-out;
    }

    /* Custom scrollbar style (optional) */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
    ::-webkit-scrollbar-track {
      background-color: transparent;
    }

    /* Example subtle box-shadow that pairs well with glassy backgrounds */
    .glass-shadow {
      box-shadow: 0 4px 30px rgba(148, 147, 147, 0.1);
    }