@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
	font-size: 1rem;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}

body {
	margin: 0;
}
.banner {
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 0;
	background-color: #878787;
	transition: all ease-in-out 0.5s;
}

.banner.banner:has(.product:hover) {
	background-color: #d59780;
}

.banner .product {
	width: 280px;
	aspect-ratio: 725 / 1503;
	position: absolute;
	bottom: 170px;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
	transition: 0.7s;
	--left: 0px;
	display: flex;
}

.banner .product .soda {
	background: var(--url) var(--left) 0, url(assets/mockup.png);
	background-size: auto 100%;
	width: 280px;
	aspect-ratio: 725 / 1503;
	background-blend-mode: multiply;
	mask-image: url(assets/mockup.png);
	mask-size: auto 100%;
	transition: 0.7s;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.banner .product:hover {
	--left: -885px;
	transform: translate(-50%, -120px);
}

.banner .rock {
	position: absolute;
	inset: 0 0 0 0;
	pointer-events: none;
}
.banner .rock img {
	position: absolute;
	transition: 0.7s;
}
.banner .rock img:nth-child(1) {
	height: 600px;
	left: 50%;
	transform: translateX(-50%);
	bottom: -280px;
}
.banner:has(.product:hover) .rock img:nth-child(1) {
	transform: translateX(-50%) translateY(20px);
}
.banner .rock img:nth-child(2) {
	height: 900px;
	left: 38%;
	transform: translateX(-50%) scaleX(-1);
	bottom: -90px;
	z-index: -1;
}
.banner:has(.product:hover) .rock img:nth-child(2) {
	transform: translateX(-100%) translateY(30px) scaleX(-1);
}
.banner .rock img:nth-child(3) {
	height: 900px;
	right: 38%;
	transform: translateX(50%);
	bottom: -90px;
	z-index: -1;
}
.banner:has(.product:hover) .rock img:nth-child(3) {
	transform: translateX(100%) translateY(30px);
}

.banner .product .soda:nth-child(2) {
	opacity: 0;
}
.banner .product:hover .soda:nth-child(2) {
	opacity: 1;
}

.about {
	border: 1px solid;
	width: max-content;
	padding: 1rem;
	position: fixed;
	right: 1rem;
	top: 1rem;
	max-width: 80%;
}

h1 {
	font-size: 1.5rem;
}
.mobile_show {
	display: none;
}
@media only screen and (max-width: 1200px) {
	.mobile_show {
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		background-color: black;
		padding: 1rem;
		z-index: 9;
		width: max-content;
	}
	.banner .product {
		width: 150px;
	}
	.banner .product .soda {
		width: 150px;
	}
	.banner .rock img:nth-child(1) {
		height: 410px;
		bottom: -130px;
	}
	.banner .rock img:nth-child(3),
	.banner .rock img:nth-child(2) {
		height: 600px;
		bottom: -30px;
	}
	.banner .rock img:nth-child(2) {
		left: 40%;
	}
	.banner .rock img:nth-child(3) {
		right: 40%;
	}
}

@media only screen and (max-width: 750px) {
	.banner .product {
		width: 80px;
	}
	.banner .product .soda {
		width: 80px;
	}
	.banner .rock img:nth-child(1) {
		height: 310px;
		bottom: -60px;
	}
	.banner .rock img:nth-child(3),
	.banner .rock img:nth-child(2) {
		height: 500px;
		bottom: -50px;
	}
	.banner .rock img:nth-child(2) {
		left: 25%;
	}
	.banner .rock img:nth-child(3) {
		right: 25%;
	}
	.banner:has(.product:hover) .rock img:nth-child(2) {
		transform: translateX(-80%) translateY(30px) scaleX(-1);
	}
	.banner:has(.product:hover) .rock img:nth-child(3) {
		transform: translateX(80%) translateY(30px);
	}
}