/* ------------------------------ Landing Page ------------------------------ */

#landing {
	position: relative;
	width: 100%; height: 100vh;
	padding-bottom: 15vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	mask: url('assets/mask-bottom.svg') bottom center / cover no-repeat;
	-webkit-mask: url('assets/mask-bottom.svg') bottom center / cover no-repeat;
	
	background: #fff url('assets/photos/gallery/toul-ru.webp') no-repeat;
	background-size: cover;
	background-position: center;
}

#landing .backdrop {
	width: 60vw;
    height: 120vh;
    position: absolute;
    top: 0;
    left: 20vw;
    background-color: rgba(0,0,0,.1);
    z-index: -10;
	box-shadow: 0 0 5vw 3vw rgba(0,0,0,.1);
}

#landing .title {
	width: 100%;
}

#landing h1 {
	font-family: 'Sarkowik';
	font-weight: normal;
	margin: 0;
	text-align: center;
	overflow-x: hidden;
	transform: scale(0);
	line-height: 100%;
}
#landing.visible h1 {
	transform: scale(1);
	transition: transform .5s ease-in-out;
}

#landing .logo {
	display: block;
	margin: 0 auto 2rem;
	max-height: 15rem;
	transform: scale(0);
	transition: transform .5s ease-in-out;
}
#landing.visible .logo {
	transform: scale(1);
}

@media (hover: hover) and (min-width: 768px) {
	#landing {
		background-attachment: fixed;
	}
}

@media screen and (min-width: 768px) {

	#landing .title {
		margin: 4rem 0;
	}

	#landing .subtitle {
		font-size: 3rem;
	}

	#landing h1 {
		font-size: 8rem;
	}

	#landing h2 {
		font-size: 4.5rem;
	}
	
}

@media screen and (max-width: 768px) {
	#landing .title {
		margin: 2rem 0 6rem;
	}

	#landing .subtitle {
		font-size: 2rem;
	}

	#landing h1 {
		font-size: 6rem;
	}

	#landing h2 {
		font-size: 3rem;
	}
}

#landing .title hr {
	border: none;
	border-top: .75vh solid white;
	margin: 10px 0; margin-left: 50%;
	width: 0;
}
#landing.visible .title hr {
	width: 37.5rem; max-width: 90%;
	margin: 10px auto;
	transition: width .5s ease-in-out, margin-left .5s ease-in-out;
	transition-delay: .5s;
}

#landing h2 {
	font-family: 'CaviarDreams';
	font-weight: normal;
	margin: 0 auto;
	text-align: center;
	width: 0; overflow: hidden;
	white-space: nowrap;
}
#landing.visible h2 {
	width: 100%;
	transition: width .5s ease-in-out, margin .5s ease-in-out;
	transition-delay: 1s;
}

#landing .subtitle {
	font-family: 'Cinzel';
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: translateY(-3vh);
	margin: 0 1em;
}
#landing.visible .subtitle {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .5s ease-in-out, transform .5s ease-in-out;
	transition-delay: 1.5s;
}

/* ------------------------------ Réalisations ------------------------------ */

#realisations {
	
}

#realisations .img-gallery.tall {
	margin-top: 4rem;
}

/* ------------------------------- Prestation ------------------------------- */

#prestations {
	position: relative;
}

#prestation h2 {
	position: absolute;
	top: 5px; left: 0; right: 0;
}

@media (min-width: 768px) {
	.prestation {
		mask: url('assets/mask.svg#mask') 0 0 / 100% 100%;
		-webkit-mask: url('assets/mask.svg#mask') 0 0 / 100% 100%;
		width: 100%; height: 80vh;
	}

	.prestation::before {
		transform: scale( var(--step) );
		content: '';
		position: fixed; top: 0; left: 0;
		width: 100%; height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	#prise-de-vues::before {
		background-image: url('assets/photos/gallery/mesquer-bourg.webp');
	}
	
	#film-institutionnel::before {
		background-image: url('assets/photos/gallery/cala-beltran.webp');
	}
	#film-publicitaire::before {
		background-image: url('assets/photos/gallery/saline-marais-mes-soir.webp');
	}
	#film-evenementiel::before {
		background-image: url('assets/photos/gallery/triathlon-mesquer.webp');
	}
}

@media (max-width: 768px) {
	#prise-de-vues {
		background-image: url('assets/photos/gallery/mesquer-bourg.webp');
		background-position: 45%;
	}

	#film-institutionnel {
		background-image: url('assets/photos/gallery/cala-beltran.webp');
		background-position: 45%;
	}
	#film-publicitaire {
		background-image: url('assets/photos/gallery/saline-marais-mes-soir.webp');
	}
	#film-evenementiel {
		background-image: url('assets/photos/gallery/triathlon-mesquer.webp');
		background-position: 32%;
	}
}

@media screen and (min-width: 768px) {
	.prestation {
		mask: url('assets/mask.svg#mask') 0 0 / 100% 100%;
		-webkit-mask: url('assets/mask.svg#mask') 0 0 / 100% 100%;
		width: 100vw; height: 85vh;
	}
}

@media screen and (max-width: 768px) {
	.prestation {
		mask: url('assets/mask_mobile.svg#mask') no-repeat center / cover;
		-webkit-mask: url('assets/mask_mobile.svg#mask') no-repeat center / cover;
		width: 100vw; height: 150vw;
	}
}

.prestation {
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.prestation:nth-child(even) {
	align-items: flex-start;
}
.prestation:nth-child(odd) {
	align-items: flex-end;
}

.prestation .content {
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	background: rgba(0,0,0, .2);
	padding: 0; padding: 10%;
	width: 80%; height: 100%;
	position: relative;
	color: #fff;
}

.prestation .content h3 {
	font-family: 'CaviarDreams', Arial;
	font-size: 7vh;
	font-weight: normal;
	margin: 0;
	width: fit-content;
}
.prestation .content p {
	font-family: calibri, Arial;
	font-size: 1.5em;
	font-weight: normal;
	margin: 1em 0 0 5%;
	width: 100%;
}

@media screen and (min-width: 768px) {
	.prestation .content p {
		font-size: 1.75em;
	}
}

.prestation .content a.button {
	margin-top: 1em;
}