@keyframes displayBienvenue {
	0% {opacity: 1; transform: scale(1.0);}
	99% {opacity: 0; transform: scale(0.5);}
	100% {opacity: 0; transform: scale(0);}
}

@keyframes toRight {
	from {right: 100%;}
	to {right: 0;}
}

@keyframes toLeft {
	from {left: 100%;}
	to  {left: 0;}
}

@keyframes toTop {
	from {top: 100%;}
	to {top: 0;}
}

@keyframes enterReal {
	from {top: 50%; height: 0;}
	to {top: 0; height: 100%;} 
}

@keyframes shadowAppear {
	from {box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.2);}
	to {box-shadow: inset 0px 0px 6px rgba(0,0,0,0.12);}
}

@keyframes nextProjectPanel {
	from {top: 100%;}
	to {top: -110%;}
}

@keyframes prevProjectPanel {
	from {top: -110%;}
	to {top: 100%;}
}

@keyframes barreIndexAppear {
	from {left: 50%; width: 0;}
	to {left: 0; width: 5rem;}
}

@keyframes currentIndexAppear {
	from {left: 100%;}
	to {left: 29%;}
}

@keyframes totalIndexAppear {
	from {right: 100%;}
	to {right: 32%;}
}

.textAppearTop > span {
	animation-name: toTop;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(.25,0,.06,1);
}

::selection {background: #6B9080; color: #FBFFF1;}
html, body {font-size: 16px; margin: 0 auto; font-family: 'Poppins', sans-serif; color: #13272A;}
body {display: flex; flex-direction: column; align-items: stretch; height: 100vh;}

h1 {font-family: 'Playfair Display', serif; font-size: 5rem; font-weight: 400;}
p, li {font-size: 1.125rem; line-height: 1.66666;}
img {width: 100%;}


/* HEADER NAV */
header {display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10;}
#louisg {padding: 2.5rem 0 2.5rem 4rem;}
#louisg a,
#louisg a:visited  {font-weight: 700; color: #13272A; text-decoration: none; font-size: 1.125rem; display: block;}
#louisg a > span {font-weight: 300;}
#louisg a > span span {font-weight: 700;}
header nav {padding: 2.5rem 4rem 2.5rem 0; display: none;}
header nav ul {padding-left: 0; margin-bottom: 0; margin-top: 0; display: flex; list-style: none;}
header nav ul li {padding: 0 1.5rem; position: relative; visibility: hidden; overflow: hidden;}
header nav ul li span {visibility: visible; position: absolute; left: 1.5rem;}
header nav ul li a,
header nav ul li a:visited {color: #13272A; text-decoration: none; display: block; position: relative;}
header nav ul li a:after {content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #13272A; transform-origin: bottom right; transition: transform 0.25s ease-out;}
header nav ul li a:hover:after,
header nav ul li.current-page a:after {transform: scaleX(1); transform-origin: bottom left;}


#main {flex-grow: 1; padding: 0 12rem; position: relative; height: 85vh; overflow: hidden;}

/* REALISATION */
/* Compteur */
#index-real {position: absolute; top: 40%; left: -8.5rem; transform: translate(0,-50%); height: 4.5rem; width: 5rem;}
#index-real > span {font-size: 2.5rem; font-family: 'Playfair Display', serif; font-weight: 700; position: absolute; overflow: hidden;}
#index-real > span > span {transform: rotate(-45deg); display: block; width: 3rem; height: 3rem; text-align: center; line-height: 1; position: absolute;}
#index-real span#current-nb {top: -46%; left: -38%; transform: rotate(45deg); height: 5rem; width: 5rem;}
#index-real span#current-nb span {top: 21%; left: 100%; transition: all 0.75s cubic-bezier(.17,.67,.42,.99);}
#index-real span#current-nb span.index-appear {left: 29%;}
#index-real span.last-nb {top: 34%; left: 34%; transform: rotate(45deg); height: 5rem; width: 5rem;}
#index-real span.last-nb span {top: 14%; right: 100%; animation-name: totalIndexAppear; animation-fill-mode: forwards; animation-duration: 1.5s; animation-delay: 1.25s; animation-timing-function: cubic-bezier(.17,.67,.42,.99);}
#index-real span.barre-index {position: absolute; top: 50%; transform: translate(0,-50%) rotate(-45deg); border-bottom: 2px solid #13272A; animation-name: barreIndexAppear; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.62,0,.06,1);}

#pPortfolio {position: absolute; top: 40%; right: -8.5rem; transform: translate(0,-50%) rotate(-90deg);}

/* Visuel réal */
#visu {height: 85vh; padding: 4px; position: relative;}
#projets {position: relative; height: 70vh; animation-name: shadowAppear; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 2.25s; animation-timing-function: cubic-bezier(.62,0,.06,1);}
#projets:after {content: ''; position: absolute; left: 0; width: 100%; z-index: -1; background-color: #E6E6E6; animation-name: enterReal; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.62,0,.06,1);}
.container-real {height: 100%;}
.container-real.current {}
#transi-panel {position: absolute; top: 100%; left: 0; width: 100%; height: 110%; z-index: 2; background-color: white;}
#visu.nextTransi #transi-panel {animation-name: nextProjectPanel; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.2,.8,.8,.2);}
#visu.prevTransi #transi-panel {animation-name: prevProjectPanel; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.2,.8,.8,.2);}
.img-real {position: absolute; left: 0; width: 100%; overflow: hidden; display: none;}
.container-real.current .img-real {display: block;}
.container-real.first-show .img-real {animation-name: enterReal; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.62,0,.06,1);}
.container-real.show .img-real {top: 0; height: 100%;}
.img-real a {display: block; height: 100%; position: relative; transition: all 1s cubic-bezier(.12,0,0,1);}
.img-real img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 55%; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); transition: all 1s cubic-bezier(.12,0,0,1);}
.img-real:hover a {transform: scale(1.075);}
.img-real:hover a img {box-shadow: 4px 4px 30px rgba(0,0,0,0.2);}

/* Titre et desc réal */
.infos-real {position: absolute; top: 90%; padding: 0 9%; z-index: 3;}
.container-real.current .infos-real {z-index: 4;}
.titre-real {margin-bottom: 1.5rem; margin-top: 0; visibility: hidden; overflow: hidden; position: relative; display: block;}
.titre-real span {position: absolute; top: 100%; left: 0; visibility: visible; transition: all 1.75s cubic-bezier(.25,0,.06,1);}
.container-real.current .infos-real .titre-real span {top: 0; transition-delay: 0.5s;}
.titre-real span a,
.titre-real span a:visited {text-decoration: none; color: #6B9080; position: relative; z-index: 1;}
.desc-real {margin-bottom: 0; color: #888; visibility: hidden; overflow: hidden; position: relative; display: block;}
.desc-real span {position: absolute; top: 100%; left: 0; visibility: visible; transition: all 0.65s cubic-bezier(.25,0.1,.6,1);}
.container-real.current .infos-real .desc-real span {top: 0; transition: all 1.5s cubic-bezier(.25,0,.06,1); transition-delay: 1s;}