@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
.mv{
	position : relative;
	display : grid;
	grid-template-rows : calc( 25dvh - var( --headerHeight ) ) 1fr auto 1fr 25dvh;
	align-items : center;
	justify-content : center;
	height : calc( 100dvh - var( --headerHeight ) );
}
.mv h1{
	grid-row : 3;
}
.mv .border{
	position : relative;
	display : block;
	grid-row : 5;
	align-self : end;
	justify-self : center;
	width : 1px;
	height : 100%;
	overflow : hidden;
	font-size : 0;
	content : "";
}
.mv .border::before{
	position : absolute;
	top : -100%;
	left : 0;
	width : 100%;
	height : 0;
	height : 100%;
	max-height : calc( 220 * var( --remBase ) );
	content : "";
	background-color : black;
}
@media screen and ( width < 768px ){
	.mv{
		row-gap : calc( 20 * var( --remBase ) );
	}
	.mv img{
		height : calc( 40.91 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.mv{
		row-gap : calc( 40 * var( --remBase ) );
	}
	.mv img{
		height : calc( 107.63 * var( --remBase ) );
	}
}

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
:root{
	--headerDuration : 1s;
	--navDuration : 1s;
	--navDelay : calc( .5s + 1.5s );
	--h1Duration : 3.75s;
	--h1Delay : calc( 0s + 1.5s );
	--borderDuration : 2s;
	--dripDuration : 4s;
}
@media ( prefers-reduced-motion : no-preference ){
	@media print , screen and ( width > 768px ){
		#header.has-scroll-anim{
			background-color : transparent;
			transition-delay : calc( var( --h1Duration ) + var( --h1Delay ) );
			transition-timing-function : linear;
			transition-duration : var( --headerDuration );
			transition-property : background-color;
		}
		#header.has-scroll-anim :where( .logo , #nav a ){
			opacity : 0;
			transition-delay : calc( var( --h1Duration ) + var( --h1Delay ) + var( --headerDuration ) );
			transition-timing-function : linear;
			transition-duration : var( --navDuration );
			transition-property : opacity;
		}
		#header.has-scroll-anim.is-inview{
			background-color : black;
		}
		#header.has-scroll-anim.is-inview :where( .logo , #nav a ){
			opacity : 1;
		}
	}
	h1.has-scroll-anim.scroll-fade-in{
		transition-delay : var( --h1Delay );
		transition-timing-function : linear;
		transition-duration : var( --h1Duration );
	}
	.mv .border{
		opacity : 0;
		transition : opacity var( --borderDuration ) linear calc( var( --h1Duration ) + var( --h1Delay ) );
	}
	.mv.is-inview .border{
		opacity : 1;
	}
	.mv.is-inview .border::before{
		animation : drip var( --dripDuration ) ease-in-out calc( var( --h1Duration ) + var( --h1Delay ) ) infinite;
	}
	.gallery.has-scroll-anim > li{
		opacity : 0;
		transition : transform 1s cubic-bezier( .25 , .8 , .25 , 1 ) , opacity 1s cubic-bezier( .25 , .8 , .25 , 1 );
		transform : translateY( 25% );
	}
	.gallery.has-scroll-anim.is-inview > li{
		opacity : 1;
		transform : translateY( 0 );
	}
	@media screen and ( width < 768px ){
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="1"]{
			transition-delay : .5s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="2"]{
			transition-delay : 1s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="3"]{
			transition-delay : 1.5s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="4"]{
			transition-delay : 2s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="5"]{
			transition-delay : 2.5s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="6"]{
			transition-delay : 3s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-sp-row="7"]{
			transition-delay : 3.5s;
		}
	}
	@media print , screen and ( width > 768px ){
		.gallery.has-scroll-anim.is-inview > li[data-pc-row="1"]{
			transition-delay : .5s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-pc-row="2"]{
			transition-delay : 1s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-pc-row="3"]{
			transition-delay : 1.5s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-pc-row="4"]{
			transition-delay : 2s;
		}
		.gallery.has-scroll-anim.is-inview > li[data-pc-row="5"]{
			transition-delay : 2.5s;
		}
	}
}
@keyframes drip{
	0%{
		top : -100%;
		opacity : .5;
	}
	50%{
		opacity : 1;
	}
	100%{
		top : 100%;
		opacity : .5;
	}
}