/* ========================================
   PORTFOLIO FUTURISTE - ANIMATIONS CSS AVANCÉES
   Animations complexes, transitions 3D, effets visuels
   ======================================== */

/* ========================================
   ANIMATIONS DE PARTICULES ET FOND
   ======================================== */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-180deg); }
}

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

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

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

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

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

/* ========================================
   ANIMATIONS DE NAVIGATION ET MENU
   ======================================== */
@keyframes hamburgerSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hamburgerToX {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(45deg); }
  100% { transform: rotate(45deg); }
}

@keyframes navSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes navSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes navItemHover {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(5px) scale(1.02);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

/* ========================================
   ANIMATIONS 3D ET TRANSFORMS
   ======================================== */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes rotateIn3D {
  0% {
    transform: rotateY(-90deg) rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes zoomIn3D {
  0% {
    transform: perspective(1000px) scale(0.3) translateZ(-200px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: perspective(1000px) scale(1) translateZ(0px);
    opacity: 1;
  }
}

@keyframes bounceIn3D {
  0% {
    transform: perspective(1000px) scale(0.3) translateZ(-300px) rotateZ(-10deg);
    opacity: 0;
  }
  50% {
    transform: perspective(1000px) scale(1.05) translateZ(100px) rotateZ(2deg);
    opacity: 0.8;
  }
  70% {
    transform: perspective(1000px) scale(0.95) translateZ(-50px) rotateZ(-1deg);
    opacity: 0.9;
  }
  100% {
    transform: perspective(1000px) scale(1) translateZ(0px) rotateZ(0deg);
    opacity: 1;
  }
}

/* ========================================
   ANIMATIONS DE SECTIONS ET CARDS
   ======================================== */
@keyframes slideInFromLeft3D {
  0% {
    transform: perspective(1000px) translateX(-100%) rotateY(45deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) translateX(0%) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromRight3D {
  0% {
    transform: perspective(1000px) translateX(100%) rotateY(-45deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) translateX(0%) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromTop3D {
  0% {
    transform: perspective(1000px) translateY(-100%) rotateX(45deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) translateY(0%) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromBottom3D {
  0% {
    transform: perspective(1000px) translateY(100%) rotateX(-45deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1000px) translateY(0%) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes cardFlip {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateY(90deg);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg);
  }
}

@keyframes cardSlideUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cardScaleRotate {
  0% {
    transform: scale(0.8) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) rotate(2deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ========================================
   ANIMATIONS DE HOVER ET INTERACTIONS
   ======================================== */
@keyframes hoverLift {
  0% {
    transform: translateY(0) rotateX(0deg);
  }
  100% {
    transform: translateY(-10px) rotateX(5deg);
  }
}

@keyframes hoverGlow {
  0% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  100% {
    box-shadow: 
      0 0 30px rgba(99, 102, 241, 0.5),
      0 0 60px rgba(99, 102, 241, 0.2),
      0 0 90px rgba(99, 102, 241, 0.1);
  }
}

@keyframes hoverScale3D {
  0% {
    transform: perspective(1000px) scale(1) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) scale(1.05) rotateX(2deg) rotateY(2deg);
  }
  100% {
    transform: perspective(1000px) scale(1.02) rotateX(1deg) rotateY(1deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

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

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

/* ========================================
   ANIMATIONS DE LOADING ET PROGRESS
   ======================================== */
@keyframes loadingDots {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes loadingBounce {
  0%, 80%, 100% { 
    transform: scale(0);
  }
  40% { 
    transform: scale(1);
  }
}

@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes skeletonLoading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes typing {
  0% { width: 0ch; }
  100% { width: var(--typing-width, 20ch); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ========================================
   ANIMATIONS DE PARTICULES
   ======================================== */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

@keyframes particleMove {
  0% {
    transform: translateX(-10px) translateY(0px);
  }
  25% {
    transform: translateX(10px) translateY(-10px);
  }
  50% {
    transform: translateX(5px) translateY(-20px);
  }
  75% {
    transform: translateX(-5px) translateY(-10px);
  }
  100% {
    transform: translateX(10px) translateY(0px);
  }
}

@keyframes particleConnect {
  0% {
    stroke-dasharray: 0, 100;
    opacity: 0;
  }
  50% {
    stroke-dasharray: 50, 50;
    opacity: 0.5;
  }
  100% {
    stroke-dasharray: 100, 0;
    opacity: 0.1;
  }
}

/* ========================================
   ANIMATIONS DE TEXT ET TYPOGRAPHIE
   ======================================== */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor;
  }
  50% {
    text-shadow: 
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 30px currentColor,
      0 0 40px currentColor;
  }
}

@keyframes textWave {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  75% {
    transform: translateY(2px);
  }
}

@keyframes textSlideReveal {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes textRainbow {
  0% { color: #ff0000; }
  16.66% { color: #ff8000; }
  33.33% { color: #ffff00; }
  50% { color: #00ff00; }
  66.66% { color: #0080ff; }
  83.33% { color: #8000ff; }
  100% { color: #ff0000; }
}

/* ========================================
   ANIMATIONS DE MODALS ET OVERLAYS
   ======================================== */
@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalSlideOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
}

@keyframes backdropFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes backdropFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes zoomInModal {
  0% {
    opacity: 0;
    transform: perspective(1000px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) scale(1);
  }
}

@keyframes bounceInModal {
  0% {
    opacity: 0;
    transform: perspective(1000px) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: perspective(1000px) scale(1.05);
  }
  70% {
    transform: perspective(1000px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) scale(1);
  }
}

/* ========================================
   ANIMATIONS DE JEUX ET INTERACTIONS
   ======================================== */
@keyframes gameStart {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes gameOver {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(90deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

@keyframes scoreIncrease {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.2);
    color: var(--success-color);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

@keyframes snakeMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(10px) translateY(0);
  }
  50% {
    transform: translateX(10px) translateY(10px);
  }
  75% {
    transform: translateX(0) translateY(10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

/* ========================================
   CLASSES D'ANIMATION UTILITAIRES
   ======================================== */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-floatReverse { animation: floatReverse 6s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulseGlow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2s infinite; }
.animate-gradientShift { 
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}
.animate-gradientMove { 
  background-size: 200% 200%;
  animation: gradientMove 4s ease infinite;
}

.animate-flipInX { animation: flipInX 0.8s ease-out; }
.animate-flipInY { animation: flipInY 0.8s ease-out; }
.animate-rotateIn3D { animation: rotateIn3D 1s ease-out; }
.animate-zoomIn3D { animation: zoomIn3D 0.8s ease-out; }
.animate-bounceIn3D { animation: bounceIn3D 1s ease-out; }

.animate-slideInFromLeft3D { animation: slideInFromLeft3D 0.8s ease-out; }
.animate-slideInFromRight3D { animation: slideInFromRight3D 0.8s ease-out; }
.animate-slideInFromTop3D { animation: slideInFromTop3D 0.8s ease-out; }
.animate-slideInFromBottom3D { animation: slideInFromBottom3D 0.8s ease-out; }
.animate-cardFlip { animation: cardFlip 0.6s ease-out; }
.animate-cardSlideUp { animation: cardSlideUp 0.6s ease-out; }
.animate-cardScaleRotate { animation: cardScaleRotate 0.6s ease-out; }

.animate-hoverLift:hover { animation: hoverLift 0.3s ease; }
.animate-hoverGlow:hover { animation: hoverGlow 0.3s ease; }
.animate-hoverScale3D:hover { animation: hoverScale3D 0.3s ease; }
.animate-ripple:active { animation: ripple 0.6s ease; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-wiggle:hover { animation: wiggle 0.5s ease; }

.animate-loadingDots { animation: loadingDots 1.4s infinite; }
.animate-loadingBounce { animation: loadingBounce 1.4s infinite; }
.animate-typing { animation: typing 2s steps(var(--typing-width, 20)) forwards; }
.animate-blink { animation: blink 1s infinite; }

.animate-particleFloat { animation: particleFloat 20s linear infinite; }
.animate-particleMove { animation: particleMove 5s ease-in-out infinite; }

.animate-textGlow { animation: textGlow 2s ease-in-out infinite; }
.animate-textWave { animation: textWave 2s ease-in-out infinite; }
.animate-textRainbow { animation: textRainbow 3s linear infinite; }

.animate-modalSlideIn { animation: modalSlideIn 0.3s ease-out; }
.animate-modalSlideOut { animation: modalSlideOut 0.3s ease-in; }
.animate-backdropFadeIn { animation: backdropFadeIn 0.3s ease-out; }
.animate-backdropFadeOut { animation: backdropFadeOut 0.3s ease-in; }
.animate-zoomInModal { animation: zoomInModal 0.3s ease-out; }
.animate-bounceInModal { animation: bounceInModal 0.5s ease-out; }

.animate-gameStart { animation: gameStart 0.5s ease-out; }
.animate-gameOver { animation: gameOver 0.5s ease-in; }
.animate-scoreIncrease { animation: scoreIncrease 0.3s ease-out; }

/* ========================================
   CLASSES DE TRANSITION 3D
   ======================================== */
.transition-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.perspective-1000 {
  perspective: 1000px;
}

.perspective-2000 {
  perspective: 2000px;
}

.rotateX-15 {
  transform: rotateX(15deg);
}

.rotateY-15 {
  transform: rotateY(15deg);
}

.rotateZ-15 {
  transform: rotateZ(15deg);
}

.scale-3d {
  transform: scale3d(1.1, 1.1, 1.1);
}

.translateZ {
  transform: translateZ(20px);
}

/* ========================================
   EFFETS DE HOVER AVANCÉS
   ======================================== */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

.hover-tilt {
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}

.hover-tilt:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

.hover-scale {
  transition: all 0.3s ease;
}

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

.hover-rotate {
  transition: all 0.3s ease;
}

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

/* ========================================
   ANIMATIONS DE PERFORMANCE
   ======================================== */
.will-change-transform {
  will-change: transform;
}

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

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

/* ========================================
   ANIMATIONS CONDITIONNELLES
   ======================================== */
@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;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }
  
  .animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   UTILITAIRES D'ANIMATION
   ======================================== */
.duration-100 { animation-duration: 100ms; }
.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; }

.delay-100 { animation-delay: 100ms; }
.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; }

.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.iteration-infinite { animation-iteration-count: infinite; }
.iteration-2 { animation-iteration-count: 2; }
.iteration-3 { animation-iteration-count: 3; }

.direction-normal { animation-direction: normal; }
.direction-reverse { animation-direction: reverse; }
.direction-alternate { animation-direction: alternate; }

.fill-mode-forwards { animation-fill-mode: forwards; }
.fill-mode-backwards { animation-fill-mode: backwards; }
.fill-mode-both { animation-fill-mode: both; }

.play-state-running { animation-play-state: running; }
.play-state-paused { animation-play-state: paused; }