/* =============================================================
   layout.css — Grid, Sections, Section Transitions, Containers
   ============================================================= */

/* Section Transitions */
.section-container {
    display: none !important;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    animation: fadeIn 0.5s ease-out forwards;
}
.section-container.active { display: block !important; }
#home.section-container.active { display: flex !important; }

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
}