/* ==========================================================================
   Frisby AI Operations — Shared Visual Components
   visuals.css — Gauges, bars, animations, cards, particles, glassmorphism
   ========================================================================== */

/* ---------- 1. Animated Score Gauge (radial SVG) ---------- */
.score-gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
}
.score-gauge svg { transform: rotate(-90deg); }
.score-gauge circle.bg {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 10;
}
.score-gauge circle.fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s ease-out, stroke .4s;
}
.score-gauge .score-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.score-gauge .score-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #f1f5f9;
}
.score-gauge .score-grade {
  font-size: .85rem;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(241,245,249,.6);
}

/* Score color utilities */
.score-red   { --score-color: #ef4444; }
.score-yellow { --score-color: #eab308; }
.score-blue  { --score-color: #3b82f6; }
.score-green { --score-color: #22c55e; }

/* ---------- 2. Horizontal Score Bars ---------- */
.score-bar { margin-bottom: 14px; }
.score-bar .bar-label {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: #94a3b8;
  margin-bottom: 5px;
}
.score-bar .bar-label .bar-value { font-weight: 600; color: #e2e8f0; }
.score-bar .bar-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.score-bar .bar-fill {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.2s ease-out;
}
.score-bar .bar-fill.score-red   { background: #ef4444; }
.score-bar .bar-fill.score-yellow { background: #eab308; }
.score-bar .bar-fill.score-blue  { background: #3b82f6; }
.score-bar .bar-fill.score-green { background: #22c55e; }

/* ---------- 3. Scroll Animations ---------- */
.fade-up {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-in { opacity: 1; transition: opacity .8s ease; }
.fade-in.visible { opacity: 1; }

.scale-in {
  opacity: 1; transform: scale(1);
  transition: opacity .5s ease, transform .5s ease;
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }

/* ---------- 4. Card Hover Effects ---------- */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.3);
}

/* ---------- 5. Floating Data Particles (CSS background) ---------- */
.particles-bg { position: relative; overflow: hidden; }
.particles-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%; height: 200%;
  background-image:
    radial-gradient(circle 1.5px, rgba(59,130,246,.15) 100%, transparent 100%),
    radial-gradient(circle 1px, rgba(99,102,241,.1) 100%, transparent 100%);
  background-size: 60px 60px, 40px 40px;
  background-position: 0 0, 20px 20px;
  animation: drift 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes drift {
  to { transform: translate(60px, 60px); }
}

/* ---------- 6. Flowing Data Lines ---------- */
.data-flow { pointer-events: none; }
.data-flow path {
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: flow 3s ease forwards;
}
.data-flow path:nth-child(2) { animation-delay: .4s; }
.data-flow path:nth-child(3) { animation-delay: .8s; }
.data-flow path:nth-child(4) { animation-delay: 1.2s; }
@keyframes flow { to { stroke-dashoffset: 0; } }

/* ---------- 7. Glassmorphism Cards ---------- */
.glass-card {
  background: rgba(18,18,26,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 24px;
}

/* ---------- 8. Pulse / Glow Effects ---------- */
.pulse-blue { animation: pulse-blue 2s infinite; }
@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
}
.pulse-green { animation: pulse-green 2s infinite; }
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
}
.glow-blue { box-shadow: 0 0 20px rgba(59,130,246,.25); }
.glow-green { box-shadow: 0 0 20px rgba(34,197,94,.25); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in, .scale-in,
  .score-gauge circle.fill, .score-bar .bar-fill,
  .card-hover, .data-flow path { transition: none; animation: none; }
  .particles-bg::before { animation: none; }
  .pulse-blue, .pulse-green { animation: none; }
}