@charset "utf-8";

/* ============================================================
   协和医院160周年庆 · 引导页独立样式
   说明：
   - 此文件仅由 guide.html 引用，不混入 public.css / index.css
   - 不改动首页、二级页任何样式
   - 动画完全用 CSS transition + class 驱动，JS 只负责切 class
   ============================================================ */

/* ---------- 引导页专用字体 ---------- */
@font-face {
  font-family: 'SourceHanSerifCN-Heavy';
  src: url('../fonts/SOURCEHANSERIFCN-HEAVY.OTF');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Light';
  src: url('../fonts/HarmonyOS_Sans_SC_Light.ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---------- rem 基准（仅引导页自身生效） ---------- */
/* 设计稿按 1920 宽切图，1rem = 100px；与首页 index.css 保持一致，
   但完全独立定义，不依赖 public.css */
html {
  font-size: 5.2083333333333vw;
}

@media screen and (min-width: 1921px) {
  html {
    font-size: min(5.2083333333333vw, 9.2592592593vh);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 85px;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 13.33333333vw;
  }
}

/* ---------- 基础重置（最小化，避免污染全局） ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 底层只用深色兜底即可：第3帧始终保持不透明铺满全屏，
     离开时直接跳转首页，不需要靠底层露图来做过渡（所以这里不铺任何背景图）。 */
  background: #0b0d16;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 引导页舞台 ---------- */
.guide-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  transition: opacity 0.9s ease;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: #fff;
}

/* ---------- 通用帧 ---------- */
.guide-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease, transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, visibility, transform;
}

.guide-frame__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 图片未加载时的兜底背景，避免白屏 */
.guide-frame__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #2a0a0a 0%, #0b0d16 60%),
    radial-gradient(ellipse at 70% 80%, #0a1a2e 0%, #0b0d16 60%);
  z-index: -1;
}

/* ---------- 第1帧：门关（多图层拼接） ---------- */
.guide-frame--closed {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 3;
  background: url(../images/guide-1.jpg) no-repeat center center / cover;
}

/* 左右门 */
.guide-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.guide-door--left {
  left: 0;
}

.guide-door--right {
  right: 0;
}

/* 左右门为静态底板：不做左右合拢/位移，也不做入场动画，直接原位呈现 */
.guide-door__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: none;
}

/* 左右门顶部小字（仅第1帧） */
.guide-door__text {
  position: absolute;
  top: 12%;
  width: 100%;
  text-align: center;
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.18rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.2rem;
  letter-spacing: 1px;
  color: rgba(255, 214, 138, 0.9);
  text-shadow: -0.03rem 0.05rem 0.06rem rgba(123, 92, 74, 0.6);
  opacity: 0;
  animation: textFadeIn 0.8s ease 1.4s forwards;
  pointer-events: none;
  z-index: 2;
}

.guide-door__text--left {
  left: 0;
}

.guide-door__text--right {
  right: 0;
}

/* 门上的天数倒计时数字：数值由 public.js 的 $('.djs b') 写入 */
.guide-door__text .djs b {
  font-variant-numeric: tabular-nums;
  font-weight: inherit;
}

/* 第2帧底部两行字（原第1帧左右门顶部文字移到底部中间） */
.guide-bottom-text {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

.guide-bottom-text__line {
  margin: 0;
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.18rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.2rem;
  letter-spacing: 1px;
  color: rgba(255, 214, 138, 0.9);
  text-shadow: -0.03rem 0.05rem 0.06rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(0.15rem);
  transition: opacity 0.9s ease 0.7s, transform 0.9s ease 0.7s;
  white-space: nowrap;
}

.guide-bottom-text__line:first-child {
  margin-bottom: 0.08rem;
}

/* 底部倒计时数字：数值由 public.js 的 $('.djs b') 写入 */
.guide-bottom-text .djs b {
  font-variant-numeric: tabular-nums;
  font-weight: inherit;
}

@keyframes textFadeIn {
  to {
    opacity: 1;
  }
}


/* 中间光束：单纯从无到有渐显，不做缩放/模糊/亮度变化 */
.guide-light-beam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  /* 光束在 2.6s 内亮到位（原 5s 太拖，导致第1帧迟迟没有“停稳”的感觉） */
  animation: beamFadeIn 2.6s ease 0.3s forwards;
}

.guide-light-beam__img {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  max-width: 100vw;
  object-fit: cover;
}

/* 光束：单纯 0 → 1 渐显 */
@keyframes beamFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 光晕：同样改为简单淡入到目标透明度 */
@keyframes beamHalo {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.4;
  }
}

/* 门缝微光兜底（无 beam 图时显示） */
.guide-frame__shine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 214, 132, 0) 0%, rgba(255, 214, 132, 0.6) 50%, rgba(255, 214, 132, 0) 100%);
  filter: blur(2px);
  opacity: 0.5;
  /* animation: doorShine 2.5s ease-in-out infinite; */
  z-index: 1;
}

@keyframes doorShine {

  0%,
  100% {
    opacity: 0.3;
    filter: blur(2px);
  }

  50% {
    opacity: 0.8;
    filter: blur(4px);
  }
}

/* 中间 Logo（160周年徽章） */
.guide-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}

.guide-logo-center__img {
  display: block;
  width: 3.94rem;
  height: auto;
  opacity: 0;
  transform: scale(0);
}

/* 第1帧 logo：从 0 直接到 80%，不带回弹/过冲 */
.guide-frame--closed .guide-logo-center__img {
  animation: logoInClosed 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* 第2帧 logo：从 80% 开始，门打开时同步放大到 100%，动画放慢 */
.guide-frame--open .guide-logo-center__img {
  opacity: 1;
  transform: scale(0.6);
  transition: transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.guide-body.is-open .guide-frame--open .guide-logo-center__img {
  transform: scale(1);
}

@keyframes logoInClosed {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(0.6);
  }
}

/* 底部主标题（第1帧在底部；第2帧由下方规则移到顶部） */
.guide-main-title {
  position: absolute;
  left: 50%;
  bottom: 11.5%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

.guide-main-title__cn,
.guide-main-title__en {
  margin: 0;
  opacity: 0;
  transform: translateY(0.4rem);
  animation: titleUpIn 0.9s ease 1.6s forwards;
}

.guide-main-title__cn {
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.24rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.24rem;
  letter-spacing: 0.02rem;
  text-shadow: -0.03rem 0.05rem 0.06rem rgba(123, 92, 74, 0.6);
  color: rgba(255, 214, 138, 0.9);
  margin-bottom: 0.15rem;
}

.guide-main-title__en {
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.2rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.2rem;
  letter-spacing: 0.02rem;
  color: rgba(255, 214, 138, 0.9);
  text-shadow: -0.03rem 0.05rem 0.06rem rgba(123, 92, 74, 0.6);
  animation-delay: 1.8s;
}

@keyframes titleUpIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 第2帧：门向内打开约30%（3D 透视效果） ---------- */
.guide-frame--open {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  z-index: 2;
  /* 透视：让左右门的 rotateY 呈现近大远小的真实 3D 观感 */
  perspective: 1500px;
  background: url(../images/guide-1.jpg) no-repeat center center / cover;
}

/* 第2帧的非门元素（文字/Logo/光效）外层容器：
   不参与定位（position:static，子元素的绝对定位仍相对帧本身），
   只用于切第三帧时整体快速退场 */
.guide-open-ui {
  /* flex 子项上 z-index 生效：保证里面的文字/光效层级仍在门之上 */
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 第2帧的门：铰链在外侧，门绕铰链向屏幕里侧翻开 */
.guide-frame--open .guide-door {
  transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.8s ease;
  will-change: transform;
}

.guide-frame--open .guide-door--left {
  transform-origin: left center;
}

.guide-frame--open .guide-door--right {
  transform-origin: right center;
}

/* 第2帧：门开后底部的横向光线（images/guide-2dx.png，1918×275） */
/* 随门打开从中间向两侧扩散：不用 clip-path（裁切边是硬的），
   改用带羽化的 mask 渐变从小往大展开，扩散边缘始终是柔化的 */
.guide-floor-light {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 14% 100%;
  mask-size: 14% 100%;
  /* 光扩散比门开更慢更明显：3.5s，起始略晚于门开 */
  transition: opacity 1.2s ease 0.2s,
    -webkit-mask-size 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s,
    mask-size 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
}

.guide-floor-light__img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-body.is-open .guide-frame--open .guide-floor-light {
  opacity: 1;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* 门缝光：随门打开由窄变宽 */
.guide-frame--open .guide-frame__light {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 214, 132, 0.45) 0%, rgba(255, 214, 132, 0) 72%);
  transition: width 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}

/* 第2帧的中央元素：直接呈现最终态，不重复播放入场动画 */
.guide-frame--open .guide-light-beam {
  opacity: 1;
  transform: translateX(-50%) scale(1, 1);
  filter: blur(0) brightness(1);
  animation: none;
}

.guide-frame--open .guide-light-beam::before {
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}

/* 第2帧顶部院名（原第1帧底部主标题移上来）：错峰从上淡入 */
.guide-frame--open .guide-main-title {
  top: 9%;
  bottom: auto;
}

.guide-frame--open .guide-main-title__cn,
.guide-frame--open .guide-main-title__en {
  animation: none;
  opacity: 0;
  transform: translateY(-0.15rem);
  transition: opacity 0.9s ease 0.5s, transform 0.9s ease 0.5s;
}

.guide-frame--open .guide-main-title__en {
  transition-delay: 0.7s, 0.7s;
}

.guide-frame--open .guide-bottom-text__line {
  animation: none;
}



/* ---------- 第3帧：160周年倒计时 ---------- */
/* 第3帧：门开满前后淡入，与第2帧背景溶解交接 */
.guide-frame--countdown {
  opacity: 0;
  visibility: hidden;
  /* 起始略大：切入时缓慢缩小到 1，与第2帧的溶解叠成一次"推近"的镜头运动 */
  transform: scale(1.05);
  z-index: 1;
  /* 实际进入节奏由下方 .guide-body.is-countdown 规则控制（含延迟） */
  transition: opacity 0.9s ease,
    visibility 0.9s ease,
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 阶段状态驱动（由 JS 切换 body class） ---------- */

/* 阶段1 → 阶段2：门关 → 门微开 */
/* 第1帧：只要流程离开 closed 阶段就永久隐藏（否则切状态时它会回到 opacity:1 / z-index:3 压在第2、3帧上） */
.guide-body.is-open .guide-frame--closed,
.guide-body.is-countdown .guide-frame--closed,
.guide-body.is-leave .guide-frame--closed {
  opacity: 0 !important;
  visibility: hidden !important;
}

.guide-body.is-open .guide-frame--open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  /* 切入第2帧要干脆：0.6s 淡入（覆盖基础 1.2s），门随即开始翻开，和第1帧接得上 */
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 门向里开约50%：绕外侧铰链向屏幕内侧翻转，微暗一点模拟背光 */
.guide-body.is-open .guide-frame--open .guide-door--left {
  transform: rotateY(45deg);
  filter: brightness(0.88);
}

.guide-body.is-open .guide-frame--open .guide-door--right {
  transform: rotateY(-45deg);
  filter: brightness(0.88);
}

.guide-body.is-open .guide-frame--open .guide-frame__light {
  width: 90%;
  opacity: 0;
}

/* 第2帧顶部院名、底部两行字：跟随门开错峰浮现 */
.guide-body.is-open .guide-frame--open .guide-main-title__cn,
.guide-body.is-open .guide-frame--open .guide-main-title__en,
.guide-body.is-open .guide-frame--open .guide-bottom-text__line {
  opacity: 1;
  transform: translateY(0);
}

.guide-body.is-open .guide-frame--open .guide-light-beam::after {
  /* transition: all .5s .5s;
  filter: blur(0); */
  animation: _lightIn 0.5s ease 2.5s forwards;
}

@keyframes _lightIn {
  0% {
    filter: blur(0);
  }

  50% {
    filter: blur(6px);
  }

  100% {
    filter: blur(6px);
    opacity: 0;
    transform: translateX(-50%) scale(10);
  }
}

/* 阶段2 → 阶段3：第2帧元素依次溶解、第3帧同时浮现，两帧交叉溶解（cross-dissolve） */

/* ① 外层容器：只做整体淡出。
   ⚠️ 这里绝对不能加 transform：容器是 static + 0 尺寸（子元素全绝对定位），
   一旦加 transform 它就成为子元素的包含块，文字/Logo 会瞬间跳到画面中心，非常生硬。 */
.guide-body.is-countdown .guide-frame--open .guide-open-ui {
  opacity: 0;
  transform: none;
  transition: opacity 0.9s ease 0s;
}

/* ② 底部两行字最先隐去（0.55s，轻微下沉消散） */
.guide-body.is-countdown .guide-frame--open .guide-bottom-text__line {
  opacity: 0;
  transform: translateY(0.08rem);
  transition: opacity 0.55s ease 0s, transform 0.55s ease 0s;
}

/* ③ 顶部院名随后（0.6s，轻微上浮） */
.guide-body.is-countdown .guide-frame--open .guide-main-title__cn,
.guide-body.is-countdown .guide-frame--open .guide-main-title__en {
  opacity: 0;
  transform: translateY(-0.1rem);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

/* ④ Logo 最后走：带一点放大，像被推入景深，正好和第3帧"160周年"大标题的浮现交叠 */
.guide-body.is-countdown .guide-frame--open .guide-logo-center__img {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.75s ease 0.15s, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

/* ⑤ 第2帧（门 + 背景）：0.25s 起、0.9s 内溶解干净（约 1.15s 退场），与第3帧的淡入重叠成交叉溶解 */
.guide-body.is-countdown .guide-frame--open {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.9s ease 0.25s, visibility 0.9s ease 0.25s, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

/* 门从50%继续翻到100%（90度侧面完全看不见），沿用同一曲线，1.2s 缓收
   —— 让门的翻转贯穿整段溶解，而不是先停门再切画面 */
.guide-body.is-countdown .guide-frame--open .guide-door--left,
.guide-body.is-countdown .guide-frame--open .guide-door--right {
  transition-duration: 1.2s, 1.2s;
}

.guide-body.is-countdown .guide-frame--open .guide-door--left {
  transform: rotateY(88deg);
  filter: brightness(0.85);
}

.guide-body.is-countdown .guide-frame--open .guide-door--right {
  transform: rotateY(-88deg);
  filter: brightness(0.85);
}

/* 门缝光保持熄灭，不回闪 */
.guide-body.is-countdown .guide-frame--open .guide-frame__light {
  opacity: 0;
}

.guide-body.is-countdown .guide-frame--countdown {
  opacity: 1;
  visibility: visible;
  /* 从略大缓慢回到原始尺寸：像镜头穿过门后被轻轻推近，和第2帧的溶解连成一体 */
  transform: scale(1);
  z-index: 3;
  /* 0.15s 起、0.9s 铺满（1.05s 到位）；此时第2帧还在溶解（到 1.15s），两帧真正交叉溶解 */
  transition: opacity 0.9s ease 0.15s, visibility 0.9s ease 0.15s, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

/* 第3帧内容：在背景溶解的过程中就错峰浮现，与第2帧元素退场交叠（大标题 → 倒计时 → 金句 → 滚动提示） */
.guide-body.is-countdown .guide-countdown-head {
  transition-delay: 0.8s, 0.8s;
}

.guide-body.is-countdown .guide-countdown {
  transition-delay: 1s, 1s;
}

.guide-body.is-countdown .guide-slogan {
  transition-delay: 1.2s, 1.2s;
}

.guide-body.is-countdown .guide-scroll-hint {
  transition-delay: 1.4s;
}

/* 阶段3 → 离开：第3帧保持完整画面「静止不动」，不做任何淡出/位移，
   静置约 1s（时长见 guide.js 的 leaveStillDuration）后直接跳转首页。
   注意：setStep('leave') 会移除 is-countdown，子元素会回到基础态 opacity:0，
   所以这里必须把整帧和 4 个子元素都显式锁回可见、并锁死各自 transform，避免画面闪一下。 */
.guide-body.is-leave .guide-frame--countdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: none !important;
}

.guide-body.is-leave .guide-frame--countdown .guide-countdown-head,
.guide-body.is-leave .guide-frame--countdown .guide-countdown,
.guide-body.is-leave .guide-frame--countdown .guide-slogan,
.guide-body.is-leave .guide-frame--countdown .guide-scroll-hint {
  opacity: 1 !important;
  transition: none !important;
}

.guide-body.is-leave .guide-frame--countdown .guide-countdown-head {
  transform: translateX(-50%);
}

.guide-body.is-leave .guide-frame--countdown .guide-countdown {
  transform: translate(-50%, -50%);
}

.guide-body.is-leave .guide-frame--countdown .guide-slogan,
.guide-body.is-leave .guide-frame--countdown .guide-scroll-hint {
  transform: translateX(-50%);
}

/* ---------- 第三屏大标题 + 院名 ---------- */
.guide-countdown-head {
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.guide-countdown-head__big {
  margin: 0;
  font-family: SourceHanSerifCN-Heavy;
  font-size: 2.96rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 2.96rem;
  letter-spacing: -0.06rem;
  text-shadow: 2px 4px 6px 0px rgba(58, 22, 0, 0.45),
    inset 1px 2px 4px 1px rgba(91, 38, 0, 0.35);
  line-height: 1;
  color: #ffd68a;
  background: linear-gradient(47deg, #daac70 0%, #ebd296 15%, #e9d29a 50%, #e7c585 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.04rem 0.12rem rgba(0, 0, 0, 0.55));
}

.guide-countdown-head__big span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.2rem;
  font-family: SourceHanSerifCN-Heavy;
  font-size: 1.33rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1.33rem;
  letter-spacing: 0px;
  color: #ffd68a;
  background: linear-gradient(47deg, #dbb277 0%, #eac47e 15%, #ead29a 60%, #e3c489 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 4px 6px 0px rgba(58, 22, 0, 0.45),
    inset 1px 2px 4px 1px rgba(91, 38, 0, 0.35);
}

.guide-countdown-head__cn {
  margin: 0.5rem 0 0;
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.38rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.38rem;
  letter-spacing: 8px;
  text-shadow: 3px 5px 6px rgba(58, 22, 0, 0.45);
  color: rgba(255, 214, 138, 0.9);
}

.guide-countdown-head__en {
  margin: 0.2rem 0 0;
  font-family: SourceHanSerifCN-SemiBold;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.32rem;
  letter-spacing: 0.06rem;
  color: rgba(255, 214, 138, 0.9);
  text-shadow: 3px 5px 6px rgba(58, 22, 0, 0.45);
}

/* ---------- 倒计时（参考图：长条圆角框 + 内部分隔线） ---------- */
.guide-countdown {
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.4rem;
  width: 6.16rem;
  height: 1.41rem;
  background: url(../images/guide-3djs.png) no-repeat center center / 100% 100%;
  box-shadow: 0 0 0.24rem rgba(255, 214, 138, 0.1);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

.guide-countdown__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0.9rem;
  padding: 0 0.2rem 0.2rem 0.2rem;
}

.guide-countdown__item::after {
  content: '';
  position: absolute;
  right: -0.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.1rem;
  height: 0.69rem;
  background: url(../images/guide-3djs-x.png) no-repeat center center / 100% 100%;
}

.guide-countdown__item:last-child::after {
  display: none;
}

.guide-countdown__num {
  font-family: SourceHanSerifCN-Heavy;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.4rem;
  letter-spacing: 1px;
  color: #ebd092;
  text-shadow: 0 0 0.1rem rgba(255, 214, 138, 0.35);
  font-variant-numeric: tabular-nums;
  min-width: 0.72rem;
  text-align: center;
}

.guide-countdown__unit {
  font-family: SourceHanSansSC-Regular;
  font-size: 0.16rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.16rem;
  letter-spacing: 1px;
  color: #ebd092;
  margin-top: 0.1rem;
}

/* ---------- 口号（参考图：金色胶囊Badge，压在倒计时条下方） ---------- */
.guide-slogan {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.08rem 0.32rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #fff5d1 0%, #f0cc82 45%, #c88d3f 100%);
  font-family: SourceHanSerifCN-Heavy;
  font-size: 0.23rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0.05rem;
  color: #971212;
  text-align: center;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.7s, transform 0.8s ease 0.7s;
}

/* ---------- 向下滑动提示 ---------- */
.guide-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  z-index: 6;
  cursor: pointer;
  /* 文字+箭头整体一起轻微上下浮动 */
  animation: hintFloat 1.8s ease-in-out infinite;
  transition: opacity 0.6s ease;
  opacity: 0;
}

.guide-scroll-hint__text {
  font-family: SourceHanSerifCN-Heavy;
  font-size: 0.16rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.16rem;
  letter-spacing: 0.02rem;
  color: #ebdec0;
}

/* 双 V 形下滑箭头：金色细线，两支箭头垂直下落 + 错相循环（视觉是连续箭头流） */
.guide-scroll-hint__arrow {
  position: relative;
  width: 0.24rem;
  margin-top: 0.02rem;
  /* 箭头完全静态，不单独做动画；随容器整体浮动 */
}

.guide-scroll-hint__arrow::before,
.guide-scroll-hint__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.12rem;
  height: 0.12rem;
  border-right: 0.02rem solid #ebdec0;
  border-bottom: 0.02rem solid #ebdec0;
  transform: translateX(-50%) rotate(45deg);
}

/* 上箭头：偏暗（静态） */
.guide-scroll-hint__arrow::before {
  top: -0.05rem;
  opacity: 1;
}

/* 下箭头：满亮（静态） */
.guide-scroll-hint__arrow::after {
  top: 0.03rem;
  opacity: 0.3;
}

/* 整体上下轻微浮动（文字+箭头一起动） */
@keyframes hintFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(0.08rem);
  }
}

/* 第三屏入场：内容错峰淡入 */
.guide-body.is-countdown .guide-countdown-head,
.guide-body.is-countdown .guide-countdown,
.guide-body.is-countdown .guide-slogan,
.guide-body.is-countdown .guide-scroll-hint {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.guide-body.is-countdown .guide-countdown-head {
  transform: translateX(-50%);
}

.guide-body.is-countdown .guide-slogan,
.guide-body.is-countdown .guide-scroll-hint {
  transform: translateX(-50%);
}

/* ---------- 离开过渡：由 .guide-frame--countdown 整帧统一淡出（见上），露出底层首页背景 ---------- */

/* ---------- 防止引导页滚动影响（与首页 swiper 无关） ---------- */
.guide-body {
  touch-action: none;
}

/* ============================================================
   响应式：大屏与移动端适配
   ============================================================ */

/* ---------- 移动端（1024 及以下）不展示引导页 ----------
   入口由 guide.html 头部的守卫脚本直接 replace 到 index.html；
   这里再加一道样式保险：万一下载 / 执行有间隙，也只会露出深色底，
   不会闪出引导页的画面。 */
@media screen and (max-width: 1024px) {
  .guide-stage {
    display: none;
  }
}

/* 超宽屏（21:9）限制内容比例，避免纵向被裁切 */
@media screen and (min-aspect-ratio: 21/9) {
  .guide-frame__bg {
    background-size: cover;
  }
}

/* 平板 / 小屏横屏 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .guide-countdown-head__big {
    font-size: 0.9rem;
  }

  .guide-countdown-head__cn {
    font-size: 0.18rem;
  }

  .guide-countdown {
    top: 48%;
    padding: 0.12rem 0.28rem;
  }

  .guide-countdown__item {
    min-width: 0.8rem;
    padding: 0.05rem 0.1rem;
  }

  .guide-countdown__num {
    font-size: 0.42rem;
    min-width: 0.56rem;
  }

  .guide-countdown__unit {
    font-size: 0.14rem;
  }

  .guide-slogan {
    top: 56%;
    font-size: 0.16rem;
    padding: 0.06rem 0.24rem;
  }

  .guide-logo-center__img {
    width: 1.6rem;
  }

  .guide-main-title__cn {
    font-size: 0.18rem;
  }

  .guide-main-title__en {
    font-size: 0.12rem;
  }
}

/* 移动端竖屏 */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .guide-countdown-head {
    top: 12%;
  }

  .guide-countdown-head__big {
    font-size: 0.8rem;
  }

  .guide-countdown-head__big span {
    font-size: 0.2rem;
    margin-top: 0.1rem;
  }

  .guide-countdown-head__cn {
    font-size: 0.18rem;
  }

  .guide-countdown {
    top: 48%;
    padding: 0.12rem 0.24rem;
  }

  .guide-countdown__item {
    min-width: 0.72rem;
    padding: 0.05rem 0.08rem;
  }

  .guide-countdown__num {
    font-size: 0.42rem;
    min-width: 0.52rem;
  }

  .guide-countdown__unit {
    font-size: 0.14rem;
  }

  .guide-slogan {
    top: 56%;
    font-size: 0.18rem;
    padding: 0.06rem 0.24rem;
  }

  .guide-scroll-hint {
    bottom: 7%;
  }

  .guide-scroll-hint__text {
    font-size: 0.16rem;
  }

  .guide-door__text {
    top: 6%;
    font-size: 0.12rem;
    padding: 0 0.2rem;
    white-space: normal;
  }

  .guide-bottom-text {
    bottom: 6%;
    padding: 0 0.3rem;
  }

  .guide-bottom-text__line {
    font-size: 0.12rem;
    white-space: normal;
  }

  .guide-logo-center__img {
    width: 1.8rem;
  }

  .guide-main-title {
    bottom: 8%;
    white-space: normal;
    padding: 0 0.3rem;
  }

  .guide-main-title__cn {
    font-size: 0.18rem;
    margin-bottom: 0.06rem;
  }

  .guide-main-title__en {
    font-size: 0.12rem;
  }
}



/* 小屏手机 */
@media screen and (max-width: 375px) {
  .guide-countdown-head__big {
    font-size: 0.64rem;
  }

  .guide-countdown-head__big span {
    font-size: 0.16rem;
    margin-top: 0.08rem;
  }

  .guide-countdown-head__cn {
    font-size: 0.16rem;
  }

  .guide-countdown {
    padding: 0.1rem 0.2rem;
  }

  .guide-countdown__item {
    min-width: 0.62rem;
    padding: 0.04rem 0.05rem;
  }

  .guide-countdown__num {
    font-size: 0.36rem;
    min-width: 0.46rem;
  }

  .guide-countdown__unit {
    font-size: 0.12rem;
  }

  .guide-slogan {
    top: 56%;
    font-size: 0.16rem;
    padding: 0.05rem 0.2rem;
  }

  .guide-main-title__cn {
    font-size: 0.16rem;
  }

  .guide-main-title__en {
    font-size: 0.1rem;
  }

  .guide-logo-center__img {
    width: 1.5rem;
  }
}