/* ===================================
   ANIMATIONS ATTRACTIVES
   =================================== */

/* Effet de typing animé pour les titres */
.typing-effect {
  overflow: hidden;
  border-right: 3px solid #00d4ff;
  white-space: nowrap;
  animation: typing 3s steps(40) 1s forwards, blink 0.7s infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Effet de vague sur hover */
.wave-effect {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.wave-effect::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.wave-effect:hover::before {
  width: 300px;
  height: 300px;
}

.wave-effect:hover {
  transform: translateY(-5px);
}

/* Particules flottantes colorées */
.floating-orbs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  animation: float-orb 20s infinite ease-in-out;
}

.orb:nth-child(1) {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #ff00ff, #00d4ff);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.orb:nth-child(2) {
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, #00d4ff, #00ff88);
  top: 60%;
  right: 10%;
  animation-delay: 5s;
}

.orb:nth-child(3) {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #ff00ff, #ff0088);
  bottom: 20%;
  left: 30%;
  animation-delay: 10s;
}

@keyframes float-orb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50px, -100px) scale(1.1);
  }
  50% {
    transform: translate(-30px, -50px) scale(0.9);
  }
  75% {
    transform: translate(70px, 30px) scale(1.05);
  }
}

/* Effet de glitch sur les titres */
.glitch {
  position: relative;
  animation: glitch-skew 3s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #00d4ff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(61px, 9999px, 90px, 0); }
  20% { clip: rect(33px, 9999px, 63px, 0); }
  40% { clip: rect(7px, 9999px, 27px, 0); }
  60% { clip: rect(45px, 9999px, 98px, 0); }
  80% { clip: rect(23px, 9999px, 55px, 0); }
  100% { clip: rect(78px, 9999px, 16px, 0); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  10% { transform: skew(-2deg); }
  20% { transform: skew(0deg); }
  30% { transform: skew(1deg); }
  40% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

/* Bordures animées néon */
.neon-border {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(#0a0e1a, #0a0e1a) padding-box,
              linear-gradient(45deg, #ff00ff, #00d4ff, #00ff88) border-box;
  animation: border-rotate 3s linear infinite;
}

@keyframes border-rotate {
  0% {
    background: linear-gradient(#0a0e1a, #0a0e1a) padding-box,
                linear-gradient(0deg, #ff00ff, #00d4ff, #00ff88) border-box;
  }
  100% {
    background: linear-gradient(#0a0e1a, #0a0e1a) padding-box,
                linear-gradient(360deg, #ff00ff, #00d4ff, #00ff88) border-box;
  }
}

/* Effet de scan laser */
.scan-line {
  position: fixed;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 212, 255, 0.8), 
    transparent
  );
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  animation: scan 4s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

@keyframes scan {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}

/* Effet de pulsation sur les boutons */
.pulse-glow {
  animation: pulse-glow-anim 2s ease-in-out infinite;
}

@keyframes pulse-glow-anim {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2),
                0 0 30px rgba(0, 212, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4),
                0 0 40px rgba(0, 212, 255, 0.2);
  }
}

/* Effet parallax sur scroll */
.parallax-element {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Grille matrix en fond */
.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
}

/* Effet de brillance sur texte */
.shine-text {
  background: linear-gradient(
    90deg,
    #fff 0%,
    #00d4ff 50%,
    #fff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* Effet de card flip 3D */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Effet de morphing des formes */
.morph-shape {
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* Effet de reveal progressif */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Effet de spotlight suivant la souris */
.spotlight-effect {
  position: relative;
  overflow: hidden;
}

.spotlight-effect::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(0, 212, 255, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%, -50%);
}

.spotlight-effect:hover::before {
  opacity: 1;
}

/* Effet de particules qui montent */
.rising-particles {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  background: #00d4ff;
  border-radius: 50%;
  opacity: 0.6;
  animation: rise 10s linear infinite;
}

.particle:nth-child(even) {
  background: #ff00ff;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) scale(0);
    opacity: 0;
  }
}

/* Effet de text rotation 3D */
.rotate-3d-text {
  transform-style: preserve-3d;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Effet de vagues colorées */
.wave-animation {
  position: relative;
  overflow: hidden;
}

.wave-animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 212, 255, 0.1),
    transparent
  );
  animation: wave-move 3s linear infinite;
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Effet de ombres multiples animées */
.multi-shadow {
  animation: multi-shadow-anim 3s ease-in-out infinite;
}

@keyframes multi-shadow-anim {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(0, 212, 255, 0.5),
      0 0 20px rgba(0, 212, 255, 0.3),
      0 0 30px rgba(0, 212, 255, 0.2);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(255, 0, 255, 0.5),
      0 0 40px rgba(255, 0, 255, 0.3),
      0 0 60px rgba(255, 0, 255, 0.2);
  }
}