@CHARSET "ISO-8859-1";

@font-face {
	font-family: 'book';
	src: url("../fonts/CooperHewitt-Book.eot");
	src: url("../fonts/CooperHewitt-Book.woff") format("woff"), url("../fonts/CooperHewitt-Book.ttf") format("truetype"), url("../fonts/CooperHewitt-Book.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	}
	
@font-face {
	font-family: 'bold';
	src: url("../fonts/CooperHewitt-Bold.eot");
	src: url("../fonts/CooperHewitt-Bold.woff") format("woff"), url("../fonts/CooperHewitt-Bold.ttf") format("truetype"), url("../fonts/CooperHewitt-Bold.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	}

:root {
	
	--pad:4vw;
	--rouge:#eb6b5f;
	--jaune:#fcfbde;
	--bleu:#4b526a;
	--ease:cubic-bezier(.22,1,.36,1);
	
} 

body, html {margin:0; padding:0; overflow:hidden; background:var(--jaune);}
body {font-family: "pacaembu", sans-serif; font-weight: 400; font-style: normal; line-height:1.7; color:var(--jaune); font-size:.9rem; background:var(--jaune);}
a {text-decoration:none; webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
p {margin-bottom:2rem; margin-top:0;}

h1, h2 {font-family: "pacaembu", sans-serif; font-weight:400;}

.background {position:fixed; height:100dvh; width:100vw; position:relative; overflow:hidden; z-index:1;}
.background-image {position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('../img/layout/background.jpg'); background-position: center center;
background-repeat: no-repeat; background-size: cover; background-attachment: fixed; transform:scale(1.2); opacity:0;
transition:transform 1.5s var(--ease), opacity 1.5s ease-out; will-change:transform, opacity;}
.is-ready .background-image {opacity:1; transform:none;}

section {height:100%; position:relative;}
.container {width:100vw; height:100dvh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; grid-gap:2rem; z-index:2;}

.logo {width:70vw;}
.logo svg {fill:var(--jaune);}
.logo-letter {opacity:0; transform:translateY(2rem); transition:transform .8s var(--ease), opacity .8s ease-out; will-change:transform, opacity; backface-visibility:hidden;}
.is-ready .logo-letter {opacity:1; transform:none;}
.is-ready .logo-letter:nth-child(1) { transition-delay:.15s;}
.is-ready .logo-letter:nth-child(2) { transition-delay:.2s;}
.is-ready .logo-letter:nth-child(3) { transition-delay:.25s;}
.is-ready .logo-letter:nth-child(4) { transition-delay:.3s;}
.is-ready .logo-letter:nth-child(5) { transition-delay:.35s;}
.is-ready .logo-letter:nth-child(6) { transition-delay:.4s;}
.is-ready .logo-letter:nth-child(7) { transition-delay:.45s;}
.is-ready .logo-letter:nth-child(8) { transition-delay:.5s;}

.container p {opacity:0; transform:translateY(1.5rem); transition:transform .8s var(--ease), opacity .8s ease-out; will-change:transform, opacity; margin-bottom:3vw;
backface-visibility:hidden; z-index:2;}
.is-ready .container p {transform:none; opacity:1; transition-delay:.6s;}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.noise {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:.07; z-index: 2;}

.follow {position:absolute; right:2rem; bottom:2rem; margin:0; opacity:0; transform:translateY(1.5rem); transition:transform .8s var(--ease), opacity .8s ease-out;
will-change:transform, opacity;}
.is-ready .follow {opacity:1; transform:none; transition-delay:.7s;}
.follow a {text-transform:uppercase; font-size:.6rem; background:var(--jaune); color:var(--bleu); border-radius:8rem; padding:.5rem 1rem; display:flex; align-items: center;
grid-gap:.5rem;}
.follow a:hover {background:var(--rouge); color:var(--jaune);}
.follow svg {fill:var(--bleu); width:16px; transition:.3s;}
.follow a:hover svg {fill:var(--jaune);}

.split {display:inline-flex; align-items:center; text-decoration:none; overflow:hidden;}
.split span {position:relative; display:inline-block; overflow:hidden; line-height:1;}
.split span:before {content:attr(data-text); display:block; transform:translateY(0%); transition:transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);}
.split span:after {content:attr(data-text); position:absolute; left:0; top:0; transform:translateY(110%); transition:transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);}
.split:hover span:before {transform:translateY(-110%);}
.split:hover span:after {transform:translateY(0%);}


@media screen and (max-width:1000px) {
	
	.logo {width: 90vw;}
	.container p {margin-bottom:0;}
	.follow {position:relative; bottom:auto; right:auto; margin-bottom:2rem;}
	
}