/* ════════════════════════════════════════════════════════════════════
   AIM ONE · MOTION ENGINE · motion.css
   ====================================================================
   Motor de movimiento reutilizable, sin dependencias (SVG + CSS).
   Tema-agnóstico: lee los tokens del producto (var(--accent), --ink-*,
   --bg-*, estados) con fallbacks cream. Sirve igual al landing claro y
   al skin oscuro de la app.

   Respeta prefers-reduced-motion (estados finales sin animación) y
   degrada en táctil (pointer: coarse → sin spotlight de cursor).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --aim-dur-fast: 360ms;
  --aim-dur: 720ms;
  --aim-dur-slow: 1100ms;
  --aim-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --aim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Atmósfera de fondo (canvas) ─────────────────────────────────── */
.aim-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.aim-atmosphere.is-ready { opacity: 1; }

/* Spotlight de cursor: elemento DOM (más barato que canvas).
   Tema claro → multiply (oscurece/satura con el acento).
   En oscuro se conmuta a screen vía .aim-spotlight--dark (JS). */
.aim-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle closest-side,
    var(--accent, #ef7d00) 0%,
    rgba(239, 125, 0, 0.18) 38%,
    transparent 70%
  );
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.aim-spotlight.is-active { opacity: 0.5; }
.aim-spotlight--dark { mix-blend-mode: screen; }

/* Contenido por encima de la atmósfera */
.aim-above { position: relative; z-index: 2; }

/* ── Reveal (scroll-reveal) ──────────────────────────────────────── */
[data-aim-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--aim-dur) var(--aim-ease),
    transform var(--aim-dur) var(--aim-ease);
  transition-delay: var(--aim-delay, 0ms);
  will-change: opacity, transform;
}
[data-aim-reveal="fade"] { transform: none; }
[data-aim-reveal="scale"] { transform: scale(0.94); }
[data-aim-reveal="left"] { transform: translateX(-36px); }
[data-aim-reveal="right"] { transform: translateX(36px); }
[data-aim-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Parallax ────────────────────────────────────────────────────── */
[data-aim-parallax] { will-change: transform; }

/* ── Barra de progreso de scroll ─────────────────────────────────── */
.aim-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent, #ef7d00);
  z-index: 60;
  will-change: transform;
}

/* ── Gráficos ────────────────────────────────────────────────────── */
.aim-chart { width: 100%; display: block; }
.aim-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.aim-chart-line-path {
  fill: none;
  stroke: var(--accent, #ef7d00);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aim-chart-area { opacity: 0.14; }
.aim-chart-zero { stroke: var(--line, #d4c4a8); stroke-width: 1; stroke-dasharray: 3 4; }
.aim-chart-min-dot { fill: var(--accent, #ef7d00); }
.aim-chart-min-label,
.aim-chart-axis-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  fill: var(--ink-muted, #88746a);
}
.aim-chart-bar { fill: var(--accent, #ef7d00); }
.aim-chart-bar-label,
.aim-chart-value {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  fill: var(--ink-secondary, #4a3d2e);
}
.aim-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--font-sans, "Geist", sans-serif);
  font-size: 13px;
  color: var(--ink-secondary, #4a3d2e);
}
.aim-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.aim-chart-legend i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
}
.aim-donut-center-value {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 600;
  fill: var(--ink-primary, #1a1410);
}
.aim-donut-center-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  fill: var(--ink-muted, #88746a);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Degradación táctil: sin spotlight de cursor ─────────────────── */
@media (pointer: coarse) {
  .aim-spotlight { display: none; }
}

/* ── Reduced motion: estados finales, sin animación ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .aim-atmosphere, .aim-spotlight { display: none; }
  [data-aim-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-aim-parallax] { transform: none !important; }
  .aim-progress { display: none; }
  .aim-chart-line-path, .aim-chart-area, .aim-chart-bar,
  .aim-chart-seg, .aim-donut-seg {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}