@charset "UTF-8";

/* --------------------------------------------
LOADING
--------------------------------------------- */
@keyframes moving{
	0%{
		clip-path : polygon( 0 25% , 100% 25% , 100% 100% , 0% 100% );
	}
	100%{
		clip-path : polygon( 0 0% , 100% 0% , 100% 100% , 0% 100% );
	}
}
#loading.is-moving{
	position : fixed;
	inset : 0;
	display : grid;
	clip-path : polygon( 0 25% , 100% 25% , 100% 100% , 0% 100% );
	animation : moving .5s forwards;
}

/* --------------------------------------------
HOME
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){
	#proposal.animation h2{
		clip-path : inset( 0 100% 0 0 );
		filter : blur( .5rem );
		transition-timing-function : ease-out;
		transition-property : clip-path , filter;
	}
	#proposal.animation > p{
		filter : blur( .5rem );
		opacity : 0;
		transition-timing-function : ease-in;
		transition-property : opacity , translate , filter;
		translate : 0 .5lh;
	}
	#proposal.animation h3{
		clip-path : inset( 0 100% 0 0 );
		transition-timing-function : ease-out;
		transition-property : clip-path;
	}
	#proposal.animation li p{
		filter : blur( .5rem );
		opacity : 0;
		transition-timing-function : ease-in;
		transition-property : opacity , translate , filter;
		translate : 0 .25lh;
	}
	#proposal.animation ul ul{
		opacity : 0;
		transition-timing-function : ease-in;
		transition-property : opacity;
	}
	#proposal.animation::before{
		clip-path : inset( 0 100% 0 0 );
		filter : blur( .5rem );
		transition-timing-function : ease-out;
		transition-property : clip-path , filter;
	}
	@media screen and ( width <= 750px ){
		#proposal.animation{
			--duration : 2.5s
  ;
		}
		#proposal.animation h2{
			transition-duration : 2s;
		}
		#proposal.animation > p{
			transition-delay : 2s;
			transition-duration : 1.5s;
		}
		#proposal.animation > ul > li:nth-child( 1 ){
			--delay : 0s
          ;
		}
		#proposal.animation > ul > li:nth-child( 2 ){
			--delay : calc( var( --duration ) * 1 );
		}
		#proposal.animation > ul > li:nth-child( 3 ){
			--delay : calc( var( --duration ) * 2 );
		}
		#proposal.animation h3{
			transition-delay : calc( 3.5s + var( --delay ) );
			transition-duration : 1s;
		}
		#proposal.animation li p{
			transition-delay : calc( 4.5s + var( --delay ) );
			transition-duration : 1s;
		}
		#proposal.animation ul ul{
			transition-delay : calc( 4.5s + var( --delay ) );
			transition-duration : 2s;
		}
		#proposal.animation::before{
			transition-delay : calc( 3s + ( var( --duration ) * 3 ) );
			transition-duration : 1s;
		}
	}
	@media print , screen and ( width > 750px ){
		#proposal.animation{
			--duration : 2.5s
  ;
		}
		#proposal.animation h2{
			transition-duration : 2s;
		}
		#proposal.animation::before{
			transition-delay : 2s;
			transition-duration : 1s;
		}
		#proposal.animation > p{
			transition-delay : 2s;
			transition-duration : 1s;
		}
		#proposal.animation > ul > li:nth-child( 1 ){
			--delay : 0s
          ;
		}
		#proposal.animation > ul > li:nth-child( 2 ){
			--delay : calc( var( --duration ) * 1 );
		}
		#proposal.animation > ul > li:nth-child( 3 ){
			--delay : calc( var( --duration ) * 2 );
		}
		#proposal.animation h3{
			transition-delay : calc( 3.5s + var( --delay ) );
			transition-duration : 1s;
		}
		#proposal.animation li p{
			transition-delay : calc( 4.5s + var( --delay ) );
			transition-duration : 1s;
		}
		#proposal.animation ul ul{
			transition-delay : calc( 4.5s + var( --delay ) );
			transition-duration : 2s;
		}
	}
	#proposal.animation.is-animation h2{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#proposal.animation.is-animation::before{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#proposal.animation.is-animation > p{
		filter : blur( 0 );
		opacity : 1;
		translate : 0 0;
	}
	#proposal.animation.is-animation h3{
		clip-path : inset( 0 );
	}
	#proposal.animation.is-animation li p{
		filter : blur( 0 );
		opacity : 1;
		translate : 0 0;
	}
	#proposal.animation.is-animation ul ul{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#about.animation{
		--duration : 1s;
	}
	#about.animation > :where( .title-home , h3 , p ){
		transition-timing-function : linear;
		transition-duration : var( --duration );
	}
	#about.animation :where( .links li  , h4 , .sns , .sns li li ){
		transition-timing-function : linear;
		transition-duration : calc( var( --duration ) * .5 );
	}
	#about.animation .title-home{
		clip-path : inset( 0 100% 0 0 );
		filter : blur( .5rem );
		transition-delay : 0s;
		transition-property : clip-path , filter;
	}
	#about.animation h3{
		filter : blur( .5rem );
		opacity : 0;
		transition-delay : calc( var( --duration ) * .25 );
		transition-property : opacity , filter , translate;
		translate : 0 -1em;
	}
	#about.animation > p{
		filter : blur( .5rem );
		opacity : 0;
		transition-delay : calc( var( --duration ) * 1.25 );
		transition-property : opacity , filter , translate;
		translate : 0 1em;
	}
	#about.animation .links li{
		clip-path : inset( 50% );
		filter : blur( .5rem );
		transition-delay : calc( var( --duration ) * 2.25 );
		transition-property : clip-path , filter;
	}
	#about.animation h4{
		clip-path : inset( 0 100% 0 0 );
		filter : blur( .5rem );
		transition-delay : calc( var( --duration ) * 2.75 );
		transition-property : clip-path , filter;
	}
	#about.animation .sns{
		filter : blur( .5rem );
		opacity : 0;
		transition-delay : calc( var( --duration ) * 3.25 );
		transition-property : opacity , filter , translate;
		translate : 0 1em;
	}
	#about.animation .sns li li{
		clip-path : inset( 50% );
		filter : blur( .5rem );
		transition-delay : calc( var( --duration ) * 3.75 );
		transition-property : clip-path , filter;
	}
	#about.animation.is-animation .title-home{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#about.animation.is-animation h3{
		translate : 0;
		filter : blur( 0 );
		opacity : 1;
	}
	#about.animation.is-animation > p{
		translate : 0;
		filter : blur( 0 );
		opacity : 1;
	}
	#about.animation.is-animation .links li{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#about.animation.is-animation h4{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#about.animation.is-animation .sns{
		translate : 0;
		filter : blur( 0 );
		opacity : 1;
	}
	#about.animation.is-animation .sns li li{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#journal.animation{
		--duration : 1s;
	}
	#journal.animation :where( .title-home , picture , h3 , dl ){
		transition-timing-function : linear;
	}
	#journal.animation :where( .title-home ){
		transition-duration : var( --duration );
	}
	#journal.animation :where( picture , li a , picture , h3 , dl ){
		transition-delay : var( --duration ) ;
		transition-duration : calc( var( --duration ) * .5 );
	}
	#journal.animation .link-home{
		transition-delay : calc( var( --duration ) * 1.5 ) ;
		transition-duration : calc( var( --duration ) );
	}
	#journal.animation .title-home{
		clip-path : inset( 0 100% 0 0 );
		filter : blur( .5rem );
		transition-property : clip-path , filter;
	}
	#journal.animation li a{
		background-color : color-mix( in sRGB , white 0% , transparent );
		transition-property : background-color;
	}
	#journal.animation picture{
		filter : blur( .5rem );
	}
	#journal.animation h3{
		filter : blur( .5rem );
		opacity : 0;
		transition-property : opacity , translate , filter;
		translate : 0 1em;
	}
	#journal.animation dl{
		filter : blur( .5rem );
		opacity : 0;
		transition-property : opacity , translate , filter;
		translate : 0 -1em;
	}
	#journal.animation .link-home{
		opacity : 0;
		translate : 0 25%;
		transition-property : opacity , translate;
	}
	@media screen and ( width <= 750px ){
		#journal.animation picture{
			clip-path : inset( 25% );
			opacity : 0;
			transition-property : filter , clip-path , opacity;
		}
	}
	@media print , screen and ( width > 750px ){
		#journal.animation picture{
			clip-path : inset( 50% );
			transition-property : filter , clip-path;
		}
	}
	#journal.animation.is-animation .title-home{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#journal.animation.is-animation li a{
		background-color : color-mix( in sRGB , white 100% , transparent );
	}
	#journal.animation.is-animation picture{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#journal.animation.is-animation h3 , #journal.animation.is-animation dl{
		filter : blur( 0 );
		opacity : 1;
		translate : 0;
	}
	#journal.animation.is-animation .link-home{
		translate : 0;
		opacity : 1;
	}
	@media screen and ( width <= 750px ){
		#journal.animation.is-animation picture{
			opacity : 1;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#contacts.animation{
		--duration : 1s;
	}
	#contacts.animation > *{
		transition-duration : var( --duration );
	}
	#contacts.animation > *:nth-child( 1 ){
		transition-delay : 0s;
	}
	#contacts.animation > *:nth-child( 2 ){
		transition-delay : calc( var( --duration ) * 1 );
	}
	#contacts.animation > *:nth-child( 3 ){
		transition-delay : calc( var( --duration ) * 2 );
	}
	#contacts.animation > *:nth-child( 4 ){
		transition-delay : calc( var( --duration ) * 3 );
	}
	#contacts.animation > *:nth-child( 5 ){
		transition-delay : calc( var( --duration ) * 4 );
	}
	#contacts.animation > *:not( p ){
		clip-path : inset( 0 100% 0 0 );
		transition-timing-function : ease-out;
		transition-property : clip-path;
	}
	#contacts.animation > p{
		opacity : 0;
		transition-timing-function : ease-in;
		transition-property : opacity;
	}
	#contacts.animation.is-animation > *:not( p ){
		clip-path : inset( 0 );
	}
	#contacts.animation.is-animation > p{
		opacity : 1;
	}
}