/* Éléments animables — état initial */
.lp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 420ms var(--lp-easing),
    transform 420ms var(--lp-easing);
  transition-delay: var(--delay, 0ms);
}

.lp-reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 460ms var(--lp-easing),
    transform 460ms var(--lp-easing);
  transition-delay: var(--delay, 0ms);
}

.lp-reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 460ms var(--lp-easing),
    transform 460ms var(--lp-easing);
  transition-delay: var(--delay, 0ms);
}

/* État final — ajouté par IntersectionObserver */
.lp-reveal.is-visible,
.lp-reveal-left.is-visible,
.lp-reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Scroll hint bounce */
.lp-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--fm-ink-soft);
  font-size: 1.4rem;
  animation: lp-bounce 2s ease-in-out infinite;
  opacity: 0.6;
  transition: opacity 300ms ease;
}

@keyframes lp-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Pyramide — niveaux animés */
.lp-pyramid-level {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 380ms var(--lp-easing),
    transform 380ms var(--lp-easing);
}

.lp-pyramid-level.is-visible {
  opacity: 1;
  transform: none;
}

/* Macros bars — remplissage animé */
.lp-macro-bar-fill {
  width: 0;
  transition: width 800ms var(--lp-easing);
  transition-delay: var(--delay, 0ms);
}

.lp-macro-bar-fill.is-visible {
  width: var(--target-width);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .lp-reveal,
  .lp-reveal-left,
  .lp-reveal-right,
  .lp-pyramid-level,
  .lp-macro-bar-fill {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lp-macro-bar-fill {
    width: var(--target-width);
  }
  .lp-scroll-hint {
    animation: none;
  }
}