/* UI V5 — 全页金箔蝶影。全局环境动效与 hero 专属动效分层管理。 */

/* V3 的全局云蝶层与 hero 旧循环退出舞台，避免和 V5 重复堆叠。 */
.motion-layer,
.v3-ambient {
  display: none !important;
}

/* 无 JavaScript 时不启动循环装饰；阅读页、账号和管理界面保持安静。 */
.page-atmosphere,
.page-motion-toggle,
.back-to-top {
  display: none;
}

html.js-enabled.motion-ready body.home-page .page-atmosphere,
html.js-enabled.motion-ready body.work-list-page .page-atmosphere {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

html.js-enabled.motion-ready body.home-page .page-motion-toggle,
html.js-enabled.motion-ready body.work-list-page .page-motion-toggle {
  position: fixed;
  z-index: 90;
  right: clamp(12px, 2vw, 28px);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(214, 181, 119, .75);
  border-radius: 999px;
  background: rgba(17, 28, 83, .9);
  box-shadow: 0 10px 30px rgba(20, 16, 40, .22);
  color: #fff1c8;
  font: 700 12px/1 var(--sans);
  letter-spacing: .05em;
  backdrop-filter: blur(9px);
}

.page-motion-toggle:hover,
.page-motion-toggle:focus-visible {
  border-color: #fff0b8;
  background: rgba(169, 52, 73, .94);
  outline: 2px solid rgba(255, 240, 184, .35);
  outline-offset: 2px;
}

.page-motion-toggle[aria-pressed="true"] {
  background: rgba(169, 52, 73, .96);
}

.page-motion-toggle:disabled {
  cursor: default;
  opacity: .72;
}

/* 原创页边金线、流云与朱红锦纹，仅占左右安全边缘。 */
.page-edge {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: clamp(34px, 5vw, 82px);
  opacity: .34;
}

.page-edge::before,
.page-edge::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-edge-left {
  left: 0;
  border-left: 1px solid rgba(181, 128, 42, .62);
  background:
    radial-gradient(ellipse at 0 16%, transparent 48%, rgba(184, 132, 51, .34) 50% 51%, transparent 53%),
    radial-gradient(ellipse at 4% 58%, transparent 53%, rgba(169, 52, 73, .27) 55% 57%, transparent 59%),
    linear-gradient(90deg, rgba(169, 52, 73, .13), transparent 82%);
}

.page-edge-right {
  right: 0;
  border-right: 1px solid rgba(181, 128, 42, .62);
  background:
    radial-gradient(ellipse at 100% 31%, transparent 49%, rgba(184, 132, 51, .34) 51% 52%, transparent 54%),
    radial-gradient(ellipse at 96% 76%, transparent 51%, rgba(169, 52, 73, .27) 53% 55%, transparent 57%),
    linear-gradient(270deg, rgba(169, 52, 73, .13), transparent 82%);
}

.page-edge-left::before,
.page-edge-right::before {
  top: 12vh;
  width: 38px;
  height: 150px;
  border-top: 1px solid rgba(204, 160, 76, .7);
  border-radius: 70% 0 0 0;
}

.page-edge-left::before {
  left: 0;
  border-left: 1px solid rgba(204, 160, 76, .7);
  transform: rotate(-8deg);
}

.page-edge-right::before {
  right: 0;
  border-right: 1px solid rgba(204, 160, 76, .7);
  transform: scaleX(-1) rotate(-8deg);
}

.page-edge::after {
  top: 39vh;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(169, 52, 73, .48);
  transform: rotate(45deg);
}

.page-edge-left::after { left: 8px; }
.page-edge-right::after { right: 8px; }

/* 24 个固定 DOM 落物：外层下落、中层横摆、内层翻面。 */
.page-fall {
  --x: 4vw;
  --size: 9px;
  --duration: 16s;
  --sway-duration: 5s;
  --flip-duration: 3.8s;
  --delay: -3s;
  --drift: 12px;
  --opacity: .6;
  position: absolute;
  z-index: 2;
  top: -22vh;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 1.25);
  display: block;
  opacity: var(--opacity);
  animation: v5-page-fall var(--duration) linear var(--delay) infinite;
  will-change: transform;
}

.page-fall > b {
  display: block;
  width: 100%;
  height: 100%;
  animation: v5-page-sway var(--sway-duration) ease-in-out var(--delay) infinite alternate;
}

.page-fall span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 239, 179, .68);
  box-shadow: 0 0 8px rgba(196, 144, 51, .36);
  animation: v5-page-flip var(--flip-duration) ease-in-out var(--delay) infinite;
}

.page-fall.is-gold span {
  background: linear-gradient(135deg, #fff3bf 0, #c79534 44%, #ffeaa0 55%, #8b5a1e 100%);
  clip-path: polygon(18% 0, 100% 24%, 75% 100%, 0 74%);
}

.page-fall.is-wing span {
  border-radius: 96% 13% 86% 22%;
  background: linear-gradient(145deg, rgba(255, 239, 176, .96), rgba(184, 125, 43, .78) 62%, rgba(133, 43, 58, .72));
}

.page-fall.is-petal span {
  border-color: rgba(169, 52, 73, .56);
  border-radius: 88% 20% 82% 28%;
  background: linear-gradient(145deg, rgba(255, 223, 218, .94), rgba(197, 76, 94, .82) 58%, rgba(112, 31, 52, .76));
}

.page-fall.is-far {
  z-index: 1;
  filter: blur(.25px);
  opacity: .3;
}

.page-fall.is-near {
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(49, 30, 53, .2));
  opacity: .78;
}

.pf-1  { --x: 2vw;  --size: 7px;  --duration: 13s; --delay: -8s;  --drift: 18px; }
.pf-2  { --x: 6vw;  --size: 12px; --duration: 19s; --delay: -15s; --drift: -20px; }
.pf-3  { --x: 10vw; --size: 9px;  --duration: 15s; --delay: -4s;  --drift: 24px; }
.pf-4  { --x: 15vw; --size: 7px;  --duration: 22s; --delay: -18s; --drift: -13px; }
.pf-5  { --x: 20vw; --size: 15px; --duration: 17s; --delay: -10s; --drift: 30px; }
.pf-6  { --x: 27vw; --size: 8px;  --duration: 12s; --delay: -6s;  --drift: -22px; }
.pf-7  { --x: 36vw; --size: 7px;  --duration: 20s; --delay: -12s; --drift: 16px; --opacity: .34; }
.pf-8  { --x: 44vw; --size: 8px;  --duration: 21s; --delay: -2s;  --drift: -18px; }
.pf-9  { --x: 55vw; --size: 7px;  --duration: 18s; --delay: -14s; --drift: 21px; --opacity: .38; }
.pf-10 { --x: 64vw; --size: 14px; --duration: 16s; --delay: -5s;  --drift: -26px; }
.pf-11 { --x: 73vw; --size: 10px; --duration: 11s; --delay: -9s;  --drift: 19px; }
.pf-12 { --x: 80vw; --size: 7px;  --duration: 22s; --delay: -17s; --drift: -16px; }
.pf-13 { --x: 85vw; --size: 9px;  --duration: 15s; --delay: -1s;  --drift: 27px; }
.pf-14 { --x: 89vw; --size: 12px; --duration: 18s; --delay: -11s; --drift: -21px; }
.pf-15 { --x: 93vw; --size: 15px; --duration: 14s; --delay: -7s;  --drift: 18px; }
.pf-16 { --x: 97vw; --size: 6px;  --duration: 20s; --delay: -16s; --drift: -24px; }
.pf-17 { --x: 8vw;  --size: 10px; --duration: 17s; --delay: -3s;  --drift: 26px; }
.pf-18 { --x: 13vw; --size: 8px;  --duration: 10s; --delay: -5s;  --drift: -15px; }
.pf-19 { --x: 24vw; --size: 14px; --duration: 21s; --delay: -13s; --drift: 28px; }
.pf-20 { --x: 76vw; --size: 7px;  --duration: 19s; --delay: -6s;  --drift: -18px; }
.pf-21 { --x: 83vw; --size: 9px;  --duration: 13s; --delay: -10s; --drift: 22px; }
.pf-22 { --x: 88vw; --size: 8px;  --duration: 16s; --delay: -2s;  --drift: -25px; }
.pf-23 { --x: 95vw; --size: 16px; --duration: 22s; --delay: -19s; --drift: 20px; }
.pf-24 { --x: 52vw; --size: 6px;  --duration: 18s; --delay: -8s;  --drift: -14px; --opacity: .28; }

@keyframes v5-page-fall {
  0% { transform: translate3d(0, -12vh, 0) rotate(-7deg); }
  100% {
    transform: translate3d(var(--drift), 128vh, 0) rotate(13deg);
    transform: translate3d(var(--drift), calc(100dvh + 28vh), 0) rotate(13deg);
  }
}

@keyframes v5-page-sway {
  0% { transform: translateX(-18px) rotate(-12deg); }
  100% { transform: translateX(24px) rotate(14deg); }
}

@keyframes v5-page-flip {
  0%, 100% { transform: rotateY(0) rotateZ(0); filter: brightness(.88); }
  50% { transform: rotateY(76deg) rotateZ(150deg); filter: brightness(1.24); }
}

/* 少量原创 CSS 蝶影，跟随全页环境状态，不属于 hero 专属动效。 */
.page-butterfly {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 30px;
  display: block;
  color: #b88431;
  opacity: .72;
  animation: v5-page-butterfly 14s ease-in-out infinite;
}

.page-butterfly svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(41, 27, 47, .18));
}

.page-butterfly .butterfly-wing {
  fill: currentColor;
  fill-opacity: .28;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
}

.page-butterfly .butterfly-wing-left {
  transform-origin: right center;
  animation: v5-page-wing-left 1.9s ease-in-out infinite;
}

.page-butterfly .butterfly-wing-right {
  transform-origin: left center;
  animation: v5-page-wing-right 1.9s ease-in-out infinite;
}

.page-butterfly .wing-lower {
  fill-opacity: .42;
}

.page-butterfly .butterfly-body {
  fill: currentColor;
  stroke: rgba(255, 244, 204, .82);
  stroke-width: .7;
}

.page-butterfly .butterfly-antennae {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.page-butterfly-a { left: 5vw; top: 26vh; }
.page-butterfly-b { right: 7vw; top: 58vh; color: #a93449; animation-delay: -8s; }
.page-butterfly-c { right: 18vw; top: 16vh; transform: scale(.72); animation-delay: -4s; }

@keyframes v5-page-butterfly {
  0%, 100% { margin: 0; }
  35% { margin: -12px 0 0 10px; }
  70% { margin: 7px 0 0 -6px; }
}

@keyframes v5-page-wing-left {
  0%, 100% { transform: rotate(-3deg) scaleX(.98) scaleY(1); }
  50% { transform: rotate(3deg) scaleX(.84) scaleY(.97); }
}

@keyframes v5-page-wing-right {
  0%, 100% { transform: rotate(3deg) scaleX(.98) scaleY(1); }
  50% { transform: rotate(-3deg) scaleX(.84) scaleY(.97); }
}

/* 首屏依然以人物为中心，降低背景巨蝶和彩色块对比。 */
.hero-art {
  opacity: .78;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .3)) saturate(.84) brightness(.92);
}

body.hero-motion-paused .hero-stage::before,
body.hero-motion-paused .hero-stage::after,
body.hero-motion-paused .hero-stage *,
body.hero-motion-paused .hero-stage *::before,
body.hero-motion-paused .hero-stage *::after {
  animation-play-state: paused !important;
}

body.motion-paused .page-fall,
body.motion-paused .page-fall > b,
body.motion-paused .page-fall span,
body.motion-paused .page-butterfly,
body.motion-paused .page-butterfly .butterfly-wing {
  animation-play-state: paused !important;
}

.motion-simple .page-fall,
.motion-simple .page-butterfly {
  display: none !important;
}

/* 章节装饰带：金线、流云和抽象蝶影，不覆盖正文。 */
.section-heading {
  isolation: isolate;
}

.section-heading::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  bottom: -10px;
  height: 20px;
  border-top: 1px solid rgba(180, 127, 42, .42);
  background:
    radial-gradient(ellipse at 16% 0, transparent 58%, rgba(180, 127, 42, .38) 60% 62%, transparent 64%) 0 0 / 42% 18px no-repeat,
    radial-gradient(ellipse at 84% 0, transparent 58%, rgba(169, 52, 73, .25) 60% 62%, transparent 64%) 100% 0 / 42% 18px no-repeat;
  pointer-events: none;
}

.section-heading::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -5px;
  width: 34px;
  height: 18px;
  padding: 0;
  border: 0;
  background:
    linear-gradient(145deg, rgba(214, 181, 119, .85), rgba(169, 52, 73, .54)) left center / 48% 100% no-repeat,
    linear-gradient(215deg, rgba(214, 181, 119, .85), rgba(169, 52, 73, .54)) right center / 48% 100% no-repeat;
  clip-path: polygon(0 10%, 45% 48%, 50% 30%, 55% 48%, 100% 10%, 78% 100%, 52% 60%, 48% 60%, 22% 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* 角色专题角花、主题细框会随人物主题一起切换。 */
.character-panel {
  --character-accent: #c9a247;
  --character-soft: rgba(214, 181, 119, .18);
  box-shadow: inset 0 0 0 1px rgba(202, 160, 70, .24);
  background:
    linear-gradient(135deg, var(--character-soft), transparent 18%) top left / 42% 42% no-repeat,
    linear-gradient(315deg, var(--character-soft), transparent 18%) bottom right / 42% 42% no-repeat,
    linear-gradient(130deg, #fff 62%, #f3e2b6);
}

.character-panel[data-character-theme="keigetsu"] {
  --character-accent: #a93449;
  --character-soft: rgba(169, 52, 73, .14);
  background:
    linear-gradient(135deg, var(--character-soft), transparent 18%) top left / 42% 42% no-repeat,
    linear-gradient(315deg, var(--character-soft), transparent 18%) bottom right / 42% 42% no-repeat,
    linear-gradient(130deg, #fff 60%, #ead2d7);
}

.character-portrait::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 9% 2% 4%;
  border-top: 1px solid color-mix(in srgb, var(--character-accent), transparent 48%);
  border-left: 1px solid color-mix(in srgb, var(--character-accent), transparent 68%);
  border-radius: 54% 8px 42% 8px;
  background:
    radial-gradient(circle at 5px 5px, var(--character-accent) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 47%, color-mix(in srgb, var(--character-accent), transparent 42%) 48% 49%, transparent 50%) 0 0 / 22px 22px no-repeat;
  opacity: .72;
  pointer-events: none;
  transition: border-color .35s ease, background .35s ease;
}

.character-copy::before {
  content: "";
  display: block;
  width: 72px;
  height: 7px;
  margin-bottom: 13px;
  border-top: 1px solid var(--character-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--character-accent), transparent 62%);
  transition: border-color .35s ease;
}

/* 导航、分类与卡片统一为细金线反馈。 */
.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: left .2s ease, right .2s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  left: 0;
  right: 0;
}

.category-ribbon a {
  box-shadow: inset 0 -1px transparent;
}

.category-ribbon a:hover,
.category-ribbon a:focus-visible {
  box-shadow: inset 0 -2px var(--gold);
}

.category-mark {
  transition: transform .24s ease, border-color .24s ease, filter .24s ease;
}

.category-ribbon a:hover .category-mark,
.category-ribbon a:focus-visible .category-mark {
  border-color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(214, 181, 119, .42));
  transform: rotate(8deg) scale(1.06);
}

.card-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 13px;
  background: linear-gradient(145deg, rgba(255, 239, 183, .8), transparent 72%);
  border: 1px solid rgba(214, 181, 119, .52);
  border-radius: 88% 16% 84% 22%;
  transform: rotate(-18deg);
  transition: transform .25s ease, filter .25s ease;
  pointer-events: none;
}

.work-card:hover .card-visual::before,
.work-card:focus-within .card-visual::before {
  filter: drop-shadow(0 0 7px rgba(255, 230, 150, .52));
  transform: rotate(4deg) scale(1.12);
}

.work-card:focus-within,
.category-ribbon a:focus-visible,
.character-tab:focus-visible {
  outline: 2px solid rgba(169, 52, 73, .48);
  outline-offset: 3px;
}

.work-list-page .page-hero {
  position: relative;
  overflow: hidden;
}

.work-list-page .page-hero::after,
.work-detail-page .reader-hero::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 10px;
  height: 20px;
  border-bottom: 1px solid rgba(214, 181, 119, .36);
  background: radial-gradient(ellipse at 50% 100%, transparent 60%, rgba(214, 181, 119, .28) 62% 64%, transparent 66%);
  pointer-events: none;
}

@media (max-width: 800px) {
  .page-edge { width: 36px; opacity: .25; }
  .page-motion-toggle { min-width: 98px; }
}

@media (max-width: 620px) {
  html.js-enabled.motion-ready body.home-page .page-motion-toggle,
  html.js-enabled.motion-ready body.work-list-page .page-motion-toggle {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-width: 96px;
    min-height: 44px;
    padding: 8px 12px;
  }

  .page-edge { width: 24px; opacity: .22; }
  .page-fall { --opacity: .56; }
  .page-fall.is-near { opacity: .68; }

  .pf-11, .pf-12, .pf-13, .pf-14, .pf-15, .pf-16,
  .pf-17, .pf-18, .pf-19, .pf-20, .pf-21, .pf-22,
  .pf-23, .pf-24 {
    display: none;
  }

  .page-butterfly { transform: scale(.72); }
  .page-butterfly-c { display: none; }
  .section-heading::before { left: 2%; right: 2%; }
  .character-portrait::before { inset: 8% -4% 3%; }
  .main-nav a::after { bottom: 2px; }
}