/* ═══════════════════════════════════════════════════════
   iddaai — Global CSS
   Premium animations, gradients, and utility keyframes
   ═══════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* ──────────────────────────────────
   Custom Animation Keyframes
   ────────────────────────────────── */

/* Pulsing live indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Glow ring for CTAs */
@keyframes glow-ring {
  0% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(56, 178, 172, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0); }
}

/* Shimmer for skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Gradient background shift */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sparkle float */
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

/* Subtle float for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Gradient text shimmer */
@keyframes text-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Rotate for spinners */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Fade in up — CSS fallback for non-JS */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────
   Utility Classes
   ────────────────────────────────── */

.animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
.animate-glow { animation: glow-ring 2s infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.08) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }

/* Gradient mesh background */
.gradient-mesh {
  background:
    radial-gradient(at 20% 20%, rgba(56, 178, 172, 0.15) 0%, transparent 50%),
    radial-gradient(at 80% 80%, rgba(128, 90, 213, 0.12) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(66, 153, 225, 0.08) 0%, transparent 70%);
}

/* Dark mode gradient mesh */
[data-theme="dark"] .gradient-mesh,
.dark .gradient-mesh {
  background:
    radial-gradient(at 20% 20%, rgba(56, 178, 172, 0.08) 0%, transparent 50%),
    radial-gradient(at 80% 80%, rgba(128, 90, 213, 0.06) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(66, 153, 225, 0.04) 0%, transparent 70%);
}

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(135deg, #38B2AC, #805AD5, #4299E1, #38B2AC);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 4s ease infinite;
}

/* Glassmorphism card */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .glass,
.dark .glass {
  background: rgba(26, 32, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ──────────────────────────────────
   Scrollbar Styling
   ────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.5);
}

/* ──────────────────────────────────
   Selection Color
   ────────────────────────────────── */

::selection {
  background: rgba(56, 178, 172, 0.3);
  color: inherit;
}
