/*
 * RIXAI Visual Enhancement Layer v2
 * Additive-only CSS — enhances visuals without overriding functionality
 */

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

@keyframes rx-glow-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes rx-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Root Smooth Load === */
#root {
  animation: rx-fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* === Body Ambient Background === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% 5%, rgba(212,167,44,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(88,166,255,0.03) 0%, transparent 55%);
}

/* === Gradient Text Shimmer === */
.gradient-text {
  background-size: 200% auto;
  filter: drop-shadow(0 0 6px rgba(212,167,44,0.12));
}

.gradient-text-warm {
  background-size: 200% auto;
  filter: drop-shadow(0 0 6px rgba(212,167,44,0.12));
}

/* === Glass Surface Enhancement === */
.glass {
  box-shadow:
    0 1px 0 rgba(212,167,44,0.04),
    0 4px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

/* === Card Enter Polish === */
.card-enter {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* === Live Dot Glow === */
.live-dot {
  box-shadow: 0 0 6px rgba(63,185,80,0.5), 0 0 2px rgba(63,185,80,0.8);
}

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

/* === Scrollbar Polish === */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,167,44,0.2), rgba(88,166,255,0.12));
  border-radius: 3px;
}

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

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

/* === Focus Ring Polish === */
input:focus-visible, textarea:focus-visible {
  outline-color: rgba(212,167,44,0.35);
}

/* === Button Press Feedback === */
button:active:not(:disabled) {
  transform: scale(0.98);
}

/* === ICP Badge Dark Theme === */
#icp-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(13,17,23,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}

#icp-badge a {
  color: rgba(139,148,158,0.6) !important;
  transition: color 0.2s;
}

#icp-badge a:hover {
  color: rgba(139,148,158,0.9) !important;
}

/* === Reduced Motion Safety === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}