/* 内容区域基础样式 */
#content-section {
    padding: 2rem;
    background-color: #f4f4f4; /* 浅灰色背景 */
}

/* 内容分类样式 */
.content-category {
    padding: 4rem 2rem;
    text-align: center;
    background: transparent;
    box-shadow: none;
    border-radius: 18px;
    margin-bottom: 0;
}

/* 奇偶分类使用不同背景色，增强视觉区分度 */
.content-category:nth-of-type(odd) {
    background-color: transparent;
}

.content-category h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #333; /* 深灰色标题 */
}

/* 画廊网格布局 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 画廊项目卡片样式 */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 轻微阴影效果 */
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持宽高比，裁剪超出部分 */
    display: block;
    transition: transform 0.4s ease;
}

/* 悬停时图片放大效果 */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* 图片覆盖层样式 */
.gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 3rem 1.5rem 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-align: left;
}

/* 悬停时显示覆盖层 */
.gallery-item:hover .overlay {
    opacity: 1;
    transform: translateY(0);
}

.overlay h3 {
    margin: 0 0 0.5rem 0;
}

.overlay p {
    font-size: 0.9rem;
    margin: 0;
}


/* 
---------------------------
时光脉络：时间线轮播样式 
---------------------------
*/
#timeline,
#timeline .content-category,
#timeline .contain,
#characters,
#characters .content-category,
#characters .contain,
#imagery,
#imagery .content-category,
#moments,
#moments .content-category {
    background: transparent !important;
    background-color: transparent !important;
}

/* 水平滚动容器 */
#timeline .row,
#characters .row {
    position: relative;
    overflow: hidden; /* 隐藏非当前展示的图片 */
}

/* 轮播内容容器 */
#timeline .row__inner,
#characters .row__inner {
    display: flex;
    transition: transform 1.5s ease-in-out;
    font-size: 0;
    white-space: nowrap;
    margin: 70.3125px 0;
    padding-bottom: 10px;
}

/* 时间线项目卡片样式 */
#timeline .tile,
#characters .tile {
    flex: none;
    position: relative;
    display: inline-block;
    width: 300px;
    height: 220px;
    margin-right: 16px;
    font-size: 20px;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
    border-radius: 8px;
    overflow: hidden;
}

/* 时间线项目图片样式 - 确保图片填满容器 */
#timeline .tile__img,
#characters .tile__img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 保持宽高比，裁剪超出部分 */
    object-position: center; /* 居中裁剪 */
}

/* 时间线项目详情覆盖层 */
#timeline .tile__details,
#characters .tile__details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-size: 10px;
    opacity: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    transition: 450ms opacity;
    color: #ecf0f1;
}

/* 播放按钮装饰元素 */
#timeline .tile__details:after,
#timeline .tile__details:before,
#characters .tile__details:after,
#characters .tile__details:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
}

/* 播放按钮外圈 */
#timeline .tile__details:after,
#characters .tile__details:after {
    margin-top: -25px;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    border: 3px solid #ecf0f1;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* 播放按钮图标 */
#timeline .tile__details:before,
#characters .tile__details:before {
    content: '▶';
    left: 0;
    width: 100%;
    font-size: 30px;
    margin-left: 7px;
    margin-top: -18px;
    text-align: center;
    z-index: 2;
    color: #ecf0f1;
}

/* 悬停时显示详情 */
#timeline .tile:hover .tile__details,
#characters .tile:hover .tile__details {
    opacity: 1;
}

/* 标题位置 */
#timeline .tile__title,
#characters .tile__title {
    position: absolute;
    bottom: 0;
    padding: 10px;
}

/* 轮播交互效果 */
#timeline .row__inner:hover,
#characters .row__inner:hover {
    transform: translate3d(-45px, 0, 0);
}

#timeline .row__inner:hover .tile,
#characters .row__inner:hover .tile {
    opacity: 1;
}

#timeline .row__inner:hover .tile:hover,
#characters .row__inner:hover .tile:hover {
    transform: scale(1.1);
    opacity: 1;
}

#timeline .tile:hover ~ .tile,
#characters .tile:hover ~ .tile {
    transform: translate3d(0, 0, 0);
}

/* 新增：时间线轮播控件样式 */
#timeline .timeline-nav,
#characters .timeline-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: none; /* 隐藏切换按钮 */
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 1rem; /* 调整内边距，让按钮向内靠拢 */
    box-sizing: border-box;
}

#timeline .timeline-nav .btn,
#characters .timeline-nav .btn {
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.7);
}

/* 新增：状态点容器 */
#timeline .timeline-dots,
#characters .timeline-dots {
    text-align: center;
    padding-top: 1.5rem;
}

#timeline .timeline-dots .dot,
#characters .timeline-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

#timeline .timeline-dots .dot.active,
#characters .timeline-dots .dot.active {
    background: #333;
}





/* 
---------------------------
查看更多按钮样式
---------------------------
*/
.view-more-container {
    text-align: center;
    padding-top: 2rem; /* 与上方轮播的间距 */
}

/* 统一所有查看更多按钮动画和样式 */
.view-more-btn {
  color: #fff !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border-radius: 30px;
  padding: 0.8rem 2.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  outline: none;
  display: inline-block;
}
.view-more-btn:hover, .view-more-btn:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #aad8ff !important;
  border-color: #aad8ff !important;
}



/* 
---------------------------
意象集录轮播样式
---------------------------
*/
#imagery {
    position: relative;
}

#carousel {
    position: relative;
    height: 400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#carousel div {
    position: absolute;
    transition: transform 1s ease-in-out, left 1s ease-in-out, opacity 1s ease-in-out;
    opacity: 1;
    display: flex;
    justify-content: center;
    top: 50%;
}

#carousel div img {
    width: 400px;
    transition: width 1s;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

#carousel div.hideLeft {
    left: -20%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

#carousel div.hideRight {
    left: 120%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

#carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translate(-50%, -50%);
}

#carousel div.prev img {
    width: 300px;
}

#carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

#carousel div.prevLeftSecond img {
    width: 200px;
}

#carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translate(-50%, -50%);
}

#carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translate(-50%, -50%);
}

#carousel div.next img {
    width: 300px;
}

#carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

#carousel div.nextRightSecond img {
    width: 200px;
}

@media (max-width: 768px) {
    #carousel {
        height: 300px;
    }

    #carousel div img {
        width: 250px;
    }

    #carousel div.prev img,
    #carousel div.next img {
        width: 200px;
    }

    #carousel div.prevLeftSecond img,
    #carousel div.nextRightSecond img,
    #carousel div.hideLeft img,
    #carousel div.hideRight img {
        width: 150px;
    }

    #carousel div.hideLeft {
        left: -30%;
    }

    #carousel div.hideRight {
        left: 130%;
    }
}

/* 
---------------------------
瞬间纪闻：3D 轮播样式 
---------------------------
*/
#moments .scene {
    width: 320px;
    height: 220px;
    position: relative;
    perspective: 1000px;
    margin: 40px auto;
}

#moments .carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

#moments .carousel-cell {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 10px;
    top: 10px;
    border: 2px solid white;
    line-height: 116px;
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-align: center;
    background-color: hsla(0, 0%, 0%, 0.8);
    -webkit-box-reflect: below 5px linear-gradient(transparent, transparent 40%, rgba(255, 255, 255, 0.3));
    margin-top: 20px;
}

#moments .carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#back-to-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0.7;
    z-index: 999;
    transition: opacity 0.3s;
}
#back-to-top:hover {
    opacity: 1;
}

.fa.fa-angle-double-up {
  color: rgba(255,255,255,0.85);
  font-size: 3rem;
  background: linear-gradient(to top, white, white) no-repeat;
  -webkit-background-clip: text;
  background-size: 100% 30px;
  background-position: bottom;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0.7;
  z-index: 999;
  transition: opacity 0.3s;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 32px;
  bottom: 32px;
  cursor: pointer;
  padding: 0;
}
.fa.fa-angle-double-up:hover {
  -webkit-background-clip: text;
  animation: shimmer 0.3s linear 0s 2;
  opacity: 1;
}
@keyframes shimmer {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: top;
  }
}

#page-wrapper,
#page-wrapper main,
#page-wrapper section,
#page-wrapper .content-category,
#page-wrapper .gallery-item,
#page-wrapper .tile,
#page-wrapper .overlay,
#page-wrapper .tile__details,
#moments,
#moments * {
  color: #f3f6fa !important;
}

/* 更亮的主内容标题样式 */
.content-category h2,
#characters .tile__title,
#timeline .tile__title,
#moments h2 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.section-transition {
  width: 100%;
  height: 60px;
  background: transparent;
  margin: 0 auto;
  border: none;
}

/* 让每个section底部有更自然的阴影过渡 */
.content-category + .section-transition {
  margin-top: -2rem;
  margin-bottom: 2rem;
  height: 80px;
  background: transparent;
  border-radius: 0 0 18px 18px;
}