/* ==========================================================================
   Alternivite Design System — Animations
   Scroll reveal, keyframe animations, hover transitions, loading skeletons
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL — IntersectionObserver driven
   Add .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-stagger
   JS adds .reveal-active when element enters viewport
   ========================================================================== */

/* Base reveal — fade up */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity var(--duration-slower) var(--ease-out),
               transform var(--duration-slower) var(--ease-out);
}

.reveal-active {
   opacity: 1;
   transform: translateY(0);
}

/* Variant — slide from left */
.reveal-left {
   opacity: 0;
   transform: translateX(-30px);
   transition: opacity var(--duration-slower) var(--ease-out),
               transform var(--duration-slower) var(--ease-out);
}

.reveal-left.reveal-active {
   opacity: 1;
   transform: translateX(0);
}

/* Variant — slide from right */
.reveal-right {
   opacity: 0;
   transform: translateX(30px);
   transition: opacity var(--duration-slower) var(--ease-out),
               transform var(--duration-slower) var(--ease-out);
}

.reveal-right.reveal-active {
   opacity: 1;
   transform: translateX(0);
}

/* Variant — scale in */
.reveal-scale {
   opacity: 0;
   transform: scale(0.95);
   transition: opacity var(--duration-slower) var(--ease-out),
               transform var(--duration-slower) var(--ease-out);
}

.reveal-scale.reveal-active {
   opacity: 1;
   transform: scale(1);
}

/* Variant — staggered children */
.reveal-stagger > * {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity var(--duration-slower) var(--ease-out),
               transform var(--duration-slower) var(--ease-out);
}

.reveal-stagger.reveal-active > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.reveal-active > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.reveal-active > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.reveal-active > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.reveal-active > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.reveal-active > *:nth-child(6) { transition-delay: 500ms; }

.reveal-stagger.reveal-active > * {
   opacity: 1;
   transform: translateY(0);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

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

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

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

@keyframes fadeInLeft {
   from { opacity: 0; transform: translateX(-20px); }
   to   { opacity: 1; transform: translateX(0); }
}

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

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

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

@keyframes slideInRight {
   from { transform: translateX(100%); }
   to   { transform: translateX(0); }
}

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

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

@keyframes float {
   0%, 100% { transform: translateY(0); }
   50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
   0%   { background-position: -200% 0; }
   100% { background-position: 200% 0; }
}

@keyframes gradientShift {
   0%   { background-position: 0% 50%; }
   50%  { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}

/* ==========================================================================
   ANIMATION UTILITY CLASSES
   Apply keyframe animations to elements
   ========================================================================== */

.animate-fadeIn     { animation: fadeIn var(--duration-slower) var(--ease-out) both; }
.animate-fadeInUp   { animation: fadeInUp var(--duration-slower) var(--ease-out) both; }
.animate-fadeInDown { animation: fadeInDown var(--duration-slower) var(--ease-out) both; }
.animate-fadeInLeft { animation: fadeInLeft var(--duration-slower) var(--ease-out) both; }
.animate-fadeInRight { animation: fadeInRight var(--duration-slower) var(--ease-out) both; }
.animate-scaleIn    { animation: scaleIn var(--duration-slower) var(--ease-out) both; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }

/* Shimmer gradient background */
.animate-shimmer {
   background: linear-gradient(
      90deg,
      var(--bg-secondary) 25%,
      var(--bg-tertiary) 50%,
      var(--bg-secondary) 75%
   );
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
}

/* ==========================================================================
   ANIMATION DELAY UTILITIES
   ========================================================================== */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ==========================================================================
   HOVER TRANSITIONS
   Utility classes for interactive hover effects
   ========================================================================== */

/* Generic all-property transition */
.transition-all {
   transition: all var(--duration-normal) var(--ease-default);
}

/* Color-only transition */
.transition-colors {
   transition: color var(--duration-normal) var(--ease-default),
               background-color var(--duration-normal) var(--ease-default),
               border-color var(--duration-normal) var(--ease-default);
}

/* Transform-only transition */
.transition-transform {
   transition: transform var(--duration-normal) var(--ease-default);
}

/* Hover — scale up */
.hover-scale {
   transition: transform var(--duration-normal) var(--ease-default);
}

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

/* Hover — lift with shadow */
.hover-lift {
   transition: transform var(--duration-normal) var(--ease-default),
               box-shadow var(--duration-normal) var(--ease-default);
}

.hover-lift:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   LOADING STATES — Skeleton placeholders
   ========================================================================== */

.skeleton {
   background: linear-gradient(
      90deg,
      var(--bg-secondary) 25%,
      var(--bg-tertiary) 50%,
      var(--bg-secondary) 75%
   );
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
   border-radius: var(--radius-lg);
}

.skeleton-text {
   height: 1rem;
   margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
   width: 60%;
}

.skeleton-heading {
   height: 2rem;
   width: 40%;
   margin-bottom: var(--space-4);
}

.skeleton-avatar {
   width: var(--space-10);
   height: var(--space-10);
   border-radius: var(--radius-full);
}

/* ==========================================================================
   REDUCED MOTION — Disable all animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
   .reveal,
   .reveal-left,
   .reveal-right,
   .reveal-scale {
      opacity: 1;
      transform: none;
      transition: none;
   }

   .reveal-stagger > * {
      opacity: 1;
      transform: none;
      transition: none;
   }

   .animate-float,
   .animate-pulse,
   .animate-spin,
   .animate-shimmer,
   .skeleton {
      animation: none;
   }

   .hover-scale:hover,
   .hover-lift:hover {
      transform: none;
   }
}