/* 085 — Image Trail
   Zone où le mouvement du curseur sème une traînée de vignettes : chacune
   pop (scale + rotation aléatoire) puis s'estompe en flottant vers le haut.
   Les vignettes sont un pool d'éléments recyclés injecté par anim.js.
   Sans images réelles, 7 mini scènes en gradients CSS servent de visuels. */

.image-trail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(320px, 100%);
  height: 230px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(110% 80% at 50% 118%, rgba(124, 140, 255, 0.08), transparent 60%),
    var(--ml-surface, #151a24);
  border: 1px solid rgba(124, 140, 255, 0.14);
}

/* Calque des vignettes — injecté par anim.js */
.image-trail__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.image-trail__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--image-trail-w, 86px);
  height: var(--image-trail-h, 60px);
  border-radius: 10px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  border: 1px solid rgba(232, 234, 242, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
  pointer-events: none;
}

/* --- 7 mini scènes en gradients (fallback sans vraies images) --- */

.image-trail__card--v1 {
  /* coucher de soleil */
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 214, 165, 0.9) 0 9%, transparent 32%),
    linear-gradient(180deg, #3d2a63 0%, #8a5aa8 55%, #e08e6d 100%);
}

.image-trail__card--v2 {
  /* océan */
  background:
    linear-gradient(180deg, transparent 62%, rgba(232, 234, 242, 0.16) 63%, transparent 66%),
    linear-gradient(180deg, #10263f 0%, #1c4e73 60%, #2dd4bf 145%);
}

.image-trail__card--v3 {
  /* forêt brumeuse */
  background:
    conic-gradient(from 210deg at 30% 96%, #0e2a22 0 55deg, transparent 55deg),
    conic-gradient(from 215deg at 72% 100%, #14382c 0 50deg, transparent 50deg),
    linear-gradient(180deg, #26323e 0%, #3d5a52 100%);
}

.image-trail__card--v4 {
  /* dunes */
  background:
    radial-gradient(140% 70% at 18% 108%, #b07a4e 0 44%, transparent 45%),
    radial-gradient(150% 78% at 88% 118%, #8a5a38 0 52%, transparent 53%),
    linear-gradient(180deg, #e3b98a 0%, #c9915c 100%);
}

.image-trail__card--v5 {
  /* nuit étoilée */
  background:
    radial-gradient(circle at 22% 30%, rgba(232, 234, 242, 0.9) 0 1.4px, transparent 3px),
    radial-gradient(circle at 64% 22%, rgba(232, 234, 242, 0.8) 0 1px, transparent 2.6px),
    radial-gradient(circle at 82% 58%, rgba(232, 234, 242, 0.7) 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 40% 66%, rgba(232, 234, 242, 0.55) 0 1px, transparent 2.4px),
    linear-gradient(200deg, #0b1026 0%, #1c1f4a 100%);
}

.image-trail__card--v6 {
  /* néon abstrait */
  background:
    radial-gradient(80% 90% at 20% 20%, rgba(124, 140, 255, 0.85), transparent 58%),
    radial-gradient(80% 90% at 85% 80%, rgba(45, 212, 191, 0.75), transparent 55%),
    #12141f;
}

.image-trail__card--v7 {
  /* aurore */
  background:
    linear-gradient(115deg, transparent 30%, rgba(45, 212, 191, 0.5) 45%, rgba(124, 140, 255, 0.55) 62%, transparent 78%),
    linear-gradient(180deg, #101b30 0%, #182a45 100%);
}

/* Vignette avec vraie image (data-trail-images) */
.image-trail__card--img {
  background-color: var(--ml-surface, #151a24);
}

/* Contenu de démo */
.image-trail__stage {
  position: relative;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}

.image-trail__kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ml-accent-2, #2dd4bf);
}

.image-trail__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 650;
  color: var(--ml-fg, #e8eaf2);
}

.image-trail__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ml-muted, #8b91a3);
}

@media (prefers-reduced-motion: reduce) {
  .image-trail__layer {
    display: none;
  }
}