/* This is css file for 4aC Website */



body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    max-width: 100vw;
    background-color: #ffffff;
    font-family: 'NeueHaasUnica-Regular', "Source Han Sans CN", sans-serif;

}




@font-face {
    font-family: 'NeueHaasUnica-Regular';
    src: url('../fonts/NeueHaasUnica-Regular.woff2') format('woff2'),
        url('../fonts/NeueHaasUnica-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    /* 扩展 unicode-range 包含英文标点符号 */
    unicode-range: U+0020-00FF, U+0100-017F, U+0180-024F, U+2010-201F;
    /* 包含英文弯曲引号：U+201C ("), U+201D ("), U+2018 ('), U+2019 (') */
}


/* 设置选中文本的高亮颜色 */
::selection {
    background-color: lightgray;
    /* 设置选中背景颜色 */
    color: white;
    /* 设置选中文本颜色 */
}

/* 针对 Firefox 浏览器的样式 */
::-moz-selection {
    background-color: lightgray;
    /* 设置选中背景颜色 */
    color: white;
    /* 设置选中文本颜色 */
}

/*

All Links Styles

*/

.grid-item_nav a {}

.grid-item_nav a:hover {

    opacity: 0.1;

}

.notification_msg {
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -55%);
    width: 80vw;
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    z-index: 999;
    pointer-events: none;
}


/* 当前页面禁用状态下的样式 */



.disabled a {

    opacity: 0.1;
    cursor: not-allowed;

}

.disabled a:hover {


    opacity: 0.1;
    cursor: not-allowed;

}





p1 {
    font-family: 'NeueHaasUnica-Regular', "Source Han Sans CN", sans-serif;
    font-size: 28px;
    line-height: 1.1;
    color: black;
    margin: 1px 0;
    text-align: justify;
    /* 两端对齐 */
    text-align-last: left;
    /* 最后一行左对齐 */
    word-break: break-word;
    /* 防止单词溢出（可选） */


}



p2 {
    font-family: 'NeueHaasUnica-Regular', "Source Han Sans CN", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: black;
    margin: 1px 0;
}






.Container4a {
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    cursor: pointer;
    text-align: center;


}



.ContainerC {
    position: absolute;
    top: 420px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 155px;
    text-align: center;
    cursor: pointer;

}



.slideshow4a {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: none;
    z-index: -999;
    /* 隐藏 slideshow 容器 */
    width: 40vw;
    /* 设定幻灯片容器的宽度 */
    height: auto;
    /* 设定幻灯片容器的高度 */
    pointer-events: none;


}


.slideshowC {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);

    bottom: 0;
    display: none;
    z-index: -999;
    /* 隐藏 slideshow 容器 */
    width: 30vw;
    /* 设定幻灯片容器的宽度 */
    height: auto;
    /* 设定幻灯片容器的高度 */
    pointer-events: none；
}






.slide {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    position: absolute;
    /*
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
*/
    /* 添加过渡效果 */
}





img {
    max-width: 100%;
    height: auto;
}

audio {
    display: none;
    /* 隐藏音频播放器 */
}



/* 导航*/
.nav_bar {

    display: grid;
    position: fixed;
    top: 0;
    left: 0;
    width: 10vw;
    grid-template-rows: repeat(3, 1fr);
    /* 创建三行等高的网格 */
    gap: 8px;
    /* 网格间距 */
    margin: 8px;
    /* 全局边距 */
    height: calc(100vh - 16px);
    /* 减去上下边距的总高度 */

}




/*  新增：左侧三个独立导航  */



#menu_4aC {


    width: 15vw;
    position: fixed;
    left: 8px;
    top: 0px;

}

#menu_4aC:hover {

    opacity: 0.1;
}


#menu_works {

    width: 7vw;
    position: fixed;
    left: 4.5vw;
    bottom: calc(16vw + 32px);

}


#menu_creates {

    width: 7vw;
    position: fixed;
    left: calc(4.5vw - 4px);  /*让该死的脚和上面的在一条中线上，他妈的！*/
    bottom: calc(8vw + 32px);
}

#menu_curates {

    width: 7vw;
    position: fixed;
    left: 4.5vw;
    bottom: 32px;
}



.logo-static {
    opacity: 1;
    transition: opacity 0.5s ease;

}

.logo-gif {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}


.logo-static_in_project_specs {

    opacity: 0.1;
    transition: opacity 0.5s ease;

}



/* Hover 时替换图片 */
#menu_works:hover .logo-static {
    opacity: 0;

}

#menu_works:hover .logo-gif {
    opacity: 1;

}





/* Hover 时替换图片 */
#menu_creates:hover .logo-static {
    opacity: 0;

}

#menu_creates:hover .logo-gif {
    opacity: 1;

}


/* Hover 时替换图片 */
#menu_curates:hover .logo-static {
    opacity: 0;

}

#menu_curates:hover .logo-gif {
    opacity: 1;

}



/* Hover 时替换图片 在项目详情页时 都是灰色 */
#menu_works:hover .logo-static_in_project_specs {
    opacity: 0;

}

#menu_creates:hover .logo-static_in_project_specs {
    opacity: 0;

}

#menu_curates:hover .logo-static_in_project_specs {
    opacity: 0;

}




/* Hover 时显示文字 */
.hover-text {
    display: none;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(10px, -50%);
    font-size: 16px;
    color: black;
    white-space: nowrap;
}

#menu_works:hover .hover-text {
    display: block;

}

#menu_creates:hover .hover-text {
    display: block;

}

#menu_curates:hover .hover-text {
    display: block;

}






.top-align {
    align-items: flex-start;
    /* Top align content */
}

.center-align {
    align-items: center;
    /* Center align content vertically */
}

.bottom-align {
    align-items: flex-end;
    /* Bottom align content */
}




/* Works的网格容器*/


.container_work {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: absolute;
    top: 0;
    right: 0;
    gap: 10px 8px;
    margin: 8px;
    width: 80vw;


}


/* Creates的网格容器*/

.container_creates {
    position: absolute;
    right: 0;
    width: 80vw;
    margin: 8px;
    box-sizing: border-box;
}

.creates_row {
    display: flex;
    justify-content: space-between;
    /* 首尾贴齐，中间平均间距 */
    margin-bottom: 120px;
    /* 行间距 */
}

.creates_row a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.creates_row img {
    height: 200px;
    /* 高度固定 */
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.4s ease;
    /* 平滑动画过渡 */
}

.creates_row img:hover {
    transform: scale(1.05);
    /* hover 时放大 5% */
}





/* 网格项样式 */
.grid-item_work {


    text-align: center;
    position: relative;
}








/* Hover文字时切换时 */


.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}


/* 默认显示原始图片 */
.img-default {
    opacity: 1;
}

/* 悬停显示 hover 图片 */
.img-hover {
    opacity: 0;
}

.grid-item_work:hover .img-default {
    opacity: 0;

}

.grid-item_work:hover .img-hover {
    opacity: 1;

}






/* Creats的网格容器 2:3需要竖长 */


.container_work-b {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: absolute;
    top: 0;
    right: 0;
    gap: 16px;
    margin: 16px;
    width: 80vw;




}


.grid-item_work-b {

    text-align: center;
    position: relative;
    padding-top: 150%;
    /* 150% 是 2:3 比例的高度 */
}

.grid-item_work-b img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

}





/*

项目详情的顶部名字/年份/类型

*/



.work-cat-bar {
    display: grid;
    position: fixed;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
    right: 8px;
    z-index: 999;
    grid-column: span 2;
    width: 80vw;
    padding: 8px 0;
    height: 6vh;
    background: transparent;
    mix-blend-mode: difference;
    /* 容器要混合 */

}

.work-cat-bar * {
    color: white;
    /* 初始设成白色 */
}



/*

项目详情的网格

*/

.container_work_specs {


    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
    top: 72px;
    right: 0;
    gap: 2px 8px;
    margin: 8px;
    width: 80vw;
    position: absolute;
    grid-auto-rows: min-content;
    /* 让行高自动适应内容 */

}




.work-specs-item {
    display: block;
    /*    position: relative;*/
    overflow: hidden;
    width: 100%;
    height: auto;
}

/* 给works的文字 */

.work-specs-item-text {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: auto;
    padding-top: 24px;
    padding-bottom: 32px;
    text-align: justify;
    text-justify: inter-character;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-align-last: left;

}

.work-specs-item-text p2 {
  white-space: pre-line;
}

/* 给creates的文字 Desktop */

.work-specs-item-text-creates {

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    text-align: center;
   
    height: auto;
    padding-top: 24px;
    padding-bottom: 32px;

    text-align: justify;
    text-justify: inter-character;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-align-last: left;

}

.work-specs-item-text-creates p2 {
  white-space: pre-line;
}



.work-specs-item img {

    width: 100%;
    height: auto;
    object-fit: unset;


}



.work-specs-item .video {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* 保持图片比例自动调整高度 */
}



.large-item {
    grid-column: span 2;
    /* 横跨两列 */
    width: 100%;
}

.small-item {

    grid-column: span 1;

}

.small-item p {

    text-align: left;
    left: 0;



}

/* 

其它作品 


*/



.other-sick-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
    margin: 300px 0px 0px 0px;
    /* 横跨两列 */
    gap: 8px;
    /*    width: 160%;*/


}


/* 

Pre and Next 容器样式 


*/



.pre-next-container {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 设置为三等分 */
    gap: 8px;
    grid-column: span 2;
    width: 100%;

}

/* 单个图片项 */
.pre-next-container-image-item {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    background-color: #ccc;
    overflow: hidden;
    text-decoration: none;

}

/* 图片样式 */
.pre-next-container-image-item .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* 图片上方的文字样式 */
.pre-next-container-text {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    z-index: 999;
}


/*

详情页下方联系info

*/


.contact_info {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: span 2;
    column-gap: 72px;
    /* 桌面左右 */
    row-gap: 32px;
    /* 手机上下 */
    margin: 64px 0 140px 0;

}

.contact_info_grid-item {}

.contact_info_grid-item p {
    font-size: 1.2em;
    margin: 0;
}

.contact_info_grid-item a {
    text-decoration: none;
    /* 移除超链接的默认下划线 */
    color: black;
    /* 设置超链接的颜色 */
    transition: color 0.3s;
    /* 设置过渡效果 */
}

.contact_info_grid-item a:hover {
    color: lightgray;
    /* 设置悬停时超链接的颜色 */
}


/*

About页面的Style

*/



.about-grid-container {

    display: grid;
    position: absolute;
    right: 16px;
    margin: 8px;
    grid-template-columns: 55fr 45fr;
    gap: 112px;
    width: 80vw;
    max-width: 80vw;

}

.about-grid-item {


    text-align: justify;
    text-justify: inter-character;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-align-last: left;
    

}
.about-grid-item p2 {
    
     white-space: pre-line;
    
}




.about-grid-item a {
    text-decoration: none;
    color: black;

}

.about-grid-item a:hover {

    color: lightgray;

}

.about-grid-item a:visited {

    color: black;

}


#icp_footershit {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'NeueHaasUnica-Regular', "Source Han Sans CN", sans-serif;
    font-size: 12px;
    line-height: 1.1;
    color: black;
    text-align: center;

}


#icp_footershit a {
    text-decoration: none;
    color: black;

}

#icp_footershit a:hover {

    color: lightgray;

}

#icp_footershit a:visited {

    color: black;

}




/* 图片模糊加载效果 */
.lazyload {
    filter: blur(10px);
    transition: filter 0.5s ease;
}

.lazyload.loaded {
    filter: blur(0);
}

/* 图片点击放大的弹窗 */



.clickable-image:hover {

    cursor: zoom-in;

}




#image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#image-popup.visible {
    opacity: 1;
    visibility: visible;
}

#popup-image {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.3s ease;
    transform: scale(0.99);
}

#image-popup.visible #popup-image {
    transform: scale(1);
}

#close-popup {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: 'NeueHaasUnica-Regular';
    font-size: 1.4em;
    line-height: 1.1;
    color: black;
    background: none;
    border: none;
    cursor: pointer;
}

#close-popup::before {
    content: "CLOSE";
}

#close-popup:hover {

    color: #FF6A00;
}

#popup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*视频播放器遮罩*/


.video-wrap {
    position: relative;
    width: 100%;
}

.video {
    width: 100%;
    height: auto;
    display: block;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 2;

    background: transparent;
    /* 无遮罩 */
    color: #fff;
    font-size: 64px;

    /* 黑色 1px 轮廓 */
    text-shadow:
        -1px 0 0 #000,
        1px 0 0 #000,
        0 -1px 0 #000,
        0 1px 0 #000;
}



/* Mobile styling  Mobile styling Mobile styling Mobile styling  
 Mobile styling  Mobile styling Mobile styling Mobile styling 
 Mobile styling  Mobile styling Mobile styling Mobile styling 
 Mobile styling  Mobile styling Mobile styling Mobile styling 
*/




@media (max-width: 768px) {

    /* 
    index 开篇大logo！！！
    */



    .Container4a {}



    .ContainerC {}




    .container_work {
        grid-template-columns: 1fr;



    }


    p1 {

        font-size: 20px;



    }


    p2 {

        font-size: 14px;
        line-height: 1.4;




    }



    .container_creates {

        width: 80vw;
        margin: 0;
        /* 居中容器 */
    }

    .creates_row {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        margin: 8px;
    }

    .creates_row a {
        width: 100%;
        justify-content: center;
        margin-bottom: 120px;
        /* 每个图片之间留空 */
    }

    .creates_row img {
        width: 100%;
        /* 图片宽度=容器宽度 */
        height: auto;
        /* 按比例自适应 */
        max-width: 80vw;
        /* 限制最大宽度 */
    }


    /* 左侧导航*/
    .nav_bar {

        width: 25vw;
    }




    #menu_4aC {

        top: 1vh;

    }

    #menu_works {

        width: 12vw;
        height: auto;
        left: 3vw;
        bottom: calc(12vw + 12vw + 192px);

    }


    #menu_creates {

        width: 12vw;
        height: auto;
        position: fixed;
        left: calc(3vw - 2px); /*让该死的脚和上面的在一条中线上，他妈的！*/
        bottom: calc(12vw + 128px);
    }


    #menu_curates {

        width: 12vw;
        height: auto;
        position: fixed;
        left: 3vw;
        bottom: 64px;
    }



    #menu_works:hover .hover-text {
        display: none;

    }

    #menu_creates:hover .hover-text {
        display: none;

    }

    #menu_curates:hover .hover-text {
        display: none;

    }



    /*

项目详情的顶部介绍

*/


    .work-cat-bar {
        /*flex-wrap: wrap;*/
        /* 允许换行 */

        /*justify-content: space-between;*/

        position: absolute;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 12px;
        height: auto;
        padding: 12px 0;

    }

    .work-cat-item {
        flex: 0 0 48%;
        /* 每个项目占据48%的宽度，确保两列布局 */
        box-sizing: border-box;
        /* 包括 padding 和 border 在内 */
        margin-bottom: 16px;
        /* 添加底部间距 */
    }


    .work-cat-item:nth-child(3) {
        justify-content: left;
        /* 第二个项水平居中 */
    }



    .container_work_specs {


        top: 172px;
        grid-template-columns: 1fr;



    }

    /* 给works的文字 Mobile*/

    .work-specs-item-text + .work-specs-item-text {
        margin-top: -48px;

    }


    /* 给creates的文字 Mobile*/

    .work-specs-item-text-creates + .work-specs-item-text-creates {

        margin-top: -48px;


    }



    .small-item {

        grid-column: span 2;

    }


    .about-grid-container {

        right: 0px;
        grid-template-columns: 1fr;
        gap: 64px;



    }


    /* 显示cover 1*/

    .img-default {
        opacity: 1;
    }

    /* 不显示cover 2*/
    .img-hover {

        opacity: 0;
    }


    /* 

其它作品 


*/

    .other-sick-projects {

        grid-template-columns: 1fr;
        margin-top: 120px;

    }


    /* 

Pre and Next 容器样式 


*/


    .pre-next-container {

        grid-template-columns: 1fr;
    }

    /*

详情页下方联系info

*/


    .contact_info {

        grid-template-columns: 1fr;
        row-gap: 24px;
        margin: 120px 0 64px 0;

    }

}