/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

/* 固定导航栏 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #a1020295 ; /* 故宫红 */
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.navbar a {
  color: white;
  padding: 16px 25px;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.3s;
}

.navbar a:hover {
  background-color: #B22222;
}




.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel img.active {
  opacity: 1;
}




/* 子页面标题样式 */
.page-title {
  text-align: center;
  font-size: 36px;
  color: #8B0000;
  margin: 30px 0;
  padding-bottom: 15px;
  border-bottom: 3px solid #8B0000;
}

.page-content {
  font-size: 18px;
  line-height: 2;
  color: #333;
  margin-bottom: 50px;
}

/* 故宫藏品 */

/* 全屏背景大图 */
.full-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s ease; /* 渐入渐出动画 */
}

/* 布局容器（小图 + 介绍悬浮在背景上层） */
.collection-container {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  min-height: 600px;
  position: relative;
  z-index: 10; /* 确保悬浮在背景之上 */
}

/* 左侧小图列表（纵向） */
.thumb-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 120px;
}

.thumb-item {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.thumb-item:hover {
  transform: scale(1.08);
  border-color: #8B0000;
}

/* 右侧详情面板 */
.detail-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.85);
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  min-height: 550px;
}

.detail-box h2 {
  font-size: 28px;
  color: #8B0000;
  margin-bottom: 20px;
}

.detail-box p {
  font-size: 17px;
  line-height: 1.9;
  color: #222;
}

/* 故宫历史 */
.full-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e0e0e0;
}

.page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.11);
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1100px;
  width: 90%;
  padding-top: 70px;
}

.wrap.reverse {
  flex-direction: row-reverse;
}

.txt-box {
  flex: 1;
  padding: 40px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s ease 0.2s;
}

.img-box {
  flex: 1;
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: all 1s ease 0.4s;
}

.img-box img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  max-height: 420px;
  object-fit: cover;
}

.txt-box h2 {
  font-size: 32px;
  color: #8B0000;
  margin-bottom: 18px;
}

.txt-box p {
  font-size: 17px;
  line-height: 1.9;
  color: #222;
}

/* 入场动画：文字左滑 + 图片上浮放大 */
.page.show .txt-box {
  opacity: 1;
  transform: translateX(0);
}

.page.show .img-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 故宫建筑 */
.arc-container {
  width: 100%;
  height: auto;
}

.arc-page {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  position: relative;
}

.arc-page.p1{background-image:url('../image/architecture.png');}
.arc-page.p2{background-image:url('../image/architecture4.png');}
.arc-page.p3{background-image:url('../image/architecture5.png');}
.arc-page.p4{background-image:url('../image/architecture4.png');}

.arc-page::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(208, 208, 208, 0.226); z-index:0;
}

.arc-wrap{
  max-width:1100px; width:90%; display:flex; gap:40px;
  align-items:center; position:relative; z-index:2;
}
.arc-wrap.reverse{flex-direction:row-reverse;}
.arc-center{text-align:center; position:relative; z-index:2;}

.text-box{
  flex:1; background:rgba(255,255,255,0.85); padding:35px; border-radius:12px;
  backdrop-filter:blur(6px); box-shadow:0 8px 20px rgba(0,0,0,0.1);
  opacity:0; transition:all 1s ease;
}
.text-box h2{font-size:30px; color:#f0f0f0; margin-bottom:15px;}
.text-box p{font-size:17px; line-height:1.8; color:#222; margin-bottom:10px;}

.img-fade{flex:1; opacity:0; transition:all 1.2s ease;}
.img-fade img{width:100%; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.2);}

.card-3d-wrap{flex:1; height:350px; opacity:0; transition:all 1s ease;}
.card-3d{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:0.8s;
}
.card-3d-wrap:hover .card-3d{transform:rotateY(180deg);}
.card-front, .card-back{
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden; border-radius:12px; overflow:hidden;
}
.card-front img{width:100%; height:100%; object-fit:cover;}
.card-back{
  background:#8B0000; color:white; display:grid; place-items:center;
  transform:rotateY(180deg); padding:20px; text-align:center;
}

/* 动画 */
.fade-in-up{opacity:0; transform:translateY(50px); transition:1s ease;}
.fade-in-up-delay{opacity:0; transform:translateY(50px); transition:1s ease 0.2s;}
.slide-left{opacity:0; transform:translateX(-60px); transition:1s ease;}
.slide-right{opacity:0; transform:translateX(60px); transition:1s ease;}
.zoom-in{opacity:0; transform:scale(0.8); transition:1s ease;}
.pop-up{opacity:0; transform:translateY(40px); transition:0.8s ease;}
.stagger-text{opacity:0; transform:translateY(30px); transition:1s ease;}

.arc-page.show .fade-in-up,
.arc-page.show .fade-in-up-delay,
.arc-page.show .slide-left,
.arc-page.show .slide-right,
.arc-page.show .zoom-in,
.arc-page.show .pop-up,
.arc-page.show .stagger-text{
  opacity:1; transform:translate(0) scale(1);
}

.expand-btn{
  background:#8B0000; color:white; border:none; padding:12px 22px;
  border-radius:6px; cursor:pointer; margin-top:10px;
  transition:0.3s;
}
.expand-btn:hover{background:#b22222; transform:scale(1.05);}

.detail-modal{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.6); display:grid; place-items:center;
  z-index:999; opacity:0; visibility:hidden; transition:0.4s;
}
.detail-modal.open{opacity:1; visibility:visible;}
.modal-content{
  background:white; width:90%; max-width:600px; padding:40px; border-radius:12px;
  position:relative; transform:scale(0.8); transition:0.5s;
}
.detail-modal.open .modal-content{transform:scale(1);}
.close{position:absolute; top:15px; right:20px; font-size:24px; cursor:pointer;}

.skill-items{display:flex; gap:15px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
.skill-item{
  background:#8B0000; color:white; padding:12px 20px; border-radius:50px;
  font-size:16px; box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.hero-title{font-size:56px; color:#8B0000; margin-bottom:10px; text-shadow:0 2px 10px rgba(0,0,0,0.1);}
.hero-sub{font-size:22px; color:#333;}

/* 故宫首页 */

.page1 {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.bg-slider {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}
.bg-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.bg-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(252, 252, 252);
  opacity: 0.2;
}
.bg-item.active {
  opacity: 1;
}

.hero-title-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}
.main-title {
  font-size: 72px;
  color: #c11414;
  margin-bottom: 10px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.2);
  animation: titleFloat 2s ease forwards;
}


@keyframes titleFloat {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.page2 {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  padding: 100px 0;
}
.page2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(214, 214, 214, 0.742);
  z-index: 0;
}

.content-wrap {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 20px;
}
.section-arch {
  flex-direction: row-reverse;
}

.text-box {
  flex: 1;
  background: rgba(255,255,255,0.9);
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  opacity: 0;
  transition: all 1.1s ease;
}
.text-box h2 {
  font-size: 28px;
  color: #8B0000;
  margin-bottom: 15px;
}
.text-box p {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.img-box {
  flex: 1;
  opacity: 0;
  transition: all 1.1s ease;
}
.img-box img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.btn {
  display: inline-block;
  padding: 10px 22px;
  background: #8B0000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}
.btn:hover {
  background: #B22222;
  transform: scale(1.05);
}


.slide-left { transform: translateX(-60px); }
.slide-right { transform: translateX(60px); }
.zoom-in { transform: scale(0.8); }
.fade-up { transform: translateY(50px); }
.flip-in { transform: rotateY(60deg); }
.bounce-in { transform: translateY(40px) scale(0.9); }

/* 滚动到视图 → 动画触发 */
.section-item.show .text-box,
.section-item.show .img-box {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0);
}

/* 3D 相册区域 */
.album-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.album-title {
  font-size: 30px;
  color: #8B0000;
  margin-bottom: 40px;
  text-align: center;
}

/* 3D 旋转相册 */
.album-3d {
  width: 280px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate3d 12s linear infinite;
}
.album-item {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.album-item:nth-child(1) { transform: rotateY(0deg) translateZ(280px); }
.album-item:nth-child(2) { transform: rotateY(60deg) translateZ(280px); }
.album-item:nth-child(3) { transform: rotateY(120deg) translateZ(280px); }
.album-item:nth-child(4) { transform: rotateY(180deg) translateZ(280px); }
.album-item:nth-child(5) { transform: rotateY(240deg) translateZ(280px); }
.album-item:nth-child(6) { transform: rotateY(300deg) translateZ(280px); }

@keyframes rotate3d {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* 底部官网提示 */
.official-bottom {
  text-align: center;
  padding: 40px 0 80px;
}
.official-bottom p {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}
.official-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #8B0000;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.official-btn:hover {
  background: #B22222;
  transform: scale(1.08);
}