/* ============================================================
   全屏翻书：整个屏幕就是一本书
   封面（手把它翻开）→ 扉页（停一下）→ 扉页翻走，露出主页
   书脊在左边；三套主题各一套封面 / 扉页 / 袖口
   时间轴：0.2–0.75 手伸进来 · 0.8–1.75 翻封面 · 1.75–2.2 扉页 · 2.2–3.0 翻扉页
   ============================================================ */

#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%;
}
.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: vf-turn .95s cubic-bezier(.5, .05, .4, 1) .8s forwards; box-shadow: inset 1.4vmin 0 2.4vmin -1vmin rgba(0, 0, 0, .45); }
.flyleaf { animation: vf-turn .8s cubic-bezier(.5, .05, .4, 1) 2.2s forwards; }
@keyframes vf-turn {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  45%  { filter: brightness(.82); }
  100% { transform: rotateY(-180deg); filter: brightness(.6); }
}
/* 翻页时落在下一页上的阴影 */
.flyleaf::after, .book::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%);
}
.flyleaf::after { animation: vf-shade .95s ease-out .8s; }
@keyframes vf-shade { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

.cv, .fly { position: absolute; inset: 0; display: none; }

/* —— 手 —— */
.hand {
  position: absolute; right: -2vmin; top: 50%; width: clamp(110px, 24vmin, 260px); height: auto;
  margin-top: calc(clamp(110px, 24vmin, 260px) * -.38);
  pointer-events: none; z-index: 2;
  animation: vf-hand 1.75s cubic-bezier(.4, 0, .3, 1) .1s both;
  filter: drop-shadow(0 1vmin 1.4vmin rgba(0, 0, 0, .25));
}
.hand .sleeve { fill: var(--sleeve, #fff); }
.hand .cuff { fill: var(--cuff, #C23A2B); }
/* 0–38% 伸进来抓住页边；页边在透视下先停在右侧、翻过 60° 后才快速扫向书脊，
   所以手在 55–68% 之间一口气划过屏幕（与封面的时间曲线对齐）；之后按住左边再离开 */
@keyframes vf-hand {
  0%   { opacity: 0; transform: translate(60%, 20%) rotate(-6deg); }
  30%  { opacity: 1; transform: translate(0, 0) rotate(0); }
  38%  { transform: translate(-1%, 0) rotate(2deg); }
  55%  { transform: translate(0, -6%) rotate(-3deg) scale(1.05); }
  62%  { transform: translateX(-50vw) translateY(-14%) rotate(-12deg) scale(1.15); }
  68%  { transform: translateX(-88vw) translateY(-6%) rotate(-6deg) scale(1.06); }
  84%  { opacity: 1; transform: translateX(-92vw) translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateX(-96vw) translateY(30%) rotate(10deg); }
}

.skip {
  position: fixed; z-index: 3; right: calc(1.1rem + env(safe-area-inset-right)); bottom: calc(1.1rem + env(safe-area-inset-bottom));
  border-radius: 999px; padding: .45rem 1.1rem; font-size: .82rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .35); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fly-avatar { border-radius: 50%; }

/* ============================================================
   雨夜：深蓝皮面精装、烫金边框、衬线斜体；扉页是奶油色纸
   ============================================================ */
@media (min-aspect-ratio: 17/10), (pointer: fine) and (min-aspect-ratio: 6/5) {
  .hand { --sleeve: #1F1E24; --cuff: #B5322A; }
  .cv-rain { display: grid; place-items: center;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(90% 80% at 60% 40%, #26304A 0%, #161C2B 55%, #0C0F17 100%);
  }
  .cv-rain::before { /* 书脊 */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5vmin;
    background: linear-gradient(90deg, #070910, #1A2133 70%, rgba(0, 0, 0, .6));
    border-right: 1px dashed rgba(201, 164, 92, .55);
  }
  .cv-rain::after { /* 封面上的雨痕 */
    content: ""; position: absolute; inset: 0; opacity: .35;
    background:
      repeating-linear-gradient(100deg, transparent 0 60px, rgba(180, 200, 255, .25) 60px 61px, transparent 61px 150px);
    animation: rain .9s linear infinite;
  }
  .cv-frame {
    position: relative; z-index: 1; width: 64vmin; padding: 7vmin 5vmin; text-align: center;
    border: 2px solid #C9A45C; outline: 1px solid rgba(201, 164, 92, .6); outline-offset: 1vmin;
    display: grid; justify-items: center; gap: 2vmin; color: #E3C27E;
  }
  .cv-kicker { font-family: var(--serif); font-style: italic; font-size: 2.6vmin; letter-spacing: .3em; opacity: .85; }
  .cv-rain .cv-title { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15vmin; line-height: .9;
    background: linear-gradient(180deg, #F6DFA2, #B98B3E 55%, #F1D48E); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 .4vmin 0 rgba(0, 0, 0, .5)); }
  .cv-rule { width: 22vmin; height: 2px; background: linear-gradient(90deg, transparent, #C9A45C, transparent); }
  .cv-rain .cv-sub { font-size: 2vmin; letter-spacing: .25em; color: #C9B48A; }

  .fly-rain { display: grid; place-content: center; justify-items: center; gap: 2.4vmin;
    background: radial-gradient(80% 80% at 50% 45%, #FBF6EA, #EADFC8); color: #2A2620; }
  .fly-rain .fly-avatar { width: 20vmin; height: 20vmin; border: 2px solid #2A2620; box-shadow: 0 0 0 1.2vmin rgba(201, 164, 92, .25); }
  .fly-rain .fly-name { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 9vmin; line-height: 1; }
  .fly-rain .fly-line { font-size: 2.2vmin; color: #7A6E5E; letter-spacing: .2em; }
}

/* ============================================================
   绘梨衣：她的笔记本 —— 灰白卡纸、黑色布脊、大字排版、红书签、橡皮鸭贴纸；扉页是横线纸
   ============================================================ */
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 17/10) {
  .hand { --sleeve: #FFFFFF; --cuff: #C8102E; }
  .cv-erii {
    display: block; color: #111;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(150deg, #F6F5F3 0%, #E6E4E2 100%);
  }
  .cv-erii::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6vmin; background: #151515; }
  .cv-band { position: absolute; left: 6vmin; right: 0; top: 58%; height: 9vmin; background: #C8102E; transform: skewY(-4deg); }
  .cv-big { position: absolute; left: 11vmin; top: 8vmin; font-size: 30vmin; line-height: .8; font-style: italic; letter-spacing: -.05em; transform: skewX(-10deg); }
  .cv-strike { position: absolute; left: 13vmin; top: 40vmin; font-size: 9vmin; font-style: italic; transform: skewX(-10deg); }
  .cv-strike::after { content: ""; position: absolute; left: -3vmin; right: -6vmin; top: 55%; height: .5vmin; background: #111; }
  .cv-jp { position: absolute; left: 13vmin; top: 51vmin; font-size: 3.4vmin; letter-spacing: .2em; }
  .cv-duck { position: absolute; right: 9vmin; bottom: 22vmin; width: 26vmin; height: 24vmin; transform: rotate(8deg); filter: drop-shadow(.8vmin 1vmin 0 rgba(0, 0, 0, .2)); }
  .cv-label {
    position: absolute; left: 12vmin; bottom: 9vmin; padding: 1.4vmin 3vmin; min-width: 44vmin;
    background: #fff; border: .45vmin solid #111; font-family: var(--hand); font-size: 6vmin; line-height: 1;
  }
  .cv-label i { font-family: var(--font); font-style: normal; font-size: 2.2vmin; color: #C8102E; margin-right: 2vmin; vertical-align: middle; }
  .cv-ribbon { position: absolute; left: 30%; top: -2vmin; width: 2.6vmin; height: 26vmin; background: #C8102E; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }

  .fly-erii {
    display: grid; place-content: center; justify-items: center; gap: 2vmin; color: #111;
    background:
      linear-gradient(90deg, transparent 12vmin, rgba(200, 16, 46, .5) 12vmin, rgba(200, 16, 46, .5) calc(12vmin + 2px), transparent calc(12vmin + 2px)),
      repeating-linear-gradient(transparent 0 calc(6vmin - 2px), rgba(80, 120, 200, .25) calc(6vmin - 2px) 6vmin),
      #FCFBF7;
  }
  .fly-erii .fly-avatar { width: 22vmin; height: 22vmin; border-radius: .6vmin; border: .5vmin solid #111; transform: rotate(-4deg); }
  .fly-tape { position: absolute; left: 50%; top: calc(50% - 22vmin); width: 16vmin; height: 4.5vmin; transform: translateX(-80%) rotate(-8deg); background: rgba(255, 236, 190, .85); z-index: 1; }
  .fly-hand { font-family: var(--hand); font-size: 6vmin; color: #C8102E; line-height: 1; margin-top: 2vmin; }
  .fly-erii .fly-name { font-size: 10vmin; line-height: 1; font-style: italic; transform: skewX(-9deg); }
  .fly-duck { width: 12vmin; height: 11vmin; position: absolute; right: 14vmin; bottom: 14vmin; transform: rotate(-10deg); }
}

/* ============================================================
   幽香：植物标本册 —— 墨绿亚麻布面、烫金向日葵线稿、红格纹书脊；扉页是压花的奶油纸
   ============================================================ */
@media (max-aspect-ratio: 3/5), (pointer: fine) and (max-aspect-ratio: 6/5) {
  .hand { --sleeve: #FFFFFF; --cuff: #C2412D; }
  .cv-yuuka {
    display: grid; place-content: center; justify-items: center; gap: 3vmin; color: #E6C77A;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
      radial-gradient(90% 70% at 55% 40%, #3E5E34 0%, #2A4426 60%, #1B2E19 100%);
  }
  .cv-plaid {
    position: absolute; left: 0; top: 0; bottom: 0; width: 9vw;
    background:
      repeating-linear-gradient(90deg, transparent 0 6px, rgba(240, 180, 41, .45) 6px 7px, transparent 7px 18px),
      repeating-linear-gradient(0deg, rgba(70, 12, 8, .45) 0 5px, transparent 5px 18px),
      repeating-linear-gradient(90deg, rgba(70, 12, 8, .45) 0 5px, transparent 5px 18px),
      #BE3328;
    box-shadow: inset -1.2vw 0 1.6vw -1vw rgba(0, 0, 0, .5);
  }
  .cv-flower { width: 62vw; height: 62vw; color: #D9B45E; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); animation: spin 60s linear infinite; }
  .cv-yuuka .cv-title { font-size: 15vw; line-height: 1; letter-spacing: .04em; color: #F1DCA0; text-shadow: 0 .5vw 0 rgba(0, 0, 0, .4); }
  .cv-yuuka .cv-sub { font-size: 3.6vw; letter-spacing: .14em; color: #CDB57C; }
  .cv-yuuka::after { content: ""; position: absolute; inset: 5vw 5vw 5vw 13vw; border: 1px solid rgba(217, 180, 94, .55); border-radius: 2vw; }

  .fly-yuuka { display: grid; place-content: center; justify-items: center; gap: 3vw; color: #2F4A1E;
    background:
      radial-gradient(4vw 9vw at 18% 20%, rgba(245, 184, 46, .55), transparent 70%),
      radial-gradient(3vw 7vw at 82% 30%, rgba(245, 184, 46, .45), transparent 70%),
      radial-gradient(3.5vw 8vw at 75% 80%, rgba(245, 184, 46, .5), transparent 70%),
      radial-gradient(2.5vw 6vw at 22% 75%, rgba(94, 140, 58, .4), transparent 70%),
      radial-gradient(80% 70% at 50% 45%, #FFFBEE, #F3E9CF);
  }
  .fly-flower { position: relative; width: 56vw; height: 56vw; display: grid; place-items: center; }
  .fly-flower svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fly-yuuka .fly-avatar { position: relative; width: 31vw; height: 31vw; border: 2px solid #3B2A10; }
  .fly-yuuka .fly-name { font-size: 11vw; line-height: 1; }
  .fly-yuuka .fly-line { font-size: 3.4vw; color: #6E6250; letter-spacing: .15em; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rain { to { background-position: -40px 220px; } }