/**
 * Universal FOUC Protection CSS
 * Ensures content is visible even if JavaScript fails
 */

/* Fallback class applied to elements that failed to animate */
.serenity-fouc-fallback {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.serenity-fouc-fallback * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure child elements are also visible */
.serenity-fouc-fallback .hits-word,
.serenity-fouc-fallback .hits-text-base,
.serenity-fouc-fallback .hits-text-overlay,
.serenity-fouc-fallback .animated-element,
.serenity-fouc-fallback .reveal-element {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Graceful degradation for browsers with JavaScript disabled */
.no-js [style*="visibility: hidden"],
.no-js [style*="opacity: 0"] {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Smooth transition when revealing FOUC fallback */
.serenity-fouc-fallback {
    transition: opacity 0.3s ease-in-out !important;
}