/* Animations & Transitions */

/* Fade Up (for scroll triggers and initial load) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for multiple items */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }

/* Dedicated on-load reveal */
.reveal-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-slide-down {
  animation: slideDown 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUpReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* For animated fade-ins of data elements after fetch */
.fade-in {
  animation: simpleFadeIn 400ms ease forwards;
}

@keyframes simpleFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: simpleFadeOut 400ms ease forwards;
}

@keyframes simpleFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Filter animations for portfolio */
.filter-item-leave {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

/* Typewriter Cursor */
.typewriter-cursor {
  animation: blink 1.2s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}