@font-face {
	font-family: Titillium Web;
	src: url(/fonts/Titillium_Web/roman.ttf);
}

@font-face {
	font-family: Titillium Web;
	src: url(/fonts/Titillium_Web/italic.ttf);
	font-style: italic;
}

@font-face {
	font-family: Cormorant Garamond;
	src: url(/fonts/Cormorant_Garamond/roman.ttf);
}

@font-face {
	font-family: Cormorant Garamond;
	src: url(/fonts/Cormorant_Garamond/italic.ttf);
	font-style: italic;
}

@property --primary-colour {
	syntax: "<color>";
	inherits: true;
	initial-value: black;
}

@property --secondary-colour {
	syntax: "<color>";
	inherits: true;
	initial-value: white;
}

:root {
	--light-colour: #d3cdc1;
	--dark-colour: #262626;
	--primary-colour: var(--light-colour);
	--secondary-colour: var(--dark-colour);

	transition: .3s;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary-colour: var(--dark-colour);
		--secondary-colour: var(--light-colour);
	}
}

html {
	background: var(--primary-colour);
	color: var(--secondary-colour);
	font-family: Titillium Web;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	--font-size: clamp(11px, calc(11px + (16 - 11) * ((100vw - 320px) / (1285 - 320))), 16px);
	font-size: var(--font-size);
}

@keyframes hat-move {
	from {
		top: 35%;
	}

	to {
		top: 65%;
	}
}

body {
	--body-padding: calc(50vw - clamp(125px, 40vw, 650px));
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	box-sizing: border-box;
	justify-self: center;
	padding-inline: var(--body-padding);
	min-height: 100vh;
	overflow-x: hidden;
	scroll-behavior: smooth;
	margin: 0;

	&[disable-scroll] {
		overflow-y: hidden;

		>#navbar {
			opacity: .5;
			pointer-events: none;
		}
	}

	&::after {
		content: '';
		display: block;
		width: 75px;
		background: var(--secondary-colour);
		height: 1px;
		justify-self: center;
		position: absolute;
		bottom: 2rem;
	}

	&::before {
		content: '';
		position: fixed;
		width: 100%;
		height: 130%;
		background: var(--secondary-colour);
		mask-image: url(/icons/hat.svg);
		mask-repeat: no-repeat;
		left: 25%;
		animation: hat-move linear both;
		animation-timeline: scroll(root block);
		transform: translate(-50%, -50%);
		mask-size: 100%;
		mask-position: center;
		opacity: .005;
	}

	@media screen and (max-width: 750px) {
		--body-padding: 5vw;
	}
}

@keyframes scrollbar {
	from {
		left: 0;
		transform: translate(0, -50%);
	}

	to {
		left: 100%;
		transform: translate(100%, -50%);
	}
}

main,
section {
	padding-block: 5rem;

	>small {
		font-size: 1.8rem;
		font-weight: 400;
		text-align: center;
	}

	>.illustration {
		position: absolute;
		z-index: -1;
		width: 25rem;
		opacity: .05;
		transform: translate(-50%, -50%) rotate(-15deg);

		&#drone {
			top: 85%;
			left: 75%;
		}

		&#camera {
			top: 15%;
			left: 25%;
			width: 20rem;
		}
	}
}

strong {
	font-weight: 600;
}

main {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-block: auto;
	min-height: 100vh;
	box-sizing: border-box;
	flex-shrink: 0;
	scroll-snap-align: start;

}

section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	scroll-snap-align: start;
	padding-block: 10rem 3.5rem;
}

a.contact {
	height: 2rem;
	aspect-ratio: 2 / 1;
	background: var(--secondary-colour);
	mask: url(/envelope.svg) center no-repeat;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity .2s ease;
	margin-top: 2rem;
	text-decoration: none;

	&:hover {
		opacity: 1;
	}
}

@keyframes dialog-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes backdrop-fade-in {
	from {
		background: transparent;
		backdrop-filter: blur(0px);
	}

	to {
		background: rgba(0, 0, 0, .75);
		backdrop-filter: blur(5px);
	}
}

/* dialog {
	background: none;
	border: none;
	outline: none;
	color: var(--secondary-colour);
	overflow: visible;

	&[open] {
		animation: dialog-fade-in ease .2s forwards;
	}

	&::backdrop {
		animation: backdrop-fade-in ease .2s forwards;
		cursor: pointer;
	}

	&:hover:not(:has(>*:hover)) {
		&::after {
			opacity: 1;
		}
	}

	&::after {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: calc(100% + 3rem);
		text-align: center;
		content: 'Close';
		opacity: .25;
		transition: opacity .2s ease;
		font-size: 2rem;
		pointer-events: none;
	}
} */

@keyframes form-sent {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes form-new {
	from {
		transform: translateX(-50%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

form {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	gap: 2rem;
	width: 100%;
	border-radius: 5px;
	opacity: 1;
	animation: .3s ease;

	&[state=sent] {
		animation-name: form-sent;
	}

	&[state=new] {
		animation-name: form-new;
	}

	button.close {
		position: absolute;
		background-color: var(--secondary-colour);
		height: 1.5rem;
		aspect-ratio: 1;
		inset: 0;
		left: unset;
		mask-image: url("/x.svg");
		cursor: pointer;
	}

	h2 {
		font-size: 3.5rem;
		line-height: 1.1;
		text-align: center;
	}

	>h2,
	>input:first-of-type,
	>textarea,
	>input[type=submit] {
		grid-column: 1 / -1;
	}

	>input,
	>textarea {
		border: none;
		border-bottom: 1px solid currentColor;
		background: none;
		color: var(--secondary-colour);
		padding: .25rem 1rem;
		font-size: 1.4rem;
		font-family: inherit;
		cursor: pointer;
		outline: 1px solid transparent;
		transition: outline .2s ease, border-radius .2s ease;
		border-radius: 0px;

		&:focus {
			outline-color: currentColor;
			border-radius: 5px;
		}

		&[type=submit] {
			border: 1px solid currentColor;
			margin-left: auto;
			border-radius: 5px;
			height: 3.5rem;

			&:hover {
				background: var(--secondary-colour);
				color: var(--primary-colour)
			}
		}
	}

	#form_message {
		&::after {
			content: 'test';
		}

		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translate(-50%, 100%);
		width: fit-content;
		background: red;
		bottom: 0;
		height: 2.5rem;
		background: var(--primary-colour);
		border: 1px solid var(--secondary-colour);
		padding: 1rem;
		gap: 1rem;
		border-radius: 5px;
		font-size: 1.5rem;
		text-align: center;
		transition: transform .2s ease,
		bottom .2s ease;

		&.active {
			transform: translateX(-50%);
			bottom: 1rem;
		}
	}
}

h1 {
	display: flex;
	flex-direction: column;
	font-family: Cormorant Garamond;
	font-size: 4rem;
	font-weight: 300;
	margin: 0;
	margin-bottom: 3rem;
	line-height: 1.1;
	text-align: left;
	width: 100%;

	>span {
		font-size: 6rem;
	}

	&.center {
		text-align: center;
	}
}

h2 {
	display: flex;
	flex-direction: column;
	font-family: Cormorant Garamond;
	font-size: 4rem;
	font-weight: 300;
	margin: 0;
	margin-bottom: 3rem;
	line-height: 1.1;
	text-align: left;
	width: 100%;

	>span {
		font-size: 6rem;
	}

	&.center {
		text-align: center;
	}
}

p {
	margin: 0;
	margin-block: 1.1rem;
	font-size: 1.5rem;
	font-weight: 300;
	text-align: justify;
	width: 100%;
	line-height: 2.2;

	&.center {
		text-align: center;
		width: auto;
	}
}

ul.centered {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 1.5rem;
	font-weight: 350;
	list-style: none;
	text-align: center;

	>li {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	transition: .1s;

	&:hover {
		&:hover {
			text-shadow: -0.02ex 0 0 currentColor, 0.02ex 0 0 currentColor;
		}
	}
}

nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	inset: 0;
	position: fixed;
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, var(--secondary-colour) 50%, transparent);
	background: color-mix(in srgb, var(--primary-colour) 50%, transparent);
	height: 75px;
	padding-block: 10px;
	z-index: 999;
	backdrop-filter: blur(5px);
	gap: 50px;
	align-items: center;

	>div {
		display: flex;
		align-items: center;
		gap: inherit;

		>a {
			text-decoration: none;
			font-size: 1.2rem;
			line-height: 1.1;
			font-weight: 300;
			text-decoration: none;
			transition: .1s;
			text-align: center;
			color: inherit;
		}

		&.left {
			justify-content: end;
		}
	}

	>#logo {
		height: 85%;
		aspect-ratio: 1.253/1;
		background: var(--secondary-colour);
		mask-position: center;
		mask-size: contain;
		mask-repeat: no-repeat;
		grid-column: 2;
		min-height: 0;

		>img {
			height: 100%;
			visibility: hidden;
		}
	}
}

body:has(dialog[open]) {
	overflow-y: hidden;
}



@keyframes project-carousel-row-animation {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0%);
	}
}

/* #contact {
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc(-1 * var(--body-padding));
		height: 100vh;
		width: 100vw;
		background: var(--secondary-colour);
		mask-image: url(/hat.svg);
		mask-position: center;
		mask-size: 100% auto;
		mask-repeat: no-repeat;
		opacity: .01;
		z-index: -2;
	}
} */

@keyframes close-envelope {
	0% {
		transform: rotateX(180deg);
	}

	25% {
		filter: drop-shadow(black 0 0 0px);
	}

	75% {
		filter: drop-shadow(black 0 5px 20px);
		z-index: 2;
	}

	90% {
		filter: drop-shadow(black 0 5px 5px);
	}

	100% {
		transform: rotateX(0deg);
		filter: drop-shadow(black 0 0px 5px);
		z-index: 2;
	}
}

#contact[open] {
	background: none;
	outline: none;
	border: none;
	padding: 0;
	opacity: 1;
	transition: opacity .2s;
	overflow: visible;

	&::backdrop {
		background: rgba(0, 0, 0, .5);
		backdrop-filter: blur(5px);
	}

	@starting-style {
		opacity: 0;
	}

	>form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-rows: 1fr;
		row-gap: 1rem;
		width: 60vw;
		aspect-ratio: 1/0.708;
		background: var(--secondary-colour);
		border-radius: 2px;
		transition: transform .3s;
		transition-delay: .25s;
		transform: translateX(0);
		font-size: 1.4rem;
		line-height: 1.1;
		color: var(--primary-colour);
		column-gap: 1rem;
		box-sizing: border-box;
		padding: 1rem;

		textarea {
			--size: 2rem;
			background: none;
			line-height: var(--size);
			background-image: linear-gradient(transparent, transparent calc(var(--size) - 2px), color-mix(in srgb, currentColor 15%, transparent) calc(var(--size) - 2px));
			background-size: 100% var(--size);
			background-attachment: local;
			border: none;
			outline: none;
			font-size: inherit;
			font-family: inherit;
			color: inherit;
			resize: none;
			grid-column: span 3;
			padding: 0;
		}

		>label {
			display: flex;
			flex-direction: column;
			line-height: 2rem;
			width: fit-content;
			grid-column: span 3;

			/* 		border-bottom: 2px solid color-mix(in srgb, currentColor 15%, transparent);
 */
			>input {
				color: inherit;
				line-height: inherit;
				font-size: inherit;
				background: none;
				border: none;
				outline: none;
				font-family: inherit;
				field-sizing: content;
			}
		}

		>input {
			color: inherit;
			line-height: 1.4;
			font-size: 1.1rem;
			height: 1.6rem;
			background: none;
			border: none;
			outline: none;
			font-family: inherit;
			border-bottom: 1px solid currentColor;
			text-align: left;
			field-sizing: content;
			max-width: 100%;
			justify-self: left;
			padding: 0;
			grid-column: span 1;

			&[type=email] {
				text-align: right;
				justify-self: right;
			}
		}

		>button.submit {
			position: absolute;
			right: 1rem;
			bottom: 1rem;
			height: 2.4rem;
			aspect-ratio: 1;
			padding: 0;
			border: 0;
			background: var(--dark-colour);
			mask-image: url(/icons/send.svg);
			mask-position: center;
			mask-size: contain;
			mask-repeat: no-repeat;
			cursor: pointer;
			filter: drop-shadow(black 0 0 10px);
			transition: .1s;
		}

		&:invalid {
			>button.submit {
				opacity: .5;
				pointer-events: none;
			}
		}
	}

	#envelope {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		display: grid;
		position: absolute;
		width: 100%;
		height: 100%;
		/* transform: scale(1.05); */
		/* height: 100%; */
		border-radius: 0 0 15px 0;
		top: 120%;
		transition: .2s ease;
		cursor: pointer;

		&:hover {
			top: 55%;
			transition-timing-function: ease;
		}

		>svg {
			grid-column: 1;
			width: 100%;

			polygon {
				fill: #262626;
				stroke: #d3cdc1;
				stroke-width: .5;
				stroke-linejoin: round;
			}

			&.top {
				grid-row: 1;
				transform-origin: center top;
				transform: rotateX(180deg);
				z-index: -1;
			}

			&.bottom {
				grid-row: 1 / span 2;

				>polygon {
					filter: drop-shadow(black 0 0 2px);
				}
			}
		}

		>.back {
			position: absolute;
			width: 100%;
			height: 100%;
			background: var(--primary-colour);
			z-index: -1;
		}
	}

	&[sent] {
		top: 150vh;
		transition: .5s cubic-bezier(1, -0.25, 1, 1);
	}
}

#software {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc(-1 * var(--body-padding));
		height: 100vh;
		width: 100vw;
		background-image: url(/code.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: .25;
		z-index: -2;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: calc(-1 * var(--body-padding));
		height: 100vh;
		width: 100vw;
		z-index: -1;
		background: linear-gradient(to bottom, var(--primary-colour) 0%, var(--primary-colour) 5%, transparent 15%, transparent 85%, var(--primary-colour) 95%, var(--primary-colour) 100%)
	}

	@media (prefers-color-scheme: light) {
		color: color-mix(in srgb, var(--light-colour), var(--dark-colour) 80%);
	}
}

#media {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc(-1 * var(--body-padding));
		height: 100vh;
		width: 100vw;
		background-image: url(/drone.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: .1;
		filter: blur(3px);
		z-index: -2;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: calc(-1 * var(--body-padding));
		height: 100vh;
		width: 100vw;
		z-index: -1;
		background: linear-gradient(to bottom, var(--primary-colour) 0%, var(--primary-colour) 5%, transparent 15%, transparent 85%, var(--primary-colour) 95%, var(--primary-colour) 100%);
	}
}

media-portfolio {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	position: relative;
	width: 100%;
	margin-top: 4rem;
	overflow: hidden;

	>dialog {
		display: none;
		grid-template-columns: 1fr;
		width: 75%;
		padding: 1rem;
		outline: none;
		border: none;
		background: none;
		column-gap: 3rem;
		color: var(--light-colour);
		pointer-events: none;
		opacity: 0;
		width: clamp(600px, 80vw, 1100px);

		&[open] {
			display: grid;
			opacity: 1;
			pointer-events: all;
			transition: opacity .2s ease;
		}

		&::backdrop {
			background: rgba(0, 0, 0, .75);
			backdrop-filter: blur(5px);
		}

		>h3 {
			text-align: center;
			font-size: 3.5rem;
			font-weight: 400;
			margin: 0;
			line-height: 1.1;
			align-self: end;
		}

		>small {
			text-align: center;
			font-size: 1.2rem;
			font-weight: 200;
			align-self: start;
			font-style: italic;
		}

		>p {
			font-weight: 300;
			line-height: 1.4;
			align-self: center;
		}

		>video {
			width: 100%;
			border-radius: 5px;
			margin-top: 2rem;
			outline: none;
			aspect-ratio: 16/9;
		}

		>.close {
			all: unset;
			grid-column: 1 / -1;
			justify-self: center;
			font-size: 2rem;
			line-height: 1.1;
			margin-top: 3rem;
			opacity: .5;
			transition: opacity .2s ease;

			&:hover {
				opacity: 1;
			}
		}
	}

	>row {
		--count: 5;
		display: flex;
		position: relative;
		--image: url(https://mediabox.groepvanroey.be/m/2250e15a2060c3c4/original/Ekopak-Deinze-Maes-20.jpg);
		--scale: 100%;
		width: fit-content;
		will-change: transform;
		height: 13.5em;
		font-size: inherit;
		gap: 1rem;
		padding-right: 1rem;
		animation: project-carousel-row-animation calc(var(--count) * 7s) infinite linear;
		justify-content: left;
		align-self: start;

		&:hover {
			animation-play-state: paused;
		}

		&[reverse] {
			animation-direction: reverse;
		}

		>item {
			all: unset;
			position: static;
			width: 100%;
			aspect-ratio: 16/9;
			border-radius: 5px;
			overflow: hidden;
			cursor: pointer;
			filter: saturate(25%);
			transition: filter .2s ease, background .2s ease;
			transform: scale(1);
			box-sizing: border-box;
			background-image: var(--thumbnail);
			background-size: 100%;
			background-position: center;

			&:hover:not(:has(dialog:hover)) {
				filter: saturate(100%);
				/* 		transform: scale(1.025);
 */
				background-size: 105%;
			}
		}
	}

	--fade-length: 15%;
	mask-image: linear-gradient(to right, transparent 0%, black var(--fade-length), black calc(100% - var(--fade-length)), transparent 100%);
}

@media screen and (max-height: 1100px) {
	div.carousel>div.grid:nth-child(2) {
		display: none;
	}
}

footer {
	height: 2rem;
	background: var(--secondary-colour);
	position: fixed;
	top: 0;
	right: 0;
	margin: 1rem;
	border-radius: 5px;
	padding-inline: .5rem;
	color: var(--primary-colour);
	text-align: center;
	cursor: pointer;
}

cap-widget {
	--cap-background: none;
	--cap-border-color: currentColor;
	--cap-border-radius: 5px;
	--cap-color: var(--secondary-colour);
	--cap-checkbox-size: 25px;
	--cap-checkbox-border: 3px solid color-mix(in srgb, currentColor 50%, transparent 50%);
	--cap-checkbox-border-radius: 50px;
	--cap-checkbox-background: none;
	--cap-font: Titillium Web;
	--cap-spinner-color: currentColor;
	--cap-spinner-background-color: color-mix(in srgb, currentColor 50%, transparent 50%);
}

#contact_toggle {
	position: fixed;
	bottom: .75rem;
	right: 1.5rem;
	aspect-ratio: 1;
	background: var(--secondary-colour);
	border: none;
	height: 3rem;
	mask-image: url(/icons/envelope.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	cursor: pointer;
	opacity: .5;
	transition: .1s;

	&:hover {
		opacity: 1;
	}
}

#other-services-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	justify-items: center;
	align-items: center;

	>a {
		font-family: Cormorant Garamond;
		color: inherit;
		font-size: 3rem;
		text-decoration: none;
		text-align: center;
		transition: .1s;
		font-weight: 300;

		&:hover {
			font-weight: 500;
		}
	}
}