/* ==========================================================================
   SkAI Tech — Motion
   Animations d'entrée et micro-interactions, volontairement légères :
   le mouvement guide l'œil du client, il ne fait jamais le spectacle.

   Règles :
   - uniquement des fondus + translations verticales courtes (≤ 16px) ;
   - entrées ≤ 550ms, cascade ≤ 12 éléments, jamais de boucle infinie
     (hors squelettes de chargement) ;
   - tout est neutralisé par prefers-reduced-motion (voir base.css).

   Dépend de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes skai-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes skai-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes skai-fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes skai-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes skai-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Entrées de page — à poser sur les blocs au chargement
   -------------------------------------------------------------------------- */

.anim-fade-in {
  animation: skai-fade-in var(--transition-slow) both;
}

.anim-fade-up {
  animation: skai-fade-up var(--duration-entrance) var(--ease-out) both;
}

.anim-fade-down {
  animation: skai-fade-down var(--duration-entrance) var(--ease-out) both;
}

.anim-scale-in {
  animation: skai-scale-in var(--duration-entrance) var(--ease-out) both;
}

/* Décalages manuels (enchaîner titre → sous-titre → contenu) */
.anim-delay-1 { animation-delay: calc(var(--stagger-step) * 1); }
.anim-delay-2 { animation-delay: calc(var(--stagger-step) * 2); }
.anim-delay-3 { animation-delay: calc(var(--stagger-step) * 3); }
.anim-delay-4 { animation-delay: calc(var(--stagger-step) * 4); }

/* --------------------------------------------------------------------------
   Cascade — les enfants directs apparaissent l'un après l'autre.
   Usage type : la grille de decks du portail client.
   Au-delà de 12 enfants, le reste apparaît d'un bloc (pas d'attente).
   -------------------------------------------------------------------------- */

.anim-stagger > * {
  animation: skai-fade-up var(--duration-entrance) var(--ease-out) both;
}

.anim-stagger > :nth-child(1)  { animation-delay: calc(var(--stagger-step) * 1); }
.anim-stagger > :nth-child(2)  { animation-delay: calc(var(--stagger-step) * 2); }
.anim-stagger > :nth-child(3)  { animation-delay: calc(var(--stagger-step) * 3); }
.anim-stagger > :nth-child(4)  { animation-delay: calc(var(--stagger-step) * 4); }
.anim-stagger > :nth-child(5)  { animation-delay: calc(var(--stagger-step) * 5); }
.anim-stagger > :nth-child(6)  { animation-delay: calc(var(--stagger-step) * 6); }
.anim-stagger > :nth-child(7)  { animation-delay: calc(var(--stagger-step) * 7); }
.anim-stagger > :nth-child(8)  { animation-delay: calc(var(--stagger-step) * 8); }
.anim-stagger > :nth-child(9)  { animation-delay: calc(var(--stagger-step) * 9); }
.anim-stagger > :nth-child(10) { animation-delay: calc(var(--stagger-step) * 10); }
.anim-stagger > :nth-child(11) { animation-delay: calc(var(--stagger-step) * 11); }
.anim-stagger > :nth-child(12) { animation-delay: calc(var(--stagger-step) * 12); }
.anim-stagger > :nth-child(n + 13) { animation-delay: calc(var(--stagger-step) * 12); }

/* --------------------------------------------------------------------------
   Micro-interactions
   -------------------------------------------------------------------------- */

/* Flèche qui glisse au survol — « Ouvrir la présentation → » */
.link-arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--transition-fast);
}

a:hover .link-arrow::after,
.link-arrow:hover::after,
.deck-card:hover .link-arrow::after {
  transform: translateX(4px);
}

/* Icône/logo qui se redresse légèrement au survol du bloc parent */
.hover-lift-icon {
  transition: transform var(--transition-slow);
}

a:hover .hover-lift-icon,
.deck-card:hover .hover-lift-icon {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Squelettes de chargement — seule boucle autorisée
   -------------------------------------------------------------------------- */

.skeleton {
  position: relative;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  background-image: linear-gradient(
    90deg,
    transparent 25%,
    color-mix(in srgb, var(--text-muted) 12%, transparent) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: skai-shimmer 1.6s linear infinite;
  color: transparent;
  user-select: none;
}

.skeleton--text { height: 1em; }
.skeleton--title { height: 1.4em; width: 60%; }
.skeleton--card { height: 160px; border-radius: var(--radius-lg); }