/* Name effects */

.has-fx {
  animation: none;
}

.fx-rainbow {
  animation: rainbowAnimation 4s linear infinite;
  background-image: linear-gradient(90deg, violet, indigo, blue, green, yellow, orange, red);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.fx-shine {
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #fff, #000) 0 0 / 80% auto no-repeat text;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine_effect 2s linear infinite;
  -webkit-text-fill-color: transparent;
  text-shadow: unset !important;
}

.fx-shimmer {
  color: #f8f8f8;
  background: linear-gradient(90deg, transparent, #f8f8f8, transparent) 0 0 / 80% auto no-repeat text;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine_effect 2s linear infinite;
  -webkit-text-fill-color: rgba(248, 248, 248, 0.25);
}

.fx-glitch {
  animation: glitch 0.3s ease infinite;
}

.fx-layer {
  white-space: nowrap;
}

.Typewriter__cursor {
  animation: Typewriter-cursor 1s ease infinite;
  margin-left: 1px;
}

.wave-word {
  display: inline-block;
  white-space: nowrap;
}

.wave-char {
  display: inline-block;
}

@keyframes rainbowAnimation {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes shine_effect {
  0% { background-position: -500% center; }
  100% { background-position: 500% center; }
}

@keyframes glitch {
  0% { transform: translate(0); text-shadow: red -2px 0; }
  25% { transform: translate(-2px, 2px); text-shadow: lime 2px 0; }
  50% { transform: translate(2px, -2px); text-shadow: blue -2px 0; }
  75% { transform: translate(-2px, 2px); text-shadow: red 2px 0; }
  100% { transform: translate(0); text-shadow: lime -2px 0; }
}

@keyframes Typewriter-cursor {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes Pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Background effects */

#bgfx.bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bgfx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bgfx-wave {
  position: absolute;
  left: 0;
  bottom: -2vh;
  width: 200%;
  height: 20vh;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1000% 1000% 0 0;
  opacity: 0.8;
  animation: wave 10s linear infinite;
}

.bgfx-wave:nth-child(2) {
  bottom: -8vh;
  height: 26vh;
  animation-duration: 18s;
  animation-direction: reverse;
}

.bgfx-wave:nth-child(3) {
  bottom: -14vh;
  height: 32vh;
  animation-duration: 20s;
  animation-delay: -1s;
  animation-timing-function: ease;
  animation-direction: reverse;
  opacity: 0.9;
}

.bgfx-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bgfx-star {
  position: absolute;
  background: transparent;
  animation: animStar 50s linear infinite;
}

.bgfx-star::after {
  content: " ";
  position: absolute;
  top: 2000px;
  background: transparent;
}

.bgfx-star-1 {
  width: 1px;
  height: 1px;
}

.bgfx-star-1::after {
  width: 1px;
  height: 1px;
}

.bgfx-star-2 {
  width: 2px;
  height: 2px;
  animation-duration: 100s;
}

.bgfx-star-2::after {
  width: 2px;
  height: 2px;
}

.bgfx-star-3 {
  width: 3px;
  height: 3px;
  animation-duration: 150s;
}

.bgfx-star-3::after {
  width: 3px;
  height: 3px;
}

.bgfx-noise {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url("effects/noise.png") repeat;
  opacity: 0.9;
  animation: bg-animation 0.2s ease infinite;
}

.bgfx-blur {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.bgfx-dots {
  position: absolute;
  inset: 0;
  background: url("effects/dots.png") repeat;
}

.bgfx-image {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  animation: bgfx-drift 26s ease-in-out infinite alternate;
}

.zyo-shader-background-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@keyframes bgfx-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}

@keyframes wave {
  2% {}
  25% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  75% { transform: translateX(-25%); }
  100% {}
}

@keyframes animStar {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2000px); }
}

@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); }
}