/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@property --bg-color {
	syntax: '<color>';
	initial-value: hsl(0, 0%, 0%);
	inherits: true;
}

:root {
	transition: --bg-color 10s ease-in-out;
	--base-padding: 2rem;
	--header-height: 5rem;
	--footer-height: 7rem;
	--gap: var(--base-padding);
	--col: calc((100% + var(--gap)) / 12 - var(--gap));
}


/* #region BASICS */
* {
	box-sizing: border-box;
	/* font-variant-emoji: text;  */
}

html {
	font-size: 10px;
	line-height: 1.6;
	scroll-behavior: smooth;
	scrollbar-gutter: stable both-edges;
	/* scrollbar-width: thin; */
}

body {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	color: #fffd;
	color: #fff;

	background-color: var(--bg-color);

	padding-inline: 0;
	padding-bottom: var(--footer-height);
	margin: 0;

	/* @media (width >500px) {
		padding-top: var(--header-height);
	} */
}

.hidden {
	display: none;

	&.display-md {
		@media (width >500px) {
			display: unset;
		}
	}

	&.display-lg {
		@media (width >1000px) {
			display: unset;
		}
	}
}

hr {
	border: none;
	border: 1px solid #fff4;
	max-width: 50vw;
	margin: 0 auto;
}

/* #endregion */


/* #region TYPO */
strong {
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: underline;

	&.icon {
		display: inline-block;
		height: 30px;
		aspect-ratio: 1;
		text-indent: -999rem;
		background: #333 center no-repeat;
		background-size: 24px;
		border-radius: 4px;

		&.sc {
			background-image: url(/_img/logo_soundcloud.png);
		}

		&.ig {
			background-image: url(/_img/logo_instagram.png);
		}
	}
}


h1,
h2,
h3 {
	font-family: "Bebas Neue", "Haettenschweiler", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

h2 {
	font-size: 3.6rem;
}

h3 {
	font-size: 2.8rem;
}

/* p:first-child {
	margin-top: 0;
} */

.rainbow {
	background: center no-repeat url(/_img/gradient.png);
	background-size: cover;
	position: relative;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* #endregion */


/* #region LAYOUT */
header {
	display: none !important;

	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	/* width: 100%; */
	height: var(--header-height);
	/* height: 0; */
	/* overflow: hidden; */
	padding: 0 2rem;
	margin-inline: auto;

	font-family: "Bebas Neue", sans-serif;
	font-size: 1rem;

	/* display: none; */

	@media (width >500px) {
		display: flex;
		background-image: linear-gradient(180deg,
				rgb(from var(--bg-color) r g b / 100%) 2%,
				rgb(from var(--bg-color) r g b / 93%) 41%,
				rgb(from var(--bg-color) r g b / 86%) 54%,
				rgb(from var(--bg-color) r g b / 79%) 63%,
				rgb(from var(--bg-color) r g b / 71%) 69%,
				rgb(from var(--bg-color) r g b / 64%) 73%,
				rgb(from var(--bg-color) r g b / 57%) 77%,
				rgb(from var(--bg-color) r g b / 50%) 80%,
				rgb(from var(--bg-color) r g b / 43%) 82%,
				rgb(from var(--bg-color) r g b / 36%) 84%,
				rgb(from var(--bg-color) r g b / 29%) 86%,
				rgb(from var(--bg-color) r g b / 21%) 88%,
				rgb(from var(--bg-color) r g b / 14%) 90%,
				rgb(from var(--bg-color) r g b / 7%) 92%,
				rgb(from var(--bg-color) r g b / 0%) 100%);
	}

	ul,
	li {
		display: inline-block;

		a {
			text-decoration: none;
		}
	}

	nav {
		height: 0;
		overflow: hidden;
	}

	.menu {
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		width: var(--header-height);
		aspect-ratio: 1;
		background-color: transparent;
		--border-size: 3px;

		i,
		i::before,
		i::after {
			position: absolute;
			display: block;
			border-radius: 3px;
			transform-origin: calc(50% - .8 * var(--border-size)) center !important;
		}

		i {
			inset: 50% 1rem auto;
			transform: translateY(-50%);
			height: var(--border-size);

			&::before,
			&::after {
				content: '';
				inset: auto 0;
				border-top: var(--border-size) solid #fff;
			}
		}

		i:first-child {
			background-color: #fff;

			&::before {
				top: -1rem;
			}

			&::after {
				bottom: -1rem;
			}
		}

		i:last-child {
			opacity: 0;
		}

		@media (width > 480px) {
			display: none;
		}
	}
}

main {
	max-width: 1100px;
	margin-inline: auto;


	section {
		position: relative;
		padding: calc(var(--base-padding) * 2) var(--base-padding);

		text-align: center;

		&:not(:last-child)::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			translate: -50%;
			display: block;
			width: 100%;
			max-width: 50vw;
			/* margin-inline: auto; */
			border: 1px solid #fff4;
		}

		&.breakout {
			@media (width > 500px) {
				position: relative;
				left: 50%;
				width: 100vw;
				max-width: 220rem;
				translate: -50%;

				.inner {
					max-width: 1100px;
					margin-inline: auto;
				}
			}
		}

		.bg {
			position: absolute;
			inset: 0;
			z-index: -1;
			background: center no-repeat var(--bg-image);
			background-size: cover;
		}
	}

	#stage {
		.inner {
			padding-top: var(--header-height);
		}

		.bg {
			--bg-image: url(/_img/hero.jpg);
			-webkit-mask-image: linear-gradient(black, transparent);
			mask-image: linear-gradient (black, transparent);
		}

		h1 {
			aspect-ratio: 1;
			text-indent: -9999rem;
			background: url(/_img/logo_bb.png) center no-repeat;
			background-size: contain;

			@media (width > 500px) {
				aspect-ratio: 3;
			}
		}

		.meta {
			/* position: absolute; */
			inset: auto var(--base-padding) var(--base-padding);

			display: flex;
			justify-content: space-between;

			h3 {
				&:first-child {
					flex: 0 0 30%;
					text-align: left;
				}

				&:last-child {
					flex-basis: 50%;
					text-align: right;
					opacity: .8;
				}
			}
		}

		&.special {
			.bg {
				--bg-image: url(/_img/special/wspecial.jpg);
			}

			h1 {
				aspect-ratio: 2;
				max-width: 800px;
				margin-inline: auto;
			}

			h2 {
				font-family: "Anton", "Haettenschweiler", sans-serif;
				font-style: normal;
				font-size: 33vw;
				font-weight: 400;
				line-height: .7em;
				text-transform: uppercase;
				margin-block: 0.3em;

				@media (width <=500px) {
					span {
						font-size: .7em;
					}
				}

				@media (width > 500px) {
					font-size: 13rem;
				}
			}

			h3 {
				font-size: 4.6rem;
				margin-block: 0.2em;
			}
		}

		.outline {
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke: .025em;
		}

	}

	#info {
		@media (width > 500px) {
			display: flex;
			flex-wrap: wrap;
			gap: var(--gap);
		}

		>* {
			@media (width > 500px) {
				flex: 1 1 calc(3 * var(--col));
				text-align: left;
			}
		}

		cite {
			margin-block: 0.5em;

			@media (width <=500px) {
				&:not(:last-child)::after {
					content: '';
					display: block;
					width: 100%;
					max-width: 30vw;
					margin: var(--base-padding) auto;
					border: 1px solid #fff4;
				}
			}
		}

		>:last-child {
			@media (width > 500px) {
				flex: 1 1 calc(7 * var(--col));

				/* flex-basis: 100%; */

				/* justify-content: center; */
			}
		}
	}

	section:has(+#teaser)::after {
		display: none;
	}

	#teaser {
		&::after {
			display: none;
		}

		a {
			display: block;
			text-indent: -999rem;
			background: center no-repeat;
			background-size: cover;
			aspect-ratio: 16/9;
			border: none !important;
			margin: calc(var(--base-padding) * -2) calc(var(--base-padding) * -1);

			>* {
				display: none;
			}
		}
	}

	#event {
		.lineup {
			.dj {
				.front {
					img {
						max-width: 100%;
						border-radius: 100%;
					}

					div {
						text-align: left;
						margin: 0;

						display: flex;
						flex-wrap: wrap;
						gap: 1rem;

						small {
							display: inline-block;
						}

						h3 {
							flex: 1;
							margin: 0;

							small {
								font-size: .6em;
								letter-spacing: .04em;
							}
						}

						a {
							flex: 0 0 3rem;
						}
					}
				}
			}

			@media (width <=500px) {
				.dj {
					button {
						display: none;
					}

					.front {
						display: grid;
						grid-gap: var(--base-padding);
						grid-template-columns: repeat(4, 6vw) auto;
						grid-template-rows: repeat(5, 6vw);

						img {
							grid-area: 1 / 1 / 5 / 5;
						}

						div {
							grid-area: 2 / 5 / 5 / 6;

							small {
								display: block;
							}

							h3 {
								flex: 1 0 100%;
							}
						}

						button {
							grid-area: 4 / 2 / 6 / 4;

							&::before {
								display: none;
							}

							&::after {
								width: 40%;
								clip-path: polygon(0 0, 100% 50%, 0 100%);
								translate: 2px;
							}
						}
					}

					&.rev .front {
						grid-template-columns: auto repeat(4, 6vw);

						img {
							grid-area: 1 / 2 / 5 / 6;
						}

						button {
							grid-area: 4 / 3 / 6 / 5;
						}

						div {
							grid-area: 2 / 1 / 5 / 2;
							justify-self: flex-end;
							flex-direction: row-reverse;

							h3 {
								text-align: right;
							}

							a {
								margin-left: 1rem;
								margin-right: 0;
							}
						}
					}

					&:has(iframe) {
						perspective: 1000px;

						.inner {
							position: relative;
							transition: transform 0.8s;
							transform-style: preserve-3d;
						}

						&.flipped .inner {
							transform: rotateY(180deg);
						}

						button {
							display: block;
							border-radius: 100%;
							position: relative;
							background-color: var(--bg-color);
							background: linear-gradient(180deg, hsl(from var(--bg-color) h s calc(l + 5)), var(--bg-color));
							box-shadow: inset 0px 2px 3px hsl(from var(--bg-color) h calc(s - 20) calc(l + 20)), 0px 3px 8px hsl(from var(--bg-color) h s calc(l - 5));
							border: 2px solid var(--bg-color);

							display: flex;
							justify-content: center;
							align-items: center;

							&::before,
							&::after {
								position: absolute;
								content: '';
								background-color: #fff;
								width: 10%;
								height: 50%;
							}
						}

						.front {
							-webkit-backface-visibility: hidden;
							backface-visibility: hidden;
						}

						.back {
							pointer-events: none;
							position: absolute;
							inset: 0;
							transform: rotateY(180deg);
							-webkit-backface-visibility: hidden;
							backface-visibility: hidden;

							display: grid;
							grid-gap: var(--base-padding);
							grid-template-columns: repeat(4, 6vw) auto;
							grid-template-rows: repeat(5, 6vw);

							iframe {
								grid-area: 1 / 1 / 5 / 6;
							}

							button {
								grid-area: 4 / 2 / 6 / 4;

								&::before {
									left: 33%;
								}

								&::after {
									right: 33%;
									/* content: '⏸'; */
									/* transform: scaleX(1.3); */
									/* padding-bottom: 0.15em; */
								}
							}
						}

						&.rev .back {
							grid-template-columns: auto repeat(4, 6vw);

							iframe {
								grid-area: 1 / 1 / 5 / 6;
							}

							button {
								grid-area: 4 / 3 / 6 / 5;
							}
						}

						&.flipped .back {
							pointer-events: all
						}
					}
				}
			}

			@media (width > 500px) {
				.dj {
					.inner {
						display: grid;
						grid-gap: var(--base-padding);
						grid-template-columns: repeat(4, clamp(1rem, 4vw, 4rem)) repeat(2, 1fr);
						grid-template-rows: repeat(4, clamp(1rem, 4vw, 4rem)) auto;

						.front,
						.back {
							display: contents;

						}

						img {
							grid-area: 1 / 1 / 5 / 5;
						}

						div {
							grid-area: 2 / 5 / 3 / 7;

							h3 {
								font-size: 3.2rem;
							}
						}

						iframe {
							grid-area: 3 / 5 / 6 / 7;
						}

						button {
							display: none;
						}
					}

					/* &.rev .inner {
						grid-template-columns: repeat(2, 1fr) repeat(4, 4vw);
						grid-template-rows: repeat(4, 4vw) auto;

						img {
							grid-area: 1 / 3 / 5 / 7;
						}

						div {
							grid-area: 2 / 1 / 3 / 3;
						}

						iframe {
							grid-area: 3 / 1 / 6 / 3;
						}
					} */
				}
			}

			.time {
				position: relative;
				display: inline-block;
				/* text-align: center; */
				background-color: var(--bg-color);
				padding: 0 var(--base-padding);
				margin: var(--base-padding) auto;

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: -1;
					translate: -50%;
					width: 33vw;
					border: 1px solid #fff3;
				}
			}

			.b2b {
				@media (width > 500px) {
					display: block;
					margin-block: var(--base-padding);
				}

				&::before {
					content: '↳ ';
				}

				&::after {
					content: ' ↰';
				}
			}
		}
	}

	#termine {
		iframe {
			width: 100%;
			height: 50vh;
			border-radius: var(--base-padding);
		}
	}
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--footer-height);
	background-image: linear-gradient(0deg,
			rgb(from var(--bg-color) r g b / 100%) 2%,
			rgb(from var(--bg-color) r g b / 93%) 41%,
			rgb(from var(--bg-color) r g b / 86%) 54%,
			rgb(from var(--bg-color) r g b / 79%) 63%,
			rgb(from var(--bg-color) r g b / 71%) 69%,
			rgb(from var(--bg-color) r g b / 64%) 73%,
			rgb(from var(--bg-color) r g b / 57%) 77%,
			rgb(from var(--bg-color) r g b / 50%) 80%,
			rgb(from var(--bg-color) r g b / 43%) 82%,
			rgb(from var(--bg-color) r g b / 36%) 84%,
			rgb(from var(--bg-color) r g b / 29%) 86%,
			rgb(from var(--bg-color) r g b / 21%) 88%,
			rgb(from var(--bg-color) r g b / 14%) 90%,
			rgb(from var(--bg-color) r g b / 7%) 92%,
			rgb(from var(--bg-color) r g b / 0%) 100%);
	padding: 2rem var(--base-padding) 0;
	margin-inline: auto;

	display: flex;
	justify-content: center;

	>* {
		flex: 1;
		text-align: center;

		justify-content: center;
		align-items: center;
	}

	/* >section:first-child { */
	#newsletter {
		justify-content: flex-start;
		text-align: left;
	}

	/* >section:last-child { */
	#legal {
		justify-content: flex-end;
		text-align: right;
	}

	#follow {
		display: flex;
		gap: var(--base-padding);

		a {
			display: inline-block;
			width: 3rem;
			aspect-ratio: 1;
			/* background: lavender; */
			/* overflow: hidden; */
			text-indent: -999rem;
			background: center no-repeat;
			background-size: contain;

			&[href*=instagram] {
				background-image: url(/_img/logo_instagram.png);
			}

			&[href*=rausgegangen] {
				background-image: url(/_img/logo_rausgegangen.png);
			}

			&[href*=sumpfkultur] {
				background-image: url(/_img/logo_swamp.png);
			}

			&[href*=poolbar] {
				background-image: url(/_img/logo_poolbar.png);
			}
		}
	}
}

/* #endregion */