/* Movimiento en el café de la taza de la portada.
   El vídeo (café que gira despacio y ondas suaves) va dentro de .hero__taza, encima de la foto, recortado al círculo del café.
   Posiciones en % de la foto (900 × 837): caja de 540 × 540 centrada en (455, 388). */

.taza-mov {
  position: absolute;
  left: 20.56%;
  top: 14.1%;
  width: 60%;
  height: 64.52%;
  pointer-events: none;
  /* la web gira la foto sobre su centro (450, 418,5); el vídeo gira sobre ese mismo punto */
  transform-origin: 49.07% 55.65%;
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 46.3% 48.5% at 50% 50%, #000 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 46.3% 48.5% at 50% 50%, #000 88%, transparent 100%);
  opacity: 0;
  transition: opacity 900ms ease;
}

.taza-mov.is-listo { opacity: 1; }

.taza-mov video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}