/* ========================================
   Y COMMUNITY - ANIMATIONS SYSTEM
   מערכת אנימציות מותאמת ביצועים
   ======================================== */

/* Design System integrated into brand-colors.css */

/* ========================================
   ANIMATION VARIABLES
   ======================================== */

:root {
  /* ⏱️ Animation Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 750ms;
  --duration-slowest: 1000ms;
  
  /* 📈 Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* 🎭 Transform Origins */
  --origin-center: center;
  --origin-top: top;
  --origin-bottom: bottom;
  --origin-left: left;
  --origin-right: right;
  --origin-top-left: top left;
  --origin-top-right: top right;
  --origin-bottom-left: bottom left;
  --origin-bottom-right: bottom right;
}

/* ========================================
   BASE ANIMATION SETTINGS
   ======================================== */

/* Performance Optimizations */
* {
  will-change: auto;
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-scroll {
  will-change: scroll-position;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ========================================
   TRANSITION SYSTEM
   ======================================== */

/* Base Transitions */
.transition-none {
  transition: none;
}

.transition-all {
  transition: all var(--duration-normal) var(--ease-out);
}

.transition-colors {
  transition: color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.transition-opacity {
  transition: opacity var(--duration-normal) var(--ease-out);
}

.transition-shadow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.transition-transform {
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Duration Modifiers */
.duration-instant { transition-duration: var(--duration-instant); }
.duration-fast { transition-duration: var(--duration-fast); }
.duration-normal { transition-duration: var(--duration-normal); }
.duration-slow { transition-duration: var(--duration-slow); }
.duration-slower { transition-duration: var(--duration-slower); }
.duration-slowest { transition-duration: var(--duration-slowest); }

/* Easing Modifiers */
.ease-linear { transition-timing-function: var(--ease-linear); }
.ease-in { transition-timing-function: var(--ease-in); }
.ease-out { transition-timing-function: var(--ease-out); }
.ease-in-out { transition-timing-function: var(--ease-in-out); }
.ease-sharp { transition-timing-function: var(--ease-sharp); }
.ease-bounce { transition-timing-function: var(--ease-bounce); }
.ease-elastic { transition-timing-function: var(--ease-elastic); }
.ease-back { transition-timing-function: var(--ease-back); }

/* ========================================
   HOVER ANIMATIONS
   ======================================== */

/* Lift Effect */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

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

.hover-lift-lg {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

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

/* Scale Effects */
.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}

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

.hover-scale-sm:hover {
  transform: scale(1.02);
}

.hover-scale-lg:hover {
  transform: scale(1.1);
}

/* Glow Effects */
.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

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

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

/* Color Transitions */
.hover-color {
  transition: color var(--duration-fast) var(--ease-out);
}

.hover-bg {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.hover-border {
  transition: border-color var(--duration-fast) var(--ease-out);
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

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

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

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

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

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

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

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

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

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

/* Rotation Animations */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}

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

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/* Spinner */
@keyframes spin {
  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 cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    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;
}

/* Loading Dots */
@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-dots {
  display: inline-block;
}

.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-dark);
  animation: loadingDots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

/* Progress Bar */
@keyframes progressBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.progress-animation {
  animation: progressBar 2s ease-out;
}

/* ========================================
   ATTENTION ANIMATIONS
   ======================================== */

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

.animate-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Wobble */
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

.animate-wobble {
  animation: wobble 1s ease-in-out;
}

/* Heartbeat */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

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

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

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

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

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

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

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

.scale-in-bounce {
  animation: scaleInBounce var(--duration-slow) var(--ease-bounce);
}

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

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

.slide-in-left {
  animation: slideInLeft var(--duration-normal) var(--ease-out);
}

.slide-in-right {
  animation: slideInRight var(--duration-normal) var(--ease-out);
}

.rotate-in {
  animation: rotateIn var(--duration-slow) var(--ease-out);
}

.flip-in-x {
  animation: flipInX var(--duration-slow) var(--ease-out);
}

.flip-in-y {
  animation: flipInY var(--duration-slow) var(--ease-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; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Animation Fill Modes */
.fill-none { animation-fill-mode: none; }
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }

/* Animation Iteration */
.repeat-1 { animation-iteration-count: 1; }
.repeat-2 { animation-iteration-count: 2; }
.repeat-3 { animation-iteration-count: 3; }
.repeat-infinite { animation-iteration-count: infinite; }

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */

/* Smooth Scrolling */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Parallax Base */
.parallax {
  will-change: transform;
}

/* ========================================
   COMPONENT-SPECIFIC ANIMATIONS
   ======================================== */

/* Button Animations */
.btn {
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

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

.btn:active {
  transform: translateY(0);
  transition-duration: var(--duration-instant);
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow) var(--ease-out),
              height var(--duration-slow) var(--ease-out);
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Card Animations */
.card {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Modal Animations */
.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.modal.show {
  opacity: 1;
  transform: scale(1);
}

.modal-backdrop {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal-backdrop.show {
  opacity: 1;
}

/* Navigation Animations */
.nav-link {
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-light);
  transition: width var(--duration-normal) var(--ease-out);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Form Animations */
.form-control {
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.form-control:focus {
  animation: inputFocus var(--duration-normal) var(--ease-out);
}

@keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(160, 223, 80, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(160, 223, 80, 0.2);
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .parallax {
    transform: none !important;
  }
}

/* GPU acceleration for smooth animations */
.animate-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize for 60fps */
@media (min-resolution: 120dpi) {
  .high-dpi-animation {
    will-change: transform, opacity;
  }
}

/* Battery optimization */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .desktop-only-animation {
    animation-play-state: running;
  }
}

@media (max-width: 1023px) {
  .desktop-only-animation {
    animation-play-state: paused;
  }
}

/* ========================================
   DEBUGGING ANIMATIONS
   ======================================== */

/* Animation debugging */
.debug-animations * {
  animation-duration: 3s !important;
  transition-duration: 1s !important;
}

.debug-animations *::before,
.debug-animations *::after {
  animation-duration: 3s !important;
  transition-duration: 1s !important;
}

/* Show animation boundaries */
.show-animation-bounds {
  outline: 2px dashed red;
  outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  * {
    animation: none !important;
    transition: none !important;
  }
  
  .no-print-animation {
    display: none;
  }
}