/* ============================================================
   Image Trail Module — Styles
   Mouse/touch image trail with floating, fading images.
   ============================================================ */

.image-trail {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  background-color: var(--cs-bg, #0a0a0f);
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Prompt text ---- */
.image-trail__prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--cs-font-body, sans-serif);
  font-size: var(--cs-text-lg, 1.125rem);
  color: var(--cs-muted, #475569);
  letter-spacing: var(--cs-tracking-wide, 0.05em);
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--cs-duration-normal, 300ms) var(--cs-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.image-trail--active .image-trail__prompt {
  opacity: 0;
}

/* ---- Trail container ---- */
.image-trail__container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ---- Individual trail image ---- */
.image-trail__item {
  position: absolute;
  border-radius: var(--cs-radius-md, 8px);
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: var(--cs-shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
  transition: transform var(--cs-duration-slow, 600ms) var(--cs-ease-out, cubic-bezier(0, 0, 0.2, 1)),
              opacity var(--cs-duration-slow, 600ms) var(--cs-ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.image-trail__item--visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.image-trail__item--fading {
  opacity: 0;
  transform: scale(0.8) rotate(4deg);
}

/* ---- Custom cursor dot ---- */
.image-trail__cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: var(--cs-radius-full, 9999px);
  background-color: var(--cs-accent, #f59e0b);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--cs-duration-fast, 150ms);
  will-change: transform;
}

.image-trail--active .image-trail__cursor {
  opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .image-trail {
    cursor: default;
    min-height: 50vh;
  }

  .image-trail__prompt {
    font-size: var(--cs-text-base, 1rem);
  }

  .image-trail__cursor {
    display: none;
  }
}

@media (max-width: 375px) {
  .image-trail {
    min-height: 40vh;
  }

  .image-trail__prompt {
    font-size: var(--cs-text-sm, 0.875rem);
  }
}

/* ---- Reduced motion: collapse spawn/fade transitions ---- */
@media (prefers-reduced-motion: reduce) {
  .image-trail__item,
  .image-trail__prompt,
  .image-trail__cursor {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}