/* Hero */
section {
	position: relative;
	z-index: 1;
}
#hero {
	view-timeline-name: --subjectReveal;
	position: relative;
	z-index: 0;
	overflow: hidden;

	height: 150vh;
}
#hero .centeritems {
	position: fixed;
	top: 0;
}
#herotitle {
	margin-top: -15vh;
}
#herotitle > div {
	padding: 1rem 10vw;
	color: var(--greentext);
}


/* Navigation */
#navigation {
	min-height: 10vh;

	background-color: var(--invertbg);
}
#navigationcontainer {
	width: 80vw;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.aclogo {
	height: 2rem;
	aspect-ratio: 1;

	background-color: var(--text);
	border-radius: 2rem;
}
#navigationcontainer .wrapper > * {
	margin: 0 0.5rem;
}	


/* About */
#about {
	background-color: var(--primary);
	color: var(--inverttext);
}

#regenterms > div {
	min-height: 40vh;
	padding: 10vw;
}
#regenterms > div:nth-of-type(1) {
	background: linear-gradient(90deg,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), center/cover no-repeat url("./Ryssebergen_2012b.jpg");
	text-align: right;
}
#regenterms > div:nth-of-type(2) {
	background: linear-gradient(90deg,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), center/cover no-repeat url("./PXL_20241227_purpleheartradish.jpg");
	text-align: left;
}
#regenterms > div:nth-of-type(3) {
	background: linear-gradient(90deg,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), center/cover no-repeat url("./Domegaia_design _2_.jpg");
	text-align: right;
}
#regenterms > .wrapper > p {
	flex: 3 3 50vw;
}


/* Locations */
#locations {
	background-color: var(--invertbg)}
#locationlist {
	min-width: 80vw;
	padding: 0 2rem;
	flex-wrap: wrap;
	align-items: stretch;
}
.locationcard {
	flex: 1 1 10cm;
	padding: 1rem 1rem 0;
	margin: 2rem 1rem;
	
	border: 1px solid var(--primary);
	border-radius: 2rem;
	
	text-align: left;
}
.locationcard img {
	object-fit: cover;
	aspect-ratio: 1.7;

	border-radius: 1rem;
}
.locationcard button:not(:hover) {
	background-color: var(--primary);
	color: var(--inverttext);
}
.rightwrapper {
	display: flex;
	justify-content: right;
	align-items: center;
	width: 100%;
}


/* Contact */
#contactsection {
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.contactwrapper {
	flex: 1 1 14cm;
	height: 100vh;
	
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), top/cover no-repeat url("./PXL_20230721_sweetpotatovine.jpg");
	text-align: right;
}

.contactwrapper:nth-of-type(2) {
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), top/cover no-repeat url("./PXL_20240219_shadowgrass.jpg");
	text-align: left;
}
.contactwrapper > div {
	z-index: 1;
	padding: 2rem;
	border-radius: 2rem;
	color: var(--inverttext);
}

#newsletterbox {
	
}




/* Footer */
#footer {
	padding: 2rem 5rem;
	align-items: stretch;
	
	background-color: var(--invertbg);
	
	color: var(--text);
	text-align: left
}
#footer > * {
	margin: 0 2rem;
}
.footermenu {
	display: flex;
	flex-direction: column;
}
.footermenu a > * {
	padding: 0.5rem 0;
}




/* === Graphics mechanics === */
.bggraphics {
	position: relative;
}
.bggraphics > * {
	position: absolute;
	//border: 1px solid var(--text);
}
.graphicswrapper {
	z-index: -1;
	position: absolute;
	top: 1px;
}
#treebg {
	z-index: 1;
}
/* Graphic elements */
.building {
	width: 50vw;
}
.building:nth-of-type(1) {
	--sideoffset: -50vw;	
	background: top right/cover no-repeat url("./Aris_Market_Square.jpg");
	height: 150vh;
	
	right: var(--sideoffset);
	
	animation: leftbuilding linear;
	animation-timeline: --subjectReveal;
	animation-fill-mode: forwards;
	animation-range: contain 0% exit 100%;
}
.building:nth-of-type(2) {
	--sideoffset: 48vw;
	background: top left/cover no-repeat url("./texaco_building_wiki.jpg");
	height: 150vh;
	
	left: var(--sideoffset);
	
	animation: rightbuilding linear;
	animation-timeline: --subjectReveal;
	animation-fill-mode: forwards;
	animation-range: contain 0% exit 100%;
}
#tree {
	--startingwidth: 80vw;
	--endingwidth: 200vw;
	--startingoffset: 10vw;
	--endingoffset: -50vw;
	background: top/cover no-repeat url("./rembg_oak.jpg");
	width: var(--startingwidth);
	
	animation: treeapproach linear;
	animation-timeline: --subjectReveal;
	animation-fill-mode: forwards;
	animation-range: contain 0% exit 100%;
	aspect-ratio: 1298 / 865;
}

/* Animations */
@keyframes leftbuilding {
	0% {
		right: var(--sideoffset);
		top: 50vh;
	}.building {
	width: 50vw;
}
	100% {
		right: 0vw;
		top: 50vh
	}
}
@keyframes rightbuilding {
	0% {
		left: var(--sideoffset);
		top: 50vh;
	}
	100% {
		left: 100vw;
		top: 50vh;
	}
}
@keyframes treeapproach {
	0% {
		width: var(--startingwidth);
		left: var(--startingoffset);
		top: 120vh;
	}
	100% {
		width: var(--endingwidth);
		left: var(--endingoffset);
		top: 20vh;
	}
}

/* Break points for mobile layout adjustments */
@media (max-width: 120vh) {
	#tree {
		--startingwidth: 100vw;
		--endingwidth: 400vw;
		--startingoffset: 0vw;
		--endingoffset: -150vw;
	}
}
@media (max-width: 60vh) {
	.building {
		width: 80vw;
	}
	.building:nth-of-type(1) {
		--sideoffset: -70vw;
	}
	.building:nth-of-type(2) {
		--sideoffset: 40vw;
	}
	
	#tree {
		--startingwidth: 100vw;
		--endingwidth: 600vw;
		--startingoffset: 0vw;
		--endingoffset: -250vw;
	}
}

/* By EagleP *.