/* ========================================
   SYSTÈME ANIMATIONS GLOBAL ULTRA-OPTIMISÉ
   ======================================== */

/* Performance Engine - GPU Layers */
.gpu-layer {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Composite Layers for Smooth Animations */
.composite-layer {
  transform: translateZ(0);
  isolation: isolate;
}

/* Frame Rate Optimization */
@supports (display: flex) {
  .optimized-animation {
    will-change: transform, opacity;
    transform: translateZ(0);
  }
}

/* Intersection Observer Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s var(--ease-natural);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll Performance Optimizations */
.scroll-optimized {
  contain: layout style paint;
  content-visibility: auto;
}

/* Animation Easing Library */
:root {
  /* Apple Natural */
  --ease-natural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Spring Bounce */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Smooth Out */
  --ease-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
  
  /* Back Out */
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Elastic */
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Bounce */
  --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  
  /* Quart */
  --ease-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Quint */
  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  
  /* Expo */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  
  /* Circ */
  --ease-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  
  /* Sine */
  --ease-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Advanced Animation Classes */
.fade-in {
  animation: fadeIn 0.8s var(--ease-natural) forwards;
}

/* Lightning Effects */
.lightning-flash {
  animation: lightningFlash 0.1s ease-out;
}

.electric-glow {
  animation: electricGlow 2s ease-in-out infinite alternate;
}

.pulse-glow {
  animation: pulseGlow 1.5s ease-in-out infinite;
}

.rainbow-shift {
  animation: rainbowShift 3s linear infinite;
}

.matrix-rain {
  animation: matrixRain 2s linear infinite;
}

.bright-flash {
  animation: brightFlash 0.3s ease-out;
}

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

.cyber-grid {
  animation: cyberGrid 4s linear infinite;
}

.illuminate {
  animation: illuminate 2s ease-in-out infinite alternate;
}

.bright-pulse {
  animation: brightPulse 1.5s ease-in-out infinite;
}

.light-burst {
  animation: lightBurst 0.8s ease-out;
}

.radiant-glow {
  animation: radiantGlow 3s ease-in-out infinite alternate;
}

.sunbeam {
  animation: sunbeam 4s ease-in-out infinite;
}

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

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

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

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

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

.scale-in-center {
  animation: scaleInCenter 0.6s var(--ease-spring) forwards;
}

.slide-in-up {
  animation: slideInUp 0.8s var(--ease-natural) forwards;
}

.slide-in-down {
  animation: slideInDown 0.8s var(--ease-natural) forwards;
}

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

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

.rotate-in {
  animation: rotateIn 0.8s var(--ease-natural) forwards;
}

.flip-in-x {
  animation: flipInX 0.8s var(--ease-natural) forwards;
}

.flip-in-y {
  animation: flipInY 0.8s var(--ease-natural) forwards;
}

.zoom-in {
  animation: zoomIn 0.6s var(--ease-spring) forwards;
}

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

.elastic-in {
  animation: elasticIn 0.8s var(--ease-elastic) forwards;
}

/* Stagger Animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* Continuous Animations */
.rotate {
  animation: rotate 2s linear infinite;
}

.rotate-reverse {
  animation: rotateReverse 2s linear infinite;
}

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

.bounce {
  animation: bounce 2s var(--ease-natural) infinite;
}

.wiggle {
  animation: wiggle 0.5s var(--ease-natural) infinite;
}

.glow {
  animation: glow 2s var(--ease-natural) infinite;
}

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

/* Hover Animations */
.hover-lift {
  transition: transform 0.3s var(--ease-natural);
}

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

.hover-scale {
  transition: transform 0.3s var(--ease-natural);
}

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

.hover-rotate {
  transition: transform 0.3s var(--ease-natural);
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-glow {
  transition: box-shadow 0.3s var(--ease-natural);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Loading Animations */
.loading-spinner {
  animation: spin 1s linear infinite;
}

.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

.loading-wave {
  animation: loadingWave 1.5s infinite;
}

.loading-pulse {
  animation: loadingPulse 1.5s infinite;
}

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

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

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

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

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

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

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

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

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

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

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

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

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

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

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@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);
  }
}

@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

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

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

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

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

@keyframes loadingDots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%, 100% {
    content: '...';
  }
}

@keyframes loadingWave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}

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

/* Lightning and Electric Effects */
@keyframes lightningFlash {
  0% {
    background: rgba(255, 255, 255, 0);
  }
  50% {
    background: rgba(255, 255, 255, 0.8);
  }
  100% {
    background: rgba(255, 255, 255, 0);
  }
}

@keyframes electricGlow {
  0% {
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.2),
      0 0 10px rgba(255, 255, 255, 0.1),
      0 0 15px rgba(255, 255, 255, 0.05);
  }
  100% {
    box-shadow: 
      0 0 10px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(255, 255, 255, 0.2),
      0 0 30px rgba(255, 255, 255, 0.1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
  }
}

@keyframes rainbowShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

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

@keyframes brightFlash {
  0% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.8);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes hologram {
  0%, 100% {
    transform: perspective(400px) rotateY(0deg);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: perspective(400px) rotateY(5deg);
    filter: hue-rotate(90deg);
  }
  50% {
    transform: perspective(400px) rotateY(0deg);
    filter: hue-rotate(180deg);
  }
  75% {
    transform: perspective(400px) rotateY(-5deg);
    filter: hue-rotate(270deg);
  }
}

@keyframes cyberGrid {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

@keyframes illuminate {
  0% {
    box-shadow: 
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 20px rgba(255, 255, 255, 0.1),
      0 0 30px rgba(255, 255, 255, 0.05);
  }
  100% {
    box-shadow: 
      0 0 30px rgba(255, 255, 255, 0.4),
      0 0 60px rgba(255, 255, 255, 0.2),
      0 0 90px rgba(255, 255, 255, 0.1);
  }
}

@keyframes brightPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
  }
}

@keyframes lightBurst {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}

@keyframes radiantGlow {
  0% {
    box-shadow: 
      0 0 20px rgba(255, 255, 255, 0.2),
      0 0 40px rgba(255, 255, 255, 0.1),
      0 0 60px rgba(255, 255, 255, 0.05);
  }
  100% {
    box-shadow: 
      0 0 40px rgba(255, 255, 255, 0.4),
      0 0 80px rgba(255, 255, 255, 0.2),
      0 0 120px rgba(255, 255, 255, 0.1);
  }
}

@keyframes sunbeam {
  0% {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
  }
  50% {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  }
  100% {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(100%);
  }
}

/* Performance Optimizations */
@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;
  }
  
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
  
  .continuous-animation {
    animation: none;
  }
}

/* High Performance Mode */
@media (prefers-reduced-motion: no-preference) {
  .high-performance {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Battery Optimization */
@media (prefers-reduced-motion: reduce) and (hover: none) {
  .battery-optimized {
    animation: none;
    transition: none;
  }
}

/* GPU Acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Memory Management */
.memory-optimized {
  contain: layout style paint;
  content-visibility: auto;
}

/* Intersection Observer Optimizations */
.intersection-optimized {
  contain: layout style paint;
  content-visibility: auto;
}

/* Scroll Performance */
.scroll-performance {
  contain: layout style paint;
  transform: translateZ(0);
  will-change: transform;
}

/* Animation Cleanup */
.animation-cleanup {
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/* Responsive Animations */
@media (max-width: 768px) {
  .mobile-optimized {
    animation-duration: 0.6s;
    transition-duration: 0.3s;
  }
}

@media (max-width: 480px) {
  .mobile-optimized {
    animation-duration: 0.4s;
    transition-duration: 0.2s;
  }
}

/* Dark Mode Animations */
@media (prefers-color-scheme: dark) {
  .dark-mode-animation {
    animation-timing-function: var(--ease-natural);
  }
}

/* Print Optimizations */
@media print {
  .print-optimized {
    animation: none !important;
    transition: none !important;
  }
}