/* RIXAI Visual Enhancement Override */
/* This file adds visual polish without changing any functionality */

/* === Animations === */
@keyframes rx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes rx-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(88, 166, 255, 0.15); }
  50% { box-shadow: 0 0 20px rgba(88, 166, 255, 0.3); }
}

@keyframes rx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes rx-border-glow {
  0%, 100% { border-color: rgba(212, 167, 44, 0.1); }
  50% { border-color: rgba(212, 167, 44, 0.25); }
}

@keyframes rx-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.3); }
  70% { box-shadow: 0 0 0 6px rgba(88, 166, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0); }
}

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

/* === Body Enhancement === */
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(88, 166, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(212, 167, 44, 0.02) 0%, transparent 50%),
    var(--background);
}

/* === Header Enhancement === */
header, .glass {
  box-shadow: 0 1px 0 rgba(212, 167, 44, 0.05), 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* === Gradient Text Enhancement === */
.gradient-text {
  filter: drop-shadow(0 0 8px rgba(212, 167, 44, 0.15));
}

/* === Card Hover Effect === */
/* Target divs that look like cards (have background + border-radius + padding) */
[style*="border-radius"][style*="padding"][style*="background"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[style*="border-radius"][style*="padding"][style*="background"]:hover {
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* === Sticky Header Glow === */
.sticky {
  border-bottom: 1px solid rgba(212, 167, 44, 0.06) !important;
}

/* === Progress Bar Shimmer === */
/* Target the progress bar fill by its gradient background */
[style*="linear-gradient(90deg"][style*="border-radius"] {
  position: relative;
  overflow: hidden;
}

[style*="linear-gradient(90deg"][style*="border-radius"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: rx-shimmer 2s ease-in-out infinite;
}

/* === Score Ring Glow === */
svg circle[stroke="var(--cyan)"],
svg circle[stroke="#58a6ff"] {
  filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.3));
}

/* === Live Dot Enhancement === */
.live-dot {
  animation: rx-pulse-ring 2s ease-in-out infinite, dot-pulse 2s ease-in-out infinite;
}

/* === Tab Bar Enhancement === */
#result-tabs,
[style*="sticky"][style*="flex"] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#result-tabs button,
[style*="sticky"][style*="flex"] button {
  transition: all 0.2s ease;
}

/* === Gradient Border on Key Cards === */
.card-enter {
  position: relative;
}

.card-enter::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(212, 167, 44, 0.08), rgba(88, 166, 255, 0.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-enter:hover::before {
  opacity: 1;
}

/* === Search Button Enhancement === */
button[style*="linear-gradient"][style*="border-radius: 100px"],
button[style*="linear-gradient"][style*="border-radius:100px"] {
  position: relative;
  overflow: hidden;
}

button[style*="linear-gradient"][style*="border-radius: 100px"]::after,
button[style*="linear-gradient"][style*="border-radius:100px"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: rx-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* === Data Value Glow === */
.data-value {
  text-shadow: 0 0 12px rgba(212, 167, 44, 0.15);
}

/* === Scrollbar Enhancement === */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212, 167, 44, 0.2), rgba(88, 166, 255, 0.15));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(212, 167, 44, 0.35), rgba(88, 166, 255, 0.25));
}

/* === Subtle Selection Enhancement === */
::selection {
  color: #e6edf3;
  background: rgba(212, 167, 44, 0.3);
}

/* === Smooth Entry Animation Enhancement === */
.card-enter {
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* === Focus Ring Enhancement === */
input:focus, button:focus-visible {
  outline: 2px solid rgba(88, 166, 255, 0.3);
  outline-offset: 2px;
}

/* === Button Hover Enhancement === */
button {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

button:active:not(:disabled) {
  transform: scale(0.98);
}

/* === Hero Section Glow === */
[style*="radial-gradient(circle"][style*="pointer-events-none"] {
  opacity: 0.8;
  transition: opacity 0.5s ease;
}