.login-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #eef1f7;
}

.login-sfondo,
.login-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-sfondo {
  z-index: -2;
  background-image: url("/img/hero-biblioteca.svg");
  background-size: cover;
  background-position: 50% 50%;
  transform-origin: 50% 45%;
  animation: login-panoramica 60s ease-in-out infinite alternate;
}

/* Velatura chiara: il lato del modulo si calma senza spegnere l'illustrazione,
   che resta leggibile (muro, lavagna, scaffale, finestra) da bordo a bordo. */
.login-velo {
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(238 241 247 / 0.06) 0%,
    rgb(238 241 247 / 0.18) 42%,
    rgb(238 241 247 / 0.4) 72%,
    rgb(238 241 247 / 0.55) 100%
  );
}

.login-griglia {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  width: min(100%, 76rem);
  max-width: 76rem;
  padding: clamp(2rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 4rem);
}

.login-modulo {
  position: relative;
  width: 100%;
  max-width: 27rem;
  justify-self: center;
  animation: login-sali 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Sfondo bianco pieno, non traslucido: e' lo stesso bianco del logo, cosi'
   il riquadro dell'immagine non si vede e la card sembra un pezzo unico. */
.login-card {
  background-color: #fff;
  border: 1px solid rgb(30 41 71 / 0.09);
  box-shadow:
    0 32px 64px -32px rgb(30 41 71 / 0.45),
    0 12px 28px -22px rgb(30 41 71 / 0.3);
}

.login-logo {
  display: block;
  width: min(11rem, 58%);
  height: auto;
  margin-inline: auto;
}

@keyframes login-panoramica {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes login-sali {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-sfondo,
  .login-modulo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}