/* ===== ANIMATIONS - Café Sain Fractal =====
   Principes :
   - le contenu n'est caché que si animations.js est chargé (classe .anim sur <html>) ;
   - chaque élément n'apparaît qu'une fois, il n'est jamais recaché ;
   - aucune animation si l'utilisateur a demandé « réduire les animations ». */

/* Apparition au défilement */
.anim [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
    transition-delay: calc(var(--i, 0) * 45ms);
}
.anim [data-reveal].visible {
    opacity: 1;
    transform: none;
}

/* Mascotte qui flotte doucement */
.flotte { animation: sf-flotte 4s ease-in-out infinite; }
@keyframes sf-flotte {
    50% { transform: translateY(-8px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .anim [data-reveal] { opacity: 1; transform: none; transition: none; }
    .flotte { animation: none; }
}