/* Explain: CSS for reusable UI components and animations, including ID badge reveal. - */
/* Workflow Animation */
@keyframes data-flow {
    0% { left: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes data-flow-y {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.animate-data-flow {
    animation: data-flow 4s ease-in-out infinite;
}

.animate-data-flow-y {
    animation: data-flow-y 4s ease-in-out infinite;
}

/* ID Badge Animation */
@keyframes id-card-drop {
    0% { transform: translateY(-150%) rotate(8deg); }
    30% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(0) rotate(6deg); }
    70% { transform: translateY(0) rotate(-3deg); }
    85% { transform: translateY(0) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes id-card-float {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.5deg); }
}

.animate-id-drop {
    animation: id-card-drop 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: top center;
}

.animate-id-float {
    animation: id-card-float 6s ease-in-out infinite alternate;
    animation-delay: 3.5s;
    transform-origin: top center;
}

@media (max-width: 1023px) {
    .animate-id-drop,
    .animate-id-float {
        animation: none !important;
        transform: none !important;
    }
}