/* === 字体与基础设置 === */
@font-face { font-family: 'MyDreamFont'; src: url('../font/dream.ttf'); }
@font-face { font-family: 'ContentArtFont'; src: url('../font/dream_art.OTF'); font-display: block; }

:root { --landing-bg: #150520; --landing-surface: #1a0b2e; --landing-accent: #d68aff; --landing-text: rgba(255, 255, 255, 0.9); --landing-glow: rgba(189, 0, 255, 0.6); }

body { background-color: var(--landing-bg); overflow-x: hidden; margin: 0; font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; color: var(--landing-text); }

/* === 视差背景 === */
.parallax-section { position: relative; width: 100%; height: 100vh; min-height: 100svh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.parallax-section img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#bg { object-fit: cover; z-index: 1; }

/* 月亮 z-index=2, 山=3. 所以月亮移动时自然会去山后面，无需改z-index */
#moon { width: 200px !important; height: 200px !important; top: 10% !important; left: 50% !important; transform: translateX(-50%); object-fit: contain; z-index: 2; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6)); }
#mountain { object-fit: cover; z-index: 3; top: 50px; }
#road { object-fit: cover; z-index: 20; transform: scale(1.05); top: 0; }

/* 容器居中，但不处理具体动画，动画交给内部元素 */
#hero-text { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; width: min(90vw, 980px); pointer-events: none; }
.btn-explore { pointer-events: auto; }

/* 标题样式 */
.title { font-family: 'MyDreamFont', serif; font-size: clamp(2.4rem, 5vw, 4.6rem); color: #fff; font-weight: 700; letter-spacing: 2px; margin-bottom: 26px; text-shadow: 0 0 40px var(--landing-glow); display: block; }

/* 按钮样式 */
.btn-explore { display: inline-block; padding: 14px 48px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; font-size: 1.1rem; text-decoration: none; border-radius: 999px; transition: background 0.3s, color 0.3s, box-shadow 0.3s; letter-spacing: 2px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.btn-explore:hover { background: #fff; color: #150520; box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }

/* === 内容区域布局 === */
.content-section { position: relative; z-index: 30; margin-top: -150px; padding: clamp(180px, 24vw, 320px) 50px clamp(120px, 16vw, 180px) 50px; background: linear-gradient(to bottom, rgba(21, 5, 32, 0) 0%, rgba(21, 5, 32, 0.85) 35%, #150520 100%); backdrop-filter: blur(5px); }

.content-box { max-width: 1200px; margin: 0 auto; } 

.intro-layout { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; text-align: left; padding-left: 0; }

/* === 左侧文字部分 === */
.text-column { flex: 1; min-width: 320px; padding-right: 10px; }

.art-text { font-family: 'ContentArtFont', serif !important; color: var(--landing-accent); text-shadow: 0 0 10px rgba(189, 0, 255, 0.3); }

h2.art-text { letter-spacing: 2px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 28px; color: #e0aaff; text-align: left; }

/* 诗歌正文样式 */
.poem-text { font-size: clamp(1.1rem, 2.3vw, 1.7rem); line-height: 2.1; color: rgba(255, 255, 255, 0.86); letter-spacing: 1px; margin-left: clamp(0px, 4vw, 60px); border-left: 2px solid rgba(214, 138, 255, 0.3); padding-left: clamp(16px, 2.6vw, 30px); min-height: 300px; }

/* 打字机光标效果 (可选) */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: #d68aff;
}
@keyframes blink { 50% { opacity: 0; } }

/* === 右侧卡片部分 === */
.card-column { flex: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; min-width: 320px; }

.card { position: relative; width: min(540px, 100%); height: 330px; background-color: #2a1b3d; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1000px; box-shadow: 0 12px 30px rgba(14, 8, 26, 0.45); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(189, 0, 255, 0.35);
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover .card-img {
  transform: scale(0);
}

.card__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; background-color: var(--landing-surface); transform: rotateX(-90deg); transform-origin: bottom; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.card:hover .card__content {
  transform: rotateX(0deg);
}

.card__title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: #e0aaff; font-weight: 700; font-family: 'ContentArtFont', serif; margin-bottom: 12px; }

.card__description { margin: 0; font-size: clamp(1rem, 2.2vw, 1.5rem); color: #ccc; line-height: 1.7; font-family: 'ContentArtFont', serif !important; text-shadow: 0 0 2px rgba(0,0,0,0.5); }

@media (max-width: 1024px) {
  #hero-text { top: 46%; }
  .content-section { margin-top: -120px; }
}

@media (max-width: 900px) {
  .intro-layout { gap: 24px; }
  .text-column { min-width: 100%; padding-right: 0; }
  .card-column { min-width: 100%; }
}

@media (max-width: 640px) {
  .title { letter-spacing: 1px; }
  .btn-explore { padding: 12px 32px; font-size: 1rem; }
  .content-section { padding: 180px 20px 120px 20px; }
  .poem-text { min-height: 220px; border-left-width: 1px; }
  .card { height: 280px; }
  .card__content { padding: 22px; }
}

.intro-simple { text-align: center; margin-bottom: 36px; }
.intro-simple h2 { font-family: 'ContentArtFont', serif; color: #e0aaff; font-size: clamp(2rem, 3.6vw, 3rem); margin: 0 0 12px 0; letter-spacing: 2px; }
.intro-simple p { margin: 0 auto; max-width: 760px; font-size: clamp(1rem, 2.2vw, 1.4rem); color: rgba(255, 255, 255, 0.82); line-height: 1.8; }

.danmaku-wall { background: rgba(30, 15, 45, 0.6); border: 1px solid rgba(214, 138, 255, 0.25); border-radius: 18px; padding: 24px; box-shadow: 0 18px 40px rgba(8, 4, 20, 0.5); backdrop-filter: blur(6px); }
.danmaku-stage { position: relative; height: clamp(220px, 36vw, 360px); overflow: hidden; }
.danmaku-item { position: absolute; left: 0; white-space: nowrap; font-family: 'ContentArtFont', serif; color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 2.2vw, 1.5rem); text-shadow: 0 0 16px rgba(214, 138, 255, 0.35); padding: 4px 10px; border-radius: 999px; background: rgba(27, 12, 40, 0.35); border: 1px solid rgba(214, 138, 255, 0.18); }

@media (max-width: 900px) {
  .intro-simple { text-align: left; }
}