/* Movimiento. Un solo vocabulario: el elemento sube, crece un poco y se inclina un grado.
   Las reglas usan estos tokens con las propiedades individuales translate / scale / rotate,
   así que con "reducir movimiento" basta con poner los tokens en cero. */
:root{
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;   /* color, borde */
  --duration-base:250ms;   /* fondo, sombra */
  --duration-hover:350ms;  /* botones y controles: subir y crecer */
  --duration-card:450ms;   /* tarjetas, medios */
  --duration-slow:450ms;

  /* Botones y controles */
  --lift-btn:-3px;   --grow-btn:1.05;
  --grow-round:1.12; --tilt-round:-8deg;     /* botones redondos (luna, cerrar) */
  /* Tarjetas */
  --lift-card:-10px; --tilt-card:-1deg;
  --lift-media:-8px; --tilt-media:-1.5deg;   /* tarjetas de video y proyecto */
  --grow-media:1.02;
  --lift-stat:-4px;
  /* Pulsar */
  --press-scale:.96;
  /* Ambiente continuo (bamboleo de teléfonos y tarjetas flotantes) */
  --float-distance:-10px; --float-tilt:-2deg; --float-time:4.5s;
}
@media (prefers-reduced-motion: reduce){
  :root{
    --lift-btn:0px; --grow-btn:1; --grow-round:1; --tilt-round:0deg;
    --lift-card:0px; --tilt-card:0deg; --lift-media:0px; --tilt-media:0deg; --grow-media:1; --lift-stat:0px;
    --press-scale:1; --float-distance:0px; --float-tilt:0deg;
    --duration-fast:1ms; --duration-base:1ms; --duration-hover:1ms; --duration-card:1ms; --duration-slow:1ms;
  }
  .vj-shine::after,.vj-float,.vj-wiggle{animation:none !important}
}
@media (hover:none){:root{--lift-btn:0px;--grow-btn:1;--lift-card:0px;--tilt-card:0deg;--lift-media:0px;--tilt-media:0deg}}

@keyframes vj-shine{0%{left:-60%}100%{left:130%}}
@keyframes vj-wiggle{0%,100%{rotate:0deg}25%{rotate:-4deg}75%{rotate:4deg}}
@keyframes vj-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 var(--float-distance);rotate:var(--float-tilt)}}