.mouse-light {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  opacity: 1;
  mix-blend-mode: normal;
  /*mix-blend-mode: soft-light;*/
  will-change: transform, background;
  transition:
    background 0.8s ease,
    filter 0.8s ease;
  background: radial-gradient(
    circle,
    var(--mouse-glow-color) 0%,
    transparent 80%
  );
  filter: var(--mouse-glow-blur);
}
.section-mouse-green {
  --mouse-glow-color: var(--background-green-blur);
  --mouse-glow-blur: var(--backdrop-green-filter);
}
.section-mouse-red {
  --mouse-glow-color: var(--background-red-light-blur);
  --mouse-glow-blur: var(--backdrop-red-filter);
}
.section-mouse-default {
  --mouse-glow-color: var(--background-red-blur);
  --mouse-glow-blur: var(--backdrop-red-filter);
}

/*body .pageBg {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 80%;
    transform: translate(-50%, -50%) rotate(180deg);
    background: var(--background-red-blur);
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
}*/

.section:not(.section-hero) {
  opacity: 0;
  transform: translateY(20px);
}

.section.visible:not(.section-hero) {
  opacity: 1;
  transform: translateY(0);
}
.animate-gradient {
  animation: none;
}
.animate-gradient.run {
  animation: spin-gradient 3s linear infinite;
}

svg path.overlay {
  stroke: var(--red-color);
  stroke-opacity: 0.69;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

svg path.overlay.active {
  animation: draw 4s linear forwards;
}

svg path.overlay.fade {
  animation: svgfadeOut 4s linear forwards;
}

.bounceImageCentered {
  animation: bounceImageCentered 3s ease-in-out infinite;
}
.bounceImage {
  animation: bounceImage 3s ease-in-out infinite;
}

.fadeInUp {
  animation-name: fadeInUp;
}
.reveal-cards .card {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-cards .card.animate {
  animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.btn-black {
    transition: padding 0.3s ease, background 0.3s ease;
}
.btn-transparent {
  transition: border 0.3s ease, color 0.3s ease, padding 0.3s ease;
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }

  to {
    stroke-dashoffset: 0;
  }
}
@keyframes svgfadeOut {
  from {
    stroke-dasharray: 2000, 2000;
    stroke-dashoffset: 0;
  }

  to {
    stroke-dasharray: 0, 2000;
    stroke-dashoffset: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes spin-gradient {
  0% {
    --border-angle: 0deg;
  }

  100% {
    --border-angle: 360deg;
  }
}
@keyframes bounceImage {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes bounceImageCentered {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes coilRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes coilRotateReverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes dotsPulse {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.6);
  }
  40%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}