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

@layer base {
  :root {
    --background: 228 28% 8%;
    --foreground: 216 16% 92%;
    --card: 227 30% 11%;
    --card-foreground: 215 16% 92%;
    --popover: 228 29% 10%;
    --popover-foreground: 216 16% 92%;
    --primary: 192 100% 62%;
    --primary-foreground: 228 28% 9%;
    --secondary: 223 20% 20%;
    --secondary-foreground: 214 15% 92%;
    --muted: 223 18% 17%;
    --muted-foreground: 220 10% 70%;
    --accent: 29 93% 62%;
    --accent-foreground: 230 25% 11%;
    --destructive: 0 76% 56%;
    --destructive-foreground: 210 20% 98%;
    --border: 217 21% 21%;
    --input: 217 22% 22%;
    --ring: 192 100% 62%;
    --radius: 1rem;
  }

  * {
    @apply border-border;
  }

  html,
  body {
    min-height: 100%;
  }

  html {
    @apply antialiased;
  }

  body {
    @apply bg-background text-foreground;
    background:
      radial-gradient(circle at 10% 6%, rgba(47, 126, 213, 0.3), transparent 40%),
      radial-gradient(circle at 85% 0%, rgba(250, 171, 92, 0.2), transparent 34%),
      radial-gradient(circle at 50% 98%, rgba(72, 88, 182, 0.18), transparent 44%),
      hsl(var(--background));
  }

  button,
  a,
  input,
  select,
  textarea {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/60 focus-visible:ring-offset-0;
  }
}

::selection {
  background: rgba(125, 211, 252, 0.27);
}

.glass-panel {
  background: linear-gradient(
    175deg,
    rgba(23, 31, 51, 0.76) 0%,
    rgba(14, 20, 35, 0.72) 100%
  );
  border: 1px solid rgba(143, 174, 255, 0.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 20px 55px rgba(3, 8, 20, 0.45);
  backdrop-filter: blur(14px);
}

.panel-elevated {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 22px 60px rgba(3, 8, 20, 0.46);
}

.interactive-card {
  transition:
    transform 260ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 260ms ease;
}

.interactive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 213, 255, 0.38);
}

.shine-border {
  position: relative;
}

.shine-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(56, 189, 248, 0.45),
    rgba(244, 200, 123, 0.35),
    rgba(56, 189, 248, 0.45)
  );
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity 200ms ease;
}

.shine-border:hover::before {
  opacity: 1;
  animation: border-shift 2s linear infinite;
}

@keyframes border-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.grid-vignette {
  position: relative;
}

.grid-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, transparent 65%, rgba(5, 9, 18, 0.58) 100%);
  pointer-events: none;
}

@keyframes float-slow {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

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

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.96);
    transform: scale(1) rotate(0deg);
    filter:
      drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(250, 204, 21, 0));
  }
  50% {
    opacity: 1;
    color: rgba(254, 240, 138, 0.98);
    transform: scale(1.12) rotate(8deg);
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 0.62))
      drop-shadow(0 0 12px rgba(250, 204, 21, 0.58));
  }
}

.animate-twinkle {
  animation: twinkle 2.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes hero-gradient-roll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.hero-rolling-gradient {
  position: relative;
  isolation: isolate;
}

.hero-rolling-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(56, 189, 248, 0.18),
    rgba(99, 102, 241, 0.15),
    rgba(250, 204, 21, 0.13),
    rgba(56, 189, 248, 0.18)
  );
  background-size: 240% 240%;
  animation: hero-gradient-roll 9s linear infinite;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
