/* ============================================
   Animations d'apparition (phase 4)
   — actives uniquement si html.js-anim (garde-fou no-JS)
   — désactivées si prefers-reduced-motion
   ============================================ */

/* ---------- Apparition des sections au scroll ---------- */
/* Les enfants directs de chaque section apparaissent en cascade */
html.js-anim .sect-anim > * {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}
html.js-anim .sect-anim > *:nth-child(1) { transition-delay: 0.05s; }
html.js-anim .sect-anim > *:nth-child(2) { transition-delay: 0.15s; }
html.js-anim .sect-anim > *:nth-child(3) { transition-delay: 0.25s; }
html.js-anim .sect-anim > *:nth-child(4) { transition-delay: 0.35s; }
html.js-anim .sect-anim > *:nth-child(5) { transition-delay: 0.45s; }
html.js-anim .sect-anim > *:nth-child(n+6) { transition-delay: 0.55s; }

html.js-anim .sect-anim.est-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Stickers : pop rebondi ---------- */
/* scale/opacity seulement : ne touche pas au transform (rotations conservées) */
html.js-anim .sect-anim .sticker {
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.45s ease 0.5s, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
html.js-anim .sect-anim.est-visible .sticker {
  opacity: 1;
  scale: 1;
}

/* ---------- Micro-cascade des cartes dans leurs grilles ---------- */
html.js-anim .sect-anim .carte,
html.js-anim .sect-anim .cuisine__case {
  transition-property: opacity, translate, transform, box-shadow;
}
html.js-anim .sect-anim:not(.est-visible) .carte,
html.js-anim .sect-anim:not(.est-visible) .cuisine__case {
  opacity: 0;
  translate: 0 18px;
}
html.js-anim .sect-anim.est-visible .carte,
html.js-anim .sect-anim.est-visible .cuisine__case {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
html.js-anim .sect-anim.est-visible .carte:nth-child(1),
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(1) { transition-delay: 0.20s; }
html.js-anim .sect-anim.est-visible .carte:nth-child(2),
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(2) { transition-delay: 0.30s; }
html.js-anim .sect-anim.est-visible .carte:nth-child(3),
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(3) { transition-delay: 0.40s; }
html.js-anim .sect-anim.est-visible .carte:nth-child(4),
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(4) { transition-delay: 0.50s; }
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(5) { transition-delay: 0.60s; }
html.js-anim .sect-anim.est-visible .cuisine__case:nth-of-type(6) { transition-delay: 0.70s; }

/* ---------- Entrée du hero au chargement ---------- */
@keyframes anim-montee {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes anim-pop {
  0% { opacity: 0; scale: 0.4; }
  70% { scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
html.js-anim .hero__script { animation: anim-montee 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s backwards; }
html.js-anim .hero__titre  { animation: anim-montee 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) 0.30s backwards; }
html.js-anim .hero__sous   { animation: anim-montee 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.50s backwards; }
html.js-anim .hero__ctas   { animation: anim-montee 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.65s backwards; }
html.js-anim .hero__sticker { animation: anim-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards; }
html.js-anim .header { animation: anim-montee 0.6s ease 0.05s backwards; }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .sect-anim > *,
  html.js-anim .sect-anim .sticker,
  html.js-anim .sect-anim .carte,
  html.js-anim .sect-anim .cuisine__case {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
  html.js-anim .hero__script,
  html.js-anim .hero__titre,
  html.js-anim .hero__sous,
  html.js-anim .hero__ctas,
  html.js-anim .hero__sticker,
  html.js-anim .header { animation: none !important; }
}