@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/*MERRIWEATHER FONT*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');


/* M PLUS 1 CODE FONT(JAPAN FONT)*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');


:root {
  --footer-color: #161cb5;
  --header-color:#161cb5 ;
  --main-color : #F8F6F0;
  --font-color : #4A4033;
  --jap-color :#da010a;

  --title-font : "Jost", serif;
  --body-font : "Merriweather", serif;
  --jap-font : "M PLUS 1 CODE", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

 cursor: url('../docu_ressources/redketchup/android-chrome-192x192.png'), auto;
 
}
body{
    display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

main {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;


  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
 
 
}

main.loaded {
  opacity: 1;
  transform: translateY(0);
}

.titre {
  width: 100%;
  height: auto;

  position: relative;
  margin-top: 2%;
}

.titre-index {
  position: absolute;
  margin-top: 1%;
 

  display: flex;
  width: 100%;
  height: auto;

  
}

svg {
  width: 100%;
  max-height: 50vh;
  
}
.titre-index text {
  
  width: 100%;
  height: 100%;

  font-family: var(--body-font);
  
  
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 3px;
  

  stroke: var(--jap-color) ;
  fill: transparent;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000; 
  animation: fillText 10s ease-in-out infinite, writingContinousEffect 12s ease-in-out infinite; 
  
}


 


.titre-jap {
  position: absolute;
  top: 10%;

  display: flex;
  width: 100%;
  height: auto;

  
  animation:blinkScaleEffect 5s ease-in-out infinite;
 
}



.titre-jap text {
  
  width: 100%;
  height: 100%;

 
  
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 2px;

  fill: var(--main-color);
  stroke: var(--jap-color);
  stroke-width: 2;
  stroke-dasharray: 1000; /* Longueur du trait */
  stroke-dashoffset: 1000; /* Déplace le trait à l'infini */
  animation: writingEffect 6s ease-in-out forwards, writingContinousEffect 12s ease-in-out infinite; /* Animation */

  
}

@keyframes writingEffect {
  0% {
    stroke-dashoffset: 1000; /* Texte caché au départ */
  }
  
  100% {
    stroke-dashoffset: 0; /* Le texte apparait progressivement */
  }
}

@keyframes writingContinousEffect {
  0% {
    stroke-dashoffset: 1000; /* Texte caché au départ */
  }

  50% {
    stroke-dashoffset: 0; /* Texte caché au départ */
  }
  
  100% {
    stroke-dashoffset: 1000; /* Le texte disparait progressivement */
  }
}




@keyframes blinkScaleEffect {
  0% {
    transform: scale(1);
    
  }
  25% {
    transform: scale(1.1); /* Agrandissement */
   
  }
  50% {
    transform: scale(1);
    
  }
  75% {
    transform: scale(1.1); /* Agrandissement */
   
  }
  100% {
    transform: scale(1);
   
  }
} 

@keyframes fillText {
  0% {
    fill: transparent; /* Le texte est vide au départ */
  }
  
  20% {
    fill: var(--jap-color); /* Remplissage restant (pour qu'il reste coloré après l'animation) */
  }

  100% {
    fill: transparent;
  }
}

.index-anim {

  position: absolute;
  margin-top: 5%;
  z-index: 0;

width: 50%;
max-height: fit-content;

}

.index-anim >img {
  width: 100%;
  height: 100%;
}



@media screen and (max-width:850px) {
  body  {
    max-height: 100vh;
    display: flex;
    flex-direction: column;
 
  }
  main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .titre {
    width: 100%;
    height: max-content;
  
   position: absolute;
    top: 25%;
   
  }

  .titre-index {
    position: absolute;
    top: 0%;
    margin-top: 5%  ;
  
    display: flex;
    width: 100%;
    height: auto;
  }
  
  svg {
    width: 100%;
    max-height: 50vh;
  }
  .titre-index text {
    
    width: 100%;
    height: 100%;
  
    font-family: var(--body-font);
    color: var(--font-color);
    
    
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0px;
  }
  
  .titre-jap {
    position: absolute;
    top: 0%;
  
    display: flex;
    width: 100%;
    height: auto;
  }
  


  .titre-jap text {
    
    width: 100%;
    height: 100%;
  
    font-family: var(--body-font);
    color: var(--font-color);
    
    
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 2px;

    stroke-width: 2;
  }


  .index-anim {


    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 25%;
    z-index: 0;
    left: -8%;
   
  }


  
  .index-anim >img {
    display: block;
    width: 130%;
    height: auto;
  }
  
}