/* ==========================================================================
   JVCC UI — Animations & Transitions
   ========================================================================== */

/* -------------------------------------
   Transition Utilities
   ------------------------------------- */
.transition-none { transition: none; }
.transition-all  { transition: all var(--transition-base); }
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: ease;
  transition-duration: 200ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 200ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: ease;
  transition-duration: 200ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 200ms;
}

/* -------------------------------------
   Keyframe Animations
   ------------------------------------- */

/* Fade In */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 300ms var(--ease-out) forwards;
}

/* Fade Out */
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.animate-fade-out {
  animation: fade-out 200ms var(--ease-in) forwards;
}

/* Slide In from Bottom */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in {
  animation: slide-in 300ms var(--ease-out) forwards;
}

/* Slide In from Top (slide-down) */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 300ms var(--ease-out) forwards;
}

/* Slide In from Left */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slide-in-left 300ms var(--ease-out) forwards;
}

/* Slide In from Right */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

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

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Scale In — for modals/popovers */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scale-in 200ms var(--ease-out) forwards;
}

/* Scale Out */
@keyframes scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.animate-scale-out {
  animation: scale-out 150ms var(--ease-in) forwards;
}

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

.animate-shake {
  animation: shake 500ms ease-in-out;
}

/* -------------------------------------
   Animation Delays
   ------------------------------------- */
.delay-75   { animation-delay: 75ms; }
.delay-100  { animation-delay: 100ms; }
.delay-150  { animation-delay: 150ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-500  { animation-delay: 500ms; }

/* -------------------------------------
   Animation Duration
   ------------------------------------- */
.duration-75   { animation-duration: 75ms; }
.duration-100  { animation-duration: 100ms; }
.duration-150  { animation-duration: 150ms; }
.duration-200  { animation-duration: 200ms; }
.duration-300  { animation-duration: 300ms; }
.duration-500  { animation-duration: 500ms; }
.duration-700  { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* -------------------------------------
   Hover transitions
   ------------------------------------- */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

/* -------------------------------------
   Dropdown visibility (works with dropdown.js)
   ------------------------------------- */
.jvcc-dropdown-open {
  display: block !important;
}

/* -------------------------------------
   Theme icon visibility
   ------------------------------------- */
[data-theme="light"] .icon-sun,
:not([data-theme="dark"]) .icon-sun {
  display: none;
}
[data-theme="dark"] .icon-moon {
  display: none;
}
[data-theme="dark"] .icon-sun {
  display: block;
}