/* ==========================================================================
   ELEDJI — Animations
   Transitions subtiles, respect de prefers-reduced-motion.
   ========================================================================== */

/* ---------- Chargement (catalogue public) ---------- */
.catalog-spinner {
  width: 24px;
  height: 24px;
  margin-inline: auto;
  border: 2px solid var(--border-on-dark-strong);
  border-top-color: var(--color-champagne);
  border-radius: 50%;
  animation: catalog-spin 700ms linear infinite;
}

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

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

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

@keyframes scale-reveal {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

/* Léger zoom d'entrée sur les images de carte au chargement du composant */
.media-frame img {
  animation: scale-reveal 900ms var(--ease-out-expo) both;
}

.creation-card__media:hover img,
.marketplace-card:hover .marketplace-card__media img,
.academy-card__media:hover img {
  transform: scale(1.045);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.creation-card__media img,
.marketplace-card__media img,
.academy-card__media img {
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.hero__media img {
  animation: scale-reveal 1400ms var(--ease-out-expo) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .media-frame img,
  .hero__media img {
    animation: none;
  }

  .hero__title,
  .hero__lead,
  .hero__actions {
    opacity: 1;
    transform: none;
  }
}