/* ============================================================
   motion.css — Auréa Gems Investment
   Emil-style : subtil, précis, luxe.
   Pas de bounce, pas d'excès — chaque élément glisse en place.

   Paradigme scroll-reveal :
   - [data-reveal]               → état invisible initial
   - [data-reveal][data-visible] → état visible (JS IntersectionObserver)
   - [data-delay="1…5"]         → stagger 80ms par cran

   Hero : animation CSS pure au chargement (pas de JS).
   ============================================================ */

/* ----------------------------------------------------------
   TOKENS DE MOUVEMENT
   ---------------------------------------------------------- */
:root {
  --motion-dur:      680ms;
  --motion-dur-fast: 460ms;
  --motion-ease:     cubic-bezier(0.22, 1, 0.36, 1);  /* expo-out */
  --motion-rise:     26px;
  --motion-stagger:  80ms;
}

/* ----------------------------------------------------------
   ÉTAT INITIAL — invisible + décalé
   ---------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  transition:
    opacity    var(--motion-dur)  var(--motion-ease),
    transform  var(--motion-dur)  var(--motion-ease);
  will-change: opacity, transform;
}

/* ----------------------------------------------------------
   ÉTAT VISIBLE
   ---------------------------------------------------------- */
[data-reveal][data-visible] {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   STAGGER — grilles et listes
   ---------------------------------------------------------- */
[data-delay="1"] { transition-delay: calc(var(--motion-stagger) * 1); }
[data-delay="2"] { transition-delay: calc(var(--motion-stagger) * 2); }
[data-delay="3"] { transition-delay: calc(var(--motion-stagger) * 3); }
[data-delay="4"] { transition-delay: calc(var(--motion-stagger) * 4); }
[data-delay="5"] { transition-delay: calc(var(--motion-stagger) * 5); }

/* ----------------------------------------------------------
   HERO — entrance au chargement (CSS, pas de JS)
   Chaque couche apparaît à son propre rythme.
   ---------------------------------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nav */
.nav {
  animation: riseIn 500ms var(--motion-ease) 60ms both;
}

/* Planche-tag — uniquement dans le hero */
.hero .planche-tag {
  animation: fadeIn 500ms var(--motion-ease) 120ms both;
}

/* Eyebrow §01 */
.hero .eyebrow {
  animation: riseIn 560ms var(--motion-ease) 220ms both;
}

/* Titre principal hero */
.hero__title {
  animation: riseIn 780ms var(--motion-ease) 320ms both;
}

/* Lede italique */
.hero__lede {
  animation: riseIn 680ms var(--motion-ease) 480ms both;
}

/* Corps texte */
.hero__body {
  animation: riseIn 680ms var(--motion-ease) 580ms both;
}

/* Boutons CTA */
.hero__cta-row {
  animation: riseIn 580ms var(--motion-ease) 680ms both;
}

/* Signature bas du hero */
.hero__signature {
  animation: fadeIn 700ms var(--motion-ease) 860ms both;
}

/* Note marginale — apparaît en dernier, plus discrète */
.margin-note {
  animation: fadeIn 900ms var(--motion-ease) 1100ms both;
}

/* ----------------------------------------------------------
   PREFERS-REDUCED-MOTION — désactivation totale
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav,
  .hero .planche-tag,
  .hero .eyebrow,
  .hero__title,
  .hero__lede,
  .hero__body,
  .hero__cta-row,
  .hero__signature,
  .margin-note {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}