/* Animazione titolo VOLTURIA (da movingtext.css, font puntati a copie locali) */
@font-face {
  font-family: VOLTURIARegular;
  src: url('../../media/fonts/VOLTURIARegular.woff2') format('woff2'),
       url('../../media/fonts/VOLTURIARegular.ttf') format('truetype');
}

html {
  background: transparent;
  min-height: 100%;
}

body {
  min-height: 100%;
}

h1.loader {
  text-align: center;
  text-transform: uppercase;
  font-family: VOLTURIARegular, sans-serif;
  font-size: 4.6875em;
  color: transparent;
  letter-spacing: 0.03em;
}

.loader span {
  text-shadow:
    0 0 2px rgba(204, 208, 212, 0.9),
    0 15px 25px rgba(0, 0, 0, 1.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.45);
  -webkit-animation: loading 1.9s ease-in-out infinite alternate;
  animation: loading 1.9s ease-in-out infinite alternate;
}

/*
 * Desktop: le ombre nere (15px / 25px) cadono sotto la lettera.
 * Mobile: lo stesso blur avvolge il glifo e si somma tra lettere vicine,
 * quindi l'alone diventa nero invece del grigio 204,208,212.
 * Si tengono offset e blur; si abbassa solo il nero.
 */
@media (max-width: 768px) {
  .volturia-title-psw {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  h1.loader {
    /* 4.6875em * 0.8 = 3.75em; clamp per telefoni più stretti */
    font-size: clamp(2.4em, 15.5vw, 3.75em);
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .loader span {
    text-shadow:
      0 0 2px rgba(204, 208, 212, 0.9),
      0 15px 25px rgba(0, 0, 0, 0.28),
      0 -2px 3px rgba(0, 0, 0, 0.06),
      0 -5px 10px rgba(255, 255, 255, 0.5),
      0 5px 10px rgba(0, 0, 0, 0.12),
      0 3px 4px rgba(255, 255, 255, 0.2),
      0 0 20px rgba(255, 255, 255, 0.45);
  }
}

@-webkit-keyframes loading {
  to {
    text-shadow:
      0 0 2px rgba(204, 208, 212, 0.2),
      0 0 3px rgba(0, 0, 0, 0.02),
      0 0 0 rgba(0, 0, 0, 0),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(0, 0, 0, 0),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes loading {
  to {
    text-shadow:
      0 0 2px rgba(204, 208, 212, 0.2),
      0 0 3px rgba(0, 0, 0, 0.02),
      0 0 0 rgba(0, 0, 0, 0),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(0, 0, 0, 0),
      0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 255, 255, 0);
  }
}

.loader span:nth-child(2) { -webkit-animation-delay: .15s; animation-delay: .15s; }
.loader span:nth-child(3) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.loader span:nth-child(4) { -webkit-animation-delay: .45s; animation-delay: .45s; }
.loader span:nth-child(5) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.loader span:nth-child(6) { -webkit-animation-delay: .75s; animation-delay: .75s; }
.loader span:nth-child(7) { -webkit-animation-delay: .9s; animation-delay: .9s; }
.loader span:nth-child(8) { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; }
.loader span:nth-child(9) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.loader span:nth-child(10) { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; }