html,
body {
	min-height: 100vh;
}

html {
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}

body {
	background-color: #141414;
	color: #f7f4ed;
	font-family: 'Economica';
	/*font-family:'Roboto', Arial;*/
	text-align: center;
	letter-spacing: 3px;
}

a,
a:visited {
	color: #f7f4ed;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

header {
	background-color: #3b3b3b;
	height: 69px;
	box-shadow: 0 20px 20px #0e0e0e;
	position: relative;
	z-index: 2;
}

#nav-releases {
	/* position: absolute; */
	/* left: 1px; */
	/* bottom: -25px; */
	color: #f7f4ed;
	text-transform: uppercase;
	font-size: 43px;
	font-weight: 200;
	letter-spacing: 0px;
	transition: color 0.1s ease-in;
}

#nav-releases:hover {

	color: #f3f6fd;
}

#nav-about {
	/* position: absolute; */
	/* right: 1px; */
	/* bottom: -29px; */
	color: #3b3b3b;
	text-transform: uppercase;
	font-size: 45px;
	font-weight: 200;
	letter-spacing: 3px;
	transition: color 0.1s ease-in;
}

#nav-about:hover {

	color: #f3f6fd;
}


.background {
	position: fixed;
	background-size: cover;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}

.bg2 {
	opacity: 0;
	transition: opacity 2s ease;
}

.container {
	min-height: calc(100vh - 162px);
}

.content-container {
	max-width: 1440px;
	margin: 0 auto;
}

.logo {
	text-align: start;
}

.logo img {
	height: 169px;
	margin-top: -15px;
	margin-left: 14vw;
	transition: transform 0.1s ease-in-out;
	box-shadow: 0px 0px 16px 1px #14141496;
  border-radius: 100px;
}

.logo img:hover {
	transform: scale(1.1);
}

.album-block {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100vh;
	scroll-snap-align: start;
	box-sizing: border-box;
	padding: 0 5vw;
	gap: 4vw;
}

.album-left {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 58%;
	overflow: visible;
	text-align: right;
}

/* --- Vinyl record --- */
.vinyl-wrap {
	position: relative;
	width: 100%;
	overflow: visible;
	margin-left: 10%;
}

.vinyl {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 82%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, #1d1c1c 0 70%, #3b3b3b 50% 75%);
	box-shadow: 4px 3px 22px rgba(0, 0, 0, 0.9), inset 0 0 16px #272626;
	transform: translate(-50%, -50%);
	transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
	z-index: 0;
	will-change: transform;
}

.album-block.is-visible .vinyl {
	transform: translate(-80%, -50%);
	/* animation: vinyl-spin 14s linear 0.85s infinite; */
}

@keyframes vinyl-spin {
	from {
		transform: translate(-80%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-80%, -50%) rotate(360deg);
	}
}

.album-right {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
}

.tape-label {
	background-color: #f5f0e6;
	color: #1a1a1a;
	border: none;
	padding: 6px 44px 10px;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 2px;
	font-family: 'Permanent Marker', cursive;
	display: inline-block;
	transform: rotate(-1.5deg);
	filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.55));
	/* default – overridden by per-variant rules below */
	clip-path: polygon(4% 0%, 1% 18%, 6% 35%, 0% 52%, 5% 68%, 1% 84%, 5% 100%,
			95% 100%, 99% 84%, 94% 68%, 98% 52%, 93% 36%, 98% 18%, 95% 0%);
}

/* Per-label tape variants – each with its own torn edge and rotation */
.tape-v1 {
	transform: rotate(-2deg);
	clip-path: polygon(6% 0%, 2% 14%, 7% 28%, 1% 44%, 6% 58%, 2% 72%, 7% 86%, 3% 100%,
			94% 100%, 98% 86%, 93% 72%, 99% 56%, 94% 42%, 98% 28%, 93% 14%, 97% 0%);
}

.tape-v2 {
	transform: rotate(1.5deg);
	clip-path: polygon(3% 0%, 7% 16%, 1% 30%, 5% 46%, 0% 60%, 6% 74%, 2% 88%, 5% 100%,
			96% 100%, 100% 84%, 95% 70%, 99% 54%, 94% 40%, 98% 26%, 93% 12%, 97% 0%);
}

.tape-v3 {
	transform: rotate(-3deg);
	clip-path: polygon(5% 0%, 1% 20%, 6% 36%, 2% 52%, 7% 64%, 1% 78%, 5% 94%, 2% 100%,
			93% 100%, 97% 90%, 92% 76%, 98% 62%, 93% 48%, 99% 34%, 94% 18%, 98% 0%);
}

.tape-v4 {
	transform: rotate(2.5deg);
	clip-path: polygon(7% 0%, 3% 12%, 8% 26%, 2% 42%, 6% 56%, 1% 70%, 5% 84%, 2% 100%,
			95% 100%, 99% 82%, 94% 68%, 100% 54%, 95% 38%, 99% 24%, 93% 10%, 96% 0%);
}

.tape-v5 {
	transform: rotate(-1deg);
	clip-path: polygon(2% 0%, 6% 15%, 1% 32%, 5% 48%, 0% 62%, 6% 76%, 2% 90%, 6% 100%,
			97% 100%, 93% 88%, 98% 74%, 94% 60%, 99% 46%, 95% 30%, 100% 16%, 96% 0%);
}

.tape-v6 {
	transform: rotate(0.5deg);
	clip-path: polygon(4% 0%, 0% 18%, 5% 34%, 1% 50%, 7% 65%, 2% 80%, 6% 100%,
			96% 100%, 99% 78%, 94% 62%, 98% 47%, 93% 32%, 98% 16%, 94% 0%);
}

.album {
	margin: 0 0 8px;
	position: relative;
	cursor: default;
}

.album-cover {
	max-width: 100%;
	width: auto;
	padding: 12px;
	box-sizing: border-box;
	max-height: 80vh;
	border-radius: 16px;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

.enjoy {
	font-size: 18px;
	display: block;
	text-align: left;
}

#fullalbum {
	display: block;
	text-align: center;
	margin: 18px auto 12px;
	width: 60vw;
	height: 33vw;
	max-width: 100%;
}

@media screen and (max-width: 900px) {
	#fullalbum {
		width: 80vw;
		height: 45vw;
	}
}

@media screen and (max-width: 542px) {
	#fullalbum {
		width: 100vw;
		height: 56vw;
	}
}

.sources {
	margin: 0;
}

.sources>span {
	display: block;
	font-size: 18px;
}

.sources a {
	display: inline-block;
	margin: 18px 20px 0 0;
	font-size: 42px;
	transition: transform 0.1s ease-in, text-decoration 0.2s ease-in;
}

.sources .sourcename,
.sources a:hover .sourcename,
.sources a:visited .sourcename {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
}

.sources a:hover {
	transform: scale(1.1);
}

@media screen and (max-width: 700px) {
	html {
		scroll-snap-type: y proximity;
	}

	.album-block {
		flex-direction: column;
		height: 100vh;
		padding: 124px 5vw 24px;
		gap: 12px;
		align-items: center;
	}

	.album-left {
		max-width: 100%;
		max-height: 40vh;
	}

	.album-cover {
		max-height: 36vh;
	}

	.album-right {
		align-items: center;
		text-align: center;
		justify-content: start;
	}

	.enjoy {
		text-align: center;
	}

	.sources {
		width: 100%;
	}

	.sources a {
		min-width: 28%;
		margin-right: 0;
	}

	.sources>span,
	.album,
	.enjoy {
		font-size: 20px;
	}

	.vinyl {
		display: none;
	}

	.vinyl-wrap {
		margin: 0;
	}

	#hero nav {
		bottom: -126px;
	}
}

footer {
	font-size: 14px;
	background-color: #222224;
	height: auto;
	box-shadow: 0px -10px 30px 15px #09090966;
	text-align: center;
	display: block;
	padding: 24px 4px 8px;
	scroll-snap-align: start;
	padding-bottom: 32px;
}

#reveal {
	position: fixed;
	height: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 2s ease;
	z-index: 1;
	text-align: center;
}

.recording img {
	margin-top: 6px;
	height: 24px;
	width: auto;
}

.copyright {
	margin: 42px 8px 16px;
	color: #888;
	text-transform: uppercase;
}

.copyright a {
	color: #888;
	text-transform: lowercase;
}

@media screen and (max-width: 542px) {
	.copyright {
		font-size: 12px;
	}
}

#reveal.active {
	height: auto;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 1;
	visibility: visible;
}

.overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
}

.albumtitle {
	position: relative;
	font-size: 30px;
	margin-top: 12vh;
	z-index: 2;
	font-family: 'Economica';
	letter-spacing: 4px;
}

.albumtitle .info {
	font-size: 18px;
	margin-bottom: 22px;
	display: block;
}

.albumtitle img {
	display: block;
	margin: 0 auto;
	width: 580px;
	border-radius: 5px;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.albumtitle .title {
	margin-top: 20px;
	display: block;
}

#hero {
	height: 459px;
	min-height: calc(100vh - 69px);
	background-image: url('../img/Background.gif'), url('../img/min/Background.gif');
	background-size: cover;
	background-position: center var(--hero-parallax-y, 0px), center var(--hero-parallax-y, 0px);
	background-repeat: no-repeat;
	background-attachment: scroll;
	box-shadow: 0px -45px 50px 16px #141414 inset;
	top: -80px;
	position: relative;
	scroll-snap-align: start;
}

#hero nav {
	position: absolute;
	bottom: -26px;
	right: 20vw;
}

#hero a:hover {

	text-decoration: none;
	border-bottom: 2px solid #f7f4ed;
}