/* CUSTOM CURSOR */

#cursor {
  pointer-events: none;
  display: none;
  position: fixed;
  top: var(--cursorY);
  left: var(--cursorX);
  z-index: 999;
  transform: translate(-50%, -50%);

  padding: 16px;
  border: 1px solid var(--lightgray);
  border-radius: 99px;

  mix-blend-mode: difference;
  transition-timing-function: ease-in-out;

  /* animation: cursorAnimated 4s linear infinite; */
}

#cursor-text {
  display: none;
  position: fixed;
  top: var(--cursorY);
  left: var(--cursorX);

  font-size: 20px;
  font-weight: 800;
  color: var(--black);

  margin: -13px -26px;
  text-align: center;

  z-index: 1001;
}

#instant {
  pointer-events: none;
  /* display: none; */
  position: fixed;
  top: var(--cursorY);
  left: var(--cursorX);
  z-index: 1000;
  transform: translate(-50%, -50%);

  mix-blend-mode: difference;
  transition-timing-function: ease-in-out;
}

@keyframes cursorAnimated {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*ANIMATION ON LOAD */

.hero {
  transform: translateY(-30px);
  transition: transform 2.5s;
}

body.loaded .hero {
  transform: translateY(0px);
}

.tagline-wrapper {

  transform: translateY(30px);
  opacity: 0;

  transition: opacity 1.0s, transform 2s;
  transition-delay: 1s;
}

body.loaded .tagline-wrapper {
  opacity: 1;
  transform: translateY(0px);
}

body button {
  opacity: 0;
  transition: 0.3s;
  transition-delay: 2s !important;
}

body.loaded button {
  opacity: 1;
  transition-delay: 0s !important;
  transition: 0.3s;
}

body .hero .headline-wrapper .headline * {
  transform: translateY(210px);
  transition: transform 1s;
  transition-delay: 1s;
}

body .hero#project * .description * {
  transform: translateY(120px);
}

body.loaded .hero#project * .description * {
  transform: translateY(0px);
  transition: transform 1s;
  transition-delay: 1.4s !important;
}


body .hero .headline-wrapper :nth-child(2) * {
  transition-delay: 1.2s !important;
}

body.loaded .hero .headline-wrapper .headline * {
  transform: translateY(0px);
}

/* LOGO SLIDING */
.clients * {
  animation: slide 25s linear infinite;
  /* Adjust the duration as needed */

  transition: all 0.2s ease-in-out;
}

@keyframes slide {
  0% {
    transform: translateX(800px);
    /* Start from right */
  }

  100% {
    transform: translateX(-1055px);
    /* Move to left */
  }
}

/* TEXT CURSOR   */
#text-cursor {
  display: inline-block;
  width: 2.5px;
  height: 54px;
  margin-bottom: -6px;
  background-color: var(--white);
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}