/**
 * TXL GEN4 — Animations centralisées
 * Source unique de vérité pour toutes les @keyframes
 * Remplace les duplications dans modern-ui.css et les templates inline
 *
 * Usage : @media (prefers-reduced-motion: no-preference) { ... }
 * est géré ici via la classe utilitaire .txl-animated
 */

@layer animations {

  /* =============================================
     ENTRÉES
     ============================================= */

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

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

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

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

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

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

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

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

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

  /* =============================================
     SORTIES
     ============================================= */

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

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

  /* =============================================
     CONTINU
     ============================================= */

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

  @keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px var(--txl-primary, oklch(55% 0.22 264)); }
    50%       { box-shadow: 0 0 20px var(--txl-primary, oklch(55% 0.22 264)); }
  }

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

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

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

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

  @keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-15px) rotate(1deg); }
    66%       { transform: translateY(-8px) rotate(-1deg); }
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50%       { transform: translateY(-25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }

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

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

  @keyframes glow {
    0%, 100% { text-shadow: 0 0 4px var(--txl-primary, oklch(55% 0.22 264)); }
    50%       { text-shadow: 0 0 20px var(--txl-primary, oklch(55% 0.22 264)), 0 0 40px var(--txl-primary, oklch(55% 0.22 264)); }
  }

  /* =============================================
     GRADIENTS
     ============================================= */

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

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

  /* =============================================
     LOADING / SKELETON
     ============================================= */

  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

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

  @keyframes progressAnimation {
    0%   { background-position: 1rem 0; }
    100% { background-position: 0 0; }
  }

  @keyframes ring {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  /* =============================================
     FEEDBACK
     ============================================= */

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
  }

  @keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-6px); }
    75%       { transform: translateX(6px); }
  }

  @keyframes successPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

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

  @keyframes confettiFall {
    0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
  }

  /* =============================================
     CLASSES UTILITAIRES D'ANIMATION
     ============================================= */

  /* Toutes les animations sont désactivées par défaut si l'utilisateur préfère */
  @media (prefers-reduced-motion: reduce) {
    .txl-animated,
    .txl-animated * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Classes d'application */
  .txl-fade-in          { animation: fadeIn var(--txl-duration, 250ms) var(--txl-ease, cubic-bezier(0.4,0,0.2,1)) both; }
  .txl-fade-in-up       { animation: fadeInUp var(--txl-duration, 250ms) var(--txl-ease-out, cubic-bezier(0,0,0.2,1)) both; }
  .txl-slide-in-right   { animation: slideInRight 0.3s var(--txl-ease-out, cubic-bezier(0,0,0.2,1)) both; }
  .txl-scale-in         { animation: scaleIn var(--txl-duration, 250ms) var(--txl-ease, cubic-bezier(0.4,0,0.2,1)) both; }
  .txl-float            { animation: float 3s ease-in-out infinite; }
  .txl-pulse            { animation: pulse 2s ease-in-out infinite; }
  .txl-spin             { animation: spin 1s linear infinite; }
  .txl-shake            { animation: shake 0.4s var(--txl-ease, cubic-bezier(0.4,0,0.2,1)); }

  /* Délais utilitaires */
  .txl-delay-100  { animation-delay: 100ms; }
  .txl-delay-200  { animation-delay: 200ms; }
  .txl-delay-300  { animation-delay: 300ms; }
  .txl-delay-400  { animation-delay: 400ms; }
  .txl-delay-500  { animation-delay: 500ms; }

  /* Skeleton loading */
  .txl-skeleton {
    background: linear-gradient(
      90deg,
      var(--txl-border-light, oklch(93% 0 0)) 25%,
      var(--txl-border, oklch(88% 0 0)) 50%,
      var(--txl-border-light, oklch(93% 0 0)) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--txl-radius-sm, 0.375rem);
  }

  .txl-skeleton-text  { height: 1em; margin-block: 0.25em; }
  .txl-skeleton-title { height: 1.5em; width: 60%; }
  .txl-skeleton-card  { height: 200px; border-radius: var(--txl-radius-md, 0.75rem); }
}