/* ============================================================
   欢乐城十周年电子函 H5 — 橘红金主题
   ============================================================ */
:root {
  --red-deep:   #7a1409;
  --red-main:   #a61b0d;
  --orange:     #e8420e;
  --orange-hi:  #ff6a2b;
  --gold:       #ffd98a;
  --gold-deep:  #e7b04c;
  --gold-pale:  #fff3d6;
  --ink:        #fff8ec;
  --serif: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 微信默认分享卡片缩略图引导（零高度裁剪隐藏，不参与合成层，勿删） */
.share-thumb-wrap {
  height: 0; width: 0;
  overflow: hidden;
  position: absolute;
  line-height: 0; font-size: 0;
  pointer-events: none;
}
.share-thumb { display: block; width: 1px; height: 1px; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--red-deep);
  font-family: var(--serif);
  color: var(--ink);
  position: fixed;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}

/* ---------------- 顶部栏 ---------------- */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0;
  pointer-events: none;
}
.logo-wrap { width: 132px; height: 40px; pointer-events: auto; position: relative; }
.logo-img {
  width: 100%; height: 100%; object-fit: contain; object-position: left center;
  display: none;
}
.logo-img.loaded { display: block; }
.logo-fallback {
  display: block;
  font-size: 19px; font-weight: 700; letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.logo-img.loaded + .logo-fallback { display: none; }

/* 音乐开关（使用 img/bgm_btn.png 图标） */
.music-btn {
  pointer-events: auto;
  width: 40px; height: 40px;
  border: none;
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.music-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(60, 8, 2, .55));
}
.music-btn.playing .music-img {
  animation: spin 6s linear infinite;
}
.music-btn.disabled { opacity: .35; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------------- 翻页容器 ---------------- */
.slides {
  position: absolute; inset: 0;
  overflow: hidden;
  perspective: 1300px;
  perspective-origin: 50% 42%;
}
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate3d(0, 100%, 0) scale(.92) rotateX(9deg);
  opacity: .35;
  filter: blur(10px) brightness(.62);
  transition:
    transform .95s cubic-bezier(.77, 0, .18, 1),
    filter   .95s cubic-bezier(.77, 0, .18, 1),
    opacity  .95s cubic-bezier(.77, 0, .18, 1);
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
  visibility: hidden;
  overflow: hidden;
}
.slide.active {
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  opacity: 1;
  filter: blur(0) brightness(1);
  visibility: visible; z-index: 2;
}
.slide.prev {
  transform: translate3d(0, -100%, 0) scale(.92) rotateX(-9deg);
  opacity: .35;
  filter: blur(10px) brightness(.62);
  visibility: visible; z-index: 1;
}
/* 向后翻页时，旧页沉到下方 */
.slide.below {
  transform: translate3d(0, 100%, 0) scale(.92) rotateX(9deg);
  opacity: .35;
  filter: blur(10px) brightness(.62);
  visibility: visible; z-index: 1;
}

/* 新页进入：斜向光泽扫过 */
.slide.active .slide-inner::before {
  content: ""; position: absolute; inset: -60%;
  pointer-events: none; z-index: 6;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255, 240, 205, .16) 47%,
    rgba(255, 226, 168, .34) 50%,
    rgba(255, 240, 205, .16) 53%,
    transparent 60%);
  transform: translateX(-70%) skewX(-14deg);
  animation: sweep 1.25s cubic-bezier(.3, .6, .3, 1) .5s both;
}
@keyframes sweep {
  from { transform: translateX(-70%) skewX(-14deg); }
  to   { transform: translateX(70%)  skewX(-14deg); }
}

/* 当前页背景：缓慢推镜（Ken Burns），让画面有呼吸感 */
.slide.active .slide-bg {
  animation: kenburns 14s ease-out both;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.085); }
}

/* 背景层：图片占位 + 纯代码氛围兜底 */
.slide-bg {
  position: absolute; inset: -12px;
  background-color: transparent;
  background-size: cover; background-position: center;
  z-index: 0;
}
/* 橘红渐变兜底底色（无背景图时同样成立） */
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 106, 43, .55), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(58, 8, 3, .85), transparent 65%),
    linear-gradient(175deg, var(--red-main) 0%, var(--red-deep) 58%, #4d0c04 100%);
}
.slide-bg::after {
  content: ""; position: absolute; inset: 0;
  background: none;
}

/* ---------------- 装饰：光斑 / 粒子 ---------------- */
.slide::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 26% at 18% 22%, rgba(255, 180, 84, .16), transparent 70%),
    radial-gradient(30% 22% at 84% 72%, rgba(255, 106, 43, .18), transparent 70%);
}
.sparkles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.spark {
  position: absolute; bottom: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 160, .95), rgba(255, 160, 60, 0));
  animation: floatUp linear infinite;
  opacity: 0;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .35; }
  100% { transform: translateY(-108vh) scale(1.15); opacity: 0; }
}

/* ---------------- 内容排版 ---------------- */
.slide-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 480px;
  height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 78px) 10px calc(env(safe-area-inset-bottom, 0px) + 58px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

/* 文案入场动画 */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}
.slide.active .reveal {
  animation: fadeUp .95s cubic-bezier(.22, .8, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- 封面 ---------------- */
.cover-badge {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.badge-year {
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 3px;
  color: var(--gold-pale);
  opacity: .85;
}
/* 十周年纪念徽章 */
.medal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255, 217, 138, .6);
  background: radial-gradient(circle at 50% 32%, rgba(255, 150, 60, .30), rgba(90, 12, 5, .55));
  box-shadow: 0 0 0 4px rgba(255, 180, 84, .12), inset 0 0 16px rgba(255, 180, 84, .22), 0 0 22px rgba(255, 120, 50, .35);
  position: relative;
}
.medal::before {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 217, 138, .45);
}
.medal b {
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff6dd 10%, var(--gold) 55%, #d99a3a 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.medal i {
  font-style: normal;
  font-size: 11px; letter-spacing: 4px; text-indent: 4px;
  color: var(--gold);
  margin-top: 3px;
}
.cover-title {
  font-size: 42px; font-weight: 700;
  line-height: 1.35; letter-spacing: 3px;
  background: linear-gradient(180deg, #ffffff 8%, #fff6df 46%, #ffe3ae 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(100, 30, 6, .8));
}
.cover-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 22px;
}
.cover-divider i {
  width: 74px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.cover-divider i:last-child { transform: scaleX(-1); }
.cover-divider em {
  font-style: normal; font-size: 14px; color: var(--gold);
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .55; transform: scale(1);} 50% { opacity: 1; transform: scale(1.25);} }
.cover-subtitle {
  font-size: 17.5px; line-height: 1.85; letter-spacing: 1.5px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(90, 30, 8, .75), 0 0 12px rgba(120, 40, 10, .5);
}
.cover-hint {
  margin-top: 52px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 4px;
  color: rgba(255, 243, 214, .62);
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .45;} 50% { opacity: 1;} }

/* ---------------- 章节页 ---------------- */
/* PART 标签（按需求隐藏） */
.part-tag { display: none; }
.part-tag span {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold);
  border: 1px solid rgba(255, 217, 138, .5);
  border-radius: 999px;
  padding: 5px 18px 5px 22px;
  background: rgba(74, 10, 4, .4);
}
.part-title {
  font-size: 32px; font-weight: 700;
  letter-spacing: 6px; text-indent: 6px;
  background: linear-gradient(180deg, #ffffff 10%, #fff6df 55%, #ffe3ae 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(100, 30, 6, .8));
}
.part-line {
  width: 52px; height: 3px; border-radius: 2px;
  margin: 8px 0 12px;
  background: linear-gradient(90deg, transparent, var(--orange-hi), var(--gold), var(--orange-hi), transparent);
  box-shadow: 0 0 10px rgba(255, 130, 60, .6);
}
.part-body p {
  font-size: 16.5px; line-height: 1.62; letter-spacing: .8px;
  margin-bottom: 5px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(90, 30, 8, .7), 0 0 10px rgba(110, 35, 8, .45);
}
.part-body p.highlight {
  color: #fff8e6;
  font-weight: 600;
}
.part-body p.highlight.big {
  font-size: 18.5px; letter-spacing: 2.5px;
}

/* PART3 */
.part-lead {
  font-size: 16px; line-height: 1.58; letter-spacing: .8px;
  color: #ffffff; margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(90, 30, 8, .7), 0 0 10px rgba(110, 35, 8, .45);
}
.em-text {
  color: #fff3cf; font-weight: 700;
  border-bottom: 1px solid rgba(255, 240, 200, .7);
  padding: 0 2px;
}
.benefit-list {
  width: 100%;
  display: flex; flex-direction: column; gap: 5px;
}
.benefit-card {
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(60, 12, 5, .58), rgba(40, 8, 3, .55));
  backdrop-filter: blur(3px);
  padding: 9px 13px 8px;
  box-shadow: 0 6px 22px rgba(40, 4, 1, .35);
}
.benefit-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 17.5px; font-weight: 700; letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 7px;
  text-shadow: 0 1px 3px rgba(90, 30, 8, .6);
}
.benefit-icon { color: #ffd98a; font-size: 14px; }
.benefit-card p {
  font-size: 14.5px; line-height: 1.52; letter-spacing: .4px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(90, 30, 8, .55);
}
.benefit-card b { color: #ffe9b8; font-weight: 700; }

/* 结尾 */
.ending-sign {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px;
}
.sign-line {
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 138, .8));
}
.sign-line:last-child { transform: scaleX(-1); }
.sign-text {
  font-size: 15.5px; letter-spacing: 2px;
  color: #ffffff; opacity: .95;
  text-shadow: 0 1px 3px rgba(90, 30, 8, .6);
}
.replay-btn {
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 13.5px; letter-spacing: 3px;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(255, 217, 138, .6);
  border-radius: 999px;
  padding: 9px 30px;
  cursor: pointer;
  transition: all .3s;
}
.replay-btn:active { transform: scale(.95); background: rgba(255, 180, 84, .14); }

/* ---------------- 右侧指示器 ---------------- */
.dots {
  position: fixed; right: 12px; top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 13px;
}
.dot {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  position: relative;
}
.dot i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 226, 170, .45);
  transition: all .35s;
}
/* 当前页进度环 */
.dot svg {
  position: absolute; inset: 0;
  transform: rotate(-90deg);
  display: none;
}
.dot.active svg { display: block; }
.dot.active i { background: transparent; }
.dot.active svg circle {
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-linecap: round;
}
.dot.active svg circle.bg { stroke: rgba(255, 226, 170, .22); }

/* ---------------- 底部箭头提示 ---------------- */
.arrow-hint {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 60;
  width: 24px; height: 24px;
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.arrow-hint.show { opacity: .85; }
.arrow-hint span {
  position: absolute; inset: 0;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) scale(.8);
  animation: arrowMove 1.6s ease-in-out infinite;
}
@keyframes arrowMove {
  0%, 100% { transform: rotate(45deg) scale(.8) translate(0, 0); opacity: .5; }
  50%      { transform: rotate(45deg) scale(.8) translate(5px, 5px); opacity: 1; }
}

/* ---------------- 小屏适配 ---------------- */
@media (max-height: 700px) {
  .cover-title { font-size: 37px; }
  .medal { width: 64px; height: 64px; }
  .medal b { font-size: 27px; }
  .part-title { font-size: 28px; }
  .part-body p { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
  .part-lead { font-size: 14.5px; margin-bottom: 12px; }
  .benefit-card { padding: 9px 13px 8px; }
  .benefit-card p { font-size: 13.5px; line-height: 1.45; }
  .slide-inner { padding-top: calc(env(safe-area-inset-top, 0px) + 74px); }
}
@media (max-height: 620px) {
  .part-body p { font-size: 14px; line-height: 1.48; margin-bottom: 6px; }
  .part-title { font-size: 25px; letter-spacing: 5px; }
  .benefit-list { gap: 8px; }
  .slide-inner { padding-top: calc(env(safe-area-inset-top, 0px) + 70px); }
}

/* ============================================================
   第4、5页（PART3 / PART4）更紧凑：行距再收 + 标题到正文间距减半
   ============================================================ */
.slide:nth-child(4) .part-line,
.slide:nth-child(5) .part-line {
  margin: 4px 0 6px;             /* 原 8px/12px，减半 */
}
.slide:nth-child(4) .part-lead   { line-height: 1.48; }
.slide:nth-child(5) .part-body p { line-height: 1.5; margin-bottom: 4px; }
.slide:nth-child(4) .benefit-card p { line-height: 1.42; }
.slide:nth-child(5) .part-body p.highlight.big { line-height: 1.5; }
.slide:nth-child(5) .ending-sign { margin-top: 16px; }
.slide:nth-child(5) .replay-btn  { margin-top: 16px; }


/* ============================================================
   封面背景（img/home_bg.jpg）— 无滤镜，文字投影保证可读性
   ============================================================ */