/* css/styles.css */

/* Custom Animations and utility classes that are easier to write in raw CSS */

.page-section {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.page-section.active {
    display: block;
    opacity: 1;
}

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Hide scrollbar for horizontal scrolling areas like filter buttons */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Active navigation link indicator */
.nav-link.active-nav {
    color: #fff; /* text-white */
    background-color: #1F2937; /* bg-tech-700 */
}

/* Modal entering/leaving animations */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}

.modal-leave {
    opacity: 1;
    transform: scale(1);
}

.modal-leave-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 200ms, transform 200ms;
}

/* Table styles for formatting Matrix */
.matrix-table th {
    position: sticky;
    top: 0;
    background-color: #111827; /* tech-800 */
    box-shadow: inset 0 -1px 0 #1F2937; /* tech-700 */
}

.matrix-table td, .matrix-table th {
    padding: 1rem;
    border-bottom: 1px solid #1F2937;
    white-space: nowrap;
}

.matrix-table tbody tr:hover {
    background-color: #1F2937; /* tech-700 */
}

/* Navbar behaviors specific to the Home page */
body.home-active #nav-logo {
    display: none;
    opacity: 0;
}

body.home-active #nav-container {
    justify-content: center;
}