/* ============================================
   DAGDA TEMPLATE - Animations
   Effets animés et keyframes
   ============================================ */

@layer utilities {
  /* Gradient animé pour titres hero */
  .text-gradient {
    background: linear-gradient(
      90deg,
      var(--text-primary) 0%,
      var(--prim-dark) 20%,
      var(--prim-bright) 40%,
      var(--prim-bright) 60%,
      var(--prim-dark) 80%,
      var(--text-primary) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 8s ease-in-out infinite;
  }
  
  @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  
  /* Séparateur avec gradient animé */
  .hr-gradient {
    height: 2px;
    border: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--prim-dim) 20%,
      var(--prim-bright) 50%,
      var(--prim-dim) 80%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: gradient-shift 8s ease-in-out infinite;
    margin: 3rem auto;
    opacity: 0.6;
    max-width: 768px;
  }
  
  /* Particules flottantes - Hero */
  .hero-particles {
    position: relative;
    overflow: hidden;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        var(--prim-glow) 0%,
        transparent 70%
      );
      pointer-events: none;
      opacity: 0.3;
      animation: float 20s ease-in-out infinite;
    }
    
    &::before {
      top: -150px;
      right: -100px;
      animation-delay: 0s;
    }
    
    &::after {
      bottom: -150px;
      left: -100px;
      animation-delay: 10s;
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }
  
  /* Pulse glow subtil */
  .pulse-glow {
    animation: pulse 4s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      box-shadow: 0 0 20px var(--prim-glow);
    }
    50% {
      box-shadow: 0 0 30px var(--prim-glow-strong);
    }
  }
  
  /* ========== ARTICLE PAGE ========== */
  
  /* Article content */
  .article-content {
    h2 {
      margin-top: 3rem;
      margin-bottom: 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border-subtle);
    }
    
    h3 {
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    
    p {
      margin-bottom: 1.5rem;
    }
    
    code {
      font-size: 0.95em;
    }
    
    pre {
      margin: 2rem 0;
      
      code {
        display: block;
        line-height: 1.6;
      }
    }
  }
  
  /* Table of contents links */
  .toc-link {
    display: block;
    padding: 0;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: all var(--transition-fast);
    
    &:hover {
      color: var(--prim-bright) !important;
      border-left-color: var(--prim);
      padding-left: 1rem;
    }
    
    &.active {
      color: var(--prim-bright) !important;
      border-left-color: var(--prim-bright);
      font-weight: 600;
    }
  }
  
  /* Breadcrumb */
  .breadcrumb {
    a:hover {
      color: var(--guede-bright) !important;
    }
  }
}