/**
 * Animation System CSS
 * Provides global animation control and respects user preferences
 */

/* ============================================
   Animation Variables
   ============================================ */
:root {
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 250ms;
  --animation-duration-slow: 400ms;

  --animation-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --animation-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Disable Animations When User Preference Set
   ============================================ */

/* Respect user's system preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Respect application-level animation toggle */
html[data-animations-disabled] *,
html[data-animations-disabled] *::before,
html[data-animations-disabled] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ============================================
   Reusable Animation Classes
   ============================================ */

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--animation-duration-normal) var(--animation-ease-out);
}

.fade-in-fast {
  animation: fadeIn var(--animation-duration-fast) var(--animation-ease-out);
}

.fade-in-slow {
  animation: fadeIn var(--animation-duration-slow) var(--animation-ease-out);
}

/* Fade Out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut var(--animation-duration-normal) var(--animation-ease-in);
}

/* Slide Up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp var(--animation-duration-normal) var(--animation-ease-out);
}

/* Slide Down */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slideDown var(--animation-duration-normal) var(--animation-ease-out);
}

/* Slide In from Right (LTR) / Left (RTL) */
@keyframes slideInEnd {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html[dir="rtl"] .slide-in-end {
  animation: slideInEnd var(--animation-duration-normal) var(--animation-ease-out);
}

html[dir="ltr"] .slide-in-end {
  animation: slideInEnd var(--animation-duration-normal) var(--animation-ease-out);
}

/* Slide In from Left (LTR) / Right (RTL) */
@keyframes slideInStart {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html[dir="rtl"] .slide-in-start {
  animation: slideInStart var(--animation-duration-normal) var(--animation-ease-out);
}

html[dir="ltr"] .slide-in-start {
  animation: slideInStart var(--animation-duration-normal) var(--animation-ease-out);
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn var(--animation-duration-normal) var(--animation-ease-out);
}

/* Scale Out */
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

.scale-out {
  animation: scaleOut var(--animation-duration-normal) var(--animation-ease-in);
}

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounceIn var(--animation-duration-slow) var(--animation-ease-out);
}

/* Spin (for loading indicators) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Pulse (for attention-grabbing) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s var(--animation-ease-in-out) infinite;
}

/* Shake (for error states) */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 0.5s var(--animation-ease-in-out);
}

/* ============================================
   Staggered Animations
   ============================================ */

.stagger-children > * {
  opacity: 0;
  animation: fadeIn var(--animation-duration-normal) var(--animation-ease-out) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.stagger-children > *:nth-child(9) { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* ============================================
   Utility Classes
   ============================================ */

/* Smooth transitions for interactive elements */
.transition-smooth {
  transition: all var(--animation-duration-normal) var(--animation-ease-in-out);
}

.transition-fast {
  transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

.transition-slow {
  transition: all var(--animation-duration-slow) var(--animation-ease-in-out);
}

/* GPU-accelerated transforms for better performance */
.will-animate {
  will-change: transform, opacity;
}

/* Remove will-change after animation to save resources */
.animate-complete {
  will-change: auto;
}

/* ============================================
   Page Transition Animations
   ============================================ */

.page-enter {
  animation: fadeIn var(--animation-duration-normal) var(--animation-ease-out);
}

.page-exit {
  animation: fadeOut var(--animation-duration-normal) var(--animation-ease-in);
}

/* ============================================
   Modal/Dialog Animations
   ============================================ */

.modal-backdrop-enter {
  animation: fadeIn var(--animation-duration-fast) var(--animation-ease-out);
}

.modal-enter {
  animation: scaleIn var(--animation-duration-normal) var(--animation-ease-out);
}

.modal-exit {
  animation: scaleOut var(--animation-duration-normal) var(--animation-ease-in);
}

/* ============================================
   Dropdown Animations
   ============================================ */

.dropdown-enter {
  animation: slideDown var(--animation-duration-fast) var(--animation-ease-out);
}

.dropdown-exit {
  animation: fadeOut var(--animation-duration-fast) var(--animation-ease-in);
}

/* ============================================
   Notification/Alert Animations
   ============================================ */

.notification-enter {
  animation: slideDown var(--animation-duration-normal) var(--animation-ease-out);
}

.notification-exit {
  animation: slideUp var(--animation-duration-normal) var(--animation-ease-in);
}

/* ============================================
   Loading State Animations
   ============================================ */

.skeleton-pulse {
  animation: pulse 1.5s var(--animation-ease-in-out) infinite;
}

/* Shimmer effect for skeleton screens */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ============================================
   Button/Interactive Element Animations
   ============================================ */

.hover-lift {
  transition: transform var(--animation-duration-fast) var(--animation-ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--animation-duration-fast) var(--animation-ease-out);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ============================================
   Focus Animations (Accessibility)
   ============================================ */

.focus-ring {
  transition: box-shadow var(--animation-duration-fast) var(--animation-ease-out);
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.3);
}

/* ============================================
   Chart/Data Visualization Animations
   ============================================ */

.chart-bar-enter {
  animation: slideUp var(--animation-duration-slow) var(--animation-ease-out);
}

.chart-line-draw {
  animation: fadeIn var(--animation-duration-slow) var(--animation-ease-out);
}

/* ============================================
   Velocity Fade Animation System
   ============================================ */

/* Velocity Fade Easing - Fast start, smooth stop */
:root {
  --velocity-fade-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --velocity-fade-hover-ease: ease-out;
}

/* Entry Animation - Sections fade in with overshoot (bounce above then settle) */
@keyframes velocityFadeEntry {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px); /* Overshoot above final position */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Settle to final position */
  }
}

.velocity-fade-entry {
  animation: velocityFadeEntry 200ms var(--velocity-fade-ease);
  animation-fill-mode: both;
}

/* Staggered Entry - Each card enters with 150ms delay for visible one-by-one effect */
.velocity-fade-stagger > * {
  opacity: 0; /* Start hidden for stagger effect */
  animation: velocityFadeEntry 200ms var(--velocity-fade-ease);
  animation-fill-mode: both;
}

/* Animation delays for staggered entry effect */
.velocity-fade-stagger > *:nth-child(1) { animation-delay: 0ms; }
.velocity-fade-stagger > *:nth-child(2) { animation-delay: 150ms; }
.velocity-fade-stagger > *:nth-child(3) { animation-delay: 300ms; }
.velocity-fade-stagger > *:nth-child(4) { animation-delay: 450ms; }
.velocity-fade-stagger > *:nth-child(5) { animation-delay: 600ms; }
.velocity-fade-stagger > *:nth-child(6) { animation-delay: 750ms; }
.velocity-fade-stagger > *:nth-child(7) { animation-delay: 900ms; }
.velocity-fade-stagger > *:nth-child(8) { animation-delay: 1050ms; }
.velocity-fade-stagger > *:nth-child(9) { animation-delay: 1200ms; }
.velocity-fade-stagger > *:nth-child(10) { animation-delay: 1350ms; }
.velocity-fade-stagger > *:nth-child(11) { animation-delay: 1500ms; }
.velocity-fade-stagger > *:nth-child(12) { animation-delay: 1650ms; }

/* Ensure dropdowns always appear above staggered content */
.velocity-fade-stagger .dropdown-menu,
.velocity-fade-stagger .select2-container,
.velocity-fade-stagger [role="dialog"],
.velocity-fade-stagger .modal,
.velocity-fade-stagger .offcanvas,
.velocity-fade-stagger .popover,
.velocity-fade-stagger .tooltip {
  z-index: 1050 !important; /* Bootstrap's dropdown z-index */
}

/* Brand-branch selector should be above everything */
.velocity-fade-stagger .bb-dropdown-menu {
  z-index: 10000 !important;
}

/* Hover Animation - Minimal lift with sharpened shadow */
.velocity-fade-hover {
  transition: transform var(--animation-duration-fast) var(--velocity-fade-hover-ease),
              box-shadow var(--animation-duration-fast) var(--velocity-fade-hover-ease);
  will-change: transform;
}

.velocity-fade-hover:hover {
  transform: translateY(-1px);
}

/* Click Animation - Squish + blur feedback (150ms total: 50ms squish + 100ms feedback) */
@keyframes velocityFadeClick {
  0% {
    transform: scale(1) translateY(0);
    filter: blur(0px);
  }
  33% {
    transform: scale(0.98) translateY(0);
    filter: blur(0px);
  }
  100% {
    transform: scale(0.98) translateY(-8px);
    opacity: 0.95;
    filter: blur(1px);
  }
}

.velocity-fade-click {
  animation: velocityFadeClick 150ms var(--velocity-fade-ease);
}

/* Active state for click feedback - squish down */
.velocity-fade-active {
  transform: scale(0.98);
  transition: transform 50ms var(--animation-ease-out);
}

/* Combined class for cards with all velocity fade features */
.velocity-fade-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--animation-duration-fast) var(--velocity-fade-hover-ease),
              box-shadow var(--animation-duration-fast) var(--velocity-fade-hover-ease);
  will-change: transform;
}

.velocity-fade-card:hover {
  transform: translateY(-1px);
}

.velocity-fade-card:active {
  transform: scale(0.98);
}

/* Disable blur on mobile for performance and reduce translateY to prevent clipping */
@media (max-width: 768px) {
  @keyframes velocityFadeEntry {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    40% {
      opacity: 0.7;
      transform: translateY(2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes velocityFadeClick {
    0% {
      transform: scale(1) translateY(0);
    }
    33% {
      transform: scale(0.98) translateY(0);
    }
    100% {
      transform: scale(0.98) translateY(-8px);
      opacity: 0.95;
    }
  }

  /* Ensure parent containers don't clip animated content on mobile */
  .velocity-fade-stagger {
    overflow: visible !important;
  }

  /* Add extra padding on mobile to prevent clipping by bottom navigation */
  #settings-tab-content .velocity-fade-stagger {
    padding-bottom: 2rem;
  }
}

/* ============================================
   Login Form Toggle Animations
   ============================================ */

/* Slide out to the left with scale and fade - smoother exit */
@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-40px) scale(0.9);
  }
}

/* Slide in from the right with scale and fade - growing entrance */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Slide out to the right with scale and fade - smoother exit */
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
  }
}

/* Slide in from the left with scale and fade - growing entrance */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Animation classes for login form fields with overlapping transitions */
.slide-out-left {
  animation: slideOutLeft 250ms var(--animation-ease-in-out) forwards;
}

.slide-in-from-right {
  animation: slideInFromRight 250ms var(--animation-ease-in-out) forwards;
}

.slide-out-right {
  animation: slideOutRight 250ms var(--animation-ease-in-out) forwards;
}

.slide-in-from-left {
  animation: slideInFromLeft 250ms var(--animation-ease-in-out) forwards;
}

/* Position fields absolutely during animation for overlap effect */
.form-group.animating-out {
  position: absolute;
  width: 100%;
}

.form-group.animating-in {
  position: relative;
}

/* ============================================
   Performance Optimization Notes
   ============================================ */

/*
 * This animation system follows best practices:
 *
 * 1. GPU-accelerated properties: transform, opacity, filter
 * 2. Respects prefers-reduced-motion
 * 3. Provides user toggle via data-animations-disabled
 * 4. Uses consistent timing functions and durations
 * 5. RTL/LTR aware for directional animations
 * 6. Minimal use of will-change (only when needed)
 * 7. Targets 60fps on all devices
 *
 * Velocity Fade System:
 * - Fast start, smooth stop easing for snappy feel
 * - Motion blur effect for sense of speed (disabled on mobile)
 * - 100ms stagger delay for visible one-by-one card appearance
 * - Minimal lift hover (1px) for subtle feedback
 * - Squish + blur on click for tactile feedback
 * - Integrates with existing ripple system
 */