@import url('https://fonts.googleapis.com/css2?family=Gorditas:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gorditas:wght@400;700&family=Mukta:wght@200;300;400;500;600;700;800&display=swap');

:root{
    --noir: black;
    --gris:#8C8C8C;
    --rose: #E9C5B5;
    --rosebonbon: #FDDDE2;
    --roseblanc: #FFF9FB;
    --rosemitaine: #FF708E;
    --orangepale: #FFE5DA;
    --orange: #D8A48F;
    --orangelilo: #C16A4A;
    --beige: #fffdf3;
    --beigefonce:#F4F1DE;
    --beigepale:#FBFAF5;
    --beigeciel: #F9F7EB;
    --vertpale: #EFEBCE;
    --vertciel: #F8F4DB;
    --vert: #D6CE93;
    --vertgazon: #DDD7AB;
    --vertfonce: #A3A380;
    --vertkiwi: #A0BD60;
}

*{
    font-family: Mukta;
    margin: 0;
    box-sizing: border-box;
}

body{
    margin: 0;
    width: 100vw;
    background-color: var(--beige);
    overflow-x: hidden;
}

/*----------SECTION HEADER-------------*/
header{
    width: 100%;
    height:100vh;
    position: relative;
}

h1{
    width: 30vw;
    text-align: center;
    position: absolute;
    bottom: 50vh;
    left: 35vw;
    font-family: Gorditas;
    font-size: 15vw;
    color:var(--orange);
    z-index: 1;
}

.appel{
    position: absolute;
    left: 47vw;
    bottom: 12vh ;
    width: 5vw;
    height: 5vh;
    opacity: 0.5;
    z-index: 1;
}

.presentation{
    position: absolute;
    width: 98vw;
    bottom: 18vh;
    color: var(--gris);
    text-align: center;
    font-size: 11px;
}

/*----------SECTION MAIN------------*/

/*---------Titres et sous-titres--------*/
p{
    position: absolute;
    z-index: 100;
}

h2{
    position: absolute;
    top: 28vh;
    left: 36.7vw;
    font-size: 5vw;
    font-family: Gorditas;
    text-align:center;
}

h3{
    position: absolute;
    top: 37vh;
    font-size: 2vw;
    color: var(--gris);
}

#chapitre1 h2{
    color: var(--vertfonce);

}

#chapitre1 h3{
    left: 56vw;
}

#chapitre2 h2{
    color: var(--beige);
}

#chapitre2 h3{
    left: 47vw;
}

#chapitre3 h2{
    color: var(--beige);
}

#chapitre3 h3{
    left: 44.4vw;
}

#chapitre4 h2{
    color: var(--beige);
}

#chapitre4 h3{
    left: 46.4vw;
}

#chapitre5 h2{
    color: var(--vertfonce);
}

#chapitre5 h3{
    left: 44.6vw;
}

#chapitre6 h2{
    color: var(--vertfonce);
}

#chapitre6 h3{
    left: 51.5vw;
}

/*--------------Défilements--------------*/


/*---------Chapitre 1--------*/

section{
    position: relative;
    /*border: 1px solid rgba(218, 0, 0, 0.5); */
}

#chapitre1{
    width: 100vw;
    height:100vh;
    background-color: var(--beige);
    overflow: hidden;
}

.scene1-lilo-triste-1{
    width: 30vw;
    height: auto;
    position: absolute;
    left: 25vw;
    object-fit:cover;
    z-index: 101;
}

.scene1-lilo-triste-2{
    display: none;
    width: 30vw;
    height: auto;
    position: absolute;
    left: 25vw;
    object-fit:cover;
    z-index: 101;
}

.scene1-titre{
    z-index: 150;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: var(--beige);
}

.scene1-parallax1{
    
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 90;
    background-size:cover;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: url(../img/img_arriere_plan/scene_1_elements/scene1_arbre_derriere.png);
}

.scene1-parallax2{
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 91;
    background-position: 0 0;
    background-size:cover;
    background-image: url(../img/img_arriere_plan/scene_1_elements/scene1_gazon.png);
}

.scene1-parallax3{
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 105;
    background-position: 0 0;
    background-size:cover;
    background-image: url(../img/img_arriere_plan/scene_1_elements/scene1_arbre_devant.png);
}

.scene1-parallax4{
    box-shadow: inset 0 4em 2em var(--beige);
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 107;
    background-position: 0 0;
    background-size:cover;
    background-image: url(../img/img_arriere_plan/scene_1_elements/scene1_buissons.png);
}

.scene1-fond{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-size:cover;
    background-position-x: 90%;
    z-index: 80;
    background-image: url(../img/img_arriere_plan/scene_1_elements/scene1_fond_avec_trou.png);
}

.scene1-texte1{
    position: absolute;
    top: 25vh;
    z-index: 99;
    font-size: 3vw;
    color: var(--orangelilo);
    left: 10vw;
}

.scene1-texte2{
    top: 35vh;
    width: 45vw;
    font-size: 3vw;
    color: var(--orangelilo);
    left: 10vw;
    z-index: 99;
}

/*---------Chapitre 2--------*/


#chapitre2{
    overflow: hidden;
    top: 0;
    width: 100vw;
    height:100vh;
}

.scene2-titre{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--vertgazon) 0%, var(--vertpale) 100%);
}

.scene2{
    position: relative;
    width: 100vw;
    height: 300vh;
    background-image: url(../img/img_arriere_plan/scene2_elements/scene2_fond.jpg);
    background-size:cover;
}

.scene2-lilo-tombe{
    position: absolute;
    width: 25vw;
    left: 75vw;
    top: 0;
    z-index: 3;
}

.scene2-mimi{
    position: absolute;
    width: 80%;
    right: 30%;
    z-index: 2;
}

.scene2-lilo-assise{
    position: absolute;
    width: 80%;
    right: -15%;
    top: -10%;
    z-index: 1;
}

.scene2-nuage{
    position: absolute;
    width: 100%;
    z-index: 1;
}

.sur-nuage-1{
    position: absolute;
    width: 35vw;
    height: 35vw;
    left: 33vw;
    z-index: 100;
}

.scene2-poisson1{
    position: absolute;
    width: 25vh;
    top: 370vh;
    z-index: 1;
}

.scene2-poisson2{
    position: absolute;
    left: 25vh;
    width: 20vw;
    top: 320vh;
    z-index: 1;
}

.scene2-poisson3{
    position: absolute;
    right: 40vh;
    top: 315vh;
    width: 25vw;
    z-index: 1;
}

.scene2-poisson4{
    position: absolute;
    right: 25vh;
    top: 370vh;
    width: 35vw;
    z-index: 1;
}

.scene2-texte1{
    position: absolute;
    width: 40vw;
    font-size: 2.5vw;
    color: var(--rosemitaine);
    top: 100vh;
    left: 10vw;
    z-index: 1;
}

.scene2-texte2{
    top: 100vh;
    position: absolute;
    width: 40vw;
    font-size: 2.5vw;
    color: var(--orangelilo);
    left: 55vw;
    z-index: 1;
}

.scene2-texte3{
    top: 100vh;
    position: absolute;
    width: 40vw;
    font-size: 2.5vw;
    color: var(--rosemitaine);
    left: 10vw;
    z-index: 99;
}

.file-peche{
    width: 80vw;
    height: 300vh;
    z-index: 9;
    position: absolute;
    top: -19vh;
    left: 0vw;
}

.file-peche #path {
    stroke: #c4c86d;
    fill: none;
    stroke-dashoffset: 0.001;
    stroke-dasharray: 0px, 999999px;
  }

 .file-peche #template {
    fill: none;
    stroke-width: 1px;
    stroke: #44445500;
  }

/*---------Chapitre 3--------*/

#chapitre3{
    overflow: hidden;
    width: 100vw;
    height:100vh;
}

.scene3-titre{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--rose) 0%, var(--rosebonbon) 100%);
}
.scene3{
    position: relative;
    width: 100vw;
    height: 220vh;
    background-image: url(../img/img_arriere_plan/scene3_elements/scene3_fond.jpg);
    background-size:cover;
}

.scene3-nuage{
    position: absolute;
    bottom: 1%;
    width: 100%;
    z-index: 1;
}

.scene3-lilo-mimi{
    position: absolute;
    bottom: 30%;
    width: 100%;
    z-index: 1;
}

.sur-nuage-2{
    position: absolute;
    width: 30vw;
    height:30vh;
    bottom: -100vh;
    z-index: 115;
}

.scene3-cristal-1{
    width: 10vw;
    left: 39vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-2{
    width: 10vw;
    left: 51vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-3{
    width: 10vw;
    left: 45vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-4{
    transform: rotate(-90deg);
    width: 10vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-5{
    transform: rotate(-110deg);
    width: 10vw;
    left: 36vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-6{
    transform: rotate(-110deg);
    width: 10vw;
    left: 68vw;
    position: absolute;
    z-index: 1;
}

.scene3-cristal-7{
    transform: rotate(-90deg);
    width: 10vw;
    left: 88vw;
    position: absolute;
    z-index: 1;
}

.scene3-texte{
    font-size: 3vw;
    width: 40vw;
    color: var(--rosemitaine);
    top: 2vh;
    left: 10vw;
}

/*---------Chapitre 4--------*/

#chapitre4{
    overflow: hidden;
    width: 100vw;
    height:100vh;
    background-size: cover;
}

.scene4-titre{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--rosebonbon) 0%, var(--orangepale) 100%);
}

.scene4-fond{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url(../img/img_arriere_plan/scene4_elements/scene4_fond_01.png);
}

.scene4-fond-blanc{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--roseblanc);
}

.scene4-transition{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--roseblanc) 0%, var(--noir) 100%);
}

.scene4-noir{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url(../img/img_arriere_plan/scene4_elements/scene4_fond_02.png);
}

.scene4-transition2{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--noir) 0%, var(--beige) 100%);
}

.scene4-kiwi{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--beige);
}

.scene4-nuage{
    position: absolute;
    bottom: 1%;
    width: 100%;
    z-index: 1;
}

.scene4-lilo-mimi{
    position: absolute;
    bottom: 30%;
    width: 100%;
    z-index: 1;
}

.sur-nuage-3{
    width: 35vw;
    height:35vw;
    position: absolute;
    z-index: 1;
}

.scene4-texte{
    font-size: 3vw;
    color: var(--rosemitaine);
    left: 10vw;
}

.scene4-texte1,
.scene4-texte3,
.scene4-texte6,
.scene4-texte8,
.scene4-texte10{
    z-index:1;
    top: 30vh;
    font-size: 4vw;
    color: var(--orangelilo);
    left: 10vw;
}

.scene4-texte2,
.scene4-texte4,
.scene4-texte7,
.scene4-texte11{
    top: 50vh;
    font-size: 4vw;
    color: var(--rosemitaine);
    left: 20vw;
}

.scene4-texte5,
.scene4-texte9{
    top: 40vh;
    font-size: 3vw;
    color: var(--vertkiwi);
    left: 65vw;
}

.scene4-texte9,
.scene4-texte10,
.scene4-texte11{
    left: 100vw;
}

/*---------Chapitre 5--------*/


#chapitre5{
    overflow: hidden;
    width: 100vw;
    height:100vh;
}

.scene5-titre{
    z-index: 100;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, var(--beige) 0%, var(--beigefonce) 100%);
}

.scene5{
    z-index: 95;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: 0 60%;
    background-image: url(../img/img_arriere_plan/scene5_elements/scene5_fond.jpg);
}

.scene5-nuage{
    position: absolute;
    bottom: 1%;
    width: 100%;
    z-index: 1;
}

.scene5-lilo-mimi{
    position: absolute;
    bottom: 30%;
    width: 100%;
    z-index: 1;
}

.sur-nuage-4{
    position: absolute;
    top: 20vh;
    width: 35vw;
    height:35vw;
    z-index: 99;
}


.scene5-texte1{
    font-size: 2.5vw;
    color: var(--rosemitaine);
    top:10vh;
    left: 10vw;
    z-index: 99;
}

.scene5-texte2{
    top:10vh;
    font-size: 2.5vw;
    color: var(--orangelilo);
    left: 35vw;
    z-index: 98;
}

.scene5-texte3{
    top:10vh;
    font-size: 2.5vw;
    color: var(--rosemitaine);
    left: 65vw;
    z-index: 97;
}

.scene5-texte4{
    font-size: 5vw;
    color: var(--orangelilo);
    top: 25vh;
    left: 39vw;
    z-index: 96;
}

.lilo-path{
    z-index: 100;
    position: absolute;
    width: 100vw;
    bottom: 10vh;
}
/*---------Chapitre 6--------*/

#chapitre6{
    overflow: hidden;
    width: 100vw;
    height:100vh;
}

.scene6-titre{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--beigefonce);
}

.scene6{
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 90;
    object-fit: cover;
}

.scene6-fin{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--beige);
}

.scene6-lilo-mimi-calin{
    bottom: 0;
    position: absolute;
    left: 8vw;
    z-index: 105;
    width: 35vw;
}

.scene6-escalier1{
    bottom: 10vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: 0;
}

.scene6-escalier2{
    bottom: 20vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: -10vw;
}

.scene6-escalier3{
    bottom: 30vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: -20vw;
}

.scene6-escalier4{
    bottom: 40vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: -30vw;
}

.scene6-escalier5{
    bottom: 50vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: -40vw;
}

.scene6-escalier6{
    bottom: 60vh;
    position: absolute;
    width: 55vw;
    z-index: 104;
    right: -50vw;
}

.scene6-lilo-droite{
    bottom: 0;
    opacity: 0;
    z-index: 105;
    width: 35vw;
    position: absolute;
    left: 40vw;
}

 .scene6-texte1{
    font-size: 2.5vw;
    color: var(--rosemitaine);
    top:  9vh;
    left: 10vw;
}

.scene6-texte2{
    width: 40vw;
    font-size: 2.5vw;
    color: var(--orangelilo);
    top: 19vh;
    left: 10vw;
}

.scene6-texte3{
    font-size: 2.5vw;
    color: var(--rosemitaine);
    top: 44vh;
    left: 10vw;
}

.scene6-texte4{
    opacity: 0;
    font-size: 2.5vw;
    color: var(--orangelilo);
    top: 20vh;
    left: 45vw;
}

 .fin{
    opacity: 0;
    z-index: 90;
    font-family: Gorditas;
    bottom: 20vh;
    left: 41.5vw;
    color: var(--orangelilo);
    position: absolute;
    font-size: 10vw;
 }

 #coeur{
    fill: none;
 }

 .patte-coeur{
    position: absolute;
    left: 40vw;
    top: 5vh;
    width: 20vw;
    z-index: 100;
 }

 .calque-1{
    fill: var(--orange);
 }



/*img { border: 1px solid green; }*/

/*----------ANIMATIONS SPRITESHEET------------*/

.size{
    height: 600vh;
}

body.is-scrolling .sprite1{
    animation-play-state: running;
}

body.is-scrolling .sprite2{
    animation-play-state: running;
}

.sprite1{
    z-index: 1;
    position: absolute;
    top: 10vh;
    left: 35vw;
    background-image: url(../img/img_personnages/kiwi/spritesheet_kiwi.png);
    width: 30vw;
    aspect-ratio: 1/1;
    background-size:12000% 100%;
    animation-name: kiwi;
    animation-duration: 1.5s;
    animation-timing-function: steps(120);
    animation-iteration-count: infinite;
    animation-play-state:paused;
}

.sprite2{
    opacity: 0;
    z-index: 96;
    position: absolute;
    bottom: 0vh;
    right: 36vw;
    background-image: url(../img/img_elements_visuels/spritesheet_enseigne.png);
    animation-duration: 1s;
    width: 25vw;
    aspect-ratio: 1/1;
    background-size: 4800% 100%;
    animation-name: enseigne;
    animation-timing-function: steps(48);
    animation-iteration-count: infinite;
    animation-play-state:paused;
}

@keyframes kiwi {
    from { background-position: 0 0; }
    to { background-position: -12000% 0; }
}
@keyframes enseigne {
    from { background-position: 0 0; }
    to { background-position: -4800% 0; }
}

/*---------FOOTER--------*/
footer{
    text-align: center;
    color: var(--gris);
}

.text-footer{
    position: relative;
}

/*---------Annotations--------*/

ul.technique-gsap{
    background: rgba(0,0,0,0.3);
    color: white;
    font-size: 10px;
    font-family: monospace;
    font-weight: 400;
    width: auto;
    display: inline-block;
    padding: 10px 20px 12px 20px;
    margin: 0;
    max-width: 300px;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
}

ul.technique-gsap li{
    margin: 5px 0;
}