/* ==========================================================================
   HOB animated icons
   ========================================================================== */

.svg-container-hob {
  --hob-icon-color: #805e9c;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.svg-container-hob svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50px;
  overflow: visible !important;
}

.svg-container-hob svg .cls-1,
.svg-container-hob svg [fill="#805e9c"],
.svg-container-hob svg [fill="#805e9c"] {
  fill: var(--hob-icon-color);
}

/* Sizes */

.secure-payment-icon-svg {
  width: 65px;
}

.secure-payment-icon-svg svg {
  max-height: 54px;
}

.shipping-icon-svg {
  width: 85px;
}

.customer-service-icon-svg {
  width: 110px;
}

/* ==========================================================================
   Secure payment animation
   ========================================================================== */

.secure-payment-icon-svg #Form1mov-wrapper {
  animation: hob-secure-badge-rotate 8000ms linear infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

@keyframes hob-secure-badge-rotate {
  0% {
    transform: translate(147.498222px, 176.755737px) rotate(0deg);
  }

  50% {
    transform: translate(147.498222px, 176.755737px) rotate(160deg);
  }

  100% {
    transform: translate(147.498222px, 176.755737px) rotate(0deg);
  }
}

/* ==========================================================================
   Shipping animation
   ========================================================================== */

.shipping-icon-svg #Camion {
  animation: hob-truck-bounce 1500ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.shipping-icon-svg #Roues path {
  animation: hob-wheel-bounce 1800ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.shipping-icon-svg #logo path {
  animation: hob-shipping-logo-rotate 2000ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

@keyframes hob-truck-bounce {
  0%,
  100% {
    transform: translateY(8px) translateX(7px) rotate(0deg);
  }

  50% {
    transform: translateY(-2px) translateX(6px) rotate(2deg);
  }
}

@keyframes hob-wheel-bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }

  12.5%,
  37.5%,
  62.5%,
  87.5% {
    transform: translateY(-8px);
  }
}

@keyframes hob-shipping-logo-rotate {
  0%,
  100% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(-4deg);
  }
}

/* ==========================================================================
   Customer service animation
   ========================================================================== */

.customer-service-icon-svg #Enveloppe {
  animation: hob-envelope-float 3000ms ease-in-out infinite;
  animation-delay: 4000ms;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.customer-service-icon-svg #wing-left {
  animation: hob-wing-flap-left 3500ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: right center;
  will-change: transform;
}

.customer-service-icon-svg #wing-right {
  animation: hob-wing-flap-right 3500ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: left center;
  will-change: transform;
}

@keyframes hob-envelope-float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-30px) translateX(15px);
  }
}

@keyframes hob-wing-flap-left {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) translateX(-1px) rotate(1.5deg);
  }
}

@keyframes hob-wing-flap-right {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) translateX(5px) rotate(-1.5deg);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .svg-container-hob * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}