/* GAIL's Overview — Animations & Transitions */

/* Fade in from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typeform slide in */
@keyframes tfSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typeform slide out (reverse) */
@keyframes tfSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Scale in (for success checkmark etc) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* PIN error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Staggered animation utility — set --anim-index on each child */
.anim-fadeInUp {
  animation: fadeInUp 0.35s ease both;
  animation-delay: calc(var(--anim-index, 0) * 50ms);
}

.anim-tfSlideIn {
  animation: tfSlideIn 0.4s ease both;
}

.anim-scaleIn {
  animation: scaleIn 0.3s ease both;
}

.anim-shake {
  animation: shake 0.45s ease;
}

/* Interactive transitions */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.click-press:active {
  transform: scale(0.98);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}