/* Animations discrètes pour rendre le site plus vivant (ajouté par tools/site/prepare.py).
   L'état final est exactement le design d'origine ; tout est coupé si l'utilisateur réduit les animations. */

/* apparition au défilement (motion.js) */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ouverture de la page : le texte du haut arrive en cascade */
.hero-copy > * { animation: psst-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.3s; }
.hero-copy > :nth-child(6) { animation-delay: 0.36s; }
.phone-stage { animation: psst-rise 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both, psst-hover 7s 1.2s ease-in-out infinite; }
.journal-page > * { animation: psst-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.journal-page > :nth-child(2) { animation-delay: 0.06s; }
.journal-page > :nth-child(3) { animation-delay: 0.12s; }
.journal-page > :nth-child(4) { animation-delay: 0.18s; }
.journal-page > :nth-child(n + 5) { animation-delay: 0.24s; }

/* le ruban en fond dérive très lentement */
.hero-ribbon { animation: psst-drift 18s ease-in-out infinite alternate; }

/* cartes : léger soulèvement au survol */
.feature, .subfeature { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature:hover, .subfeature:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(58, 68, 82, 0.09); }

/* dans l'aperçu du téléphone, les idées réagissent au survol */
.wish { transition: transform 0.25s ease; }
.wish:hover { transform: translateX(3px); }

/* FAQ : la réponse apparaît en fondu */
.faq-items details[open] > p { animation: psst-fade 0.35s ease both; }

@keyframes psst-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes psst-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes psst-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes psst-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-18px, 12px, 0) scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .phone-stage, .journal-page > *, .hero-ribbon, .faq-items details[open] > p { animation: none; }
  .feature:hover, .subfeature:hover, .wish:hover { transform: none; }
}

/* Ruban de fond de l'accueil et du journal : sa boîte commençait 40 px sous l'en-tête et le coupait net
   (bande vide au-dessus). Il touche maintenant la ligne de l'en-tête ; sur mobile, où il démarre plus bas derrière
   le téléphone, son bord haut apparaît en fondu. */
@media (min-width: 761px) {
  body .hero-ribbon { top: 0; }
}
@media (max-width: 760px) {
  body .hero-ribbon {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px);
    mask-image: linear-gradient(to bottom, transparent, #000 140px);
  }
}