/* Estados que no dependen de movimiento */
.btn-go { position: relative; overflow: hidden; }
.chip, .mode-tab, .row-link, .btn-go, input { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; }
input:focus { box-shadow: 0 0 0 4px rgba(0, 51, 153, .12); outline: none; }

/* Ruta de carga */
.road { position: relative; height: 64px; max-width: 420px; margin: 0 auto; overflow: hidden; }
.road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 4px; background-image: repeating-linear-gradient(90deg, #FFC72C 0 28px, transparent 28px 48px); background-size: 48px 4px; }
.road .car { position: absolute; bottom: 14px; left: 50%; font-size: 40px; line-height: 1; transform: translateX(-50%) scaleX(-1); }
.road .car.c2 { left: 32%; }
.road .car.c2 + .car { left: 68%; }

@media (prefers-reduced-motion: no-preference) {
  /* Botones */
  .btn-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(201, 154, 18, .9); }
  .btn-go:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
  .btn-go::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
  .btn-go:hover:not(:disabled)::after { animation: shine .7s ease; }
  .btn-go:disabled { animation: pulse-btn 1.2s ease-in-out infinite; }
  @keyframes shine { to { left: 130%; } }
  @keyframes pulse-btn { 50% { opacity: .45; } }

  .mode-tab:hover { transform: translateY(-1px); }
  .mode-tab:active { transform: translateY(1px); }
  .chip:hover { transform: translateY(-2px); }
  .chip:active { transform: scale(.96); }

  /* Paneles y resultados */
  [role=tabpanel]:not([hidden]) { animation: fade-up .35s ease both; }
  .reveal { animation: fade-up .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
  @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Ruta de carga */
  .road::after { animation: lane .45s linear infinite; }
  .road .car { animation: bump .45s ease-in-out infinite; }
  .road .car.c2 { animation-delay: .2s; }
  @keyframes lane { to { background-position: -48px 0; } }
  @keyframes bump { 50% { transform: translateX(-50%) scaleX(-1) translateY(-3px); } }

  /* Barra del mercado */
  .band { transform-origin: center; animation: grow-x .7s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .tick { animation: pop-y .4s cubic-bezier(.3, 1.6, .5, 1) both; }
  .est-mark { animation: drop-y .5s cubic-bezier(.3, 1.5, .5, 1) .8s both; }
  .ask-mark { animation: drop .5s cubic-bezier(.3, 1.5, .5, 1) 1s both; }
  @keyframes grow-x { from { transform: scaleX(0); } }
  @keyframes pop-y { from { transform: translateY(-50%) scaleY(0); opacity: 0; } }
  @keyframes drop { from { transform: translate(-50%, -16px); opacity: 0; } }
  @keyframes drop-y { from { transform: translateY(-16px); opacity: 0; } }

  /* Veredicto */
  .pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
  .siren span:first-child { display: inline-block; animation: siren .5s ease-in-out .8s 3; }
  @keyframes pop { from { transform: scale(.85); opacity: 0; } }
  @keyframes siren { 50% { transform: rotate(-14deg) scale(1.25); } }

  /* Barras de costo */
  .bar-fill { animation: fill .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, .3s); }
  @keyframes fill { from { width: 0; } }

  /* Filas de publicaciones */
  .row-link:hover { transform: translateX(4px); }
  .row-link img { transition: transform .35s; }
  .row-link:hover img { transform: scale(1.06); }

  /* Ganador en la comparación */
  .win-flash { animation: win 1.2s ease .6s both; }
  @keyframes win { 0% { background-color: rgba(27, 127, 82, .35); } 100% { background-color: rgba(27, 127, 82, .1); } }
}