@import url('https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@300;400&display=swap');

/* Base and Typography */
body {
    background-color: #F8F9FA;
    color: #2C2C2C;
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    opacity: 0;
    animation: page-fade-in 0.6s ease-out forwards;
}

/* Animations and Transitions */
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes content-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-animate {
    animation: content-fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.page-exit {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

.page-exit.is-exiting {
    opacity: 0;
}

/* Header Navigation */
.nav-link-underline {
    position: relative;
}

.nav-link-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2C2C2C;
    transition: width 0.3s ease-in-out;
}

.nav-link-underline:hover::after,
.nav-link-underline.active::after {
    width: 100%;
}

/* Home Page Carousel */
.carousel-container {
    height: 100vh;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
}

.carousel-item.active {
    opacity: 1;
}

/* Image Grid and Hover Effects */
.grid-item-wrapper {
    overflow: hidden;
}

.grid-item-image {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.grid-item-wrapper:hover .grid-item-image {
    transform: scale(1.05);
}

.grid-item-overlay-content {
    transition: opacity 0.3s ease-in-out;
}

/* Details Page Modal */
.modal-overlay {
    background-color: rgba(25, 25, 25, 0.92);
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    max-height: 90vh;
    max-width: 90vw;
    animation: page-fade-in 0.4s ease forwards;
}

/* Details Page Filter Buttons */
.filter-btn {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.filter-btn.active {
    background-color: #2C2C2C;
    color: #F8F9FA;
}