/* css/taza.css
   Las cinco capas de la taza. Lo carga toda pagina que incluya includes/taza.php.

   EL ORDEN DE LAS CAPAS ES EL ORDEN DEL MARCADO y no hay z-index: fondo quieto, cafe
   girando, remolino, astros y la cuchara arriba de todo, tambien quieta. Poner z-index
   seria invitar a que alguien cambie el orden del marcado y lo compense con numeros.

   prefers-reduced-motion APAGA TODO. No es un adorno de accesibilidad: cinco capas
   girando a la vez marean de verdad, y hay gente que lo tiene puesto por eso. */
.cc-taza { position:relative; width:100%; max-width:520px; aspect-ratio:1/1; border-radius:28px; overflow:hidden; box-shadow:0 18px 40px rgba(38,50,44,0.35); }
.cc-taza-fondo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cc-taza-cafe { position:absolute; left:22.01%; top:19.94%; width:51.36%; height:51.36%; transform-origin:50% 50%; animation:cc-girar 18s linear infinite; }
.cc-taza-remolino { position:absolute; left:42.5%; top:40.43%; width:10.37%; height:10.37%; border-radius:50%; background-image:url(../img/logo-900.jpg); background-size:964.6% 964.6%; background-position:47.42% 45.11%; animation:cc-girar 5s linear infinite; -webkit-mask-image:radial-gradient(circle,#000 50%,transparent 72%); mask-image:radial-gradient(circle,#000 50%,transparent 72%); }
.cc-taza-astros { position:absolute; inset:0; width:100%; height:100%; }
.cc-taza-cuchara { position:absolute; left:51.12%; top:19.94%; width:28.95%; height:auto; }
/* transform-box:view-box hace que el origen se mida en coordenadas del viewBox y no de la
   caja del elemento: sin eso los puntos orbitan alrededor de otro centro. */
.cc-gira { transform-box:view-box; transform-origin:598px 572px; animation:cc-girar linear infinite; }
.cc-gira-a { animation-duration:9s; }
.cc-gira-b { animation-duration:15s; }
.cc-gira-c { animation-duration:24s; animation-direction:reverse; }
.cc-titila { animation:cc-titilar 2.6s ease-in-out infinite; }
@keyframes cc-girar { to { transform:rotate(360deg); } }
@keyframes cc-titilar { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .cc-taza-cafe, .cc-taza-remolino, .cc-gira, .cc-titila { animation:none; }
}