/*
 * Global CSS Rules for Letcape Preview
 * Ensures proper loading of content and images
 */

/* Force content visibility */
body,
main,
section,
div,
article,
aside,
header,
footer,
nav {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animation elements visibility fix */
.scroll-reveal,
.fade-in-element,
.parallax-element,
[data-aos],
[data-fade-direction],
[data-parallax-speed] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Add animation complete classes */
[data-aos] {
    transform: none !important;
    transition: none !important;
}

/* Fix for images */
img {
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100%;
    height: auto;
}

/* Preload critical images */
body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url("/images/letcape-logo.svg") url("/images/hero-pattern.svg")
        url("/images/dashboard-mockup.svg") url("/images/website-mockup.svg")
        url("/images/ecommerce-mockup.svg");
}

/* Fix for various animation classes */
.aos-animate {
    opacity: 1 !important;
}

/* General content visibility */
.container,
.content,
.prose,
.hero-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for information section */
.information-section,
.about-section,
#about,
section[id="about"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ensure About section children are visible */
#about *,
section[id="about"] * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* No animation class to override animation libraries */
.no-animation {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}