/* UI V7 — 宫阙蝶影开场与官网角色目录。 */

/* 夜蓝宫阙先显现再让位于主页；幕帘开启与首屏内容使用同一条约 2 秒时间线。 */
.site-intro-v7-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.site-intro-curtain {
  background:
    radial-gradient(circle at 50% 20%, rgba(181, 46, 66, .2), transparent 28%),
    linear-gradient(150deg, rgba(45, 59, 117, .96), rgba(9, 15, 53, .99) 66%),
    var(--blue-deep);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .38);
}

.site-intro-curtain::before {
  width: min(310px, 64%);
  border-color: rgba(231, 191, 104, .44);
}

.site-intro-curtain::after {
  border-color: rgba(181, 46, 66, .48);
}

.site-intro-sign {
  min-height: 330px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 26%),
    #fbf1df;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 0 0 8px rgba(231, 191, 104, .06);
}

.intro-palace {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: min(860px, 86vw);
  height: 46vh;
  min-height: 190px;
  transform: translateX(-50%);
  opacity: .92;
  filter: drop-shadow(0 -8px 20px rgba(181, 46, 66, .12));
}

.intro-palace .palace-shadow {
  fill: rgba(4, 8, 31, .68);
  stroke: rgba(231, 191, 104, .38);
  stroke-width: 1;
}

.intro-palace .palace-fill {
  fill: rgba(5, 10, 38, .9);
  stroke: rgba(231, 191, 104, .6);
  stroke-width: 1.2;
}

.intro-palace .palace-roof {
  fill: rgba(24, 27, 67, .92);
  stroke: rgba(246, 231, 175, .9);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.intro-palace .palace-roof-main { fill: rgba(83, 29, 55, .78); }
.intro-palace .palace-roof-top { fill: rgba(128, 37, 58, .66); }

.intro-palace .palace-line {
  fill: none;
  stroke: rgba(231, 191, 104, .64);
  stroke-width: 1.6;
}

.intro-clouds i {
  position: absolute;
  width: 38vw;
  height: 110px;
  border-top: 1px solid rgba(231, 191, 104, .42);
  border-radius: 50%;
  opacity: .72;
}

.intro-clouds i:nth-child(1) { left: -8vw; top: 17%; transform: rotate(-6deg); }
.intro-clouds i:nth-child(2) { right: -10vw; top: 29%; transform: rotate(8deg); }
.intro-clouds i:nth-child(3) { left: 32%; bottom: 12%; width: 36vw; border-color: rgba(181, 46, 66, .52); }

.intro-swap-trail {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(44vw, 560px);
  height: 22vh;
  border-top: 2px solid;
  border-radius: 50%;
  opacity: .66;
  transform-origin: center;
}

.trail-gold {
  border-color: rgba(231, 191, 104, .8);
  transform: translate(-74%, -50%) rotate(12deg);
}

.trail-red {
  border-color: rgba(202, 65, 84, .8);
  transform: translate(-26%, -40%) scaleX(-1) rotate(12deg);
}

.intro-butterfly {
  position: absolute;
  top: 43%;
  width: 58px;
  height: 44px;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(231, 191, 104, .28));
}

.intro-butterfly path:not(.intro-butterfly-body) {
  fill: rgba(231, 191, 104, .13);
  stroke: currentColor;
  stroke-width: 1.2;
}

.intro-butterfly-body { fill: currentColor; }
.intro-butterfly-gold { left: 18%; color: #e7bf68; }
/* 玲琳的蝶在空中掠过；慧月的鼠沿纸面疾行，只播放一次。 */
.intro-mouse { position: absolute; top: 56%; right: 18%; width: 76px; height: 44px; overflow: visible; color: #d64a5f; filter: drop-shadow(0 0 8px #d64a5f33); }
.intro-mouse-fill { fill: #d64a5f29; stroke: currentColor; stroke-width: 1.2; }
.intro-mouse-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.intro-mouse-ear { fill: #d64a5f66; }
.intro-mouse-dot { fill: currentColor; }

.site-intro.is-running .site-intro-v7-scene {
  animation: v7-scene 2.05s ease both;
}

.site-intro.is-running .intro-butterfly-gold {
  animation: v7-butterfly-gold 1.62s .06s cubic-bezier(.45, 0, .3, 1) both;
}

.site-intro.is-running .intro-mouse {
  animation: v7-mouse-run 1.62s .06s cubic-bezier(.45, 0, .3, 1) both;
}

@keyframes v7-scene {
  0% { opacity: 0; }
  13%, 43% { opacity: 1; }
  68%, 100% { opacity: 0; }
}

@keyframes v7-butterfly-gold {
  0% { opacity: 0; transform: translate(-8vw, 5vh) rotate(-10deg) scale(.78); }
  22% { opacity: 1; }
  70% { opacity: .9; transform: translate(25vw, -4vh) rotate(8deg) scale(1); }
  100% { opacity: 0; transform: translate(40vw, 1vh) rotate(16deg) scale(.86); }
}

@keyframes v7-mouse-run {
  0% { opacity: 0; transform: translate(8vw, 0) scale(.85); }
  22% { opacity: 1; }
  42% { transform: translate(-8vw, -2px) scale(1); }
  58% { transform: translate(-17vw, 0) scale(1); }
  70% { opacity: .9; transform: translate(-25vw, -2px) scale(1); }
  100% { opacity: 0; transform: translate(-40vw, 0) scale(.85); }
}

/* 幕缝出现时才启动主页首屏，避免它在遮罩背后提前跑完。 */
body.site-intro-active.intro-running .hero-copy {
  animation: none;
}

body.site-intro-active.intro-running .hero-copy > * {
  animation: v7-home-copy-enter .62s cubic-bezier(.18, .72, .2, 1) both;
}

body.site-intro-active.intro-running .hero-copy > :nth-child(1) { animation-delay: 1.02s; }
body.site-intro-active.intro-running .hero-copy > :nth-child(2) { animation-delay: 1.10s; }
body.site-intro-active.intro-running .hero-copy > :nth-child(3) { animation-delay: 1.18s; }
body.site-intro-active.intro-running .hero-copy > :nth-child(4) { animation-delay: 1.26s; }
body.site-intro-active.intro-running .hero-copy > :nth-child(5) { animation-delay: 1.34s; }

body.site-intro-active.intro-running .hero-stage {
  animation: v7-home-stage-enter .88s .96s cubic-bezier(.2, .75, .18, 1) both;
}

body.site-intro-active.intro-running .hero-art {
  animation: v7-home-art-enter .82s 1.02s cubic-bezier(.2, .75, .18, 1) both;
}

body.site-intro-active.intro-running .hero-character-keigetsu {
  animation: v7-home-character-left .78s 1.08s cubic-bezier(.18, .75, .2, 1) both;
}

body.site-intro-active.intro-running .hero-character-reirin {
  animation: v7-home-character-right .78s 1.19s cubic-bezier(.18, .75, .2, 1) both;
}

body.site-intro-active.intro-running .hero-stage::after {
  animation: v3-opening-glint .9s 1.08s ease-out both;
}

@keyframes v7-home-stage-enter {
  0% { opacity: 0; transform: translateY(12px) scale(.985); }
  100% { opacity: 1; transform: none; }
}

@keyframes v7-home-art-enter {
  0% { opacity: .2; clip-path: inset(45% 42% round 12px); filter: brightness(.6) saturate(.72); }
  100% { opacity: 1; clip-path: inset(0 round 12px); filter: brightness(1) saturate(1.08); }
}

@keyframes v7-home-character-left {
  0% { opacity: 0; transform: translate3d(-30px, 18px, 0) scale(.97); }
  100% { opacity: 1; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1); }
}

@keyframes v7-home-character-right {
  0% { opacity: 0; transform: translate3d(30px, 18px, 0) scale(.97); }
  100% { opacity: 1; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1); }
}

@keyframes v7-home-copy-enter {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

/* 17 人保持一条紧凑可滚动名录，详情区一次只展示一人。 */
.v7-character-switcher {
  display: block;
  overflow: hidden;
}

.character-directory {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--night-deep, #090f35);
}

.v7-character-switcher .character-tabs {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  scrollbar-color: rgba(231, 191, 104, .5) rgba(255, 255, 255, .05);
  scroll-snap-type: x proximity;
}

.v7-character-switcher .character-tab {
  flex: 0 0 132px;
  width: 132px;
  min-width: 132px;
  min-height: 74px;
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid rgba(231, 191, 104, .16);
  background: transparent;
  color: rgba(255, 248, 239, .76);
  font: 600 17px/1.3 var(--serif);
  text-align: left;
  scroll-snap-align: start;
}

.v7-character-switcher .character-tab > span {
  display: block;
  color: var(--gold);
  font: 700 9px/1 var(--mono);
}

.v7-character-switcher .character-tab small {
  margin-top: 4px;
  display: block;
  color: rgba(255, 248, 239, .42);
  font: 10px/1.3 var(--sans);
}

.v7-character-switcher .character-tab:hover,
.v7-character-switcher .character-tab:focus-visible,
.v7-character-switcher .character-tab.is-selected {
  background: rgba(181, 46, 66, .2);
  color: #fff8ef;
  box-shadow: inset 0 -3px var(--gold);
}

.v7-character-switcher .character-panel {
  min-height: 540px;
  padding: 38px clamp(30px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(230px, 34%) 1fr;
  gap: clamp(34px, 6vw, 74px);
  background:
    radial-gradient(circle at 14% 34%, rgba(231, 191, 104, .22), transparent 34%),
    linear-gradient(130deg, #fff 58%, #f2e4be);
}

.v7-character-switcher .character-portrait {
  width: 100%;
  height: 455px;
  max-height: 62vh;
}

.v7-character-switcher .character-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
}

.v7-character-switcher .character-copy {
  align-self: center;
  max-width: 590px;
}

.character-state-switch {
  margin-bottom: 22px;
  display: inline-flex;
  border: 1px solid rgba(181, 46, 66, .3);
  background: rgba(255, 255, 255, .56);
}

.character-state-switch[hidden] { display: none; }

.character-state-switch button {
  min-width: 88px;
  min-height: 42px;
  padding: 7px 13px;
  border: 0;
  border-right: 1px solid rgba(181, 46, 66, .24);
  background: transparent;
  color: var(--red);
  font-weight: 700;
}

.character-state-switch button:last-child { border-right: 0; }
.character-state-switch button.is-selected { background: var(--red); color: #fff; }

.v7-character-switcher .identity-line span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
}

@media (max-width: 760px) {
  .intro-palace { width: 96vw; height: 28vh; }
  .intro-clouds i { width: 65vw; }
  .intro-swap-trail { width: 62vw; }
  .intro-butterfly { width: 45px; height: 34px; }
  .intro-butterfly-gold { left: 6%; }
  .intro-mouse { right: 6%; width: 62px; height: 36px; }

  .v7-character-switcher .character-tab {
    flex-basis: 116px;
    width: 116px;
    min-width: 116px;
    min-height: 68px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .v7-character-switcher .character-panel {
    min-height: 0;
    padding: 28px 20px 32px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .v7-character-switcher .character-portrait {
    height: 360px;
    max-height: none;
  }

  .v7-character-switcher .character-copy { max-width: none; }
  .character-state-switch { margin-bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro-v7-scene,
  .intro-butterfly,
  .intro-mouse { animation: none !important; }
  .v7-character-switcher .character-tabs { scroll-behavior: auto; }
}

.motion-simple .site-intro-v7-scene,
.motion-simple .intro-butterfly,
.motion-simple .intro-mouse { animation: none !important; }

/* 体验收口：纸面图片底色、弹性图集列数与作者署名对齐。 */
.work-grid,
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery figure { padding: 10px; border: 1px solid rgba(33,28,41,.12); border-radius: 8px; background: var(--paper); }
.gallery img { background: var(--paper-deep); object-fit: contain; }
.reader-byline { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.reader-author a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 9px 3px 4px; border: 1px solid rgba(214,181,119,.55); border-radius: 999px; color: var(--gold-soft); text-decoration: none; }
.reader-author a:hover { background: rgba(214,181,119,.14); }
.post-body-rich { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem .8rem; }
.post-body-rich .post-body-text { flex: 1 1 100%; min-width: 0; }
.post-inline-image { display: inline-flex; max-width: min(220px, 42%); border: 1px solid rgba(214,181,119,.42); border-radius: 7px; overflow: hidden; background: var(--paper-deep); }
.post-inline-image img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
@media (max-width: 620px) {
  .work-grid, .compact-grid, .gallery { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .reader-byline { align-items: flex-start; gap: 8px; }
  .reader-author a { width: fit-content; }
}

@media (min-width: 621px) {
  .work-list-page .archive-grid,
  .author-profile-page .compact-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 620px) {
  .work-list-page .archive-grid > .empty-state > a {
    display: flex; align-items: center; justify-content: center;
    width: fit-content; max-width: 100%; margin: 16px auto 0; text-align: center;
  }
  .work-list-page .archive-grid > .empty-state > a + a { margin-top: 20px; }
  .author-profile-page .compact-grid .card-foot { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .author-profile-page .compact-grid .card-foot > span { flex-basis: 100%; }
}