@reference "./input.css";

.explore {
  color: var(--color-primary-100);
  animation: exploreColor 20s ease-in-out infinite;
}

@keyframes exploreColor {
  0% {
    color: var(--color-primary-100);
  }
  20% {
    color: var(--color-primary-100);
  }
  25% {
    color: #ffffff;
  }
  45% {
    color: #ffffff;
  }
  50% {
    color: var(--color-primary-100);
  }
  70% {
    color: var(--color-primary-100);
  }
  75% {
    color: #ffffff;
  }
  95% {
    color: #ffffff;
  }
  100% {
    color: var(--color-primary-100);
  }
}

.join-discord {
  border-color: #ffffff;
  color: #ffffff;
  animation: joinDiscordColor 20s ease-in-out infinite;
}

@keyframes joinDiscordColor {
  0% {
    border-color: #ffffff;
    color: #ffffff;
  }
  20% {
    border-color: #ffffff;
    color: #ffffff;
  }
  25% {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
  }
  45% {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
  }
  50% {
    border-color: #ffffff;
    color: #ffffff;
  }
  70% {
    border-color: #ffffff;
    color: #ffffff;
  }
  75% {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
  }
  95% {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
  }
  100% {
    border-color: #ffffff;
    color: #ffffff;
  }
}

/* night */
.night {
  opacity: 1;
  animation: nightOpacity 20s ease-in infinite;
}

@keyframes nightOpacity {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.night-star {
  transform: translateX(-15);
  opacity: 1;
  animation: nightStarTransform 20s ease-in infinite;
}

@keyframes nightStarTransform {
  0% {
    opacity: 1;
    transform: translateX(-15);
  }
  20% {
    opacity: 1;
    transform: translateX(-15);
  }
  25% {
    opacity: 0;
    transform: translateX(0);
  }
  95% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-15);
  }
}

.moon {
  top: 9%;
  right: 15%;
  animation: nightMoonFall 20s ease-in-out infinite;
}

@keyframes nightMoonFall {
  0% {
    top: 9%;
    right: 15%;
  }
  20% {
    top: 9%;
    right: 15%;
  }
  25% {
    top: 18%;
    right: -13%;
  }
  95% {
    top: 18%;
    right: -13%;
  }
  100% {
    top: 9%;
    right: 15%;
  }
}

/* day */
.day {
  opacity: 0;
  animation: dayOpacity 20s ease-in infinite;
}

@keyframes dayOpacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.sun {
  top: 18%;
  left: -13%;
  animation: daySunRise 20s ease-in-out infinite;
}

@keyframes daySunRise {
  0% {
    top: 18%;
    left: -13%;
  }
  20% {
    top: 18%;
    left: -13%;
  }
  25% {
    top: 9%;
    left: 15%;
  }
  43% {
    top: 9%;
    left: 15%;
  }
  48% {
    top: 18%;
    left: -13%;
  }
  100% {
    top: 18%;
    left: -13%;
  }
}

.glass {
  opacity: 0;
  animation: glassOpacity 20s ease-in-out infinite;
}

@keyframes glassOpacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.rainbow {
  transform: rotate(180deg);
  animation: rainbowRotate 20s ease-in-out infinite;
}

@keyframes rainbowRotate {
  0% {
    transform: rotate(180deg);
  }
  20% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(0);
  }
  43% {
    transform: rotate(0);
  }
  48% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* rain */
.rainy {
  opacity: 0;
  animation: rainOpacity 20s ease-in infinite;
}

@keyframes rainOpacity {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.cloud {
  transform: translateY(-194px);
  animation: cloudRotate 20s ease-in-out infinite;
}

@keyframes cloudRotate {
  0% {
    transform: translateY(-194px);
  }
  45% {
    transform: translateY(-194px);
  }
  50% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-194px);
  }
  100% {
    transform: translateY(-194px);
  }
}
.rain {
  opacity: 0;
  animation: rainOpacity 20s ease-in infinite;
}

@keyframes rainOpacity {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.cap {
  opacity: 0;
  animation: capOpacity 20s ease-in-out infinite;
}

@keyframes capOpacity {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* snow */
.snow {
  opacity: 0;
  animation: snowOpacity 20s ease-in infinite;
}

@keyframes snowOpacity {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.snowflake {
  transform: translateY(-775px);
  animation: snowfall 20s ease-in infinite;
}

@keyframes snowfall {
  0% {
    transform: translateY(-775px);
  }
  70% {
    transform: translateY(-775px);
  }
  75% {
    transform: translateY(0);
  }
  95% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-775px);
  }
}

.snow-cap {
  opacity: 0;
  animation: snowCapOpacity 20s ease-in infinite;
}

@keyframes snowCapOpacity {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* squad hogs */

/* one */
.hog-1 {
  transform: translateY(100%);
  animation: hogOnePopup 10s ease-in-out infinite;
}

@keyframes hogOnePopup {
  0% {
    transform: translateY(100%);
  }
  2.5% {
    transform: translateY(0);
  }
  22.5% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}
/* two */
.hog-4 {
  transform: translateY(100%);
  animation: hogTwoPopup 10s ease-in-out infinite;
}

@keyframes hogTwoPopup {
  0% {
    transform: translateY(100%);
  }
  25% {
    transform: translateY(100%);
  }
  27.5% {
    transform: translateY(0);
  }
  47.5% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}
/* three */
.hog-2 {
  transform: translateY(100%);
  animation: hogThreePopup 10s ease-in-out infinite;
}

@keyframes hogThreePopup {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(100%);
  }
  52.5% {
    transform: translateY(0);
  }
  72.5% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* four */
.hog-3 {
  transform: translateY(100%);
  animation: hogFourPopup 10s ease-in-out infinite;
}

@keyframes hogFourPopup {
  0% {
    transform: translateY(100%);
  }
  75% {
    transform: translateY(100%);
  }
  77.5% {
    transform: translateY(0);
  }
  97.5% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* behid animation */
.hero-behind-bg .rainy {
  opacity: 0;
  animation: rainOpacity 20s ease-in infinite;
}

@keyframes rainOpacity {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  47% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.hero-behind-bg .day {
  opacity: 0;
  animation: dayOpacity 20s ease-in infinite;
}

@keyframes dayOpacity {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.hero-behind-bg .snow {
  opacity: 0;
  animation: snowOpacity 20s ease-in infinite;
}

@keyframes snowOpacity {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}