@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-joonam-bg text-gray-100 antialiased;
  }
}

@layer utilities {
  .glass {
    @apply backdrop-blur-xl bg-joonam-card/60 border border-white/5 shadow-glass;
  }
  .glass-card {
    @apply glass rounded-3xl p-5;
  }
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-400;
  }
}

/* Custom Animations from Phase 5 */
@keyframes scanning {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.laser {
  animation: scanning 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.fab-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.fab-main svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-main.active svg {
  transform: rotate(45deg);
}

/* Micronutrient Drawer Grid Transition */
.micro-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-out, margin-top 0.4s ease-out;
}

.micro-content.expanded {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.micro-inner {
  overflow: hidden;
}

/* Ring Animations */
.ring-fill {
  transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}