@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-endfield-cyan: #00e5ff;
  --color-endfield-blue: #3a8fff;
  --color-endfield-yellow: #f2ff00;
}

@layer base {
  body {
    @apply bg-black text-white overflow-hidden select-none;
  }
}

@layer utilities {
  .text-glow-cyan {
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.66);
  }
  
  .filter-glow-cyan {
    filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.55)) drop-shadow(0 0 40px rgba(58, 143, 255, 0.3));
  }
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes corner-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(242, 255, 0, 0.66), 0 0 20px rgba(242, 255, 0, 0.33); }
  50% { box-shadow: 0 0 18px #f2ff00, 0 0 40px rgba(242, 255, 0, 0.6); }
}

@keyframes title-flicker {
  0%, 92%, 95%, 100% { opacity: 1; }
  93% { opacity: 0.88; }
  94% { opacity: 1; }
}

@keyframes divider-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: 0 0 22px #00e5ff; }
}

@keyframes sheen {
  0% { left: -90%; opacity: 0; }
  15% { opacity: 1; }
  55% { left: 140%; opacity: 0; }
  100% { left: 140%; opacity: 0; }
}

@keyframes ring-expand {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.025); opacity: 1; }
}

.animate-pulse-text { animation: pulse-text 1.8s ease-in-out infinite; }
.animate-spin-slow { animation: spin 0.85s linear infinite; }
.animate-corner-glow { animation: corner-glow 3s ease-in-out infinite; }
.animate-title-flicker { animation: title-flicker 6s ease-in-out infinite; }
.animate-divider-pulse { animation: divider-pulse 2.5s ease-in-out infinite; }
.animate-sheen { animation: sheen 2.8s ease-in-out infinite; }
.animate-ring-expand { animation: ring-expand 2.2s ease-in-out infinite; }

.bg-title-gradient {
  background: linear-gradient(135deg, #ffffff 20%, #a8e8ff 55%, #3a8fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}