/* =========================================================================
   REACTIVE — animações e micro-interações que aplicam a todos os temas
   ========================================================================= */

/* Entrada da página */
@keyframes rx-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rx-draw {
  from { stroke-dashoffset: var(--len, 4000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes rx-undraw {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: var(--len, 4000); }
}
@keyframes rx-undraw-fill {
  from { opacity: var(--rx-fill-op, 1); }
  to   { opacity: 0; }
}
@keyframes rx-flash-up {
  0%   { background: color-mix(in oklch, var(--up) 35%, transparent); }
  100% { background: transparent; }
}
@keyframes rx-flash-down {
  0%   { background: color-mix(in oklch, var(--down) 35%, transparent); }
  100% { background: transparent; }
}
@keyframes rx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.4); }
}
@keyframes rx-blink {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.25; }
}
@keyframes rx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Card entrance === */
.card {
  animation: rx-fade-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.grid-precos .card:nth-child(1) { animation-delay: 0.05s; }
.grid-precos .card:nth-child(2) { animation-delay: 0.12s; }
.grid-precos .card:nth-child(3) { animation-delay: 0.19s; }
.grid-spreads .card:nth-child(1) { animation-delay: 0.10s; }
.grid-spreads .card:nth-child(2) { animation-delay: 0.16s; }

/* === Card-value count up flash === */
.card-value {
  transition: color 0.3s ease, text-shadow 0.3s ease;
  display: inline-block;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
}
.card-value.rx-flash-up   { animation: rx-flash-up   1.2s ease-out; }
.card-value.rx-flash-down { animation: rx-flash-down 1.2s ease-out; }

/* === Live status dot (top-bar) === */
.rx-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.rx-live-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--up) 80%, transparent);
  animation: rx-pulse 1.6s ease-in-out infinite;
}

/* === Crosshair (chart hover) — added by reactive.jsx === */
.rx-crosshair {
  pointer-events: none;
  stroke: color-mix(in oklch, var(--accent) 60%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* === Buttons: ripple/glow on click === */
.tab, .seg-btn, .year-seg-btn, .ctrl-btn, .preset-btn, .cur-btn,
.year-chip, .swatch, .type-btn, .upload-btn {
  position: relative;
  overflow: hidden;
}
.tab::after, .seg-btn::after, .year-seg-btn::after, .ctrl-btn::after,
.preset-btn::after, .cur-btn::after, .year-chip::after,
.swatch::after, .type-btn::after, .upload-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx-x, 50%) var(--rx-y, 50%),
              color-mix(in oklch, var(--accent) 35%, transparent) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tab:active::after, .seg-btn:active::after, .year-seg-btn:active::after,
.ctrl-btn:active::after, .preset-btn:active::after, .cur-btn:active::after,
.year-chip:active::after, .swatch:active::after, .type-btn:active::after,
.upload-btn:active::after { opacity: 1; transition: opacity 0s; }

/* === Hover transitions on cards (sem lift) === */
.card { transition: box-shadow 0.28s ease, border-color 0.28s ease; }

/* === Ticker tape (top of page) === */
.rx-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  height: 32px;
  margin: 8px 0 4px;
  background: color-mix(in oklch, var(--bg-panel) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
}
.rx-ticker::before, .rx-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.rx-ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg) 10%, transparent); }
.rx-ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg) 10%, transparent); }
.rx-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rx-ticker:hover .rx-ticker-track {
  opacity: 0.9;
}
.rx-ticker-item {
  display: inline-flex;
  align-items: center;  gap: 8px;
  padding: 0 22px;
  border-right: 1px solid var(--border);
  height: 100%;
  cursor: pointer;
  transition: background 0.4s ease, opacity 0.4s ease;
}
.rx-ticker-item:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.rx-ticker-symbol { color: var(--fg-dim); letter-spacing: 0.06em; }
.rx-ticker-value  { color: var(--fg); font-variant-numeric: tabular-nums; }
.rx-ticker-delta.is-up   { color: var(--up); }
.rx-ticker-delta.is-down { color: var(--down); }
.rx-ticker-item { cursor: pointer; user-select: none; }

/* === Scroll-target highlight pulse === */
@keyframes rx-card-target {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.card.rx-card-target,
[data-card-id].rx-card-target {
  animation: rx-card-target 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* === Chart line draw-on entry === */
.chart-svg path[stroke]:not([stroke="transparent"]):not([stroke-dasharray]) {
  stroke-dasharray: var(--len, 3000);
  animation: rx-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
/* grid-line has opacity:0.6 in CSS — animate to that exact value to avoid flash */
@keyframes rx-grid-fade {
  from { opacity: 0; }
  to   { opacity: 0.6; }
}
.chart-svg .grid-line {
  opacity: 0;
  animation: rx-grid-fade 0.6s ease-out forwards;
}
.chart-svg .axis-line { animation: rx-fade-in  0.6s ease-out backwards; }

/* Entry for ALL other svg things: bars, event dots, legend */
.chart-svg rect:not(.rx-bar):not(.rx-no-anim),
.chart-svg circle:not(.rx-event-dot):not(.rx-no-anim),
.chart-svg path[fill]:not([fill="none"]):not([fill="transparent"]):not(.rx-area):not(.rx-stat-band) {
  animation: rx-fade-in 0.9s ease-out backwards;
  animation-delay: 0.25s;
}

/* Stat bands: fade to the correct low opacity (uses CSS var to avoid the clarão) */
@keyframes rx-stat-fade {
  from { opacity: 0; }
  to   { opacity: var(--rx-stat-op, 0.06); }
}
.chart-svg .rx-stat-band {
  animation: rx-stat-fade 0.5s ease-out both;
  animation-delay: 0.15s;
}
/* Stat mean line: reveal left→right so the dashes remain intact */
@keyframes rx-stat-mean-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes rx-stat-mean-retract {
  from { clip-path: inset(0 0% 0 0); }
  to   { clip-path: inset(0 100% 0 0); }
}
.chart-svg .rx-stat-mean {
  animation: rx-stat-mean-reveal 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.2s;
}
.chart-svg .rx-stat-mean.rx-stat-leaving {
  animation: rx-stat-mean-retract 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
  animation-delay: 0s !important;
}
/* Stat bands: fade out on leave */
@keyframes rx-stat-band-out {
  from { opacity: var(--rx-stat-op, 0.06); }
  to   { opacity: 0; }
}
.chart-svg .rx-stat-band.rx-stat-leaving {
  animation: rx-stat-band-out 0.35s ease-out forwards !important;
  animation-delay: 0s !important;
}
.chart-svg text { animation: rx-fade-in 0.6s ease-out backwards; animation-delay: 0.35s; }

/* Bars: rise from x-axis (clip-path reveals upward) */
@keyframes rx-bar-rise {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.chart-svg .rx-bar {
  animation: rx-bar-rise 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
  /* per-bar delay set inline via style.animationDelay */
}
/* Bars: drop into x-axis on leave */
@keyframes rx-bar-drop {
  from { clip-path: inset(0 0 0 0); opacity: 1; }
  to   { clip-path: inset(100% 0 0 0); opacity: 0; }
}
.chart-svg .rx-bar.rx-bar-leaving {
  animation: rx-bar-drop 0.25s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  animation-delay: 0s !important;
}

/* Event dots: sync with line draw — per-month delay set inline */
.chart-svg .rx-event-dot {
  animation: rx-fade-in 0.35s ease-out backwards;
  /* delay set inline */
}

/* Feixe do evento: sobe da bolinha pra cima depois que ela aparece */
@keyframes rx-beam-rise {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.chart-svg line.rx-event-beam {
  animation: rx-beam-rise 0.45s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  animation-delay: 0.35s;
}

/* Fade-out dos eventos quando o botão EVENTOS é desligado */
@keyframes rx-events-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.chart-svg .rx-events-leaving {
  animation: rx-events-fadeout 0.4s ease-out forwards !important;
  pointer-events: none;
}

/* Area fill: fade in até a opacidade-alvo (var --rx-area-op), sem overshoot */
@keyframes rx-area-fade-in {
  from { opacity: 0; }
  to   { opacity: var(--rx-area-op, 1); }
}
.chart-svg .rx-area {
  animation: rx-area-fade-in 0.5s ease-out forwards;
}
/* Fade-out quando a área é desligada (chartStyle deixa de ser 'area') */
@keyframes rx-area-fade-out {
  from { opacity: var(--rx-area-op, 1); }
  to   { opacity: 0; }
}
.chart-svg .rx-area.rx-area-leaving {
  animation: rx-area-fade-out 0.4s ease-out forwards !important;
}

/* Smooth transitions when toggling years / styles / events */
.chart-svg path,
.chart-svg rect,
.chart-svg circle {
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Don't transition the dashed-line draw-on */
.chart-svg path[stroke-dasharray] { transition: opacity 0.5s ease; }

/* === Undraw animation: linha "volta" da direita pra esquerda quando ano sai === */
.chart-svg path.rx-leaving[stroke]:not([stroke="transparent"]) {
  stroke-dasharray: var(--len, 3000);
  animation: rx-undraw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  transition: none !important;
}
/* Áreas (fills) saindo: fade rápido */
.chart-svg path.rx-leaving[fill]:not([fill="none"]):not([fill="transparent"]) {
  animation: rx-undraw-fill 0.5s ease-out forwards !important;
  transition: none !important;
}

/* === Theme switcher chips (in TweaksPanel) === */
.rx-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rx-theme-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
  text-align: left;
}
.rx-theme-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.rx-theme-card.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px color-mix(in oklch, var(--accent) 25%, transparent);
}
.rx-theme-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.02em;
}
.rx-theme-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rx-theme-preview {
  height: 28px;
  border-radius: 3px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* === card title micro-shimmer on hover === */
.card:hover .card-title {
  background-image: linear-gradient(90deg,
    var(--fg) 0%, color-mix(in oklch, var(--accent) 70%, var(--fg)) 50%, var(--fg) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: rx-shimmer 1.5s ease-in-out;
}