/* animations.css - Animations pour GoatPress */

/* Animations d'entrée */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
  

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

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

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

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

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--primary-shadow);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
  }
}

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

  
  /* Animation pour le logo */
  @keyframes pulse-glow {
    0%, 100% {
      filter: drop-shadow(0 0 5px var(--primary-glow)); /* 8px → 5px */
    }
    50% {
      filter: drop-shadow(0 0 8px var(--primary-shadow-strong)); /* 12px → 8px */
    }
  }
  
  .glow-logo {
    animation: pulse-glow 3s ease-in-out infinite;
  }
  
  /* Animation de rotation subtile pour l'orbite de la chèvre */
  @keyframes orbit-rotate {
    0% {
      transform: rotate(-15deg);
    }
    50% {
      transform: rotate(-10deg);
    }
    100% {
      transform: rotate(-15deg);
    }
  }
  
  svg ellipse {
    transform-origin: center;
    animation: orbit-rotate 8s ease-in-out infinite;
  }
  
  /* Animation de vagues de contenu pour l'arrière-plan */
  .network-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 50%); /* 0.08 → 0.05 et 70% → 50% */
    overflow: hidden;
  }
  
  /* Première vague (lente) */
  .network-animation::before {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background-image: 
      repeating-linear-gradient(
        45deg,
        rgba(var(--primary-rgb), 0.03) 0px,
        rgba(var(--primary-rgb), 0.03) 2px,
        transparent 2px,
        transparent 12px
      );
    animation: waveMove 60s linear infinite;
    transform-origin: center;
  }
  
  /* Deuxième vague (plus rapide) */
  .network-animation::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: 
      repeating-linear-gradient(
        -45deg,
        rgba(var(--primary-rgb), 0.03) 0px,
        rgba(var(--primary-rgb), 0.03) 1px,
        transparent 1px,
        transparent 8px
      );
    animation: waveMove 40s linear infinite reverse;
    transform-origin: center;
}
  
  /* Pseudo-éléments supplémentaires pour plus d'effets */
  .network-animation {
    position: relative;
  }
  
  /* Effet de cercles/bulles en arrière-plan */
  .network-animation .bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(var(--primary-rgb), 0.08), transparent);
    filter: blur(6px);
    opacity: 0.3;
    z-index: -1;
}
  
  @keyframes waveMove {
    0% {
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(1deg) scale(1.05);
    }
    50% {
      transform: rotate(0deg) scale(1.1);
    }
    75% {
      transform: rotate(-1deg) scale(1.05);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }
  
  /* Effet de pulses qui représentent les publications de blogs */
  @keyframes pulse-content {
    0% {
      transform: scale(0.9);
      opacity: 0;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  
  /* Animation bouton hover */
  @keyframes buttonPulse {
    0% {
      box-shadow: 0 0 0 0 var(--primary-shadow);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}
  
  button:hover.pulse-effect {
    animation: buttonPulse 1.5s infinite;
  }
  
  /* Animation de transition pour les inputs */
  .input-transition {
    transition: all 0.3s ease;
  }
  
  .input-transition:focus {
    transform: translateY(-2px);
  }
  
  /* Animation pour le loading */
  .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--spinner-border);
    border-radius: 50%;
    border-top-color: var(--spinner-accent);
    animation: spin 0.8s linear infinite;
}
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* Animation pour le changement de thème */
  .theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  /* Animation pour les erreurs */
  @keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-5px);}
    20%, 40%, 60%, 80% {transform: translateX(5px);}
  }
  
  .shake {
    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }