/* Animations */

/* Ocean Wave Effect */
.ocean {
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.wave {
  background: url('../images/wave.svg') repeat-x;
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 15s linear reverse infinite;
  opacity: 0.5;
}

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

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(44px, 450px, 56px, 0);
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 var(--color-aqua);
  animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 var(--color-aqua-light);
  animation: glitch-anim-2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(70px, 9999px, 12px, 0);
  }
  20% {
    clip: rect(29px, 9999px, 94px, 0);
  }
  40% {
    clip: rect(58px, 9999px, 11px, 0);
  }
  60% {
    clip: rect(35px, 9999px, 56px, 0);
  }
  80% {
    clip: rect(89px, 9999px, 30px, 0);
  }
  100% {
    clip: rect(32px, 9999px, 97px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(70px, 9999px, 46px, 0);
  }
  20% {
    clip: rect(38px, 9999px, 47px, 0);
  }
  40% {
    clip: rect(73px, 9999px, 45px, 0);
  }
  60% {
    clip: rect(81px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(32px, 9999px, 87px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 16px, 0);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(-1deg);
  }
  20% {
    transform: skew(0.5deg);
  }
  40% {
    transform: skew(-0.8deg);
  }
  60% {
    transform: skew(0.4deg);
  }
  80% {
    transform: skew(0.5deg);
  }
  100% {
    transform: skew(-0.2deg);
  }
}

/* Scroll Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 229, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Glow Animation */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px var(--color-aqua);
  }
  50% {
    box-shadow: 0 0 20px var(--color-aqua), 0 0 30px var(--color-aqua-light);
  }
  100% {
    box-shadow: 0 0 5px var(--color-aqua);
  }
}

.glow {
  animation: glow 2s infinite;
}

/* Floating Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

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