@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');



/*Header*/



/*Carousel*/

.carousel { width: 100vw; height: 100vh; margin-top: -1px; overflow: hidden; position: relative; }
    .carousel .list .item { 
        width: 180px; 
        height: 250px; 
        position: absolute; 
        top: 80%; 
        transform: translateY(-70%); 
        left: 70%; 
        border-radius: 20px; 
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        background-position: 50% 50%;
        background-size: cover;
        z-index: 100;
        transition: 1s;
    }
        .carousel .list .item:nth-child(1), .carousel .list .item:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; }
        .carousel .list .item:nth-child(3) { left: 67%; }
        .carousel .list .item:nth-child(4) { left: calc(67% + 200px); }
        .carousel .list .item:nth-child(5) { left: calc(67% + 400px); }
        .carousel .list .item:nth-child(6) { left: calc(67% + 600px); }
        .carousel .list .item:nth-child(n + 7) { left: calc(67% + 800px); opacity: 0; }
            .item .content { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); width: 400px; text-align: left; color: #FFFFFF; display: none; }
            .list .item:nth-child(2) .content { display: block; }
                .content .title { font-size: 100px; text-transform: uppercase; color: #841e22; font-weight: bold; line-height: 1; opacity: 0; animation: animate 1s ease-in-out .3s 1 forwards; }
                .content .name { font-size: 100px; text-transform: uppercase; font-weight: bold; line-height: 1; text-shadow: 3px 4px 4px rgba(255, 255, 255, 0.8); opacity: 0; animation: animate 1s ease-in-out .6s 1 forwards; }
                .content .des { margin-top: 10px; margin-bottom: 20px; font-size: 18px; margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out .9s 1 forwards; text-shadow: 2px 2px 4px #000000;}
				 }
                .content .btn { margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out 1.2s 1 forwards; }
                    @keyframes animate {
                        from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
                        to { opacity: 1; transform: translate(0); filter: blur(0); }
                    }
                    .content .btn button { padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; border: 2px solid #FFFFFF; }
                        .content .btn button:nth-child(1) { margin-right: 15px; }
                        .content .btn button:nth-child(2) { background: transparent; color: #841e22; border: 2px solid #FFFFFF; transition: .3s; }
                            .content .btn button:nth-child(2):hover { background: #841e22; color: #FFFFFF; border-color: #841e22; }
.arrows { position: absolute; top: 80%; right: 52%; z-index: 100; width: 300px; max-width: 30%; display: flex; gap: 10px; align-items: center; }
    .arrows button { width: 50px; height: 50px; border-radius: 50%; background-color: #841e22; color: #FFFFFF; border: none; outline: none; font-size: 16px; font-family: monospace; font-weight: bold; transition: .5s; cursor: pointer; }
        .arrows button:hover { background: #FFFFFF; color: #000000; }
        .carousel .timeRunning { position: absolute; z-index: 1000; width: 0%; height: 4px; background-color: #841e22; left: 0; top: 0; animation: runningTime 7s linear 1 forwards; }
            @keyframes runningTime {
                from { width: 0%; }
                to { width: 100%; }
            }
    
/*Media Queries*/

@media screen and (max-width: 999px) {
    header { padding-left: 50px; }
    .list .item .content { left: 50px; }
        .content .title, .content .name { font-size: 70px; }
        .content .des { font-size: 16px; }
}

@media screen and (max-width: 690px) {
    header nav a { font-size: 14px; margin-right: 0; }
    .list .item .content { top: 40%; }
        .content .title, .content .name { font-size: 45px; }
        .content .btn button { padding: 10px 15px; font-size: 14px; }
}

@media screen and (max-width: 450px) {
    .item .content { width: 300px; }
    .list .item .content { left: 20px; }
}


     .top-spacer    { height: 50vh; }
    .bottom-spacer { height: 50vh; }

    .gallery {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
        overflow: hidden;
    }

    .raw {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        width: calc(100% + 240px);
        margin-left: -120px;
        will-change: transform;
    }

    .tile {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1/1;
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
    }

    /* ͼƬÒç³öÌîÂú£º118% ³ß´ç + ¸ºÆ«ÒÆ£¬scale(0.85) ºóÈÔ¸²¸Çͼ¿ò */
    .tile img {
        position: absolute;
        left: -9%;
        top: -9%;
        width: 118%;
        height: 118%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
        filter: grayscale(100%) brightness(0.65);
        transform: scale(0.85);
        transition: filter 2.8s cubic-bezier(0.22, 0.1, 0.22, 1),
                    transform 2.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: filter, transform;
    }

    .tile.revealed img {
        filter: grayscale(0%) brightness(1);
        transform: scale(1);
    }

    .tile:nth-child(1)  img { transition-delay: 0.00s, 0.00s; }
    .tile:nth-child(2)  img { transition-delay: 0.06s, 0.06s; }
    .tile:nth-child(3)  img { transition-delay: 0.12s, 0.12s; }
    .tile:nth-child(4)  img { transition-delay: 0.18s, 0.18s; }
    .tile:nth-child(5)  img { transition-delay: 0.24s, 0.24s; }
    .tile:nth-child(6)  img { transition-delay: 0.30s, 0.30s; }

    /* ===== ÐüÍ£ ===== */
    .tile-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 2;
    }

    .tile:hover .tile-overlay {
        opacity: 1;
        transition-delay: 0.1s;
    }

    .tile-link {
        color: #fff;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 400;
        letter-spacing: 0.12em;
        padding: 0.7rem 1.8rem;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 6px;
        background: rgba(10,10,10,0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.35s ease;
        white-space: nowrap;
    }

    .tile-link:hover {
        background: rgba(139,26,26,0.65);
        border-color: #a03030;
        letter-spacing: 0.18em;
    }

    .tile:hover img {
        filter: grayscale(0%) brightness(0.65) blur(6px) !important;
        transform: scale(1.04) !important;
        transition: filter 0.6s ease, transform 0.6s ease !important;
    }

    @media (max-width: 900px) {
        .raw { grid-template-columns: repeat(3, 1fr); width: calc(100% + 120px); margin-left: -60px; }
        .top-spacer, .bottom-spacer { height: 30vh; }
    }
    @media (max-width: 540px) {
        .raw { grid-template-columns: repeat(2, 1fr); width: calc(100% + 80px); margin-left: -40px; }
    }