/* - INIT --------------------- */
	:root {
		--color-primary: #000000;
		--color-secondary: #ededed;
		--color-tertiary: linear-gradient(33deg, #000000 0%, #261000 25%, #814300 50%, #ffbb32 75%, #ffebae 100%);
		--color-tertiary-inverted: linear-gradient(33deg, #ffebae 0%, #ffbb32 25%, #814300 50%, #171001 75%, #000000 100%);
	}
	@font-face {
	  font-family: 'YaVomeImported';
	  src: url('./assets/content/Yavome.ttf') format('woff2-variations');
	  font-display: swap;
	  font-weight: 100 800;
	}
	@font-face {
	  font-family: 'BhentayImported';
	  src: url('./assets/content/Bhentay.otf') format('woff2-variations');
	  font-display: swap;
	  font-weight: 100 800;
	}
	@font-face {
	  font-family: 'WavehausImported';
	  src: url('./assets/content/Wavehaus.otf') format('woff2-variations');
	  font-display: swap;
	  font-weight: 100 800;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'BhentayImported';
		scroll-behavior: smooth;
		-webkit-tap-highlight-color: transparent;
	}
	a {
		text-decoration: none;
		color: var(--color-primary);
	}



/* - BODY --------------------- */
	html, body {
		width: 100vw;
		height: 100vh;

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

		overflow: hidden;
	}



/* - LOGO --------------------- */
	.logo-wrapper {
		z-index: 4;
		position: absolute;
		top: 6vh;
		left: 50vw;
		transform: translate(-50%);
		mix-blend-mode: difference;
	}
	.logo-wrapper>img {
		width: 36vw;
		filter: invert(100%);
		
		transition: opacity 3000ms cubic-bezier(.13, .53, .38, .97) 500ms;
	}



/* - NAV TOGGLE --------------------- */
	.nav-toggle-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 5vw;
		width: 10vw;
		z-index: 3;
		
		transform: translateY(-50%);
		
		transition: transform 1500ms cubic-bezier(.13, .53, .38, .97), width 1500ms cubic-bezier(.13, .53, .38, .97);
	}
	.nav-toggle {
		height: 7cqw;
		width: 7cqw;
		
		background: transparent;
		border: none;
		border-radius: 7cqw;
		outline: none;
		backdrop-filter: invert(100%);
		
		box-shadow: 0rem 0rem 2rem 0.2rem rgba(100 100 100 / 50%);
		cursor: pointer;
		transition: transform 1500ms cubic-bezier(.13, .53, .38, .97), box-shadow 1500ms cubic-bezier(.13, .53, .38, .97);
	}
	body:has(.home.active) .nav-toggle-wrapper {
		transform: translate(40vw, 0%) scale(4);
	}
	body[data-nav="true"]:has(.home.active) .nav-toggle-wrapper {
		transform: translateY(-50%) scale(1);
	}
	
	.nav-toggle:hover {
		transform: scale(1.05);
		box-shadow: 0rem 0rem 4rem 0.3rem rgba(0 0 0 / 60%);
	}
	.nav-toggle:active {
		transform: scale(0.90);
		box-shadow: 0rem 0rem 1rem 0.4rem rgba(0 0 0 / 60%);
	}
	
	body[data-nav="true"] .nav-toggle {
		box-shadow: 0rem 0rem 3rem 0rem rgba(255 255 255 / 40%);
	}
	body[data-nav="true"] .nav-toggle:hover {
		box-shadow: 0rem 0rem 4rem 0.3rem rgba(255 255 255 / 50%);
	}
	body[data-nav="true"] .nav-toggle:active {
		box-shadow: 0rem 0rem 1rem 0.5rem rgba(255 255 255 / 50%);
	}
	.nav-toggle h1 {
		color: var(--color-secondary);
		transition: all 1000ms cubic-bezier(.13, .53, .38, .97) 1500ms;
	}
	body[data-nav="true"] .nav-toggle h1 {
		color: var(--color-primary);
	}
	body[data-nav="false"]:has(.home.active) .nav-toggle h1 {
		opacity: 0;
	}
	
	
/* - MENU --------------------- */
	nav {
		background: var(--color-primary);
		display: flex;
		justify-content: start;

		z-index: 1;
		height: 100vh;
		width: 100vw;

		position: absolute;
		left: 0px;
		bottom: 0px;

		overflow: hidden;
		transition-property: background;
		transition-duration: 1000ms;
		transition-timing-function: cubic-bezier(.13, .53, .38, .97);
	}

	.menu-wrapper {
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: end;
		top: 50vh;
		left: 50vw;
		width: 35vw;
		
		transform: translate(0%, -50%) scale(0.7);
		transition: transform 700ms cubic-bezier(.13, .53, .38, .97);

		color: var(--color-secondary);
		
		white-space: nowrap;
		cursor: pointer;
		
		container-type: inline-size;
	}
	body[data-nav="true"]>nav>.menu-wrapper {
		transform: translate(-50%, -50%) scale(1);
	}
	
	.menu-wrapper>div {
		display: flex;
		padding: 1cqw;
		font-size: 4cqw;
		transition: opacity 300ms cubic-bezier(.13, .53, .38, .97), transform 200ms cubic-bezier(.13, .53, .38, .97);
	}
	body:has(.menu-wrapper>div:hover) .menu-wrapper>div{
		opacity: 0.2;
	}
	body:has(.menu-wrapper>div:hover) .menu-wrapper>div:hover{
		opacity: 1;
	}
	.menu-wrapper>div:active {
		transform: scale(0.8)
	}
	


/* - CONTENT --------------------- */
	.content-wrapper {
		background: var(--color-secondary);

		z-index: 2;
		width: 100vw;
		height: 100vh;

		position: relative;

		transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
	}
	body[data-nav="true"]>.content-wrapper {
		transform: translateX(-100%);
	}

	.content-wrapper>div.active * {
		opacity: 1;
		pointer-events: all;
	}
	.content-wrapper>div:not(.active) * {
		opacity: 0 !important;
		pointer-events: none !important;
	}
	


/* - INSTAGRAM --------------------- */
	.content-wrapper>.insta {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		position: absolute;
		top: 0;
		left: 0;
		
		width: 100vw;
		height: 100vh;
		
		font-size: 8px;
		
		overflow-y: scroll;
		scrollbar-width: none;
	}
	.content-wrapper>.insta .gallery-title:nth-child(1) {
		margin-top: 35cqmin;
	}
	
	.content-wrapper>.insta .gallery-title {
		display: flex;
		width: 60vw;
		margin: 1vw;
	}
	.content-wrapper>.insta .concept-gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 60vw;
		left: 0;
		margin: 1vw;
		gap: 1vw;
	}
	
	.content-wrapper>.insta>.season-4>.concept-gallery {
		display: grid;
		grid-template-columns: 1fr;
		
		margin: 1vw;
		gap: 1vw;
	}
	
	.content-wrapper>.insta img {
		object-fit: contain;
		width: 100%;
		
		cursor: pointer;
	}
	.content-wrapper>.insta>.season-2>.concept-gallery {
		padding-bottom: 50vh;
	}
	
	/*
	@media (max-width: 1000px) {
		.content-wrapper>.insta {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			
			width: 100vw;
			height: 100vh;
			overflow-y: scroll;
			scrollbar-width: none;
		}
	}
	*/
	


/* - SHOOTINGS --------------------- */
	.content-wrapper>.shootings {
		display: flex;
		justify-content: center;
		
		position: absolute;
		top: 0;
		left: 0;
		
		width: 100vw;
		height: 100vh;
		
		font-size: 8px;
		
		overflow-y: scroll;
		scrollbar-width: none;
	}
	.content-wrapper>.shootings>.shoot-gallery-wrapper {
		display: flex;
		width: 60vw;
		
		margin: 1vw;
		margin-top: 35cqmin;
		
		gap: 1vw;
	}

	.content-wrapper>.shootings .shoot-gallery-left {
		display: grid;
		grid-template-columns: 1fr;
		width: 20vw;
		gap: 1vw;
	}
	.content-wrapper>.shootings .shoot-gallery-center {
		display: grid;
		grid-template-columns: 1fr;
		width: 20vw;
		gap: 1vw;
	}
	.content-wrapper>.shootings .shoot-gallery-right {
		display: grid;
		grid-template-columns: 1fr;
		width: 20vw;
		gap: 1vw;
	}
	
	.content-wrapper>.shootings picture {
		display: flex;
		width: 100%;
		height: 100%
	}
	.content-wrapper>.shootings img {
		object-fit: contain;
		width: 100%;
		
		cursor: pointer;
	}
	.content-wrapper>.shootings img:last-child {
		padding-bottom: 50vh;
	}


/* - MOVIES --------------------- */
	.content-wrapper>.movies {
		display: flex;
		flex-direction: column;
		
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	
		width: 60vw;
		height: 100vh;
		
		overflow-y: scroll;
		scrollbar-width: none;
		white-space: nowrap;
	}
	.content-wrapper>.movies>div {
		display: flex;
		flex-direction: column;
		
		margin-bottom: 10vw;
	}
	.content-wrapper>.movies>div:nth-child(1) {
		margin-top: 35cqmin;
	}
	.content-wrapper>.movies>div:last-child {
		padding-bottom: 40vh;
	}
	
	.content-wrapper>.movies>div>iframe {
		width: 100%;
	}
	.content-wrapper>.movies>#unser-kreis>iframe {
		aspect-ratio: 2.39;
	}
	.content-wrapper>.movies>#six>iframe {
		aspect-ratio: 4/3;
	}
	.content-wrapper>.movies>#minute>iframe {
		aspect-ratio: 2.35;
	}

	.content-wrapper>.movies>div>h2 {
		font-size: 3cqw;
	}
	.content-wrapper>.movies>div>h3 {
		font-size: 1.5cqw;
	}
	.content-wrapper>.movies>div>p {
		font-size: 1cqw;
	}
	
	

/* - MUSIC --------------------- */
	.content-wrapper>.music {
		display: flex;
		flex-direction: column;
		
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	
		width: 60vw;
		height: 100vh;
		
		overflow-y: scroll;
		scrollbar-width: none;
		white-space: nowrap;
	}
	.content-wrapper>.music>div {
		display: flex;
		flex-direction: column;
		
		margin-bottom: 10vw;
		
		font-size: 1.2cqw;
	}
	.content-wrapper>.music>div:nth-child(1) {
		margin-top: 35cqmin;
	}
	.content-wrapper>.music>div:last-child {
		padding-bottom: 40vh;
	}
	
	.content-wrapper>.music>div>iframe {
		width: 100%;
	}
	.content-wrapper>.music>#noyade>iframe {
		aspect-ratio: 2.39;
	}
	.content-wrapper>.music>#roi>iframe {
		aspect-ratio: 16/9;
	}
	.content-wrapper>.music>#perdre>iframe {
		aspect-ratio: 2.35;
	}

	.content-wrapper>.music>div>h2 {
		font-size: 3cqw;
	}
	.content-wrapper>.music>div>h3 {
		font-size: 1.5cqw;
	}
	.content-wrapper>.music>div>p {
		font-size: 1cqw;
	}



/* - COMMERCIALS --------------------- */
	.content-wrapper>.commercials {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		width: 50vw;
		
		font-size: 2cqw;
		white-space: nowrap;
	}
	
	
	
/* - PRICES --------------------- */
	.content-wrapper>.prices {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		position: absolute;
		
		width: 100vw;
		height: 100vh;
		
		margin-bottom: 30vh;
		
		overflow-y: scroll;
		scrollbar-width: none;
	}
	.content-wrapper>.prices>div {
		padding-top: 10vw;
	}
	.content-wrapper>.prices>div:nth-child(2) {
		padding-top: 3vw;
	}
	
	.content-wrapper>.prices h2 {
		margin-top: 35cqmin;
		margin-bottom: 3vw;
		font-family: 'BhentayImported';
		font-size: 4cqw;
	}
	
	.content-wrapper>.prices .prices-titles {
		z-index: 3;
	
		display: flex;
		align-items: center;
		justify-content: space-around;
		
		width: 58vw;
		
		position: absolute;
		padding-top: 18.4vw;
		
		gap: 1vw;
		
		color: var(--color-secondary);
		
		pointer-events: none;
	}
	.content-wrapper>.prices h4 {
		font-family: 'BhentayImported';
		width: 28.5vw;
		text-align: center;
		font-size: 1.5cqw;
		
		pointer-events: none;
		
		transition: transform 2000ms cubic-bezier(.13, .53, .38, .97);
	}
	.content-wrapper>.prices:has(#sps:hover) h4#sps {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#spg:hover) h4#spg {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#pva:hover) h4#pva {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#ppa:hover) h4#ppa {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#mfv:hover) h4#mfv {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#mfp:hover) h4#mfp {
		transform: scale(1.13);
	}
	.content-wrapper>.prices:has(#mfpv:hover) h4#mfpv {
		transform: scale(1.13);
	}
	
	.content-wrapper>.prices .prices-images {
		display: flex;
		flex-direction: row;
		justify-content: center;
		
		gap: 1vw;
	}
	.content-wrapper>.prices>div:nth-child(4)>.prices-images:last-child {
		margin-top: 1vw;
		padding-bottom: 30vh;
	}
	
	.content-wrapper>.prices .prices-image-wrapper {
		width: 28.5vw;
		border-radius: 1.8vw;
		overflow: hidden;
	}
	.content-wrapper>.prices img {
		object-fit: contain;
		cursor: pointer;
		border-radius: 1.8vw;
	}
	.blured {
		transform: translate(0) scale(2) !important;
		filter: blur(5vw) invert(100%) brightness(0.2) !important;
		transition: transform 700ms cubic-bezier(.13, .53, .38, .97), filter 1500ms cubic-bezier(.13, .53, .38, .97), opacity 200ms cubic-bezier(.13, .53, .38, .97)
	}
	.blured:hover {
		transform: translate(0) scale(1.3) !important;
		filter: blur(1vw) invert(100%) brightness(0.6) !important;
	}
	
	

/* - CONTACT --------------------- */
	.content-wrapper>.contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		width: 60vw;
		
		font-size: 2.5cqw;
		white-space: nowrap;
	}
	
	

/* - ABOUT --------------------- */
	.content-wrapper>.about {
		display: flex;
		flex-direction: column;
		align-items: start;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		width: 60vw;
		height: 100vh;
		
		margin-bottom: 30vh;
		
		overflow-y: scroll;
		scrollbar-width: none;
	}
	.content-wrapper>.about>h2 {
		margin-top: 35cqmin;
		margin-bottom: 3vw;
		font-family: 'BhentayImported';
		font-size: 3cqw;
	}
	.content-wrapper>.about>h3 {
		margin-bottom: 1vw;
		font-family: 'BhentayImported';
		font-size: 2cqw;
	}
	.content-wrapper>.about>p {
		margin-bottom: 3vw;
		font-family: 'WavehausImported';
		font-size: 2cqw;
	}
	.content-wrapper>.about>p:nth-child(9) {
		margin-bottom: 40vh;
	}
	
	
/* - MEDIA QUERY --------------------- */
	@media (max-width: 1024px) {
		.logo-wrapper>img {
			width: 75vw;
		}
		
		
		.nav-toggle-wrapper {
			top: calc(100vh - 40vw);
			left: 50vw;
			width: 30vw;
			height: 30vw;
			transform: translateX(-50%);
		}
		body:has(.home.active) .nav-toggle-wrapper {
			transform: translate(-50%, calc(35vw - 50vh)) scale(3);
		}
		body[data-nav="true"]:has(.home.active) .nav-toggle-wrapper {
			transform: translate(-50%) scale(1);
		}
		.nav-toggle {
			height: 25vw;
			width: 25vw;
			border-radius: 25vw;
		}
		
		
		.menu-wrapper {
			width: 75vw;
			align-self: center;
		}
		.menu-wrapper>div {
			padding: 2cqw;
		}
		
		.content-wrapper {
			transition: transform 500ms cubic-bezier(.13, .53, .38, .97) 150ms;
		}
		
		.content-wrapper>.insta .gallery-title {
			width: 98vw;
		}
		.content-wrapper>.insta .concept-gallery {
			width: 98vw;
		}
		
		.content-wrapper>.shootings>.shoot-gallery-wrapper {
			width: 98vw;
		}
		.content-wrapper>.shootings .shoot-gallery-left {
			width: 32vw;
		}
		.content-wrapper>.shootings .shoot-gallery-center {
			width: 32vw;
		}
		.content-wrapper>.shootings .shoot-gallery-right {
			width: 32vw;
		}
		
		
		.content-wrapper>.movies {
			width: 98vw;
		}
		.content-wrapper>.movies>div>h2 {
			font-size: 6cqw;
		}
		.content-wrapper>.movies>div>h3 {
			font-size: 3cqw;
		}
		.content-wrapper>.movies>div>p {
			font-size: 2cqw;
		}
		
		
		.content-wrapper>.music {
			width: 98vw;
		}
		.content-wrapper>.music>div>h2 {
			font-size: 6cqw;
		}
		.content-wrapper>.music>div>h3 {
			font-size: 3cqw;
		}
		.content-wrapper>.music>div>p {
			font-size: 2cqw;
		}
		
		
		.content-wrapper>.commercials {
			font-size: 6cqw;
		}
		
		
		.content-wrapper>.contact {
			font-size: 4cqw;
		}
		
		
		.content-wrapper>.about {
			width: 80vw;
		}
		.content-wrapper>.about>h2 {
			font-size: 7cqw;
			margin-bottom: 5vw;
		}
		.content-wrapper>.about>h3 {
			font-size: 5cqw;
			margin-bottom: 5vw;
		}
		.content-wrapper>.about>p {
			font-size: 5cqw;
			margin-bottom: 5vw;
		}
	}