/* 
 * MindNest Apps - animations.css
 * Performance-tuned CSS transitions and viewport entry animations.
 */

/* Entry Animations - Controlled via Intersection Observer (js/scroll.js) */

/* Initial states for animated elements */
.animate-item {
  opacity: 0;
  will-change: transform, opacity, filter;
  transition: opacity var(--transition-slow), transform var(--transition-slow), filter var(--transition-slow);
}

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

.slide-up {
  transform: translateY(30px);
}

.blur-in {
  transform: translateY(20px);
  filter: blur(10px);
}

/* Active animation states */
.animate-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Delayed entries for lists/grids */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* 1. Floating Animation for Hero Productivity Shapes */
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
  100% {
    transform: translateY(-5px) rotate(-3deg);
  }
}

/* 2. Mouse Wheel Scroll Anim */
@keyframes scrollMouse {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
}

/* 3. Underline slide hover effect (for footer links or other standard nav) */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform var(--transition-fast) ease-out;
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Button Pulse Animation for Hover Focus */
.btn:active {
  transform: scale(0.98) translateY(0);
}

/* Premium gradient wave overlay animation for CTA backgrounds (slow rotation) */
@keyframes rotateGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cta-section:hover .cta-bg-gradient {
  opacity: 0.85;
}