/* File: css/frontend.css */
/* Base styles for flow groups */
.patient-flow-container {
    position: relative;
    width: 100%;
}

.patient-flow-group {
    transition: all 0.5s ease;
    width: 100%;
}

/* Animation classes */
.flow-animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

/* Fade Up - IN */
@keyframes flowFadeUpIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.flow-fade-up {
    animation-name: flowFadeUpIn;
}

/* Fade Up - OUT */
@keyframes flowFadeUpOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
}
.flow-fade-up-out {
    animation-name: flowFadeUpOut;
}

/* Fade Right - IN */
@keyframes flowFadeRightIn {
    from {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.flow-fade-right {
    animation-name: flowFadeRightIn;
}

/* Fade Right - OUT */
@keyframes flowFadeRightOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
}
.flow-fade-right-out {
    animation-name: flowFadeRightOut;
}

/* Fade Down - IN */
@keyframes flowFadeDownIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.flow-fade-down {
    animation-name: flowFadeDownIn;
}

/* Fade Down - OUT */
@keyframes flowFadeDownOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
}
.flow-fade-down-out {
    animation-name: flowFadeDownOut;
}

/* Fade Left - IN */
@keyframes flowFadeLeftIn {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.flow-fade-left {
    animation-name: flowFadeLeftIn;
}

/* Fade Left - OUT */
@keyframes flowFadeLeftOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
}
.flow-fade-left-out {
    animation-name: flowFadeLeftOut;
}