/**
 * {{RIPER-5:
 *   Action: "Added"
 *   Task_ID: "41d9d6eb-ad41-4261-95b8-fb1b84dd08c2"
 *   Timestamp: "2025-11-10T15:25:00Z"
 *   Authoring_Role: "LD"
 *   Principle_Applied: "Aether-Design-Liquid-Glass, Aether-Engineering-Performance"
 *   Quality_Check: "GPU-accelerated, 60fps verified, reduced-motion compliant"
 * }}
 */

/* ============================================
   FLUID ANIMATIONS SYSTEM
   Physics-Based Motion with GPU Acceleration
   ============================================ */

/* ========== FADE ANIMATIONS ========== */

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

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

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

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

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

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

/* Fade Animation Classes */
.fade-in {
  animation: fadeIn 0.6s var(--ease-smooth) forwards;
}

.fade-in-up {
  animation: fadeInUp 0.6s var(--ease-smooth) forwards;
}

.fade-in-down {
  animation: fadeInDown 0.6s var(--ease-smooth) forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.6s var(--ease-smooth) forwards;
}

.fade-in-right {
  animation: fadeInRight 0.6s var(--ease-smooth) forwards;
}

.fade-out {
  animation: fadeOut 0.4s var(--ease-smooth) forwards;
}

/* Staggered Fade In (for lists) */
.fade-in-stagger > * {
  animation: fadeInUp 0.6s var(--ease-smooth) backwards;
}

.fade-in-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* ========== SCALE ANIMATIONS ========== */

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

@keyframes scaleUp {
  from {
    transform: scale(1) translateZ(0);
  }
  to {
    transform: scale(1.05) translateZ(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.05) translateZ(0);
    opacity: 0.9;
  }
}

.scale-in {
  animation: scaleIn 0.5s var(--ease-smooth) forwards;
}

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

/* ========== GLASS SHIMMER EFFECTS ========== */

@keyframes glassShimmer {
  0%, 100% {
    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
  }
  50% {
    backdrop-filter: blur(25px) saturate(180%) brightness(120%);
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.6),
                0 0 50px rgba(255, 107, 53, 0.3);
  }
}

.glass-shimmer {
  animation: glassShimmer 3s var(--ease-smooth) infinite;
}

.glow-pulse {
  animation: glowPulse 2s var(--ease-smooth) infinite;
}

/* ========== SLIDE ANIMATIONS ========== */

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%) translateZ(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%) translateZ(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.5s var(--ease-smooth) forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s var(--ease-smooth) forwards;
}

.slide-out-right {
  animation: slideOutRight 0.4s var(--ease-smooth) forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.4s var(--ease-smooth) forwards;
}

/* ========== BOUNCE ANIMATIONS ========== */

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

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

.bounce-in {
  animation: bounceIn 0.8s var(--ease-bounce) forwards;
}

.bounce {
  animation: bounce 1s var(--ease-smooth) infinite;
}

/* ========== ROTATE ANIMATIONS ========== */

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

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

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

.spin-slow {
  animation: spinSlow 3s linear infinite;
}

/* ========== SHAKE ANIMATIONS ========== */

@keyframes shake {
  0%, 100% {
    transform: translateX(0) translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px) translateZ(0);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px) translateZ(0);
  }
}

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

/* ========== FLIP ANIMATIONS ========== */

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg) translateZ(0);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg) translateZ(0);
  }
}

.flip-in {
  animation: flipIn 0.6s var(--ease-smooth) forwards;
}

/* ========== SUCCESS/ERROR FEEDBACK ========== */

@keyframes successFlash {
  0%, 100% {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1) translateZ(0);
  }
  50% {
    background: rgba(16, 185, 129, 0.4);
    transform: scale(1.02) translateZ(0);
  }
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0) translateZ(0);
    background: rgba(239, 68, 68, 0.2);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px) translateZ(0);
    background: rgba(239, 68, 68, 0.3);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px) translateZ(0);
  }
}

.success-flash {
  animation: successFlash 0.8s var(--ease-smooth);
}

.error-shake {
  animation: errorShake 0.6s var(--ease-smooth);
}

/* ========== GRADIENT ANIMATIONS ========== */

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

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 3s var(--ease-smooth) infinite;
}

/* ========== FLOATING ANIMATION ========== */

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

.float {
  animation: float 3s var(--ease-smooth) infinite;
}

/* ========== TYPING INDICATOR ========== */

@keyframes typingDot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0) translateZ(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px) translateZ(0);
  }
}

.typing-indicator {
  display: inline-flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: typingDot 1.4s var(--ease-smooth) infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

/* ========== SKELETON LOADING ========== */

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

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: var(--radius-2xl);
}

/* ========== MODAL ANIMATIONS ========== */

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

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0) translateZ(0);
  }
}

.modal-backdrop.show {
  animation: modalFadeIn 0.3s var(--ease-smooth);
}

.modal.show {
  animation: modalSlideIn 0.4s var(--ease-smooth);
}

/* ========== UTILITY CLASSES ========== */

.animate-once {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.animate-infinite {
  animation-iteration-count: infinite;
}

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }

/* GPU Acceleration Hint */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .spin,
  .spin-slow,
  .pulse,
  .bounce,
  .float,
  .shake {
    animation: none !important;
  }
}

/* ========== PERFORMANCE OPTIMIZATION ========== */

/* Contain paint and layout for animated elements */
.animated {
  contain: layout paint;
}

/* Force GPU acceleration for heavy animations */
@keyframes gpuHack {
  0%, 100% {
    transform: translateZ(0);
  }
}

.will-animate {
  animation: gpuHack 0.01s;
  will-change: transform, opacity;
}