@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");

:root {
  --color-green-glow: rgba(0, 197, 180, 1);
}
.codepilot-logo h2 {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 1.5rem;
  color: transparent;
  text-shadow: 0 0 0.5em var(--color-white);
  -webkit-text-stroke: 2px var(--color-green-glow);
  text-transform: uppercase;
}
.codepilot-logo h2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  color: var(--color-green-glow);
  -webkit-text-stroke: 0vw var(--color-green-glow);
  filter: blur(3px);
  text-shadow: 0 0 3px var(--color-green-glow), 0 0 11px var(--color-green-glow),
    0 0 21px var(--color-green-glow);
  overflow: hidden;
  display: none;
}
.codepilot-logo h2::after {
  content: url(../resources/index_images/co_de_pilot_3_rbg.png);
  position: absolute;
  top: 0;
  left: -25px;
  height: 100%;
  filter: blur(1px);
  display: none;
  object-fit: cover;
}
@media (hover) {
  .codepilot-logo:hover h2::before {
    display: block;
    animation: text_fill 3s linear infinite;
  }
  @keyframes text_fill {
    0%,
    10% {
      width: 0;
      opacity: 1;
    }
    70% {
      width: 100%;
    }
    72% {
      translate: 0 0;
      opacity: 1;
    }
    74%,
    78%,
    82%,
    86%,
    90% {
      translate: 1px 3px;
    }
    76%,
    80%,
    84%,
    88% {
      translate: -1px -3px;
    }
    92% {
      translate: 0 0;
      opacity: 0;
    }
    99% {
      width: 100%;
      opacity: 0;
    }
    100% {
      width: 0;
      opacity: 1;
    }
  }
  .codepilot-logo:hover h2::after {
    display: block;
    animation: glider_slide 3s linear infinite;
  }
  @keyframes glider_slide {
    0%,
    10% {
      left: -25px;
      scale: 1;
      opacity: 1;
    }
    43% {
      scale: 1.3;
    }
    76% {
      left: 100%;
      scale: 1;
    }
    72% {
      translate: 0 0;
      opacity: 1;
    }
    74%,
    78%,
    82%,
    86%,
    90% {
      translate: 1px 3px;
    }
    76%,
    80%,
    84%,
    88% {
      translate: -1px -3px;
    }
    92% {
      left: 100%;
      translate: 0 0;
      opacity: 0;
    }
    95% {
      left: -25px;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}