/**
 * ANIMATIONS.CSS
 * 
 * Purpose: Custom keyframe animations and transition utilities.
 * Style:   "Quantum Glass" background blobs and hover effects.
 */

/* Animations for Mentronig - The Quantum Glass */

@keyframes blob-bounce {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.animate-blob {
  animation: blob-bounce 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Typing Animation */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #00FF78;
  }

  /* successGreen */
}

.animate-typing {
  overflow: hidden;
  border-right: .15em solid #00FF78;
  white-space: nowrap;
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* 3D Tilt Effect Utility */
.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

/* Custom Tilt Rotation on Hover */
.group:hover .rotate-3d-hover {
  transform: rotateY(10deg) rotateX(5deg);
}

/* 3D Translation Utilities */
.translate-z-10 {
  transform: translateZ(20px);
}

.translate-z-20 {
  transform: translateZ(40px);
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}