/* ==========================================
   Fade-in Animation Utility for Sections
   ========================================== */


.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Safety nets: the sections start invisible and JavaScript fades them in.
   If JavaScript is switched off or fails, or the visitor asked for less motion,
   show them straight away instead of leaving blank space. */
@media (scripting: none), (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}