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

/* -------------------------------------------------------------------------- */
/*                                 COMPONENTS                                 */
/* -------------------------------------------------------------------------- */

@layer components {

  /* Common Card Style (Bento Grid) */
  .bento-item {
    @apply transition-all duration-300 ease-out border border-border dark:border-darkBorder bg-white dark:bg-black overflow-hidden;
  }

  .bento-item:hover {
    @apply transform -translate-y-[2px] border-black dark:border-white shadow-xl shadow-neutral-200/50 dark:shadow-none;
  }

  /* Holographic / Glass Card */
  .holographic-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .holographic-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.2);
  }

  /* Input Fields */
  .glass-input {
    @apply w-full bg-transparent border-b border-border dark:border-darkBorder py-3 text-sm font-mono outline-none transition-colors;
  }

  .glass-input:focus {
    @apply border-black dark:border-white;
  }

  .premium-input {
    @apply w-full bg-neutral-50/50 dark:bg-neutral-900/50 border border-border dark:border-darkBorder px-4 py-3 rounded-xl text-sm font-mono outline-none transition-all duration-300;
  }

  .premium-input:focus {
    @apply border-black dark:border-white bg-white dark:bg-black shadow-lg shadow-neutral-200/50 dark:shadow-none -translate-y-[1px];
  }
}

/* -------------------------------------------------------------------------- */
/*                                  UTILITIES                                 */
/* -------------------------------------------------------------------------- */

/* Background Grid Pattern */
.grid-bg {
  background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.dark .grid-bg {
  background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Stagger Animation */
.stagger-in>* {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerFadeIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.stagger-in>*:nth-child(1) {
  animation-delay: 0.1s;
}

.stagger-in>*:nth-child(2) {
  animation-delay: 0.2s;
}

.stagger-in>*:nth-child(3) {
  animation-delay: 0.3s;
}

.stagger-in>*:nth-child(4) {
  animation-delay: 0.4s;
}

.stagger-in>*:nth-child(5) {
  animation-delay: 0.5s;
}

.stagger-in>*:nth-child(n+6) {
  animation-delay: 0.6s;
}

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Skeleton */
.skeleton-shimmer {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.03) 25%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(0, 0, 0, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .skeleton-shimmer {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.03) 25%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 75%);
}

@keyframes shimmer {
  to {
    background-position-x: -200%;
  }
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Utility to override styles for specific brand colors */
.bg-brand-50 {
  background-color: #eef2ff;
}

.bg-brand-500 {
  background-color: #6366f1;
}

.text-brand-500 {
  color: #6366f1;
}