/* BeeSign. Survol : l'abeille reprend sa signature, le dard suit le tracé.
   Chargement : la signature s'écrit, sèche un instant, puis s'efface pour recommencer. */

.bee-logo--beesign .signature { stroke-dasharray: 1 2; }

.bee-logo--beesign:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .bee {
  translate: none;
  animation: sign-write-hover 1.2s linear;
}

.bee-logo--beesign:not(.is-loading):is(:hover, .is-active, .bee-logo-hover:hover *, .bee-logo-hover:focus-visible *) .signature { animation: sign-draw-hover 1.2s linear both; }

@keyframes sign-draw-hover {
  0% { stroke-dashoffset: 1; }
  75%, 100% { stroke-dashoffset: 0; }
}

@keyframes sign-write-hover {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  4.69% { transform: translate(-2.7px, 2.5px) rotate(4deg); }
  9.38% { transform: translate(-6.3px, 3.4px) rotate(4.6deg); }
  14.06% { transform: translate(-10px, 2.7px) rotate(3.7deg); }
  18.75% { transform: translate(-12.5px, 0px) rotate(0.5deg); }
  23.44% { transform: translate(-11.4px, -3.3px) rotate(-2.4deg); }
  28.12% { transform: translate(-7.9px, -2.6px) rotate(-4.1deg); }
  32.81% { transform: translate(-5.1px, -0.1px) rotate(-3.8deg); }
  37.5% { transform: translate(-2.4px, 2.5px) rotate(-4deg); }
  42.19% { transform: translate(0.9px, 4.3px) rotate(-4.6deg); }
  46.88% { transform: translate(4.6px, 4.8px) rotate(-4.9deg); }
  51.56% { transform: translate(8.4px, 4.8px) rotate(-5deg); }
  56.25% { transform: translate(12.1px, 4.4px) rotate(-4.9deg); }
  60.94% { transform: translate(15.8px, 3.7px) rotate(-4.9deg); }
  65.62% { transform: translate(19.4px, 2.8px) rotate(-4.8deg); }
  70.31% { transform: translate(23px, 1.5px) rotate(-4.6deg); }
  75% { transform: translate(26.4px, 0px) rotate(-4.6deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: none; }
}

.bee-logo--beesign.is-loading .signature { animation: sign-draw-loop 3.6s 1s linear infinite both; }
.bee-logo--beesign.is-loading .bee { animation: sign-write-loop 3.6s 1s linear infinite both; }

@keyframes sign-draw-loop {
  0% { stroke-dashoffset: 1; opacity: 1; }
  50%, 76% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0; }
  91%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes sign-write-loop {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  3.12% { transform: translate(-2.7px, 2.5px) rotate(4deg); }
  6.25% { transform: translate(-6.3px, 3.4px) rotate(4.6deg); }
  9.38% { transform: translate(-10px, 2.7px) rotate(3.7deg); }
  12.5% { transform: translate(-12.5px, 0px) rotate(0.5deg); }
  15.62% { transform: translate(-11.4px, -3.3px) rotate(-2.4deg); }
  18.75% { transform: translate(-7.9px, -2.6px) rotate(-4.1deg); }
  21.88% { transform: translate(-5.1px, -0.1px) rotate(-3.8deg); }
  25% { transform: translate(-2.4px, 2.5px) rotate(-4deg); }
  28.12% { transform: translate(0.9px, 4.3px) rotate(-4.6deg); }
  31.25% { transform: translate(4.6px, 4.8px) rotate(-4.9deg); }
  34.38% { transform: translate(8.4px, 4.8px) rotate(-5deg); }
  37.5% { transform: translate(12.1px, 4.4px) rotate(-4.9deg); }
  40.62% { transform: translate(15.8px, 3.7px) rotate(-4.9deg); }
  43.75% { transform: translate(19.4px, 2.8px) rotate(-4.8deg); }
  46.88% { transform: translate(23px, 1.5px) rotate(-4.6deg); }
  50% { transform: translate(26.4px, 0px) rotate(-4.6deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  62%, 100% { transform: none; }
}
