/* HEADER */

#header-sfondo-animato-cnt {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.header-svg {
  position: absolute;
  left: 0;
  top: 0;
}
#header-sfondo-animato {
  width: 95%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: absolute;
  top: 35%;
  overflow: hidden;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}

#header-svg-04 {
  left: auto;
  right: 0;
}

#header-svg-05 {
  left: auto;
  right: 0;
}

.header-animazione-rettangolo {
  border-radius: 0;
}

h1 {
  opacity: 0;
}

#header-titolazione {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: none !important;
}

#header-titolazione svg {
  width: 80%;
}

.h1_st1 {
  fill: none;
  stroke: #e9d9ff;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  pointer-events: none;
  opacity: 0;
}

.h1_st2 {
  opacity: 0;
}

.anima_outline #h1_tracce * {
  animation: anima_h1_tracce 5s normal forwards;
}
@keyframes anima_h1_tracce {
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.anima_outline #h1_cerchi_pieni_sx circle,
.anima_outline #h1_cerchi_pieni_sx ellipse {
  animation: h1_cerchi_pieni_sx 5s normal forwards;
}
@keyframes h1_cerchi_pieni_sx {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.anima_outline #h1_cerchi_pieni_dx circle,
.anima_outline #h1_cerchi_pieni_dx ellipse {
  animation: h1_cerchi_pieni_dx 5s normal forwards;
}
@keyframes h1_cerchi_pieni_dx {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes header_animazione_1 {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes header_animazione_2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-180deg) scale(1.2) translate(10%, -40%);
  }
}

.gradient {
  --size: 250px;
  --speed: 6s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(hsl(158, 82, 57, 85%), hsl(252, 82, 57));
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.header-animazione-1 {
  --speed: 15s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  animation: header_animazione_1 var(--speed) var(--easing) alternate infinite;
}

.header-animazione-2 {
  --speed: 19s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  animation: header_animazione_2 var(--speed) var(--easing) alternate infinite;
}

.header-animazione-3 {
  --speed: 17s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  animation: header_animazione_1 var(--speed) var(--easing) alternate infinite;
}

header {
  background-image: none;
}

@media only screen and (max-width: 480px) {
  #header-titolazione svg {
    width: 80%;
    margin-top: -10vh;
  }

  header {
    height: calc(100vh - 175px) !important;
  }

  .header-svg {
    position: absolute;
    left: 0;
    top: -25%;
  }

  #header-titolazione {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none !important;
  }

  #header-sfondo-animato {
    width: 125%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    top: 35%;
    overflow: hidden;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
  }
}