/* Background playground */
.music .background_music_note {
	--collisionTransitionDuration : 1s ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	font-size : 50px ;
	
	transition : color var(--collisionTransitionDuration) ease, text-shadow var(--collisionTransitionDuration) ease ;
}
	.music .background_music_note.new_born {
		filter : blur(2px) ;
		
		transition : filter 1s ease ;
		
		animation : music_noteNewBorn 1s ease-in-out forwards ;
	}
		@keyframes music_noteNewBorn {
			from {
				filter : blur(2px) ;
			}
			to {
				filter : blur(0) ;
			}
		}
	.music .background_music_note.collided {
		--collisionTransitionDuration : 0.1s ;
		
		text-shadow : 0px 0px 5px ;
	}
	.music .background_music_note.dying {
		filter : blur(3px) ;
		opacity : 0 ;
		
		transition : filter 1s ease, opacity 1s ease, transform 1s ease ;
	}


/* Hero */
.music .hero {
	--heroAnimationDelay : 0s ;
	
	font-family : Garamond, serif ;
}

.music .hero_header {
	--heroHeaderZoomMax : 1.5 ;
	
	height : 100px ;
	width : min(100%, 660px) ;
	
	background : rgba(255, 255, 255, 0.9) ;
	border-radius : 20px ;
	box-shadow : 0px 0px 10px rgba(255, 255, 255, 0.9) ;
	
	color : black ;
	
	animation : music_heroHeaderAnimation 5s ease var(--heroAnimationDelay) forwards ;
	
	opacity : 0.5 ;
}
	@keyframes music_heroHeaderAnimation {
		0% {
			opacity : 0.5 ;
		}
		10% {
			opacity : 1 ;
			scale : var(--heroHeaderZoomMax) ;
		}
		80% {
			opacity : 1 ;
			scale : var(--heroHeaderZoomMax) ;
		}
		100% {
			opacity : 1 ;
			scale : 1 ;
			box-shadow : 3px 3px 5px grey, 0px 0px 10px rgba(255, 255, 255, 0.9) ;
		}
	}

.music .hero_music_staff {
	height : 80% ;
	width : 95% ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
}

.music .hero_music_staff_line {
	height : 2px ;
	width : 100% ;
	margin : 4px ;
	
	background : black ;
	
	animation : music_heroMusicStaffLineAnimation 2s ease calc(var(--heroAnimationDelay) + 0s) forwards ;
	
	opacity : 0 ;
}
	.music .hero_music_staff_line:nth-of-type(1) {
		animation-delay : calc(var(--heroAnimationDelay) + 0s) ;
	}
	.music .hero_music_staff_line:nth-of-type(2) {
		animation-delay : calc(var(--heroAnimationDelay) + 0.5s) ;
	}
	.music .hero_music_staff_line:nth-of-type(3) {
		animation-delay : calc(var(--heroAnimationDelay) + 1s) ;
	}
	.music .hero_music_staff_line:nth-of-type(4) {
		animation-delay : calc(var(--heroAnimationDelay) + 1.5s) ;
	}
	.music .hero_music_staff_line:nth-of-type(5) {
		animation-delay : calc(var(--heroAnimationDelay) + 2s) ;
	}

		@keyframes music_heroMusicStaffLineAnimation {
			0% {
				opacity : 0.75 ;
				translate : -100% 0px ;
			}
			100% {
				opacity : 1 ;
				translate : 0px 0px ;
			}
		}

.music .hero_treble_clef {
	position : absolute ;
	top : 5px ;
	left : 20px ;
	
	font-size : 2em ;
	
	animation : music_heroTrebleClefAnimation 2s ease calc(var(--heroAnimationDelay) + 1s) forwards ;
	
	opacity : 0 ;
}
	@keyframes music_heroTrebleClefAnimation {
		0% {
			opacity : 0 ;
			scale : 0.1 ;
			rotate : 0deg ;
		}
		100% {
			opacity : 1 ;
			scale : 1 ;
			rotate : -720deg ;
		}
	}

.music .hero_music_note {
	position : absolute ;
	top : 5px ;
	right : 20px ;
	
	font-size : 2em ;
	
	animation : music_heroMusicNoteAnimation 1s ease calc(var(--heroAnimationDelay) + 3s) forwards ;
	
	opacity : 0 ;
}
	@keyframes music_heroMusicNoteAnimation {
		0% {
			opacity : 0 ;
			translate : 0px -10px ;
		}
		100% {
			opacity : 1 ;
			translate : 0px 0px ;
		}
	}

.music .hero_title {
	position : absolute ;
	
	font-size : 2.5em ;
	font-weight : bold ;
	letter-spacing : 1px ;
	
	color : black ;
	
	text-shadow : 2px 2px 5px grey, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white ;
	
	opacity : 0 ;
	visibility : hidden ;
}
	.music .hero_title.show {
		opacity : 1 ;
		visibility : visible ;
	}

.music .hero_title_syllable {
	--index : 0 ;
	
	opacity : 0 ;
	
	animation : music_heroTitleSyllableAnimation 1s ease calc(var(--heroAnimationDelay) + 2.5s + (0.15s * var(--index))) forwards ;
}
	@keyframes music_heroTitleSyllableAnimation {
		0% {
			opacity : 0 ;
			scale : 0.1 ;
			filter : blur(5px) ;
		}
		10% {
			opacity : 1 ;
			color : white ;
			letter-spacing : 5px ;
			text-shadow : 0px 0px 20px black ;
			filter : blur(0px) ;
			scale : 1.25 ;
		}
		100% {
			opacity : 1 ;
			color : black ;
			letter-spacing : 1px ;
			scale : 1 ;
		}
	}

.music .hero_description {
	--heroDescriptionAnimationDelay : 4s ;
	
	--unitAnimationDuration : 1s ;
	--unitAnimationDelayBase : 0.5s ;
	--unitAnimationDelayMultiplier : 0.15s ;
	
	background : rgba(255, 255, 255, 0.9) ;
	border-radius : 10px ;
	
	color : black ;
}

.music .hero_description_syllable_container {
	--index : 0 ;
	
	position : relative ;
}

.music .hero_description_syllable {
	--translationRange : 5px ;
	
	opacity : 0 ;
	filter : blur(5px) ;
	translate : var(--translationRange) calc(var(--translationRange) * -1) ;
}
	.music .hero_description_syllable_container.show .hero_description_syllable {
		animation : music_heroDescriptionSyllableAnimation var(--unitAnimationDuration) ease calc(var(--unitAnimationDelayBase) + (var(--unitAnimationDelayMultiplier) * var(--index))) forwards ;
	}
		@keyframes music_heroDescriptionSyllableAnimation {
			0% {
				
			}
			100% {
				opacity : 1 ;
				filter : blur(0px) ;
				translate : 0px 0px ;
			}
		}

.music .hero_description_syllable_note {
	--floatingRange : 5px ;
	
	position : absolute ;
	top : 50% ;
	left : 50% ;
	translate : -50% -50% ;
	
	font-size : 1.75em ;
}
	@keyframes music_heroDescriptionSyllableNoteAnimation {
		0% {
			translate : calc(-50% + 0px) calc(-50% + 0px) ;
		}
		25% {
			translate : calc(-50% + 0px) calc(-50% - var(--floatingRange)) ;
		}
		50% {
			translate : calc(-50% + 0px) calc(-50% + 0px) ;
		}
		75% {
			translate : calc(-50% + 0px) calc(-50% + var(--floatingRange)) ;
		}
		100% {
			translate : calc(-50% + 0px) calc(-50% + 0px) ;
		}
	}
	
	.music .hero_description_syllable_container.show .hero_description_syllable_note {
		animation : music_heroDescriptionSyllableNoteAnimation 4s linear calc(-0.4s * var(--index)) infinite,
					music_heroDescriptionSyllableNoteEndAnimation calc(var(--unitAnimationDuration) + 0.5s) ease calc(var(--unitAnimationDelayBase) + (var(--unitAnimationDelayMultiplier) * var(--index))) forwards ;
	}
		@keyframes music_heroDescriptionSyllableNoteEndAnimation {
			0% {
				
			}
			100% {
				opacity : 0 ;
				filter : blur(5px) ;
				scale : 2 ;
			}
		}