/* L'ERUGA QUE SALTA ELS SOTS — animació de càrrega de DUAT.
   Triada pel gerent el 09-09-2026 (variant C: cadena a 1,8 s).
   Colors de `config.COLORS`: verd #1B5E34, verd fosc #123F24, verd suau #E4F1E9. */

.duat-carrega{
  /* CAPA A PANTALLA COMPLETA, i no una caixa dins del flux.
     Al mobil, com a caixa quedava on queia -- ni centrada ni tapant res, o
     sigui que no hi havia res per difuminar. Amb `fixed inset:0` es centra
     sempre, sigui quina sigui la mida, i el difuminat te superficie. */
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px;
  /* El fons difuminat. El `-webkit-` no es decoracio: Safari d'iOS encara el
     demana, i el gerent mira DUAT des del mobil. */
  background:rgba(248,247,242,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.duat-carrega img{ max-width:min(190px, 60vw); height:auto }
.duat-carrega .peu{ color:#6E6A5E; font-size:13px; margin:0; text-align:center }

/* Si el navegador no sap difuminar (Firefox antic, alguns Android), el fons
   es fa mes opac: val mes tapar del tot que deixar el text de sota llegible a
   mitges, que es el pitjor dels dos mons. */
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){
  .duat-carrega{ background:rgba(248,247,242,.93) }
}

/* El bot pel terreny irregular. */
@keyframes duat-bota{
  0%,100%{ transform:translateY(0) rotate(0) }
  20%    { transform:translateY(-9px) rotate(-5deg) }
  40%    { transform:translateY(0) rotate(2deg) }
  60%    { transform:translateY(-5px) rotate(3.5deg) }
  80%    { transform:translateY(0) rotate(-1deg) }
}
/* Les baules. A 1,8 s i no a 1,1: mes lenta es veu girar MILLOR, perque a
   1,1 s per volta l'ull perd les baules i a 1,8 les segueix. I cansa menys
   en una espera llarga, que es quan aquesta animacio existeix. */
@keyframes duat-baules{ to{ stroke-dashoffset:-30 } }
@keyframes duat-volta{ to{ transform:rotate(360deg) } }

.duat-carrega .bota  { transform-origin:88px 92px; animation:duat-bota 1.4s ease-in-out infinite }
.duat-carrega .baules{ stroke-dasharray:9 6; stroke-linecap:round;
                       animation:duat-baules 1.8s linear infinite }
.duat-carrega .roda  { transform-box:fill-box; transform-origin:center;
                       animation:duat-volta 1.8s linear infinite }

/* Qui ha demanat menys moviment al sistema, el te. No es opcional: WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce){
  .duat-carrega .bota, .duat-carrega .baules, .duat-carrega .roda{ animation:none }
}