/* prevent nav margin on top */
#bloc-nav {
	position: absolute;
	z-index: 1;
}

#bloc-hi > .container {
	position: absolute;
	height: 100vh;
}

#bloc-hi {
	position: absolute;
	z-index: 100;
	animation: reduceHeight 2s cubic-bezier(0.23, 1, 0.32, 1) 1s forwards;
 	overflow: hidden;
	padding: 0;
}

#bloc-3d::before, #bloc-sketches::before {
	height: 0px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	content: "";
}

#bloc-3d::before {
	background-color: #FFFFFF;
	z-index: 5;
	animation: reduceHeight 2s cubic-bezier(0.23, 1, 0.32, 1) 2.5s backwards;
}

#bloc-sketches::before {
	z-index: 4;
	background-color: #FFCB00;
	animation: reduceHeight 2s cubic-bezier(0.23, 1, 0.32, 1) 4s backwards;
}


@keyframes reduceHeight {
	0% {
	  min-height: 200vh;
	}
	100% {
	  min-height: 0vh;
	}
}


body:has(#bloc-hi) { animation: scroll 3s 0s; }

/* scroll anim */
@keyframes scroll {
	0% {
		position: fixed;
		width: 100%;
		overflow-y: scroll;
	}
	100% {
		position: fixed;
		width: 100%;
		overflow-y: scroll;
	}
}

/* yann CSS 
code florian pour animer à l'affichage : 

class sir le bloc :
animate-XXX

class dans le CSS : 
.XXX { animation : YYY 1s ease-out forwards ;}

@keyframes YYY {0%.....}

*/

.fadeinmoveuphi  {
	animation : fadeInMoveUp 1.5s ease-out 0s both;
}

.moveup-ylc {
	animation : fadeInMoveUp 1.5s ease-out 1s both;
}

.moveup-3d {
	animation : fadeInMoveUp 1.5s ease-out 2.5s both;
}

.moveupfade1s {
	animation : fadeInMoveUp 1.5s ease-out forwards;
}

.animate-moveupfade1s {
	opacity: 0;
}

@keyframes fadeInMoveUp {
  0% {
    opacity: 0; /* Start with 0% opacity */
    transform: translateY(100px); /* Start position */
    animation-timing-function: ease-out; /* Ease-out timing function */
  }
  100% {
    opacity: 1; /* End with 100% opacity */
    transform: translateY(0px); /* End position */
  }
}