/* ==========================================
   GLOBAL ANIMATION
========================================== */

.fade-up {
  opacity: 0;

  translate: 0 40px;

  transition:
    opacity var(--duration-reveal) ease,
    translate var(--duration-reveal) ease;
}

.fade-up.show {
  opacity: 1;

  translate: 0 0;
}

.fade {
  opacity: 0;

  transition: var(--duration-reveal) ease;
}

.fade.show {
  opacity: 1;
}

.hero-svg {
  animation: float 7s ease-in-out infinite;
}

/*==================================================
FLOAT
==================================================*/

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/*==================================================
GLOW
==================================================*/

@keyframes glowPulse {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes heroFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

.hero-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.025;

  pointer-events: none;

  background-image: radial-gradient(
    var(--primary) 1px,

    transparent 1px
  );

  background-size: 34px 34px;
}