/* ============================================================

   RFF v3 — ANIMATIONS SYSTEM

   Safe, layout-neutral animations only

   ============================================================ */





/* ============================================================

   GLOBAL PRELOAD SAFETY

   ============================================================ */



/* While page is loading, disable animations only */

body.preload * {

    animation: none !important;

    transition: none !important;

}





/* ============================================================

   FADE-IN BASE CLASS

   ============================================================ */



/*

   Usage:

   <section class="fade-in">...</section>

   JS adds `.visible` when ready

*/



.fade-in {

    opacity: 0;

    transform: none;

    transition:

        opacity 0.7s ease-out,

        transform 0.7s ease-out;



    will-change: opacity, transform;

}



.fade-in.move.visible {

    transform: translateY(0);

}



.fade-in.move {

    transform: translateY(16px);

}



/* ============================================================

   FADE-IN ACTIVE STATE

   ============================================================ */



.fade-in.visible {

    opacity: 1;

    transform: translateY(0);

}





/* ============================================================

   OPTIONAL VARIANTS

   ============================================================ */



/* Faster fade (small UI elements) */

.fade-in.fast {

    transition-duration: 0.4s;

}



/* Slower fade (hero-adjacent sections, reports) */

.fade-in.slow {

    transition-duration: 1s;

}



/* No vertical motion, opacity only */

.fade-in.no-move {

    transform: none;

}





/* ============================================================

   STAGGER SUPPORT (OPTIONAL)

   ============================================================ */



/*

   Parent gets .stagger

   Children fade in sequentially

*/



.stagger > .fade-in {

    transition-delay: var(--delay, 0s);

}





/* ============================================================

   REDUCED MOTION ACCESSIBILITY

   ============================================================ */



@media (prefers-reduced-motion: reduce) {



    .fade-in,

    .fade-in.visible {

        transition: none !important;

        transform: none !important;

        opacity: 1 !important;

    }

}

/* ============================================================
   HERO EXCLUSION — DO NOT APPLY TRANSFORM ANIMATIONS
   ============================================================ */

.rff-hero-content.fade-in,
.rff-hero-content.fade-in.visible,
.rff-hero-content.fade-in.move {
    transform: translate(-50%, -50%) !important;
}