#splash {
	width: 100%;
	height: 100svh;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-background);
	transition: opacity 0.3s ease-out;

	display: flex;
	flex-direction: column;
	justify-content: center;
    place-items: center;
    gap: 10rem;
    overflow: hidden;

    background-image: url('../img/splash-bg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    z-index: 200;
}

#splash[data-visible="true"] {
	opacity: 1;
}

#splash[data-visible="false"] {
	opacity: 0;
	user-selct: none;
	pointer-events: none;
}

#splash[data-visible="true"] ~ main {
	display: none;
}

#splash[data-visible="false"] ~ main {
	display: block;
}

#enter-page-button, #splash-logo {
	z-index: 200;
}

#blur {
	position: absolute;
	backdrop-filter: blur(15px);
	width: 100%;
	height: 100vh;
	animation-name: fade-in;
	animation-fill-mode: both;
	animation-duration: 1.5s;
	animation-delay: 0.3s;
	animation-timing-function: ease-out;
}

#splash-logo {
	max-width: 250px;

	animation-name: logo-reveal;
	animation-duration: 3s;
	animation-delay: 2s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

#enter-page-button {
	animation-name: fade-in;
	animation-duration: 2s;
	animation-delay: 3s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
	overflow: hidden;
	position: relative;
}

#enter-page-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
		);
	transform: skewX(-25deg);
	transition: transform 0s linear;
}

#enter-page-button:hover {
	transform: scale(1.1);
}

#enter-page-button:hover::after {
	transform: translateX(400%) skewX(-25deg);
	transition: transform 0.5s ease-out;
}

#splash-guitars {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-53%, -50%);
}

.splash-guitar {
	max-height: 90svh;

	animation-duration: 2.5s;
	animation-delay: 0.6s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);

	-webkit-filter: drop-shadow(0 40px 15px black);
	filter: drop-shadow(0 40px 15px black);
}

#splash-guitar-1, #splash-guitar-2 {
}

#splash-guitar-1 {
	animation-name: guitar-reveal-left;
}

#splash-guitar-2 {
	animation-name: guitar-reveal-right;
}


@keyframes guitar-reveal-left {
	from {
		transform: translateX(-50px) rotate(-3deg);
		scale: 0.9;
		opacity: 0;
	}

	to {
		transform: translateX(0px) rotate(0deg);
		scale: 1;
		opacity: 1;
	}
}

@keyframes guitar-reveal-right {
	from {
		transform: translateX(+50px) rotate(3deg);
		scale: 0.9;
		opacity: 0;
	}

	to {
		transform: translateX(0px) rotate(0deg);
		scale: 1;
		opacity: 1;
	}
}

@keyframes logo-reveal {
	from {
		opacity: 0;
		scale: 1.2;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes fade-in {
	from {opacity: 0}
	to {opacity: 1}
}


@media(max-width: 1400px) {
	#splash-guitars {
		gap: 30rem;
	}

	.splash-guitar {
		max-height: 700px;
	}
}

@media(max-width: 950px) {
	#splash-logo {
		max-width: 170px;
	}

	#splash-guitars {
		gap: 20rem;
	}

	.splash-guitar {
		max-height: 400px;
	}
}

@media(max-width: 600px) {
	#splash-logo, #enter-page-button {
		transform: translateY(-150px);
	}

	#splash-guitars {
		gap: 10rem;
		transform: translate(-50%, 50px);
	}

	.splash-guitar {
		max-height: 250px;
	}
}