/* DataRiqueza V1.6 — Final Motion & Polish */

:root {
  --motion-fast: 150ms;
  --motion-base: 260ms;
  --motion-slow: 460ms;
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring-soft: cubic-bezier(.2, .9, .25, 1.15);
}

/* Transición nativa entre páginas del mismo origen.
   Navegadores sin soporte simplemente navegan sin esta animación. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-group(site-header) {
  animation-duration: 220ms;
}

::view-transition-old(root) {
  animation: dr-page-out 150ms ease both;
}

::view-transition-new(root) {
  animation: dr-page-in 260ms var(--ease-out-soft) both;
}

@keyframes dr-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px) scale(.997);
  }
}

@keyframes dr-page-in {
  from {
    opacity: 0;
    transform: translateY(7px) scale(.997);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entrada inicial; NO se usa para ocultar la página al navegar hacia atrás. */
html.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translateY(16px);
}

html.motion-enabled .motion-reveal.motion-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 480ms var(--ease-out-soft),
    transform 480ms var(--ease-out-soft);
}

/* Microinteracciones */
.button,
.tool-card,
.preset,
.brand,
.nav a,
.source-list a,
.status-card,
.scenario,
.calculator-card,
.result-card,
input {
  transition:
    transform var(--motion-fast) var(--ease-out-soft),
    box-shadow var(--motion-fast) var(--ease-out-soft),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active,
.preset:active {
  transform: translateY(0) scale(.975);
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 70px rgba(28, 30, 23, .12);
}

.tool-card.featured:hover {
  transform: translateY(-5px) scale(1.004);
}

.source-list a:hover {
  transform: translateX(3px);
  border-color: #bbb8ae;
}

.brand:hover,
.nav a:hover {
  transform: translateY(-1px);
}

input:focus {
  box-shadow: 0 0 0 4px rgba(184,255,92,.18);
  transform: translateY(-1px);
}

:focus-visible {
  outline: 3px solid rgba(105, 145, 36, .55);
  outline-offset: 3px;
}

/* Feedback al recalcular */
.motion-result-pop {
  animation: result-pop 380ms var(--ease-spring-soft);
}

@keyframes result-pop {
  0% {
    opacity: .35;
    transform: translateY(7px) scale(.988);
  }
  60% {
    opacity: 1;
    transform: translateY(-1px) scale(1.004);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.motion-flash {
  animation: soft-flash 430ms var(--ease-out-soft);
}

@keyframes soft-flash {
  0% { background-color: rgba(184,255,92,.16); }
  100% { background-color: transparent; }
}

/* Barras de IA */
.ai-bar-fill {
  transform-origin: left center;
  transition: width 620ms var(--ease-out-soft);
}

/* Dibujado de gráficos */
.motion-chart-path {
  animation: draw-chart var(--motion-slow) var(--ease-out-soft) forwards;
}

@keyframes draw-chart {
  from { stroke-dashoffset: var(--path-length); }
  to { stroke-dashoffset: 0; }
}

/* Feedback click */
.motion-clicked {
  animation: click-pulse 240ms var(--ease-out-soft);
}

@keyframes click-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* Elementos de estado */
.availability-note:not([hidden]),
.updated-badge,
.status-card {
  animation: fade-lift 330ms var(--ease-out-soft);
}

@keyframes fade-lift {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Mejora táctil/móvil */
.button,
.preset,
.tool-card,
.source-list a {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .scenario:hover,
  .status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(28, 30, 23, .07);
  }
}

/* Accesibilidad: elimina movimiento no esencial */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html.motion-enabled .motion-reveal,
  html.motion-enabled .motion-reveal.motion-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}