/* ==================== Project页面样式 ==================== */
/* 使用纯 rem 定位，与一级页面保持一致的缩放逻辑 */
/* 转轮布局使用 CSS 变量，由 JS 设置 --current-index */

.project-page {
    background: var(--bg-white);
    position: relative;
    width: 100%;
    height: calc(67.5rem); /* 1080px 设计稿高度，随 rem 缩放 */
    max-height: calc(67.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

/* 主内容容器 */
.main-content {
    position: relative;
    width: 100%;
    height: calc(67.5rem); /* 1080px 设计稿高度 */
    background: var(--bg-white);
    overflow: hidden !important;
    padding: calc(3.125rem); /* 50px */
    box-sizing: border-box;
    max-width: calc(120rem); /* 1920px */
    margin-left: auto;
    margin-right: auto;
}

/* 将 project 页面整体上移以匹配其他页面的视觉偏移 */
.project-page .main-content {
    transform: translateY(calc(-2rem));
}

/* ==================== PROJECT标题 ==================== */
.page-title {
    position: absolute;
    left: calc(26rem); /* 360px */
    top: calc(10rem); /* 130px */
    z-index: 10;
    animation: fadeIn 0.8s ease-out 0.2s both;
}

.page-title h1 {
    font-family: var(--font-family);
    font-size: calc(3rem); /* 48px */
    line-height: calc(3.5rem); /* 56px */
    letter-spacing: calc(0.12rem); /* 1.92px */
    text-transform: uppercase;
    color: var(--primary-black);
    margin: 0;
    font-weight: 700;
}

/* ==================== 主图片轮播容器 ==================== */
.main-image-container {
    position: absolute;
    left: calc(26rem); /* 358px - 设计稿 */
    top: calc(13.9375rem); /* 223px - 设计稿 */
    width: calc(52.45rem); /* 1049px × 0.8 = 839px */
    height: calc(31.7rem); /* 634px × 0.8 = 507px */
    overflow: hidden;
    animation: fadeIn 0.8s ease-out 0.4s both;
}

.main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.main-image.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== 灯具类型显示区域 ==================== */
.fixture-types-container {
    position: absolute;
    right: calc(103rem);
    top: calc(35rem);
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(0.375rem); /* 6px */
    z-index: 200;
    pointer-events: auto !important;
    max-width: calc(13rem);
    animation: fadeIn 0.8s ease-out 0.6s both;
}

.fixture-types-title {
    font-family: var(--font-family);
    font-size: calc(1.125rem); /* 18px */
    line-height: calc(1.5rem); /* 24px */
    letter-spacing: calc(0.05rem);
    color: var(--primary-black);
    font-weight: 400;
    margin-bottom: calc(0.5rem); /* 8px */
}

.fixture-type-item {
    display: flex;
    align-items: center;
    pointer-events: auto;
    max-width: 100%;
}

.fixture-type-link {
    font-family: var(--font-family);
    font-size: calc(0.75rem); /* 12px */
    line-height: calc(1.125rem); /* 18px */
    letter-spacing: calc(0.02rem);
    color: var(--primary-gray);
    text-decoration: none;
    display: inline-block;
    gap: calc(0.25rem); /* 4px */
    transition: all 0.25s ease;
    cursor: pointer;
    padding: calc(0.25rem) calc(0.5rem);
    position: relative;
    pointer-events: auto !important;
    z-index: 201;
    border-radius: calc(0.25rem);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixture-type-link:hover {
    color: var(--primary-black);
    background-color: rgba(0, 0, 0, 0.05);
}

.fixture-type-link:active {
    color: var(--primary-black);
    transform: scale(0.95);
    opacity: 0.85;
    background-color: rgba(0, 0, 0, 0.08);
}

.fixture-arrow {
    font-size: calc(0.875rem); /* 14px */
    font-weight: 300;
    transition: transform 0.25s ease;
    display: inline-block;
}

.fixture-type-link:hover .fixture-arrow {
    transform: translateX(calc(0.1875rem)); /* 3px */
}

.fixture-type-link:active .fixture-arrow {
    transform: translateX(calc(0.25rem)); /* 4px */
}

/* ==================== 转轮式项目选择器 ==================== */
.timeline-wrapper {
    position: absolute;
    /* 与图片右侧对齐 */
    right: calc(3.125rem); /* 50px */
    top: calc(13.9375rem); /* 与图片 top 一致 */
    width: calc(40rem); /* 增加宽度，避免文字堆叠 */
    height: calc(31.7rem); /* 与图片高度一致 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 5;
    animation: slideInRight 0.8s ease-out 0.8s both;
    overflow: hidden; /* 裁剪超出六等分区域的内容 */
}

.project-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden; /* 裁剪超出六等分区域的内容 */
}

/* ==================== 转轮视口 ==================== */
.carousel-viewport {
    /* 布局变量（纯 rem）- 六等分绝对定位布局 */
    --viewport-height: 31.7rem; /* 与图片高度一致 */
    --slot-height: calc(var(--viewport-height) / 6); /* 每个槽位高度 ≈ 5.28rem */
    
    position: relative;
    width: calc(32rem); /* 固定宽度，避免位置堆叠 */
    height: var(--viewport-height);
    overflow: hidden; /* 裁剪超出六等分区域的内容 */
    z-index: 2;
}

/* 转轮容器 - 绝对定位 */
.carousel-items {
    --current-index: 0; /* 当前选中的索引，由 JS 设置 */
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 使用 CSS calc 计算偏移量，当前项目对齐到第3个槽位（索引2） */
    /* 偏移 = 2个槽位高度 - 当前索引 * 槽位高度 */
    transform: translateY(
        calc(
            var(--slot-height) * 2 
            - var(--current-index) * var(--slot-height)
        )
    );
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==================== 转轮项目 ==================== */
.carousel-item {
    /* 每个条目占据一个槽位高度 (31.7rem / 6 ≈ 5.28rem) */
    height: calc(31.7rem / 6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: calc(0.75rem); /* 12px - 标题与年份间距 */
    cursor: pointer;
    opacity: 0.5;
    /* 未激活状态：不缩放 */
    transform: scale(1);
    transform-origin: right center;
    transition: all 0.35s ease;
    padding-right: calc(3.125rem); /* 50px */
    box-sizing: border-box;
}

/* 中心项目（当前活跃）- 只放大1.2倍 */
.carousel-item.active {
    opacity: 1;
    /* 激活状态：scale(1.2) */
    transform: scale(1.2);
    transform-origin: right center;
    z-index: 10;
}

/* 上下相邻项目（距离1） */
.carousel-item.adjacent {
    opacity: 0.6;
}

/* 次相邻项目（距离2） */
.carousel-item.near {
    opacity: 0.4;
}

.carousel-year {
    font-family: var(--font-family);
    font-size: calc(0.8em); /* 小号字体 - 默认状态 */
    line-height: calc(1.25rem);
    letter-spacing: calc(0.05rem);
    color: #D9D9D9; /* 最浅灰色 - 默认状态 */
    font-weight: 400;
    flex-shrink: 0;
    min-width: calc(2.5rem);
    text-align: right;
    white-space: nowrap;
}

.carousel-title {
    font-family: var(--font-family);
    font-size: calc(0.8em); /* 小号字体 - 默认状态 */
    line-height: calc(1.25rem);
    color: #D9D9D9; /* 最浅灰色 - 默认状态 */
    font-weight: 400;
    text-align: right;
    text-transform: capitalize;
    /* 允许折行完整显示 */
    white-space: normal;
    word-wrap: break-word;
    max-width: calc(18rem); /* 增加基础宽度 */
}

/* 中心项目文字颜色 */
.carousel-item.active .carousel-year {
    font-size: calc(1.75rem); /* 大号字体 */
    line-height: calc(2.25rem);
    color: #000000; /* 黑色 */
}

.carousel-item.active .carousel-title {
    font-size: calc(1.75rem); /* 大号字体 */
    line-height: calc(2.25rem);
    color: #000000; /* 黑色 */
}

/* 相邻项目（距离±1）- 中号字体，灰色 */
.carousel-item.adjacent .carousel-year {
    font-size: calc(1em); /* 中号字体 */
    line-height: calc(1.6rem);
    color: #404040; /* 灰色 */
}

.carousel-item.adjacent .carousel-title {
    font-size: calc(1em); /* 中号字体 */
    line-height: calc(1.6rem);
    color: #404040; /* 灰色 */
}

/* ==================== 淡出效果 ==================== */
/* 淡入淡出效果已禁用 */
.carousel-fade-top,
.carousel-fade-bottom {
    display: none;
}

/* ==================== 中心指示器 - 右侧黑色竖线 ==================== */
.carousel-indicator {
    position: absolute;
    right: 0;
    /* 位于第三个槽的顶部 = 31.7rem * 2 / 6 ≈ 10.57rem */
    top: calc(31.7rem * 2 / 6);
    height: calc(31.7rem / 6); /* 精确一个槽位高度 */
    width: calc(3.125rem); /* 50px */
    background-color: var(--primary-black);
    pointer-events: none;
    z-index: 1;
    margin: 0;
}

/* ==================== All 项目入口 ==================== */
.all-projects-link {
    position: absolute;
    right: calc(10.3rem);
    bottom: calc(18.725rem);
    display: flex;
    align-items: center;
    gap: calc(0.5rem);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 10;
    animation: fadeIn 0.8s ease-out 1.2s both;
}

.all-projects-link span {
    font-family: var(--font-family);
    font-size: calc(1rem);
    line-height: calc(1.5rem);
    color: var(--primary-black);
    font-weight: 400;
    text-transform: capitalize;
}

.all-projects-link svg,
.all-projects-link img {
    width: calc(1rem);
    height: calc(1rem);
    color: var(--primary-black);
    transition: transform 0.3s ease;
}

.all-projects-link:hover {
    opacity: 0.6;
}

.all-projects-link:hover svg,
.all-projects-link:hover img {
    transform: translateX(calc(0.25rem));
}

/* ==================== More按钮 ==================== */
.more-button {
    position: absolute;
    right: calc(120rem - 26rem - 52.45rem);
    top: calc(13.9375rem + 31.7rem + 1rem);
    display: flex;
    align-items: center;
    gap: calc(0.375rem);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 10;
    animation: fadeIn 0.8s ease-out 1s both;
}

.more-button span {
    font-family: var(--font-family);
    font-size: calc(0.875rem);
    line-height: 1;
    color: var(--primary-black);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.more-button img {
    width: calc(1rem);
    height: calc(1rem);
    transition: transform 0.3s ease;
}

.more-button:hover {
    opacity: 0.6;
}

.more-button:hover img {
    transform: translateX(3px);
}

/* ==================== 左侧缩略图（可选） ==================== */
.thumbnail-container {
    position: absolute;
    left: calc(11.25rem); /* 180px */
    top: calc(34.375rem); /* 550px */
    width: calc(8.0625rem); /* 129px */
    display: flex;
    flex-direction: column;
    gap: calc(3.125rem); /* 50px */
    animation: fadeIn 0.8s ease-out 0.6s both;
}

.thumbnail-item {
    width: calc(8.0625rem); /* 129px */
    height: calc(8.0625rem); /* 129px */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.thumbnail-item:hover {
    transform: scale(1.05);
}

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

.thumbnail-item:not(.active) {
    opacity: 0.6;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 完整显示图片，按比例缩放 */
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(calc(1.25rem)); /* 20px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(calc(3.125rem)); /* 50px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== 加载骨架屏 ==================== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}