/* Critical Above-the-fold and Loading Animation styles extracted from header.php
   Moved to a separate file to avoid inline styles and allow a strict CSP.
*/

/* Loading Animation */
.loading-dot {
    animation: loading 1s infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Critical Above-the-fold Styles */
.flash-message {
    opacity: 0;
    animation: fadeInOut 5s ease-in-out;
}
@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

/* Responsive Navigation Styles */
@media (max-width: 768px) {
    .mobile-menu { display: none; }
    .mobile-menu.active { display: block; }
}

/* Loading overlay transitions (moved from includes/loading.php) */
#loading-overlay {
    transition: opacity 0.3s ease-in-out;
}
#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
#loading-overlay.flex {
    opacity: 1;
}

/* Progress bar animation */
@keyframes progress {
    0% { width: 0%; }
    100% { width: 90%; }
}