/* --- 1. 全局变量定义 --- */
:root {
    --bg-black: #000000;
    --text-white: #ffffff;
    --text-muted: #666666;   
    --accent-red: #f80039;   
    
    /* 导航栏锁定参数 */
    --nav-font-size: 18px;      
    --nav-gap: clamp(16px, 2vw, 24px); /* 动态间距：窄屏时自动收缩导航间隔 */
    --nav-height: 60px;         
    --line-height: 3px;         
    --line-radius: 0.5px;       

    /* 楼层数值 */
    /* 优化：最小宽度改为 90%，防止在 768px 宽度时文字直接顶到边框 */
    --floor-max-width: clamp(600px, 35vw, 800px);

    --tag-size: clamp(14px, 1.2vw, 18px);
    --title-size: clamp(40px, 4vw, 80px); /* 缩小了最小标题，防止在平板上折行太严重 */
    --desc-size: clamp(14px, 1.2vw, 18px);

    --title-weight: 500;
    --desc-weight: 300;
    
    /* 【核心修改】：锁定 768px，这是保住 iPad 竖屏无滚动条的底线 */
    --min-page-width: 768px; 
    
    --img-radius: 12px;

    /* 按钮与交互参数 */
    --btn-size: clamp(40px, 2vw, 60px);
    --arrow-size: calc(var(--btn-size) * 0.25);
    --hover-duration: 0.6s; 

    /* 间距控制中心 */
    --global-margin: 88px;
}

/* --- 2. 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
    /* 优化：增加针对移动设备的点击体验 */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-black);
    color: var(--text-white);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    
    /* 锁定底盘：当窗口 < 768px 时，才会出现横向滑动条 */
    min-width: var(--min-page-width); 
    overflow-x: auto; 
    
    /* 优化：防止手机端横屏时字体自动缩放破坏排版 */
    -webkit-text-size-adjust: 100%;
}

/* --- 3. 状态栏 (底边对齐版) --- */
.navbar {
    width: 100%;
    min-width: var(--min-page-width); 
    height: var(--nav-height); 
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.65); 
    backdrop-filter: blur(18px) saturate(160%);           
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    display: flex;
    justify-content: center; 
    align-items: center;
}

.navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 1;
}

.nav-container {
    height: 100%; 
    min-width: var(--min-page-width); 
    display: flex;
    justify-content: center; 
    align-items: center;
}

.nav-links {
    height: 100%; 
    display: flex;
    align-items: center;
    gap: var(--nav-gap); 
}

.nav-item {
    position: relative;
    height: 100%; 
    display: flex;
    align-items: center; 
    color: var(--text-muted) !important; 
    font-size: var(--nav-font-size); 
    font-weight: 300;
    letter-spacing: 0.08em;
    /* 增加平滑悬停过渡 */
    transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    white-space: nowrap; 
}

.nav-item.brand {
    color: var(--text-white) !important;
    font-weight: 600;
    margin-right: 15px; 
    cursor: default;
}

/* 链接悬停效果：非 brand 的项在鼠标经过时变白 */
.nav-item:not(.brand):hover {
    color: var(--text-white) !important;
}

.nav-item.active { 
    color: var(--text-white) !important; 
    font-weight: 600; 
}

.nav-item.active::after {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; 
    bottom: 0; 
    height: var(--line-height);
    background-color: var(--text-white);
    border-radius: var(--line-radius);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    animation: lineFade 0.4s ease-out forwards;
    z-index: 2;
}

@keyframes lineFade { from { opacity: 0; } to { opacity: 1; } }

/* --- 修正：全局 R标 正右上角对齐 --- */
sup {
    /* 1. 视觉缩放到足够小，符合极简审美 */
    font-size: 0.8em; 
    
    /* 2. 核心：强制垂直基线向上角标对齐 */
    vertical-align: super;
    
    /* 3. 核心：抽干其占位行高，防止顶开文字组 */
    line-height: 0;
    
    /* 4. 手感调节：让 R标 负 margin 反向贴死“遇义”的右侧边界 */
    /* 如果觉得太贴，可以改为 0 或 -1px */
    margin-left: 1px; 
    margin-right: 4px; 
    
    /* 5. 手感调节：稍微向上再提 1px，让它处于“正右上角”的感觉 */
    position: relative;
    top: -3px;
}

/* --- 5. 楼层布局逻辑 --- */
.main-wrapper {
    width: 100%;
    min-width: var(--min-page-width);
    /* 核心修改：让状态栏底部的线也推开 120px 距离 */
    padding-top: var(--global-margin); 
}

.floor-section {
    width: 100%;
    padding: 0; 
    display: flex;
    justify-content: center;
    text-align: center;
}

.floor-container {
    width: var(--floor-max-width); 
    padding: 0px 20px 40px; 
}

/* --- 6. 楼层文字细节控制 --- */
.floor-tag {
    display: block;
    color: var(--accent-red);
    font-size: var(--tag-size); 
    font-weight: 450;
    letter-spacing: 0.02em;
    margin-bottom: 25px;
}

.floor-title {
    color: var(--text-white);
    font-size: var(--title-size); 
    font-weight: var(--title-weight);
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

.floor-desc {
    color: #888;
    font-size: var(--desc-size); 
    font-weight: 450;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* --- 7. 图片组件 --- */
.full-view-images {
    width: 100%;
    padding: 0 2%; 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.image-group {
    width: 50%; 
    border-radius: var(--img-radius);
    overflow: hidden;
    position: relative;
}
.card-left { margin-right: 1%; }

.aspect-placeholder {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.fade-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.slide-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.slide-img.active { opacity: 1; z-index: 2; }

/* 按钮基础容器 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--btn-size);
    height: var(--btn-size);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    opacity: 0; 
    transition: all 0.4s ease;
    /* 关键：取消 flex 居中，改用内部绝对定位 */
    display: block; 
}

.image-group:hover .slider-btn { opacity: 1; }
.prev { left: 4%; } 
.next { right: 4%; }

/* 箭头核心修正：绝对中心对齐 */
.arrow {
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    
    /* 核心：无论外框怎么变，箭头永远锁死在圆心 */
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 左箭头：旋转后，通过 translate 微调视觉中心 */
.left { 
    transform: translate(-30%, -50%) rotate(-135deg); 
}

/* 右箭头：旋转后，通过 translate 微调视觉中心 */
.right { 
    transform: translate(-70%, -50%) rotate(45deg); 
}

/* --- 8. 作品集网格系统 --- */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: minmax(280px, auto);    
    grid-auto-flow: dense;                 
    gap: 15px;                             
    padding: 0 2%; 
    width: 100%;
    min-width: var(--min-page-width);
}

.u-1x1 { grid-column: span 1; grid-row: span 1; }
.u-1x2 { grid-column: span 1; grid-row: span 2; }
.u-2x1 { grid-column: span 2; grid-row: span 1; }
.u-2x2 { grid-column: span 2; grid-row: span 2; }
.u-3x2 { grid-column: span 3; grid-row: span 2; }

.work-item {
    position: relative;
    background-color: #0a0a0a;
    border-radius: var(--img-radius);
    overflow: hidden;
    cursor: pointer;
}

.img-box {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--hover-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dark-img { position: relative; z-index: 2; opacity: 1; }
.light-img { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; }

.work-item:hover .dark-img { opacity: 0; }
.work-item:hover .light-img { opacity: 1; }

.work-item .img-box img {
    transform: scale(1);
    transition: opacity var(--hover-duration) ease, 
                transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.work-item:hover .img-box img { transform: scale(1.01); }

/* --- 9. 独立插件：绝对间距控制中心 --- */
.divider-glow {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 锁定 120px 垂直居中间距 */
    margin: var(--global-margin) 0; 
}

.divider-glow::after {
    content: "";
    width: 96%;
    height: 1.2px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
}

/* --- 10. 客户 Logo 墙系统 --- */
.client-logo-grid {
    /* 【间距参数：控制 Logo 之间的距离】
       最小值：24px (保证基本的呼吸感)
       理想值：2.5vw (随窗口流动)
       最大值：40px (配合 12% 边距，Logo 聚拢后不宜太散)
    */
    --logo-gap: clamp(24px, 2.5vw, 80px); 
    
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6列 */
    grid-auto-rows: auto;
    gap: var(--logo-gap); 
    
    /* 核心修改：你设定的 12% 边距，实现视觉向中心聚拢 */
    padding: 0 12%; 
    width: 100%;
    min-width: var(--min-page-width);
}

.logo-item {
    width: 100%;
    /* 垂直居中对齐，保证不同长宽比的 Logo 视觉重心统一 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-item img {
    /* 自动适应宽度，保持原始比例 */
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    /* 保持陈工要求的 100% 原始呈现，不加滤镜 */
    opacity: 1;
}

/* --- 11. 灵活间距插件：50px 占位块 --- */
.spacer-50 {
    width: 100%;
    height: 50px;
    display: block;
    clear: both;
    /* 默认不带 margin，让它就是一个纯粹的 50px 物理占位 */
}

/* --- 12. 站点页脚系统 (Footer) --- */
.site-footer {
    width: 100%;
    min-width: var(--min-page-width);
    background-color: var(--bg-black);
    padding: 2% 2% 2%; /* 顶部留白由你灵活控制 */
    color: #888; /* 默认暗灰色 */
    font-size: 14px; /* 页脚文字通常更精细 */
    font-weight: 350;
    line-height: 1.5;
}

.footer-container {
    max-width: 100%;
    display: flex;
    justify-content: space-between; /* 均分五栏 */
    align-items: flex-end; /* 核心：全员底部对齐 */
}

.footer-col {
    flex: 1;
}

/* 左侧两栏：靠左 */
.col-left { text-align: left; }

/* 中间栏：居中且强化视觉 */
.col-center {
    text-align: center;
    flex: 1.5; /* 给中间稍微宽一点的空间 */
    color: var(--text-white);
}

.footer-url {
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    opacity: 0.6;
}

.footer-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.footer-mini-logo {
    height: 24px;
    width: auto;
}

.sep { opacity: 0.3; font-weight: 300; }

/* 右侧两栏：靠右 */
.col-right { text-align: right; }

.qr-code {
    display: inline-block;
    padding: 12px;
    border: 1.1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.qr-code img {
    width: 58px; /* 二维码尺寸控制 */
    height: 58px;
    display: block;
}

/* 链接交互 */
.footer-col p { margin-bottom: 2px; }