/* ------------------Body Noise ------------------------ */

body {
  background-color: black;
  margin: 0;
  overflow-x: hidden;
}

#noise {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
  pointer-events: none;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

/* ------------------- CURSOR-------------------------------------------------------------------------------------------- */
html, body {
  cursor: none !important;
}
* {
    cursor: none !important;
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  transition: transform 0.9s ease, width 0.9s ease, height 0.9s ease;
  mix-blend-mode: difference;
    transition:
    width 0.8s ease,
    height 0.8s ease,
    transform 0.8s ease,
}

#cursor.hover {
  width: 100px;
  height: 100px;
}

.cursor-hidden {
  opacity: 0;
}

@media (max-width: 768px) {
  #cursor {
    display: none;
  }
}


/* Cercle fin autour */
.cursor-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

/* Petit rond qui tourne */
.cursor-orbit {
  position: absolute;
  top: 43%;
  left: 43%;
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: orbit 3s linear infinite;
  mix-blend-mode: difference;
}

/* Animation rotation */
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(26px);
  }
  to {
    transform: rotate(360deg) translateX(26px);
  }
}



/* ------------------- LOADER -------------------------------------------------------------------------------------------- */
/* loader plein écran */
#loader {
  position: fixed;
  inset: 0;
  background: #111;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* animation du rond */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #444;
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* contenu caché au départ */
#content {
  display: none;
}


/* BODY */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  color: white;
}