/*
 * Initial hiding of lazy-loaded sections.
 * Use a class like 'lazy-section' for elements you want to lazy load.
 */
.lazy-section {
    opacity: 0;
    visibility: hidden;
    height: 0; /* To prevent scrollbar from appearing for hidden content */
    overflow: hidden; /* Ensure content doesn't spill out */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, height 0.5s ease-out; /* Optional: smooth transition */
}

/* When the section is loaded/visible */
.lazy-section.is-loaded {
    opacity: 1;
    visibility: visible;
    height: auto; /* Allow content to dictate height */
    overflow: visible; /* Allow content to be fully visible */
}

/* Optional: Add a placeholder while content is loading (if you want to reserve space) */
/* .lazy-section-placeholder {
    min-height: 100px; /* Example placeholder height */
    /* background-color: #f0f0f0; */
/* } */