/* Stile della scrollbar per WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;  
    border-radius: 10px; 
}

.bg-curiosities {
    background-image: url('../img/skull.png');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    padding: 40px 0; /* Aggiungi padding per dare spazio alla sezione */
}

/* Track (sfondo della scrollbar) */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* Thumb (parte mobile della scrollbar) */
::-webkit-scrollbar-thumb {
    background-color: white; 
    border-radius: 50px; 
    border: 2px solid rgba(255, 255, 255, 0.3); 
    height: 15px; 
    min-height: 15px; 
}

/* Hover sul thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8); 
}

@keyframes fadeInMobile {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@layer utilities {
    .animate-fadeInMobile {
        animation: fadeInMobile 5s ease-in-out;
    }
}


/* Per Firefox */
html {
    scrollbar-color: white transparent;
    scrollbar-width: thin; 
}

::-webkit-scrollbar-thumb {
    transition: background-color 0.3s ease-in-out;
}
.neuro{
	border-radius: 50px;
background: #1b1c1d;
box-shadow:  -20px 20px 60px #171819,
             20px -20px 60px #1f2021;
}

::selection{
	color:#1B1C1D;
	background-color :#F1FBFF;

}

.animato{
	opacity : 0;
	filter : blur(5px);
	transform : translateX(-100%);
	transition : all 1s;
}

.vedi{
	opacity : 1;
	filter : blur(0);
	transform : translateX(0);
}

.playlist{
	
}

.play:nth-child(2){
	transition-delay : 200ms
}
.play:nth-child(3){
	transition-delay : 400ms
}
.play:nth-child(4){
	transition-delay : 600ms
}


*{
	font-family: 'Montserrat', sans-serif;
}

.custom-opacity-transition {
	transition: background-color 0.5s ease, opacity 0.5s ease;
  }
  
  iframe {
	overflow: hidden;
  }
  
  a.wave-link {
	cursor: pointer;
	font-size: 18px;
	position: relative;
	white-space: nowrap;
	background: transparent;
	border: 0;
	overflow: hidden;
	  padding: 7px 0;
  }
  a.wave-link:before {
	content: '';
	background: #FFF;
	position: absolute;
	width: 100%;
	height: 1px;
	top: 100%;
	left: 0;
	pointer-events: none;
  }
  .link__graphic {
	  position: absolute;
	  top: 0;
	  left: 0;
	  pointer-events: none;
	  fill: none;
	  stroke: #FFF;
	  stroke-width: 1px;
  }
  .link__graphic--slide {
	  top: -3px;
	  stroke-width: 2px;
	  transition: transform 0.7s;
	  transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
  }
  a.wave-link:hover .link__graphic--slide {
	transform: translate3d(-66.6%, 0, 0);
  }

#wrapper {
	text-align: center;
}
.sub {
	color: #ff4a54;
	letter-spacing: 1em;
}
.glitch {
	position: relative;
	color: #fff;
	font-size: 4em;
	letter-spacing: 0.5em;
	animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: 2px;
	text-shadow: -2px 0 #ff00c1;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: -2px;
	text-shadow: -2px 0 #ff00c1, 2px 2px #ff00c1;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
	0% {
		clip: rect(21px, 9999px, 97px, 0);
		transform: skew(0.44deg);
   }
	5% {
		clip: rect(30px, 9999px, 77px, 0);
		transform: skew(0.96deg);
   }
	10% {
		clip: rect(23px, 9999px, 62px, 0);
		transform: skew(0.83deg);
   }
	15% {
		clip: rect(75px, 9999px, 52px, 0);
		transform: skew(0.47deg);
   }
	20% {
		clip: rect(90px, 9999px, 11px, 0);
		transform: skew(0.68deg);
   }
	25% {
		clip: rect(76px, 9999px, 31px, 0);
		transform: skew(0.22deg);
   }
	30% {
		clip: rect(36px, 9999px, 64px, 0);
		transform: skew(0.23deg);
   }
	35% {
		clip: rect(60px, 9999px, 65px, 0);
		transform: skew(0.44deg);
   }
	40% {
		clip: rect(54px, 9999px, 59px, 0);
		transform: skew(0.28deg);
   }
	45% {
		clip: rect(36px, 9999px, 40px, 0);
		transform: skew(0.7deg);
   }
	50% {
		clip: rect(68px, 9999px, 14px, 0);
		transform: skew(0.13deg);
   }
	55% {
		clip: rect(96px, 9999px, 22px, 0);
		transform: skew(0.51deg);
   }
	60% {
		clip: rect(31px, 9999px, 18px, 0);
		transform: skew(0.97deg);
   }
	65% {
		clip: rect(26px, 9999px, 61px, 0);
		transform: skew(0.97deg);
   }
	70% {
		clip: rect(90px, 9999px, 94px, 0);
		transform: skew(0.46deg);
   }
	75% {
		clip: rect(53px, 9999px, 1px, 0);
		transform: skew(0.16deg);
   }
	80% {
		clip: rect(51px, 9999px, 96px, 0);
		transform: skew(0.51deg);
   }
	85% {
		clip: rect(7px, 9999px, 31px, 0);
		transform: skew(0.7deg);
   }
	90% {
		clip: rect(45px, 9999px, 23px, 0);
		transform: skew(0.87deg);
   }
	95% {
		clip: rect(32px, 9999px, 64px, 0);
		transform: skew(0.42deg);
   }
}
@keyframes glitch-anim2 {
	0% {
		clip: rect(58px, 9999px, 76px, 0);
		transform: skew(0.4deg);
   }
	5% {
		clip: rect(75px, 9999px, 86px, 0);
		transform: skew(0.23deg);
   }
	10% {
		clip: rect(71px, 9999px, 84px, 0);
		transform: skew(0.37deg);
   }
	15% {
		clip: rect(82px, 9999px, 11px, 0);
		transform: skew(0.49deg);
   }
	20% {
		clip: rect(67px, 9999px, 93px, 0);
		transform: skew(0.54deg);
   }
	25% {
		clip: rect(95px, 9999px, 38px, 0);
		transform: skew(0.92deg);
   }
	30% {
		clip: rect(1px, 9999px, 70px, 0);
		transform: skew(0.63deg);
   }
	35% {
		clip: rect(79px, 9999px, 7px, 0);
		transform: skew(1deg);
   }
	40% {
		clip: rect(91px, 9999px, 23px, 0);
		transform: skew(0.05deg);
   }
	45% {
		clip: rect(55px, 9999px, 91px, 0);
		transform: skew(0.8deg);
   }
	50% {
		clip: rect(68px, 9999px, 26px, 0);
		transform: skew(0.3deg);
   }
	55% {
		clip: rect(18px, 9999px, 67px, 0);
		transform: skew(0.43deg);
   }
	60% {
		clip: rect(81px, 9999px, 95px, 0);
		transform: skew(0.56deg);
   }
	65% {
		clip: rect(80px, 9999px, 7px, 0);
		transform: skew(0.21deg);
   }
	70% {
		clip: rect(46px, 9999px, 77px, 0);
		transform: skew(0.89deg);
   }
	75% {
		clip: rect(33px, 9999px, 75px, 0);
		transform: skew(0.1deg);
   }
	80% {
		clip: rect(97px, 9999px, 55px, 0);
		transform: skew(0.31deg);
   }
	85% {
		clip: rect(87px, 9999px, 95px, 0);
		transform: skew(0.76deg);
   }
	90% {
		clip: rect(67px, 9999px, 25px, 0);
		transform: skew(0.77deg);
   }
	95% {
		clip: rect(79px, 9999px, 37px, 0);
		transform: skew(0.89deg);
   }
}
@keyframes glitch-skew {
	0% {
		transform: skew(0deg);
   }
	10% {
		transform: skew(5deg);
   }
	20% {
		transform: skew(3deg);
   }
	30% {
		transform: skew(-2deg);
   }
	40% {
		transform: skew(0deg);
   }
	50% {
		transform: skew(5deg);
   }
	60% {
		transform: skew(5deg);
   }
	70% {
		transform: skew(2deg);
   }
	80% {
		transform: skew(0deg);
   }
	90% {
		transform: skew(2deg);
   }
}

.loader-container {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .loader {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
	0% {
	  transform: rotate(0deg);
	  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
	}
  
	50% {
	  transform: rotate(180deg);
	  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
	}
  
	100% {
	  transform: rotate(360deg);
	  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
	}
  }

/* Stile del blob */
/* Stile del blob */
.cursor-blob {
	position: fixed;
	width: 100px;
	height: 100px;
	background-color: #F1FBFF; /* Colore grigio */
	mix-blend-mode: difference; /* Inversione dei colori */
	pointer-events: none; /* L'elemento non interagisce con il cursore */
	border-radius: 50%;
	z-index: 9999; /* Assicura che il blob sia sopra a tutto il resto */
	animation: blobAnimation 5s linear infinite; /* Animazione più lenta */
	animation-delay: 0.2s; /* Leggermente più lento del cursore */
	top:300px;
	left:50%;
  }
  
  
  /* Animazione del blob */
  @keyframes blobAnimation {
	0% {
	  transform: translate(-50%, -50%) scale(1);
	  border-radius: 50%;
	}
	25% {
	  transform: translate(-49%, -51%) scale(1.1);
	  border-radius: 52%;
	}
	50% {
	  transform: translate(-50%, -50%) scale(1);
	  border-radius: 50%;
	}
	75% {
	  transform: translate(-51%, -49%) scale(1.1);
	  border-radius: 52%;
	}
	100% {
	  transform: translate(-50%, -50%) scale(1);
	  border-radius: 50%;
	}
  }
  
  
  
/*
#1B1C1D
#354dc6
#F1FBFF
#223340
*/