/*
Theme Name: Hot Fat Theme
Author: Dan Roberts
Author URI: mailto:danroberts.creative@googlemail.com
Description: Bespoke Theme thrown together by Hot Fat's super sexy bass player...brains and looks.
Version: 1.0
*/
@font-face {
	font-family: "open_sansregular";
	src: url("fonts/opensans-regular-pondscum.eot");
	src: url("fonts/opensans-regular-pondscum.eot?#iefix") format("embedded-opentype"), url("fonts/opensans-regular-pondscum.woff2") format("woff2"), url("fonts/opensans-regular-pondscum.woff") format("woff"), url("fonts/opensans-regular-pondscum.svg#open_sansregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "ralewaylight";
	src: url("fonts/raleway-light-pondscum.eot");
	src: url("fonts/raleway-light-pondscum.eot?#iefix") format("embedded-opentype"), url("fonts/raleway-light-pondscum.woff2") format("woff2"), url("fonts/raleway-light-pondscum.woff") format("woff"), url("fonts/raleway-light-pondscum.svg#ralewaylight") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "siarons_freeregular";
	src: url("fonts/siarons_free-pondscum.eot");
	src: url("fonts/siarons_free-pondscum.eot?#iefix") format("embedded-opentype"), url("fonts/siarons_free-pondscum.woff2") format("woff2"), url("fonts/siarons_free-pondscum.woff") format("woff"), url("fonts/siarons_free-pondscum.svg#siarons_freeregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}
:root {
	--viewport-height: 100vh;
	--header-offset: 14rem;
}
@supports (height: 100svh) {
	:root {
		--viewport-height: 100svh;
	}
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-offset);
	overflow-x: hidden;
}
body {
	font-size: 1.6rem;
	font-family: "open_sansregular";
	background-color: #f2f4f3;
	color: #25283d;
	timeline-scope: --header-bg;
	pointer-events: none;
}
body>* {
	pointer-events: auto;
}
main {
	pointer-events: none;
}
main>* {
	pointer-events: auto;
}
section {
	background-color: #f2f4f3;
}
.subtitle {
	font-family: "ralewaylight";
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1.8rem;
	text-align: center;
	letter-spacing: 0.3rem;
	display: block;
	color: #25283d;
}
.subtitle::before, .subtitle::after {
	content: "-";
}
.title {
	display: block;
	font-family: "siarons_freeregular";
	text-transform: lowercase;
	font-size: 10rem;
	font-weight: normal;
	text-align: center;
	line-height: 0.7;
	color: #00aeef;
	margin-bottom: 3rem;
}
img {
	width: 100%;
	display: block;
}
a {
	color: inherit;
}
button {
	all: unset;
}
.btn {
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	border: solid 0.1rem #25283d;
	padding: 0.75rem 2rem;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn:hover {
	border-color: #00aeef;
	background-color: #00aeef;
	color: #f2f4f3;
}
::-moz-selection {
	background-color: #ec008c;
	color: #f2f4f3;
}
::selection {
	background-color: #ec008c;
	color: #f2f4f3;
}
.reveal__section {
	opacity: 0;
	transform: scale(0.8);
	-webkit-animation: reveal__animation linear both;
	        animation: reveal__animation linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 90%;
}
@-webkit-keyframes reveal__animation {
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes reveal__animation {
	to {
		opacity: 1;
		transform: scale(1);
	}
}
header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 2rem 5vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}
header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #f2f4f3;
	z-index: -1;
	transform: translateY(-100%);
	-webkit-animation: header-slide linear both;
	        animation: header-slide linear both;
	animation-timeline: --header-bg;
	animation-range: entry 0% entry 50%;
}
header[data-menu="true"] .hamburger {
	transform: rotate(-225deg);
	background-color: #f2f4f3;
}
header[data-menu="true"] .hamburger::before {
	opacity: 0;
	background-color: #f2f4f3;
}
header[data-menu="true"] .hamburger::after {
	transform: rotate(90deg) translate(-0.2rem);
	background-color: #f2f4f3;
}
header[data-menu="true"] .header__nav {
	-webkit-clip-path: circle(calc(95vw + 2rem) at top right);
	        clip-path: circle(calc(95vw + 2rem) at top right);
}
@-webkit-keyframes header-slide {
	to {
		transform: translateY(0);
	}
}
@keyframes header-slide {
	to {
		transform: translateY(0);
	}
}
.header__logo {
	height: 10rem;
	position: relative;
	z-index: 1;
}
.header__navtoggle {
	padding: 1.5rem 0.5rem;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.header__navtoggle:hover .hamburger, .header__navtoggle:hover .hamburger::before, .header__navtoggle:hover .hamburger::after {
	background-color: #00aeef;
}
.hamburger, .hamburger::before, .hamburger::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 0.2rem;
	background-color: #25283d;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.hamburger::before {
	transform: translateY(-0.7rem);
}
.hamburger::after {
	transform: translateY(0.5rem);
}
.header__nav {
	position: absolute;
	height: var(--viewport-height);
	inset: 0;
	padding: 0 5vw;
	text-align: right;
	background-color: rgba(0, 0, 0, 0.6);
	color: #f2f4f3;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	font-family: "ralewaylight";
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 0.3rem;
	display: flex;
	justify-content: flex-end;
	-webkit-clip-path: circle(0 at top right);
	        clip-path: circle(0 at top right);
	transition: -webkit-clip-path 0.25s ease;
	transition: clip-path 0.25s ease;
	transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
}
.header__nav ul {
	margin-top: var(--header-offset);
	display: flex;
	flex-direction: column;
	gap: 3vw;
	overflow: hidden;
}
.header__nav ul li {
	position: relative;
}
.header__nav ul li:hover::after {
	left: 0;
}
.header__nav ul li a {
	display: block;
	padding: 0.75rem 0;
	transition: color 0.25s ease;
}
.header__nav ul li::after {
	content: "";
	height: 0.2rem;
	width: 100%;
	background-color: #ec008c;
	position: absolute;
	left: 100%;
	bottom: 0;
	transition: left 0.25s ease;
}
.header__nav ul li:hover a {
	color: rgba(242, 244, 243, 0.7);
}
@media (width < 650px) {
	header[data-menu="true"] .header__nav {
		-webkit-clip-path: circle(110vw at top right);
		        clip-path: circle(110vw at top right);
	}
}
#hero {
	position: -webkit-sticky;
	position: sticky;
	top: var(--header-offset);
	height: calc(var(--viewport-height) - var(--header-offset));
	border: solid #f2f4f3 2rem;
	border-top: none;
	background-color: #00aeef;
}
#hero>* {
	position: absolute;
	bottom: 0;
}
#hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("img/band__bg.jpg");
	background-size: cover;
	z-index: -1;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	mix-blend-mode: multiply;
}
.hero__vid {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	mix-blend-mode: multiply;
}
.paint__parent {
	height: calc(var(--viewport-height) * 2);
	margin-top: calc(-1 * var(--header-offset));
	view-timeline-name: --paint;
	view-timeline-axis: block;
	pointer-events: none;
}
.paint {
	position: relative;
	z-index: 999;
}
.paint__img--before {
	max-height: calc(var(--viewport-height) - var(--header-offset) + 7rem);
}
.paint__img--after {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-image: url("img/paint__img--after.png");
	-webkit-mask-image: url("img/paint__mask.svg");
	        mask-image: url("img/paint__mask.svg");
	-webkit-mask-size: cover;
	        mask-size: cover;
	-webkit-mask-position: 0% 0%;
	        mask-position: 0% 0%;
	-webkit-animation: hero-paint steps(30) forwards;
	        animation: hero-paint steps(30) forwards;
	animation-timeline: --paint;
	animation-range: contain 10% contain 100%;
}
@-webkit-keyframes hero-paint {
	to {
		-webkit-mask-position: 100% 0%;
		        mask-position: 100% 0%;
	}
}
@keyframes hero-paint {
	to {
		-webkit-mask-position: 100% 0%;
		        mask-position: 100% 0%;
	}
}
.about {
	min-height: calc(var(--viewport-height) - var(--header-offset));
	padding: 5vw;
	position: -webkit-sticky;
	position: sticky;
	top: calc(1px - (var(--viewport-height) - var(--header-offset)));
	display: flex;
	align-items: center;
	justify-content: center;
	view-timeline-name: --header-bg;
	view-timeline-axis: block;
	background-color: #f2f4f3;
	z-index: -1;
}
.about__container {
	max-width: 95rem;
	margin-inline: auto;
}
.about__text {
	-moz-columns: 2 35ch;
	     columns: 2 35ch;
	gap: 5vw;
}
.about__text p {
	margin-bottom: 2rem;
}
#band .hybrid__sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--header-offset);
	background: #ec008c;
	border: solid #f2f4f3 2rem;
	border-top: none;
	overflow: hidden;
}
.band__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.band__bg img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	mix-blend-mode: multiply;
}
.band__card {
	height: calc(var(--viewport-height) - var(--header-offset) - 2rem);
	flex: 0 0 66%;
	padding: 3rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.band__head {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	width: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}
.band__card:nth-child(even) .band__head {
	-webkit-animation-name: bob-right;
	        animation-name: bob-right;
}
.band__name {
	margin: 0;
	color: #f2f4f3;
	flex: 0 0 auto;
}
.band__name .subtitle {
	color: inherit;
	margin: 2rem 0 0 0;
}
@-webkit-keyframes bob-left {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: rotate(-20deg);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: rotate(20deg);
	}
}
@keyframes bob-left {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: rotate(-20deg);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: rotate(20deg);
	}
}
@-webkit-keyframes bob-right {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: rotate(20deg);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: rotate(-20deg);
	}
}
@keyframes bob-right {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: rotate(20deg);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: rotate(-20deg);
	}
}
.hybrid__sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--header-offset);
}
.hybrid__section {
	display: flex;
	will-change: transform;
	view-timeline: --bobbing-heads;
}
#gig {
	min-height: calc(var(--viewport-height) - var(--header-offset));
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5vw;
	position: relative;
	z-index: -1;
}
.gig__container {
	width: 100%;
	max-width: 95rem;
	margin-inline: auto;
}
.gig__card {
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: 0.3rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	border-bottom: dotted 0.3rem rgba(236, 0, 140, 0.3);
	padding: 1rem 0;
}
.gig__date {
	font-size: 1.8rem;
	font-weight: bold;
}
.gig__venue {
	font-family: "siarons_freeregular";
	letter-spacing: normal;
	text-transform: lowercase;
	font-size: 5rem;
}
.gig__icon {
	font-size: 3rem;
	margin-right: 1rem;
	color: rgba(37, 40, 61, 0.2);
}
.gig__right {
	margin-left: auto;
	text-align: right;
}
#gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	border: solid #f2f4f3 2rem;
	border-top: none;
}
.gallery__post {
	flex: 1 1 40rem;
	height: calc((var(--viewport-height) - var(--header-offset) - 4rem) / 2);
	overflow: hidden;
	display: block;
	position: relative;
}
.gallery__img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	z-index: -1;
	transition: transform 0.25s ease, -webkit-filter 0.25s ease;
	transition: transform 0.25s ease, filter 0.25s ease;
	transition: transform 0.25s ease, filter 0.25s ease, -webkit-filter 0.25s ease;
}
.gallery__post:hover .gallery__img {
	transform: scale(1.3);
	-webkit-filter: grayscale(1);
	        filter: grayscale(1);
}
.gallery__item {
	position: absolute;
	inset: 1.6rem;
	background-color: rgba(0, 174, 239, 0.8);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f2f4f3;
	-webkit-clip-path: circle(0);
	        clip-path: circle(0);
	transition: -webkit-clip-path 0.25s ease;
	transition: clip-path 0.25s ease;
	transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
	overflow: hidden;
}
.gallery__post:hover .gallery__item {
	-webkit-clip-path: circle(100%);
	        clip-path: circle(100%);
}
.gallery__icon {
	padding: 1rem;
	border: solid 0.2rem #f2f4f3;
	border-radius: 50%;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(450%);
	transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.gallery__icon:hover {
	background-color: #f2f4f3;
	color: #00aeef;
}
.gallery__icon i {
	display: block;
	font-size: 2rem;
}
.gallery__post:hover .gallery__icon {
	-webkit-animation: gallery__icon--hover 0.25s ease-in-out 0.25s both;
	        animation: gallery__icon--hover 0.25s ease-in-out 0.25s both;
}
@-webkit-keyframes gallery__icon--hover {
	to {
		transform: translateY(0);
	}
}
@keyframes gallery__icon--hover {
	to {
		transform: translateY(0);
	}
}
#contact {
	min-height: calc(var(--viewport-height) - var(--header-offset));
	padding: 5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 6px 12px 0px #000;
	position: relative;
	z-index: -1;
}
.contact__container {
	width: 100%;
	max-width: 95rem;
}
.form__flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.form__flex>* {
	line-height: 0;
	flex: 1 1 30rem;
}
.form__left, .form__right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: space-between;
}
.form__group {
	position: relative;
}
input, textarea {
	border: none;
	background-color: transparent;
	outline: none;
	border-bottom: solid 0.1rem rgba(37, 40, 61, 0.5);
	padding: 1rem 0;
	width: 100%;
	font-family: "open_sansregular";
	font-size: 1.7rem;
}
textarea {
	height: 20rem;
	resize: none;
}
label {
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 1.4rem;
	position: absolute;
	left: 0;
	top: 1rem;
	pointer-events: none;
	transition: color 0.25s ease, top 0.25s ease, font-size 0.25s ease;
}
label i {
	margin-right: 0.5rem;
}
.form__group:has(input:focus) label, .form__group:has(textarea:focus) label, .form__group:has(input:not(:placeholder-shown)) label, .form__group:has(textarea:not(:placeholder-shown)) label {
	color: #00aeef;
	font-size: 1rem;
	top: -0.6rem;
}
.form__btn {
	margin-top: 3.5rem;
}
.form__btn i {
	margin-left: 2rem;
}
footer {
	background-color: #25283d;
	padding: 2rem 5vw;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	color: #f2f4f3;
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: -999;
}
footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("img/band__bg.jpg");
	background-size: cover;
	z-index: -1;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	mix-blend-mode: multiply;
}
.footer__logo {
	height: 7rem;
	margin-bottom: 1rem;
}
.footer__copyright {
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	font-size: 1rem;
	color: rgba(242, 244, 243, 0.5);
	margin-top: auto;
}
.footer__left {
	margin-right: 20vw;
	display: flex;
	flex-direction: column;
}
.footer__right {
	letter-spacing: 0.3rem;
	display: flex;
	gap: 5rem;
	flex-wrap: wrap;
}
.footer__title {
	font-family: "siarons_freeregular";
	text-transform: lowercase;
	font-weight: normal;
	font-size: 6rem;
	position: relative;
	display: block;
	margin-bottom: 2rem;
}
.footer__title::after {
	content: "";
	display: block;
	width: 8rem;
	height: 0.2rem;
	background-color: #ec008c;
	position: absolute;
	bottom: 0;
	left: 0;
}
.footer__links ul li {
	margin: 0.5rem;
	text-transform: uppercase;
	transition: color 0.25s ease;
}
.footer__links ul li:hover {
	color: #ec008c;
}
.footer__socials ul {
	display: flex;
	gap: 1rem;
}
.footer__socials ul::nth-child-last i {
	transform: translateX(5rem);
}
.footer__socials ul li {
	padding: 0.75rem;
	border: solid 0.1rem #f2f4f3;
	border-radius: 50%;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.footer__socials ul li:last-child i {
	transform: translateX(0);
}
.footer__socials ul li i {
	display: block;
	transform: translateX(0.1rem);
}
.footer__socials ul li:hover {
	background-color: #f2f4f3;
	color: #25283d;
}
@supports not (animation-timeline: --test-timeline) {
	.reveal__section, .paint__img--after, header::before {
		-webkit-animation: none;
		        animation: none;
	}
	.reveal__section {
		opacity: 1;
		transform: none;
	}
	.paint__img--after {
		-webkit-mask-position: 100% 0%;
		        mask-position: 100% 0%;
	}
}
@media (max-width: 900px) {
	:root {
		--header-offset: 10rem;
	}
	header {
		padding: 1.5rem 4vw;
	}
	.header__logo {
		height: 7rem;
	}
	.hamburger, .hamburger::before, .hamburger::after {
		width: 4rem;
	}
	.header__nav ul {
		margin-top: var(--header-offset);
		gap: 5vw;
	}
	.title {
		font-size: 7rem;
	}
	.about {
		position: relative;
		top: auto;
	}
	#about .reveal__section {
		animation-timeline: view();
		animation-range: entry 0% cover 35%;
	}
}