/* ============================================================
   R3 JOB · animación de las ilustraciones
   Todo con CSS: siguen vivas aunque el navegador ahorre batería,
   y se paran solas con prefers-reduced-motion.
   ============================================================ */

.ilu { display: block; overflow: visible; }
.ilu-sombra { fill: rgba(0, 0, 0, 0.30); filter: blur(1px); }
:root[data-theme="light"] .ilu-sombra { fill: rgba(9, 12, 15, 0.14); }

/* ---------------- LA TAZA ---------------- */
@keyframes tazaFlota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-0.7deg); }
}
@keyframes sombraLate {
  0%, 100% { transform: scaleX(1); opacity: 0.32; }
  50% { transform: scaleX(0.9); opacity: 0.2; }
}
.ilu--taza { animation: tazaFlota 5.2s var(--ease-in-out) infinite; transform-origin: 100px 160px; }
.ilu--taza .ilu-sombra { animation: sombraLate 5.2s var(--ease-in-out) infinite; transform-origin: 100px 171px; }

/* Vapor: cada hilo sube, se ensancha y se deshace */
@keyframes sube1 {
  0% { opacity: 0; stroke-dashoffset: 62; transform: translateY(10px) scaleX(0.7); }
  22% { opacity: 0.75; }
  70% { opacity: 0.35; }
  100% { opacity: 0; stroke-dashoffset: 0; transform: translateY(-26px) scaleX(1.5); }
}
.ilu-vapor path {
  stroke: #D8C4AC;
  stroke-width: 4.5;
  stroke-dasharray: 62;
  opacity: 0;
  animation: sube1 3.6s var(--ease-out) infinite;
}
:root[data-theme="light"] .ilu-vapor path { stroke: #B9A489; }
.ilu-vapor .v1 { animation-delay: 0s; transform-origin: 84px 74px; }
.ilu-vapor .v2 { animation-delay: 1.2s; transform-origin: 100px 68px; }
.ilu-vapor .v3 { animation-delay: 2.4s; transform-origin: 116px 74px; }

/* La crema NO gira: al ser una elipse aplastada, rotarla parecía un
   disco dando vueltas. Ahora sólo respira un poco, como la superficie
   de un café recién servido. */
@keyframes cremaRespira {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.985); opacity: 0.94; }
}
.ilu-crema {
  animation: cremaRespira 6s var(--ease-in-out) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes burbujea {
  0%, 100% { opacity: 0.9; transform: translateY(0); }
  50% { opacity: 0.5; transform: translateY(-1.5px); }
}
.ilu-burbujas circle { animation: burbujea 3.4s var(--ease-in-out) infinite; }
.ilu-burbujas circle:nth-child(2) { animation-delay: 0.7s; }
.ilu-burbujas circle:nth-child(3) { animation-delay: 1.4s; }
.ilu-burbujas circle:nth-child(4) { animation-delay: 2.1s; }

/* ---------------- LA CARTA ---------------- */
@keyframes escribeLinea {
  0%, 8% { transform: scaleX(0); }
  26%, 88% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes flashFoto {
  0%, 72% { opacity: 0; }
  76% { opacity: 0.85; }
  100% { opacity: 0; }
}
.ilu--carta .ilu-lineas rect {
  transform-origin: 18px center;
  transform: scaleX(0);
  animation: escribeLinea 5s var(--ease-out) infinite;
}
.ilu--carta .l1 { animation-delay: 0.1s; }
.ilu--carta .l2 { animation-delay: 0.3s; }
.ilu--carta .l3 { animation-delay: 0.5s; }
.ilu--carta .l4 { animation-delay: 0.7s; }
.ilu--carta .ilu-flash { opacity: 0; animation: flashFoto 5s linear infinite; }

/* ---------------- EL CALENDARIO ---------------- */
@keyframes marcaDia {
  0%, 10% { fill: #CBD8E2; transform: scale(1); }
  20% { transform: scale(1.28); }
  30%, 84% { fill: #24B8D6; transform: scale(1); }
  100% { fill: #CBD8E2; }
}
.ilu--cal .ilu-celdas .on {
  transform-box: fill-box; transform-origin: center;
  animation: marcaDia 4.6s var(--ease-out) infinite;
}
.ilu--cal .c1 { animation-delay: 0.1s; }
.ilu--cal .c2 { animation-delay: 0.3s; }
.ilu--cal .c5 { animation-delay: 0.5s; }
.ilu--cal .c8 { animation-delay: 0.7s; }
.ilu--cal .c9 { animation-delay: 0.9s; }

/* ---------------- LAS MONEDAS ---------------- */
@keyframes cae {
  0%, 6% { opacity: 0; transform: translateY(-16px); }
  18% { opacity: 1; transform: translateY(2px); }
  24% { transform: translateY(0); }
  92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.ilu--monedas .ilu-pila > g { animation: cae 4.2s var(--ease-spring) infinite; }
.ilu--monedas .m1 { animation-delay: 0s; }
.ilu--monedas .m2 { animation-delay: 0.28s; }
.ilu--monedas .m3 { animation-delay: 0.56s; }
@keyframes euroAsoma {
  0%, 60% { opacity: 0; transform: translateY(4px); }
  72%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
.ilu--monedas .ilu-euro { animation: euroAsoma 4.2s var(--ease-out) infinite; }

/* ---------------- EL CAJÓN ---------------- */
@keyframes abreCajon {
  0%, 14% { transform: translateY(0); }
  34%, 74% { transform: translateY(7px); }
  100% { transform: translateY(0); }
}
@keyframes asomaBillete {
  0%, 18% { opacity: 0; transform: translateY(9px); }
  38%, 72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(9px); }
}
.ilu--cajon .ilu-frente,
.ilu--cajon .ilu-tirador { animation: abreCajon 4.4s var(--ease-out) infinite; }
.ilu--cajon .ilu-billetes rect { animation: asomaBillete 4.4s var(--ease-out) infinite; }
.ilu--cajon .b2 { animation-delay: 0.16s; }

/* ---------------- LA TAZA PEQUEÑA ---------------- */
@keyframes vaporcito {
  0% { opacity: 0; transform: translateY(6px) scaleX(0.8); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-12px) scaleX(1.3); }
}
.ilu--tazita .ilu-vaporcito path { animation: vaporcito 2.8s var(--ease-out) infinite; }
.ilu--tazita .v1 { transform-origin: 26px 20px; }
.ilu--tazita .v2 { animation-delay: 1.1s; transform-origin: 34px 18px; }
@keyframes cremitaLate { 0%, 100% { rx: 12.5; } 50% { rx: 11.4; } }
.ilu--tazita .ilu-cremita { animation: cremitaLate 3.6s var(--ease-in-out) infinite; }

/* ---------------- al pasar el cursor por la tarjeta ---------------- */
.pieza:hover .ilu { animation-play-state: running; }
.pieza:hover .ilu--carta .ilu-flash { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .ilu, .ilu *, .ilu-vapor path, .ilu-crema, .ilu-burbujas circle,
  .ilu--carta .ilu-lineas rect, .ilu--carta .ilu-flash,
  .ilu--cal .ilu-celdas .on, .ilu--monedas .ilu-pila > g, .ilu--monedas .ilu-euro,
  .ilu--cajon .ilu-frente, .ilu--cajon .ilu-tirador, .ilu--cajon .ilu-billetes rect,
  .ilu--tazita .ilu-vaporcito path, .ilu--tazita .ilu-cremita {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ilu--carta .ilu-lineas rect { transform: scaleX(1) !important; }
  .ilu--carta .ilu-flash { opacity: 0 !important; }
  .ilu--cal .ilu-celdas .on { fill: #24B8D6; }
}