/* Alessandro Resch - 2023 - stili per loader */
.loader-div {
	/* display: contents;
	position: absolute;
	top: 100px;
	left: 100px;
	transform: translate(0, -50%); */
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.cont-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #ededed;
}

.loaderA {
	max-width: 15rem;
	width: 100%;
	height: auto;
	stroke-linecap: round;
}
.cerchi {
	fill: none;
	stroke-width: 3.5;
	animation-name: preloader;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	transform-origin: 170px 170px;
	will-change: transform;
	
	&:nth-of-type(1) {
		stroke-dasharray: 550px;
	}

	&:nth-of-type(2) {
		stroke-dasharray: 500px;
	}

	&:nth-of-type(3) {
		stroke-dasharray: 450px;
	}

	&:nth-of-type(4) {
		stroke-dasharray: 300px;
	}

	@for $i from 1 through 4 {
		&:nth-of-type(#{$i}) {
			animation-delay: -#{$i * 0.15}s;
		}
	}
}

@keyframes preloader {
	50% {
		transform: rotate(120deg);
	}
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.lds-hourglass {
  display: inline-block;
  background: gray;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

.loader3 {
  width:50px;
  height:50px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,#766DF4);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

/* loader 5 */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
/* --- */

/* loader #6 */
.loader6 {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader6:before,
        .loader6:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader6:after {
          color: #FF3D00;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   
/* fine #6 */

/* loader 7 */
.loader7 {
  width: 90px;
  height: 14px;
  box-shadow: 0 3px 0 #fff;
  position: relative;
  clip-path: inset(-40px 0 -5px)
}
.loader7:before {
  content: "";
  position: absolute;
  inset: auto calc(50% - 17px) 0;
  height: 50px;
  --g:no-repeat linear-gradient(#ccc 0 0);
  background: var(--g),var(--g),var(--g),var(--g);
  background-size: 16px 14px;
  animation:
    l7-1 2s infinite linear,
    l7-2 2s infinite linear;
}
@keyframes l7-1 {
  0%,
  100%  {background-position: 0 -50px,100% -50px}
  17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
  35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
  52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
  70%,
  98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
}
@keyframes l7-2 {
  0%,70% {transform:translate(0)}
  100%  {transform:translate(200%)}
}
/* fine #7 */

/* Libro animato */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	/*height: 100vh;*/
	background-color: #f4f1e1; /* Colore simile a pergamena */
}

/* #8 Libro */
.book {
	position: relative;
	width: 120px;
	height: 160px;
	background-color: #6b4226; /* Colore marrone del libro */
	border: 2px solid #5c3b1e;
	border-radius: 5px;
	perspective: 800px;
	animation: shake 3s infinite ease-in-out;
}

/* Copertina frontale */
.book .front-cover {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #9b6a46;
	border-radius: 5px;
	transform-origin: left;
	transform: rotateY(0deg);
	animation: openBook 3s infinite ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Testo sulla copertina */
.front-cover .title {
	font-family: 'Georgia', serif;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	animation: fadeInTitle 3s infinite ease-in-out;
}

/* Mappa all'interno */
.ldr-map {
	position: absolute;
	top: 20px;
	left: 10px;
	right: 10px;
	bottom: 20px;
	background: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Blank_Map_World_old_style.svg') center/contain no-repeat;
	opacity: 0;
	animation: fadeIn 3s infinite ease-in-out;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* Testo sulla mappa */
.ldr-map .subtitle {
	font-family: 'Georgia', serif;
	font-size: 12px;
	color: #000;
	background: rgba(255, 255, 255, 0.8);
	padding: 2px 8px;
	border-radius: 3px;
	animation: fadeInSubtitle 3s infinite ease-in-out;
}

/* Animazione apertura libro */
@keyframes openBook {
	0%, 100% {
	transform: rotateY(0deg);
	}
	50% {
	transform: rotateY(-150deg);
	}
}

/* Animazione comparsa del testo sulla copertina */
@keyframes fadeInTitle {
	0%, 50% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}

/* Animazione mappa */
@keyframes fadeIn {
	0%, 25% {
	opacity: 0;
	}
	50%, 75% {
	opacity: 1;
	}
	100% {
	opacity: 0;
	}
}

/* Animazione sottotitolo sulla mappa */
@keyframes fadeInSubtitle {
	0%, 50% {
	opacity: 0;
	}
	75%, 100% {
	opacity: 1;
	}
}

/* Animazione lieve del libro */
@keyframes shake {
	0%, 100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(2deg);
	}
	75% {
		transform: rotate(-2deg);
	}
}
/* #8 fine */

/* #9 lente */
/* Base Styles for the animation 
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
}
*/
.ldr-lente {
    position: relative;
    width: 200px;
    height: 200px;
}

/* Documents */
.ldr-lente-doc {
    position: absolute;
    width: 60px;
    height: 80px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    animation: float-docs 6s infinite ease-in-out;
}

.ldr-lente-doc:nth-child(1) {
    top: 20px;
    left: 20px;
    animation-delay: 0s;
}

.ldr-lente-doc:nth-child(2) {
    top: 50px;
    left: 120px;
    animation-delay: 1s;
}

.ldr-lente-doc:nth-child(3) {
    top: 130px;
    left: 60px;
    animation-delay: 2s;
}

@keyframes float-docs {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Magnifying Glass */
.magnifying-glass {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 6px solid #333;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    animation: move-glass 4s infinite;
}

.magnifying-glass::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 60px;
    background: #333;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    transform-origin: top;
}

@keyframes move-glass {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 100px;
    }
    50% {
        top: 100px;
        left: 100px;
    }
    75% {
        top: 100px;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
    }
}
/* #9 fine */

/* #10 ldr-mappa - mappa antica ch si srotola
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #3b2f2f;
} */
.ldr-mappa {
	overflow: hidden;
	width: 0;
	height: 300px;
	background: url('https://farnese.org/wp-content/plugins/EF/images/mappa-italia-2-loader.jpg') center/cover;
	border-top: 10px solid #8b5a2b;
	border-bottom: 10px solid #8b5a2b;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	border-radius: 50px;
	animation: mapAnimation 4s ease-in-out infinite alternate;
}
@keyframes mapAnimation {
	0% {
		width: 0;
		border-radius: 50px;
	}
	100% {
		width: 400px;
		border-radius: 0;
	}
}
/* #10 fine */

/* #11 lbr-libro - libro antico */
.ldr-libro {
	width: 100%;
	height: 100%;
	background: url('https://farnese.org/wp-content/plugins/EF/images/frontespizio_ms.jpg') center/cover;
	border: 5px solid #8b5a2b;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	position: relative;
	transform-origin: center center;
	animation: bookAnimation 4s ease-in-out infinite;
}
@keyframes bookAnimation {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}
/* #11 fine */