/* ================================================================
   Theracharts — wow.css
   Modern SaaS polish layer. Loaded after theme.css on core pages.
   All values use theme tokens so light mode gets proper contrast.
   Respects prefers-reduced-motion throughout.
   ================================================================ */

/* ---- Aurora glow (behind hero, decorative only) ----
   Two soft radial blobs positioned off-center. Fades in over 600ms
   on load so there's no pop. Light mode gets a lighter tint. */
.tc-aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: tc-aurora-in 700ms ease-out 150ms forwards;
}
.tc-aurora::before,
.tc-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.tc-aurora::before {
  top: 0; left: 15%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 65%);
}
.tc-aurora::after {
  top: 10%; right: 5%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.14), transparent 65%);
}
:root[data-theme="light"] .tc-aurora::before {
  background: radial-gradient(circle, rgba(79, 70, 229, 0.14), transparent 65%);
}
:root[data-theme="light"] .tc-aurora::after {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 65%);
}
@keyframes tc-aurora-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Dot grid backdrop (behind hero, under aurora) ---- */
.tc-dot-grid {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 70%);
}
:root[data-theme="light"] .tc-dot-grid {
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
}

/* Ensure hero contents stack above decorative layers.
   Any hero-ish section we drop aurora/dot-grid into. */
.tc-hero > *,
.tc-feat-hero > *,
.tc-price-hero > *,
.tc-about-hero > *,
.tc-data-hero > *,
.tc-assess-hero > * { position: relative; z-index: 1; }
.tc-aurora, .tc-dot-grid { z-index: 0 !important; }

/* ---- Scroll-reveal fade-up ---- */
.tc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.tc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children slightly (up to 6) for grids */
.tc-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.tc-reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.tc-reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.tc-reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.tc-reveal-group.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.tc-reveal-group.is-visible > *:nth-child(6) { transition-delay: 300ms; }

/* ---- Cursor-tracking glow on primary CTA ----
   Follows the pointer via --tc-cx/--tc-cy set by wow.js.
   Subtle lift + colored shadow; no layout shift. */
.tc-cta-primary,
a.tc-cta-primary,
button.tc-cta-primary,
.tc-btn-primary {
  position: relative;
  isolation: isolate;
  transition: transform 180ms ease, box-shadow 220ms ease;
}
.tc-cta-primary::before,
.tc-btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    140px circle at var(--tc-cx, 50%) var(--tc-cy, 50%),
    rgba(255, 255, 255, 0.18),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 0;
}
.tc-cta-primary > *,
.tc-btn-primary > * { position: relative; z-index: 1; }
.tc-cta-primary:hover,
.tc-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -8px rgba(99, 102, 241, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.08);
}
.tc-cta-primary:hover::before,
.tc-btn-primary:hover::before { opacity: 1; }

/* ---- Gradient text (hero accent word) ---- */
.tc-gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-alt, #818cf8) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Animated SVG charts ----
   Parent SVG gets [data-tc-chart]. wow.js adds .tc-playing once it
   scrolls into view, which triggers these animations exactly once.
   All animations forward-fill so the final rendered state matches
   the static SVG. */

/* Lines draw in left-to-right via dasharray. Each .tc-chart-line
   is stamped with --tc-len by wow.js from getTotalLength(). */
[data-tc-chart] .tc-chart-line {
  stroke-dasharray: var(--tc-len, 1000);
  stroke-dashoffset: var(--tc-len, 1000);
}
[data-tc-chart].tc-playing .tc-chart-line {
  animation: tc-draw 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
@keyframes tc-draw {
  to { stroke-dashoffset: 0; }
}

/* Area fill fades in under the line */
[data-tc-chart] .tc-chart-area { opacity: 0; }
[data-tc-chart].tc-playing .tc-chart-area {
  animation: tc-fade-in 700ms ease-out 900ms forwards;
}

/* Data points pop in after the line finishes drawing. Stagger via
   --tc-i, an index wow.js sets on each point (0-based). */
[data-tc-chart] .tc-chart-point {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.4);
}
[data-tc-chart].tc-playing .tc-chart-point {
  animation: tc-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(1400ms + (var(--tc-i, 0) * 90ms));
}
@keyframes tc-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Activity rows (home hero) slide up + fade, staggered */
[data-tc-chart] .tc-activity-row {
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
}
[data-tc-chart].tc-playing .tc-activity-row {
  animation: tc-row-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(600ms + (var(--tc-i, 0) * 110ms));
}
@keyframes tc-row-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Tooltip / callout reveal (opt-in via .tc-chart-callout) */
[data-tc-chart] .tc-chart-callout { opacity: 0; }
[data-tc-chart].tc-playing .tc-chart-callout {
  animation: tc-fade-in 400ms ease-out 2000ms forwards;
}
@keyframes tc-fade-in {
  to { opacity: 1; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tc-aurora { animation: none; opacity: 1; }
  .tc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tc-cta-primary, .tc-btn-primary { transition: none; }
  .tc-cta-primary::before, .tc-btn-primary::before { display: none; }
  [data-tc-chart] .tc-chart-line,
  [data-tc-chart] .tc-chart-area,
  [data-tc-chart] .tc-chart-point,
  [data-tc-chart] .tc-activity-row,
  [data-tc-chart] .tc-chart-callout {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}