*{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body{
    display: flex;
    flex-wrap: wrap;
    background-color: black;
    
    animation: body-bg-intro 4.5s ease-in-out 1;
    
    /* Motif de grille ultra-discret */
  background-color: #FAF3E1; /* Ton fond actuel */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 40px 40px; /* Taille des carreaux */
}

@keyframes body-bg-intro {
  0%, 50% {
    background-color: black;
}
100% {
  background-color: #FAF3E1;
}
}





/* ------- Gradient ------- */



.gradient-outer-container {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -5;
    inset: 0;
    margin: auto;
    filter: blur(100px);
}

.gradient-inner-container {
    border-radius: 99999px;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;

    overflow: hidden;
    background-color: #fff;
    transform: scale(0.8);
}

.gradient {
  border-radius: 50em;
    position: absolute;
    width: 70vh;
    height: 70vh;
    inset: 0;
    margin: auto;
    background: conic-gradient(from 0deg, #08f, #f60, #bbffa1, #4c00ff, #ab2666, #09f);
    animation: grandient-intro 3s ease-in-out 1;
    opacity:0;
}

@keyframes grandient-intro {
    0% {
        transform: rotate(0deg);
        background-position:10vw;
        opacity:0;
    }
    
    60% {
      opacity:1;
      width: 70vh;
      height: 70vh;
    }
    
    72% {
      transform: rotate(1.8turn);
    }
    
    100% {
      transform: rotate(1.8turn);
        background-position:0;
        opacity:0;
        width: 0;
        height: 0;
    }
}











/* ------- Header ------- */

header {
  width: 100%;
  height : 4em;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 1em 1em;
  
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /*Ombre*/
  backdrop-filter: blur(5px); /*Flou du bg*/
  
  position: sticky;
  top: 0;
  z-index: 5;
}

h1 {
  font-size:2em;
  
  transition: all 0.4s ease-out;
  color: #f1eeeb;
}









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




main {
  width : 100%;
  min-height:100vh;
  display: flex;
  justify-content: center; /* Centre horizontalement */
  flex-wrap: wrap;
}


/* ------- LOADING ANIMATION ------- */

main .loading-animation {
  position: absolute;
  width: 10em;
  inset: 0;
  margin: auto;
    
  animation: 
  logo-intro 2.22s ease-in-out 1,
  logo-anim 8s linear infinite 4s;
}

@keyframes logo-intro {
  0% {
    transform: rotate(0);
    opacity:0;
  }

  100% {
    transform: rotate(-1turn);
    opacity:1;
  }
}

@keyframes logo-anim {
  0% {
    transform: rotate(0turn);
  }

  100% {
    transform: rotate(1turn);
  }
}



/* ------- TYPE H2 ------- */

.h2-container {
  width: 100%;
  margin-top: 15vh;
  height: 85vh;
}


.type {
  
  margin: auto;

  
  font-family: monospace; /* Une police monospace (largeur fixe) est indispensable */
  font-size: clamp(1.8em, 4.5vw, 5em);
  white-space: nowrap;    /* Empêche le texte de revenir à la ligne */
  overflow: hidden;       /* Cache les lettres qui ne sont pas encore "écrites" */
  border-right: 7px solid #0088ff; /* Crée le curseur de texte */
  
  /* Nombre de caractères du texte (ici 32 espaces compris) */
  width: 17ch; 
  
  
  animation:
    h2-intro-opacity 3.2s linear 1,
  
    typing 2s steps(17) forwards 3s, 
    blink-caret 0.75s step-end infinite;
}

/* Animation de l'écriture : on fait passer la largeur de 0 à 100% */
@keyframes typing {
  0% { width: 0; }
  100% { width: 17ch; }
}

/* Animation du curseur : il passe de visible à transparent */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

@keyframes h2-intro-opacity {
  0%, 99% {
    opacity:0;
  }
  
  100% {
    opacity:1;
  }
}

/* ------- SCROLL MOUSE ------- */

.scroll-container {
  width: 100%;
  height: 5vh;
  
  position: absolute;
  bottom: 3%;
  display: flex;
  justify-content: center;
  opacity: 0.7;
  
  animation: scroll-container-fade 7s ease-in-out;
}

@keyframes scroll-container-fade {
  0%, 90% {
    opacity: 0;
  }
  
  100% {
    opacity: 0.7;
  }
}

.mouse-container {
  object-fit: contain;
  height: 100%;
  position: absolute;
  
}

.mouse-dot {
  object-fit: contain;
  height: 100%;
  
  animation: mouse-dot-animation 2s ease-in-out;
  animation-delay: 6.5s
}

@keyframes mouse-dot-animation {
  0% {
    transform: translateY(0%);
  }
  
  30%, 50%{
    transform: translateY(35%);
  }
  
  80%, 100% {
    transform: translateY(0%);
  }
}







/* --------------------- Footer --------------------- */

footer {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);

  align-items: center;
  border-radius: 1em 1em 1em 1em;
  margin : 2em 0.5em 0.5em 0.5em;
  
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /*Ombre*/
  backdrop-filter: blur(10px); /*Flou du bg*/
}

footer p {
  width: 100%;
  margin : 1em 0 1em 0;
  text-align: center;
  font-size: 1.15em;
  color: #f1eeeb;
}

footer #copy {
  font-size: 0.7em;
}