/* ================= 首页样式：看看你的安全智商有多少 ================= */
:root {
  --navy: #12314a;
  --navy-2: #1d4c6b;
  --blue: #2a6f8f;
  --gold: #f0c27a;
  --gold-deep: #d89a35;
  --paper: #fdf7ea;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  background: #0d2338;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button, .start-btn { touch-action: manipulation; }

/* ---------- 背景层 ---------- */
.bg-layer { position: fixed; inset: 0; overflow: hidden; }

.bg-photo {
  position: absolute; inset: -4%;
  background: url("../assets/bg/library-day.jpg") center 42% / cover no-repeat;
  filter: saturate(1.05) blur(1px);
  transform: scale(1.06);
  animation: bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}

/* 蓝色调 + 顶部/底部压暗，保证文字可读 */
.bg-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255, 236, 190, .35), transparent 60%),
    linear-gradient(180deg, rgba(10, 34, 56, .78) 0%, rgba(12, 42, 66, .42) 38%, rgba(8, 26, 44, .82) 100%);
}

/* 斜向光束 */
.bg-rays {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(102deg,
    rgba(255, 255, 255, .07) 0 2px,
    rgba(255, 255, 255, 0) 2px 90px);
  mix-blend-mode: screen;
  animation: rayMove 18s linear infinite;
  opacity: .8;
}
@keyframes rayMove { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* 漂浮光点 */
.bg-particles { position: absolute; inset: 0; }
.bg-particles i {
  position: absolute; bottom: -6vh;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 200, .95), rgba(255, 226, 160, 0) 70%);
  animation: floatUp linear infinite;
  opacity: 0;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .75; }
  100% { transform: translateY(-108vh) scale(1.15); opacity: 0; }
}

/* ---------- 右上角标志 ---------- */
.brand {
  position: fixed; top: clamp(12px, 2.2vh, 26px); right: clamp(14px, 2.4vw, 38px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  opacity: 0; transform: translateY(-18px) scale(.9);
  animation: brandIn .9s cubic-bezier(.2, 1.5, .45, 1) 1.05s forwards;
  z-index: 6;
}
@keyframes brandIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.brand-logo {
  width: clamp(46px, 5.4vw, 78px); height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 20, 40, .55));
  animation: logoSpin 14s ease-in-out infinite;
}
@keyframes logoSpin {
  0%, 70%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(-7deg); }
  90% { transform: rotate(6deg); }
}
.brand-text { text-align: right; line-height: 1.35; }
.brand-text strong {
  display: block; font-size: clamp(12px, 1.15vw, 17px); letter-spacing: .1em;
  color: #fdf3dc; text-shadow: 0 2px 10px rgba(0, 20, 40, .7);
}
.brand-text span {
  display: block; font-size: clamp(9px, .78vw, 11px); letter-spacing: .04em;
  color: rgba(233, 244, 255, .72);
}

/* ---------- 主舞台 ---------- */
.stage {
  position: relative; z-index: 4;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: 9vh;
}

/* 标题：逐字从上掉落，停在上 1/3 中央 */
.title {
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 .06em;
  max-width: 80vw;
  font-size: clamp(28px, 5.5vw, 84px);
  font-weight: 900; letter-spacing: .04em;
  line-height: 1.1;
  perspective: 900px;
}
.title .ch {
  display: inline-block;
  background: linear-gradient(180deg, #fff8e2 4%, #ffdc94 42%, #e8a33d 78%, #c8811f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(120, 62, 12, .45)) drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
  transform: translateY(-135vh) rotate(var(--rot, 0deg));
  opacity: 0;
  animation: chDrop .95s cubic-bezier(.18, 1.35, .38, 1) var(--delay, 0s) forwards;
}
@keyframes chDrop {
  0%   { transform: translateY(-135vh) rotate(var(--rot, 0deg)) scale(.85); opacity: 0; }
  55%  { opacity: 1; }
  72%  { transform: translateY(1.6vh) rotate(0deg) scale(1.04); }
  86%  { transform: translateY(-.6vh) rotate(0deg) scale(.995); }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}
/* 落地光晕 */
.title .ch::after {
  content: ""; position: absolute;
}

.subtitle {
  margin: clamp(14px, 2.2vh, 26px) 0 0;
  font-size: clamp(13px, 1.5vw, 21px); letter-spacing: .22em;
  color: #eaf5ff;
  text-shadow: 0 2px 14px rgba(0, 20, 40, .8);
  opacity: 0; transform: translateY(16px);
  animation: subIn .8s ease-out 1.25s forwards;
}
@keyframes subIn { to { opacity: .95; transform: translateY(0); } }

/* ---------- 开始按钮 ---------- */
.start-wrap {
  margin-top: auto; margin-bottom: 16vh;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; transform: translateY(40px) scale(.7);
  animation: startIn .85s cubic-bezier(.18, 1.5, .4, 1) 1.45s forwards;
}
@keyframes startIn {
  60%  { opacity: 1; transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.start-btn {
  position: relative;
  padding: clamp(16px, 1.9vh, 22px) clamp(48px, 6vw, 92px);
  border: 2px solid rgba(255, 244, 214, .85);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f7ea3, #17496a 60%, #10344d);
  color: #fff7e2;
  font-family: inherit;
  font-size: clamp(20px, 2.3vw, 34px); font-weight: 800; letter-spacing: .3em;
  text-indent: .3em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 20, 40, .55), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -8px 18px rgba(0, 0, 0, .28);
  transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), box-shadow .18s;
  overflow: hidden;
}
.start-btn:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 38px rgba(0, 20, 40, .6), 0 0 0 6px rgba(240, 194, 122, .22), inset 0 2px 0 rgba(255, 255, 255, .4); }
.start-btn:active { transform: translateY(0) scale(.97); }
.start-btn-inner { position: relative; z-index: 2; }
.start-btn-glow {
  position: absolute; inset: -40% -10%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, .75) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sweep 3.2s ease-in-out 2.4s infinite;
}
@keyframes sweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

.start-tip {
  margin: 0; font-size: clamp(11px, 1.05vw, 15px); letter-spacing: .14em;
  color: rgba(232, 244, 255, .78); text-shadow: 0 2px 8px rgba(0, 20, 40, .8);
  opacity: 0; animation: subIn .7s ease-out 1.9s forwards;
}

/* 音乐提示样式已移除（界面上不再出现任何"音乐加载"字样） */

/* ---------- 左右熊小保 ---------- */
.bear {
  position: fixed; bottom: 0; z-index: 5;
  width: clamp(140px, 20vw, 300px); height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 18, 34, .55));
  pointer-events: none;
  opacity: 0;
}
.bear-left  { left: clamp(-20px, -1vw, 0px);  transform: translateX(-120%) rotate(-8deg); animation: bearLeftIn 1s cubic-bezier(.18, 1.4, .4, 1) 1.65s forwards, bobL 3.6s ease-in-out 2.7s infinite; }
.bear-right { right: clamp(-20px, -1vw, 0px); transform: translateX(120%) rotate(8deg);  animation: bearRightIn 1s cubic-bezier(.18, 1.4, .4, 1) 1.8s forwards, bobR 4.1s ease-in-out 2.9s infinite; }
@keyframes bearLeftIn  { to { opacity: 1; transform: translateX(0) rotate(-2deg); } }
@keyframes bearRightIn { to { opacity: 1; transform: translateX(0) rotate(2deg); } }
@keyframes bobL {
  0%, 100% { transform: translateX(0) rotate(-2deg) translateY(0); }
  50%      { transform: translateX(0) rotate(-2deg) translateY(-12px); }
}
@keyframes bobR {
  0%, 100% { transform: translateX(0) rotate(2deg) translateY(0); }
  50%      { transform: translateX(0) rotate(2deg) translateY(-16px); }
}

/* ---------- 页脚 ---------- */
.foot {
  position: fixed; left: 0; right: 0; bottom: clamp(8px, 1.4vh, 16px);
  text-align: center; font-size: clamp(10px, .95vw, 13px);
  letter-spacing: .12em; color: rgba(220, 236, 250, .55);
  opacity: 0; animation: subIn .8s ease-out 2.2s forwards;
  z-index: 6; pointer-events: none;
}
.foot .dot { margin: 0 8px; }

/* ---------- 离场动画 ---------- */
body.leaving .title .ch { animation: chUp .5s ease-in forwards; }
@keyframes chUp { to { transform: translateY(-40vh) rotate(12deg); opacity: 0; } }
body.leaving .bear-left  { animation: bearOut .5s ease-in forwards; }
body.leaving .bear-right { animation: bearOut .5s ease-in forwards; }
@keyframes bearOut { to { transform: translateX(0) translateY(60vh); opacity: 0; } }
body.leaving .brand, body.leaving .foot, body.leaving .subtitle { animation: fadeOut .35s ease-in forwards; }
@keyframes fadeOut { to { opacity: 0; } }
body.leaving .start-wrap { animation: startOut .4s ease-in forwards; }
@keyframes startOut { to { transform: scale(1.35); opacity: 0; } }

@media (max-width: 620px) {
  .bear { width: 32vw; }
  .start-wrap { margin-bottom: 20vh; }
}

/* ===================== 进入页（解锁音乐 + 第一次点击） ===================== */
/* 还没点"进入"之前，先把首页的入场动画全部冻住，点完再一起播 */
body.pre-anim > *:not(.gate) { animation-play-state: paused !important; }
body.pre-anim > *:not(.gate) * { animation-play-state: paused !important; }

.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(28, 78, 110, .78), rgba(6, 20, 34, .96));
  backdrop-filter: blur(7px);
  transition: opacity .45s ease, transform .45s ease;
}
.gate.gone { opacity: 0; transform: scale(1.06); pointer-events: none; }
.gate-inner {
  text-align: center; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.gate-logo {
  width: clamp(72px, 16vw, 110px); height: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 15, 30, .7));
  animation: gateFloat 3s ease-in-out infinite;
}
@keyframes gateFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.gate-name {
  margin: 0; font-size: clamp(18px, 5.2vw, 30px); font-weight: 900; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff8e2, #ffd98f 55%, #e0a23c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .5));
}
.gate-btn {
  margin-top: 6px;
  padding: clamp(13px, 2vh, 18px) clamp(34px, 9vw, 60px);
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: clamp(16px, 4.4vw, 22px); font-weight: 800; letter-spacing: .18em;
  color: #06304a;
  background: linear-gradient(180deg, #ffeec4, #f0c27a 60%, #d9a349);
  border: 2px solid #fff6de;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 0 rgba(240, 194, 122, .5);
  animation: gatePulse 1.9s ease-out infinite;
  touch-action: manipulation;
}
@keyframes gatePulse {
  0%   { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 0 rgba(240, 194, 122, .55); }
  70%  { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 22px rgba(240, 194, 122, 0); }
  100% { box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 0 rgba(240, 194, 122, 0); }
}
.gate-btn:active { transform: scale(.96); }

/* ===================== 手机竖屏适配 ===================== *//* 手机竖屏时在第 6 个字后换行用的占位元素（桌面端不显示） */
.title .brk { display: none; }

@media (max-width: 720px) {
  .stage { padding-top: 12.5vh; }

  .title {
    max-width: 94vw;
    font-size: clamp(26px, 9.4vw, 46px);
    letter-spacing: .02em;
    row-gap: .06em;
  }
  .title .brk { display: block; flex-basis: 100%; height: 0; }
  .subtitle { font-size: 12.5px; letter-spacing: .14em; margin-top: 12px; }

  .brand { top: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; gap: 4px; }
  .brand-logo { width: 42px; }
  .brand-text strong { font-size: 11px; letter-spacing: .02em; }
  .brand-text span { display: none; }

  .start-wrap { margin-bottom: 22vh; gap: 10px; }
  .start-btn {
    padding: 14px 40px; font-size: 20px; letter-spacing: .22em; text-indent: .22em;
  }
  .start-tip { font-size: 10.5px; letter-spacing: .06em; }

  .bear { width: 33vw; }
  .bear-left { left: -10px; }
  .bear-right { right: -10px; }
  .foot {
    font-size: 9.5px; letter-spacing: .04em;
    bottom: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .foot .dot { margin: 0 4px; }
}

/* 横屏矮屏（手机横过来）：整体压扁，别让按钮被熊挡住 */
@media (max-width: 900px) and (max-height: 480px) {
  .stage { padding-top: 3vh; }
  .title { font-size: clamp(20px, 5.4vw, 34px); max-width: 78vw; }
  .subtitle { margin-top: 4px; font-size: 11px; }
  .start-wrap { margin-bottom: 6vh; gap: 6px; }
  .start-btn { padding: 10px 30px; font-size: 17px; }
  .start-tip { font-size: 10px; }
  .bear { width: 20vw; }
  .brand-logo { width: 34px; }
  .brand-text { display: none; }
  .foot { display: none; }
}