@font-face {
	font-family: 'Galileo';
	src: url('/wp-content/themes/hello-elementor/assets/fonts/Galileo Font.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kuba';
	src: url('/wp-content/themes/hello-elementor/assets/fonts/KubaReczny_1.2.otf')
			format('opentype'),
		url('/wp-content/themes/hello-elementor/assets/fonts/KubaReczny_1.2.ttf')
			format('truetype');
	font-weight: normal;
	font-style: normal;
}

//* Variables
$cTxtRed: #cc0000;
$cTxtWhite: #fff;

$fKuba: 'Kuba', sans-serif;
$fGalileo: 'Galileo', sans-serif;

//* Global styles

#site-header {
	display: none;
}
#site-footer {
	display: none;
}

html {
	margin: 0 !important;
}

body {
	&.page-id-9 {
		background: black;

		#content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;

			.page-content {
				width: 100%;
				max-width: 800px;
				height: 465px;
			}
		}
	}
	&.page-id-846 {
		background: black;

		#content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;

			.page-content {
				width: 100%;
				max-width: 800px;
				height: 465px;
			}
		}
	}
}

#frame-box {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	background: #000;
	overflow: hidden;

	#frame-box-header {
		position: relative;
		height: 121px;
		min-height: 121px;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 41px;
			background-image: url('/wp-content/uploads/2024/04/header-lines.png');
		}

		.logo {
			display: inline-block;
			padding: 30px 0 0 20px;

			img {
				max-width: 250px;
			}
		}

		.song-handler-anim {
			position: absolute;
			top: 0;
			right: 10px;
			cursor: pointer;

			.song-volume {
				position: absolute;
				top: 20px;
				left: 29px;
				z-index: 1;
				filter: brightness(1.1);
				visibility: hidden;
			}
			.song-hand {
				position: absolute;
				top: 49px;
				left: 48px;
				z-index: 1;
				transition: all 500ms ease-in-out;
			}
			.song-line-1 {
				visibility: hidden;
				position: absolute;
				top: 66px;
				left: 35px;
				z-index: 1;
			}

			&.active {
				.song-hand {
					transform: rotate(-20deg);
					top: 54px;
					left: 46px;
				}
				.song-volume {
					visibility: visible;
					animation: song-volume 500ms infinite;
				}
				.song-line-1 {
					visibility: visible;
					animation: song-line-amin 500ms infinite;
				}
			}
		}

		nav {
			padding: 15px 0 0 20px;

			ul {
				position: relative;
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 40px;

				li {
					font-family: $fKuba;
					line-height: 1;
					color: #999999;
					font-size: 30px;
					font-weight: 300;
					margin: 0;
					cursor: pointer;
				}
			}
		}
	}

	#intro {
		position: absolute;
		inset: 0;
		z-index: 999;
		background: #000;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 15px;

		img {
			width: 100%;
			max-width: fit-content;
		}

		p {
			font-family: $fKuba;
			line-height: 1;
			color: #999999;
			font-size: 30px;
			font-weight: 300;
			margin: 0;
			cursor: pointer;
		}
	}

	#plyty {
		#frame-box-content {
			position: relative;
			height: 239px;
			width: fit-content;

			.frame-box-content-bg {
				position: absolute;
				inset: 0;
				// opacity: 0.1;

				img {
					width: fit-content;
					max-width: unset;
					height: 100%;
				}
			}

			.frame-box-content-data {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
				height: 239px;
				z-index: 1;

				// background-image: url('/wp-content/uploads/2024/04/page-bg.png');
				// background-position: center;
				// background-repeat: no-repeat;
				// background-size: cover;

				h2 {
					font-family: $fGalileo;
					line-height: 1;
					color: $cTxtRed;
					font-size: 20px;
					text-transform: uppercase;
					margin: 0 0 5px 0;
				}
				h3 {
					font-family: $fKuba;
					line-height: 1;
					color: $cTxtRed;
					font-size: 16px;
					font-weight: 700;
					margin: 0 0 8px 0;
				}
				p {
					color: $cTxtWhite;
					line-height: 1;
					font-size: 12px;
					font-family: Arial, sans-serif;
					margin-bottom: 10px;
				}

				.actions {
					list-style: none;
					margin: 0;
					padding: 0;

					li {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 5px;
						width: fit-content;

						color: $cTxtWhite;
						font-size: 12px;
						font-family: Arial, sans-serif;

						img {
							width: 100%;
							max-width: fit-content;
							height: fit-content;
						}
					}

					.song {
						cursor: pointer;
					}
					.text {
						position: relative;
						cursor: pointer;

						a {
							color: $cTxtWhite;
							text-decoration: none;
						}

						.text-data {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -80%);
							width: 340px;
							height: 200px;
							overflow: auto;
							z-index: 10;
							background: red;
							padding: 20px;

							opacity: 0;
							visibility: hidden;
							transition: all 250ms ease-in;

							* {
								position: relative;
								z-index: 1;
							}

							&.active {
								opacity: 1;
								visibility: visible;
							}
						}
					}
					.buy {
						a {
							color: $cTxtWhite;
							text-decoration: none;
						}
					}
				}

				.img-box {
					position: absolute;

					&:hover {
						.album {
							transform: rotate(7deg);
						}
						.album-record {
							left: 97%;
							top: 47%;
							animation: rotate 1s infinite linear;
						}
					}

					.album {
						position: relative;
						z-index: 1;
						transition: 200ms linear;
					}
					.album-record {
						position: absolute;
						left: 81%;
						top: 44%;
						transition: left 200ms linear, top 200ms linear;
						transform: translate(-50%, -50%);
					}
				}

				.box {
					position: relative;
					width: 330px;
					min-width: 330px;

					&-1 {
						padding-left: 57px;
						padding-top: 32px;

						p {
							width: 100%;
							max-width: 220px;
						}

						.img-box {
							top: -26px;
							right: 45px;
						}
					}

					&-2 {
						padding-bottom: 34px;
						padding-left: 12px;

						p {
							max-width: 265px;
						}

						.img-box {
							bottom: 0;
							right: 60px;

							&:hover {
								.album-record {
									left: 92%;
									top: 54%;
								}
							}
							.album-record {
								position: absolute;
								top: 49%;
							}
						}
					}

					&-3 {
						padding-left: 20px;
						padding-top: 50px;
						min-width: 300px;

						p {
							width: 100%;
							max-width: 270px;
						}

						.img-box {
							top: 0px;
							right: 45px;

							&:hover {
								.album-record {
									top: 53%;
								}
							}
							.album-record {
								top: 47%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-4 {
						padding-left: 60px;
						padding-top: 100px;
						min-width: 310px;

						p {
							width: 100%;
						}

						.img-box {
							top: 0px;
							right: 50%;

							&:hover {
								.album-record {
									left: 92%;
									top: 59%;
								}
							}
							.album-record {
								position: absolute;
								top: 54%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							gap: 10px;
						}
					}

					&-5 {
						padding-bottom: 100px;
						padding-left: 30px;
						width: 270px;
						min-width: 270px;

						p {
							max-width: 265px;
						}

						.img-box {
							bottom: 0;
							right: 35%;

							&:hover {
								.album-record {
									left: 92%;
									top: 59%;
								}
							}
							.album-record {
								position: absolute;
								top: 54%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							gap: 10px;
						}
					}

					&-6 {
						padding-left: 50px;
						padding-top: 60px;
						width: 470px;
						min-width: 470px;

						p {
							width: 100%;
						}

						.img-box {
							top: 0px;
							right: 45px;

							&:hover {
								.album-record {
									top: 53%;
								}
							}
							.album-record {
								top: 47%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-7 {
						padding-left: 130px;
						padding-top: 120px;
						min-width: 490px;

						p {
							width: 100%;
						}

						.img-box {
							top: 15px;
							right: 35%;

							&:hover {
								.album-record {
									top: 53%;
								}
							}
						}
					}

					&-8 {
						padding-bottom: 40px;
						padding-left: 30px;
						width: 370px;
						min-width: 370px;

						.img-box {
							bottom: -10px;
							right: 30px;
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-9 {
						padding-left: 40px;
						padding-top: 90px;
						min-width: 350px;
						width: 350px;

						.img-box {
							top: -10px;
							right: 20px;

							&:hover {
								.album-record {
									top: 59%;
								}
							}
							.album-record {
								top: 54%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-10 {
						padding-left: 100px;
						padding-top: 85px;
						min-width: 480px;

						.img-box {
							top: -15px;
							right: 60%;

							&:hover {
								.album-record {
									top: 58%;
								}
							}

							.album-record {
								top: 51%;
							}
						}
					}

					&-11 {
						padding-left: 0;
						padding-bottom: 90px;
						min-width: 480px;

						.img-box {
							top: 0px;
							left: -130px;

							&:hover {
								.album-record {
									top: 58%;
								}
							}

							.album-record {
								top: 51%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-12 {
						margin-left: -180px;
						padding-top: 115px;
						min-width: 480px;

						.img-box {
							top: 120px;
							left: -130px;

							&:hover {
								.album-record {
									top: 58%;
								}
							}

							.album-record {
								top: 51%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-13 {
						margin-left: -150px;
						padding-bottom: 70px;
						min-width: 300px;
						width: 300px;

						.img-box {
							top: 0px;
							left: -130px;

							&:hover {
								.album-record {
									top: 41%;
									left: 95%;
								}
							}

							.album-record {
								top: 40%;
							}
						}

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}
					}

					&-14 {
						margin-left: -30px;
						padding-top: 160px;
						min-width: 350px;
						width: 350px;

						.img-box {
							top: 50px;
							right: 60%;
						}
					}

					&-15 {
						margin-left: -150px;
						padding-bottom: 120px;
						min-width: 320px;
						width: 320px;

						.img-box {
							top: 95px;
							right: 50%;
						}
					}

					&-16 {
						margin-left: -90px;
						padding-top: 110px;
						min-width: 320px;
						width: 320px;

						.img-box {
							top: 5px;
							right: 45%;
						}
					}

					&-17 {
						margin-left: -80px;
						padding-bottom: 100px;
						min-width: 340px;
						width: 340px;

						.actions {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}

						.img-box {
							top: 125px;
							right: 50%;
						}
					}

					&-18 {
						padding-left: 10px;
						padding-top: 100px;
						min-width: 240px;
						width: 240px;

						.img-box {
							top: 0px;
							right: 35%;
						}
					}

					&-19 {
						margin-left: 0;
						padding-bottom: 100px;
						min-width: 310px;
						width: 310px;

						.img-box {
							top: 105px;
							right: 50%;

							&:hover {
								.album-record {
									top: 58%;
								}
							}

							.album-record {
								top: 51%;
							}
						}
					}

					&-20 {
						margin-left: -30px;
						padding-top: 88px;
						min-width: 310px;
						width: 310px;

						.actions {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 20px;
						}

						.img-box {
							&-1 {
								top: -13px;
								right: 55%;
							}
							&-2 {
								top: -13px;
								right: 30%;
							}

							&:hover {
								.album-record {
									top: 59%;
								}
							}

							.album-record {
								top: 54%;
							}
						}
					}

					&-21 {
						padding-left: 20px;
						padding-top: 110px;
						min-width: 320px;
						width: 320px;

						.actions {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}

						.img-box {
							top: 35px;
							right: 40%;
						}
					}

					&-22 {
						margin-left: -40px;
						padding-bottom: 70px;
						min-width: 240px;
						width: 240px;

						.img-box {
							top: 90px;
							right: 28%;
						}
					}

					&-23 {
						padding-left: 10px;
						padding-top: 110px;
						min-width: 310px;
						width: 310px;

						.actions {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;
							flex-wrap: wrap;
							row-gap: 10px;
							column-gap: 40px;
						}

						.img-box {
							top: 5px;
							right: 45%;

							&:hover {
								.album-record {
									top: 41%;
								}
							}

							.album-record {
								top: 40%;
							}
						}
					}

					&-24 {
						padding-bottom: 90px;
						min-width: 320px;
						width: 320px;

						.img-box {
							top: 100px;
							right: 45%;

							&:hover {
								.album-record {
									top: 52%;
								}
							}

							.album-record {
								top: 48%;
							}
						}
					}
				}
			}
		}

		#frame-box-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 106px;
			background: #000;

			img.img-scroll {
				height: 100%;
				width: unset;
				max-width: fit-content;
			}

			#drag-handle {
				position: absolute;
				z-index: 1;
				bottom: 0;
				left: 0;
				height: 83px;

				.hand {
					height: 83px;
				}

				.hand-finder-part-1 {
					position: absolute;
					top: -4px;
					width: 11px;
					left: 0px;
					// animation: finger-1 500ms infinite;
				}

				.hand-finder-part-2 {
					position: absolute;
					top: -15px;
					width: 9px;
					left: 1px;
					// animation: finger-2 500ms infinite;
				}
			}

			.piano-keys {
				position: relative;
				display: flex;
				flex-direction: row;
				gap: 1px;
				height: 66px;

				background: linear-gradient(
					0deg,
					rgba(0, 0, 0, 1) 50%,
					rgba(255, 255, 255, 1) 150%
				);
				ul {
					width: 362px;
					inset: 0;
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					flex-direction: row;
					gap: 2px;
					background-image: url('/wp-content/uploads/2024/04/33.png');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;

					li {
						line-height: 1;
						font-family: Arial;
						font-size: 11px;
						width: 23px;
						text-align: center;
						padding-bottom: 4px;

						&.red {
							color: $cTxtRed;
							font-size: 16px;
							font-weight: 700;
						}

						&.desc {
							position: relative;

							p {
								width: max-content;
								min-width: max-content;
								font-family: $fKuba;
								line-height: 1;
								color: $cTxtRed;
								font-size: 22px;
								font-weight: 400;
								margin: 0;
							}

							.desc-top {
								position: absolute;
								bottom: 0;
								left: 0;

								img {
									position: absolute;
									bottom: -4px;
									left: 1px;
									min-width: 58px;
									min-height: 83px;
								}
								p {
									position: absolute;
									bottom: 64px;
									left: 62px;
								}
							}
							.desc-bottom {
								position: absolute;
								bottom: 0;
								left: 0;

								img {
									position: absolute;
									bottom: -23px;
									left: 0px;
									min-width: 38px;
									min-height: 46px;
								}
								p {
									position: absolute;
									bottom: -34px;
									left: 42px;
								}
							}
						}
					}
				}
			}

			// img {
			// 	z-index: 1;
			// }
		}
	}

	#foto {
		height: 100%;
		display: flex;
		align-items: center;

		ul {
			list-style: none;
			padding: 0;
			margin: 0;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: 30px;

			li {
				width: 100%;
				max-width: calc((100% / 7) - 30px);

				img {
					width: 100%;
					max-width: fit-content;
					aspect-ratio: 1;
					object-fit: cover;
					object-position: top center;
				}
			}
		}
	}
	#book {
		width: fit-content;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		display: none;

		&::before {
			content: '';
			position: fixed;
			background: rgba(0, 0, 0, 0.8);
			width: 100vw;
			height: 100vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			backdrop-filter: blur(3px);
		}

		.book-close {
			position: relative;
			// background: #fff;
			margin: 0 0 0 auto;
			width: fit-content;
			cursor: pointer;
			z-index: 1;

			p {
				padding: 5px 10px;
				margin-bottom: 0;

				font-family: $fGalileo;
				line-height: 1;
				color: $cTxtRed;
				font-size: 20px;
				text-transform: uppercase;
				margin: 0 0 5px 0;
			}
		}

		#flipbook {
			.hard {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@keyframes song-volume {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	51% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes song-line-amin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	51% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}
@keyframes finger-1 {
	0% {
		transform: rotateX(0deg);
		top: -4px;
	}
	50% {
		transform: rotateX(47deg);
		top: -2px;
	}
}
@keyframes finger-2 {
	0% {
		transform: rotateX(0deg);
		top: -15px;
	}
	50% {
		transform: rotateX(69deg);
		top: -8px;
	}
}

.post-739 {
	.page-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;

		#flipbook {
			.hard {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}