/* ============================================================
   全屏翻书（乐谱册）：封面（手翻开）→ 扉页 → 主页
   技术要点与参考站一致：整屏一本书、书脊在左、
   perspective + rotateY(-180deg) 翻页、只播一次（sessionStorage）
   时间轴：0.15–0.7 手伸进来 · 0.75–1.7 翻封面 · 1.75–2.2 扉页 · 2.25–3.05 翻扉页
   ============================================================ */

#loader { display: none; }
.intro body { overflow: hidden; }
.intro #loader {
  display: block; position: fixed; inset: 0; z-index: 100; cursor: pointer;
  perspective: 260vmax; perspective-origin: 0% 50%;
  background: var(--navy-deep);
}
.book { position: absolute; inset: 0; transform-style: preserve-3d; }
.sheet {
  position: absolute; inset: 0; transform-origin: 0% 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden;
}

/* 封面：深蓝亚麻布面 + 烫金五线谱 + 音符，红书签 */
.cover {
  animation: eupho-turn 0.95s cubic-bezier(0.5, 0.05, 0.4, 1) 0.75s forwards;
  box-shadow: inset 1.4vmin 0 2.4vmin -1vmin rgba(0, 0, 0, 0.45);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
    radial-gradient(95% 85% at 58% 38%, #2C4770 0%, #223A5E 55%, #152244 100%);
}
.cover::before { /* 书脊 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5vmin;
  background: linear-gradient(90deg, #0A1220, #1B2C4C 70%, rgba(0, 0, 0, 0.6));
  border-right: 1px dashed rgba(233, 201, 123, 0.5);
  z-index: 1;
}
.cover::after { /* 五线谱烫金 */
  content: ""; position: absolute; inset: 0; opacity: 0.34;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(8vmin - 1px), rgba(233, 201, 123, 0.5) calc(8vmin - 1px) 8vmin);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.cv-frame {
  position: relative; z-index: 2;
  width: 66vmin; margin: 10vmin auto; padding: 7vmin 5vmin;
  text-align: center; display: grid; justify-items: center; gap: 2.2vmin;
  color: #E9C97B;
  border: 2px solid #D9A441; outline: 1px solid rgba(217, 164, 65, 0.55); outline-offset: 1.4vmin;
}
.cv-note { font-size: 7vmin; color: #F0D690; }
.cv-kicker { font-size: 2.2vmin; letter-spacing: 0.32em; opacity: 0.9; }
.cv-title {
  font-family: var(--font-bold);
  font-size: 11vmin; line-height: 0.95;
  background: linear-gradient(180deg, #F6DFA2, #C9A24B 60%, #EFD48E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.5vmin 0 rgba(0, 0, 0, 0.45));
}
.cv-rule { width: 20vmin; height: 2px; background: linear-gradient(90deg, transparent, #D9A441, transparent); }
.cv-sub { font-size: 2.1vmin; letter-spacing: 0.26em; color: #D8C08C; }
.cv-ribbon {
  position: absolute; left: 24%; top: -2vmin; z-index: 3;
  width: 2.4vmin; height: 30vmin;
  background: #C23A2B;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

/* 扉页：奶油色五线谱纸，红边距线 */
.flyleaf { animation: eupho-turn 0.8s cubic-bezier(0.5, 0.05, 0.4, 1) 2.25s forwards; }
.flyleaf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60%);
  animation: eupho-shade 0.95s ease-out 0.75s;
}
.fl-inner {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 2.6vmin;
  color: #2A2620;
  background:
    linear-gradient(90deg, transparent 10vmin, rgba(194, 58, 43, 0.5) 10vmin, rgba(194, 58, 43, 0.5) calc(10vmin + 2px), transparent calc(10vmin + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(6vmin - 1px), rgba(60, 96, 150, 0.28) calc(6vmin - 1px) 6vmin),
    radial-gradient(90% 80% at 50% 45%, #FCF9F0, #EFE7D4);
}
.fl-note { font-size: 9vmin; color: #C9A24B; animation: fl-float 2.4s ease-in-out infinite; }
@keyframes fl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6vmin); } }
.fl-name { font-family: var(--font-bold); font-size: 7vmin; line-height: 1; }
.fl-line { font-size: 2.2vmin; letter-spacing: 0.22em; color: #7A6E5E; }

@keyframes eupho-turn {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  45%  { filter: brightness(0.82); }
  100% { transform: rotateY(-180deg); filter: brightness(0.6); }
}
@keyframes eupho-shade { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* —— 手 —— */
.hand {
  position: absolute; right: -2vmin; top: 50%; width: clamp(110px, 24vmin, 260px); height: auto;
  margin-top: calc(clamp(110px, 24vmin, 260px) * -0.38);
  pointer-events: none; z-index: 3;
  animation: eupho-hand 1.9s cubic-bezier(0.4, 0, 0.3, 1) 0.1s both;
  filter: drop-shadow(0 1vmin 1.4vmin rgba(0, 0, 0, 0.25));
}
.hand .sleeve { fill: #223A5E; }
.hand .cuff { fill: #C23A2B; }
@keyframes eupho-hand {
  0%   { opacity: 0; transform: translate(60%, 20%) rotate(-6deg); }
  28%  { opacity: 1; transform: translate(0, 0) rotate(0); }
  36%  { transform: translate(-1%, 0) rotate(2deg); }
  50%  { transform: translate(0, -6%) rotate(-3deg) scale(1.05); }
  58%  { transform: translateX(-50vw) translateY(-14%) rotate(-12deg) scale(1.15); }
  64%  { transform: translateX(-88vw) translateY(-6%) rotate(-6deg) scale(1.06); }
  80%  { opacity: 1; transform: translateX(-92vw) translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateX(-96vw) translateY(30%) rotate(10deg); }
}

.skip {
  position: fixed; z-index: 4;
  right: calc(1.1rem + env(safe-area-inset-right)); bottom: calc(1.1rem + env(safe-area-inset-bottom));
  border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.82rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.35); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}