.loader {
    width: 12rem;
    aspect-ratio: 1;
    box-shadow: 0 0 0 3px #fff inset;
    border-radius: 50%;
    position: relative;
    animation: bounce 1.5s ease-in-out infinite;
    border: 0.5rem solid var(--secondary-color);
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    top: calc(100% + 0.6rem);
    left: calc(50% - 2.25rem);
    box-shadow: inherit;
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform-origin: 50% -6.25rem;
    animation: l11 1.5s infinite;
    border: 0.5rem solid var(--secondary-color-overlay);

}

.loader:after {
    animation-delay: -0.75s;
}

@keyframes l11 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* altezza salto */
    }
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background-color: var(--bs-body-bg);
    flex-direction: column;
}

#loader-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;


  background-size: cover;
  background-position: center;

  opacity: 0.3; /* 👈 qui regoli lo “sbiadito” */

  z-index: 0;
}