/*
  Clear Report – Design System
  Tokens, components, and animations extracted from index.html for reuse.
*/

/* Design tokens */
:root {
  --cr-primary-500: #3ee7c4;
  --cr-primary-600: #0eb38d;
  --cr-neutral-900: #0f172a;
  --cr-neutral-800: #111827;
  --cr-neutral-700: #374151;
  --cr-neutral-600: #4b5563;
  --cr-neutral-500: #6b7280;
  --cr-surface: #ffffff;
  --cr-surface-muted: #fafbfc;
  --cr-surface-accent: #e4ecf7;
  --cr-glass-border: rgba(30,30,40,0.12);
  --cr-shadow-strong: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
}

/* Base */
body {
  font-family: 'Space Grotesk', 'GeneralSans-Variable', 'Inter', sans-serif;
  background: linear-gradient(120deg, var(--cr-surface-muted) 60%, var(--cr-surface-accent) 100%);
}
.bw-img { filter: grayscale(1) contrast(1.08); }

/* Components */
.glass {
  background: rgba(255,255,255,0.8);
  box-shadow: var(--cr-shadow-strong);
  backdrop-filter: blur(14px);
  border-radius: 2rem;
  border: 1.5px solid var(--cr-glass-border);
}
.neon-cta {
  background: linear-gradient(90deg, #191919 0%, #282828 100%);
  color: #fff;
  box-shadow: 0 0 12px #39f5be88, 0 2px 10px #19191922;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding: 0.8em 2.5em;
  transition: background 0.18s, box-shadow 0.18s, transform 0.16s;
  position: relative;
  overflow: hidden;
}
.neon-cta:hover {
  background: linear-gradient(90deg, #242d3e 0%, var(--cr-primary-500) 100%);
  color: #111;
  box-shadow: 0 0 22px #14ffd3bb, 0 2px 20px #44bfae22;
  transform: scale(1.05) translateY(-2px);
}
.accent-ring { animation: pulse-accent 2.8s infinite cubic-bezier(.4,0,.6,1); }
@keyframes pulse-accent {
  0%, 100% { box-shadow: 0 0 0 0 #3ee7c433, 0 0 0 10px #0000; }
  60% { box-shadow: 0 0 0 20px #3ee7c408, 0 0 0 50px #0000; }
}

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(.6,0,.3,1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.carousel-shadow { box-shadow: 0 8px 36px 0 #2224; }
.animate-count { transition: color 0.3s, font-size 0.4s; }
.blinking-cursor { animation: blink 1s step-end infinite; color: var(--cr-primary-500); font-weight: 400; }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }

/* Hero Animations */
.hero-anim-card { width: 100%; aspect-ratio: 1 / 1; max-width: 360px; }
@media (min-width: 768px) { .hero-anim-card { max-width: 420px; } }
.anim-scan { animation: scan-x 2.8s linear infinite; }
@keyframes scan-x { 0% { transform: translateX(-45%); opacity: .6; } 50% { opacity: 1; } 100% { transform: translateX(45%); opacity: .6; } }
.anim-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw-line 2.2s ease-out forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.anim-pulse { animation: pulse-glow 1.6s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100% { filter: drop-shadow(0 0 0 rgba(62,231,196,0.0)); opacity: .85; } 50% { filter: drop-shadow(0 0 16px rgba(62,231,196,0.55)); opacity: 1; } }
.anim-spin { animation: spin 6s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.anim-pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse-dot { 0% { transform: scale(0.9); opacity: .7;} 50% { transform: scale(1.15); opacity: 1;} 100% { transform: scale(0.9); opacity: .7;} }
.anim-fade { animation: fade 2s ease-in-out infinite; }
@keyframes fade { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.anim-scan-ring { animation: scan-ring 3.5s linear infinite; transform-origin: 50% 50%; }
@keyframes scan-ring { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
.anim-band-scan { animation: band-scan 4s linear infinite; }
@keyframes band-scan { 0% { transform: translateX(-60%); opacity: .4;} 50% { opacity: .75;} 100% { transform: translateX(60%); opacity: .4;} }
.anim-float { animation: float 3.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

/* Tooltip glass (used by summary bars) */
.tooltip-glass { filter: drop-shadow(0 2px 12px rgba(40,80,100,0.13)); border-radius: 1.1rem; }
.tooltip-glass .glass { border-radius: 1.1rem; background: #fff; border: 1.5px solid rgba(30,40,60,0.10); box-shadow: 0 6px 32px 0 rgba(31,38,135,0.11); font-size: 11px; line-height: 1.4; }

/* Catalyst accordion */
.catalyst-card { border-radius: 1.5rem; }
.catalyst-header { background: transparent; cursor: pointer; border: none; outline: none; border-radius: 1.5rem 1.5rem 0 0; }
.catalyst-header.text-\[\#0eb38d\] { background: linear-gradient(90deg,#e6faf5 0%,#fff 100%); }
.catalyst-header .catalyst-chevron { transition: transform 0.35s cubic-bezier(.4,0,.2,1); }
.catalyst-content { transition: max-height 0.4s cubic-bezier(.4,0,.2,1), padding 0.25s; will-change: max-height; }
.catalyst-header[aria-expanded="true"] { font-weight: 800; color: #0eb38d; }
.catalyst-header[aria-expanded="true"] .catalyst-chevron { transform: rotate(180deg);}