@layer base {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  }

  .dark {
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.mesh-gradient {
  background-color: #f8fafc;
  background-image:
    radial-gradient(at 0% 0%, hsla(220, 100%, 95%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(260, 100%, 95%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(220, 100%, 90%, 1) 0, transparent 50%);
}

.dark .mesh-gradient {
  background-color: #020617;
  background-image:
    radial-gradient(at 0% 0%, hsla(220, 60%, 10%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(270, 60%, 15%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(220, 60%, 12%, 1) 0, transparent 50%);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 1.5rem;
}

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

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

.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-400 to-purple-600;
}

/* Smooth transitions for lists */
.list-move {
  transition: transform 0.5s ease;
}