/**
 * motion.css — Circuits Paris Ouest v2 (Epic 11)
 *
 * Microinteractions premium :
 *   - Fade-up stagger sur hero (à l'entrée)
 *   - Scroll-triggered reveals (sections)
 *   - Hover states soignés (boutons, cards)
 *
 * Respect strict de prefers-reduced-motion : pas d'animation, contenu visible direct.
 *
 * Easing standard : cubic-bezier(0.2, 0.8, 0.2, 1)
 * Durée standard : 600ms scroll / 250-400ms hover / 250ms eyebrow / +80ms stagger
 */

/* ============================================================================
 * 1. Fade-up stagger hero (Story 11.1)
 * ========================================================================== */

@keyframes cpoFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__ctas,
.hero__trust-stats {
  /* Animation par défaut (avant JS) : déjà visible pour 0 régression SEO/SSR.
     Si motion.js est chargé, il ajoute .is-revealed → animation. */
}

.hero[data-motion-ready='true'] .hero__eyebrow,
.hero[data-motion-ready='true'] .hero__title,
.hero[data-motion-ready='true'] .hero__lead,
.hero[data-motion-ready='true'] .hero__ctas,
.hero[data-motion-ready='true'] .hero__trust-stats {
  opacity: 0;
  transform: translateY(8px);
  animation: cpoFadeUp 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero[data-motion-ready='true'] .hero__eyebrow {
  animation-delay: 80ms;
}
.hero[data-motion-ready='true'] .hero__title {
  animation-delay: 160ms;
}
.hero[data-motion-ready='true'] .hero__lead {
  animation-delay: 240ms;
}
.hero[data-motion-ready='true'] .hero__ctas {
  animation-delay: 320ms;
}
.hero[data-motion-ready='true'] .hero__trust-stats {
  animation-delay: 400ms;
}

/* ============================================================================
 * 2. Scroll-triggered reveals (Story 11.2)
 * Appliquer .reveal-on-scroll aux éléments à révéler.
 * motion.js ajoute .is-visible quand l'élément entre dans le viewport.
 * ========================================================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger des enfants d'un container .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: 80ms;
}
.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: 160ms;
}
.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: 240ms;
}
.reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: 320ms;
}
.reveal-stagger.is-visible > *:nth-child(6) {
  transition-delay: 400ms;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ============================================================================
 * 3. Hover states soignés (Story 11.3)
 * ========================================================================== */

/* Boutons primary : lift subtil + ombre accent */
.btn--primary,
.cta-final__form button[type='submit'] {
  transition:
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 200ms ease;
}

.btn--primary:hover,
.btn--primary:focus-visible,
.cta-final__form button[type='submit']:hover,
.cta-final__form button[type='submit']:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(194, 65, 12, 0.45);
}

.btn--primary:active,
.cta-final__form button[type='submit']:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px rgba(194, 65, 12, 0.35);
}

/* Boutons secondary : underline accent + subtle bg */
.btn--secondary {
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-orange-brique, var(--accent, #c2410c));
  color: var(--color-orange-brique, var(--accent, #c2410c));
}

/* Cards (pricing, testimonials, team) : lift + border accent */
.pricing__card,
.testimonials__card,
.team__card,
.day__step {
  transition:
    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 250ms ease;
}

.pricing__card:hover,
.testimonials__card:hover,
.team__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(31, 35, 38, 0.18);
}

/* FAQ items : color accent au hover */
.faq__item summary {
  transition:
    color 200ms ease,
    background-color 200ms ease;
}

.faq__item summary:hover {
  color: var(--color-orange-brique, var(--accent, #c2410c));
}

/* ============================================================================
 * 4. prefers-reduced-motion — annule tout
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero[data-motion-ready='true'] .hero__eyebrow,
  .hero[data-motion-ready='true'] .hero__title,
  .hero[data-motion-ready='true'] .hero__lead,
  .hero[data-motion-ready='true'] .hero__ctas,
  .hero[data-motion-ready='true'] .hero__trust-stats {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal-on-scroll,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn--primary,
  .btn--secondary,
  .pricing__card,
  .testimonials__card,
  .team__card,
  .day__step,
  .faq__item summary {
    transition: none;
  }

  .btn--primary:hover,
  .pricing__card:hover,
  .testimonials__card:hover,
  .team__card:hover {
    transform: none;
  }
}