/* 墨线分镜 · 立绘舞台组件（W5-P 负责）
 * 舞台铺满父容器：英灵色底 + 速度线 + 网点；立绘 contain 完整显示、底部对齐，外面套一圈墨线画框。
 * --ip-inset：画框底边离舞台底的留白（斜切底边 / 名牌的位置，由使用方的 CSS 设置）
 * --ip-ar：立绘宽高比（JS 在图片加载后按真实尺寸写入）
 * --ip-color：舞台底色（默认英灵色 --hero） */

.ink-portrait {
  position: absolute; inset: 0;
  container-type: size;
  overflow: hidden;
  isolation: isolate;
  background: var(--ip-color, var(--hero, #3ba7ff));
}

/* ---------- 背景：速度线（动态时极慢转动）+ 角落网点 ---------- */
.ink-portrait__rays {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 6deg at 50% 50%, rgba(17, 17, 17, .16) 0 1.4deg, transparent 1.4deg 18deg),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .26) 0 2.4deg, transparent 2.4deg 9deg);
}
.ink-portrait.is-live .ink-portrait__rays { animation: ink-portrait-spin 240s linear infinite; }
.ink-portrait__dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(var(--ink) 22%, transparent 24%);
  background-size: 7px 7px;
  -webkit-mask: radial-gradient(ellipse 62% 46% at 0% 100%, #000, transparent), radial-gradient(ellipse 56% 40% at 100% 0%, #000, transparent);
  mask: radial-gradient(ellipse 62% 46% at 0% 100%, #000, transparent), radial-gradient(ellipse 56% 40% at 100% 0%, #000, transparent);
}

/* ---------- 画框：宽高比 = 立绘宽高比，在舞台里 contain（宽高都不超），底部对齐 ---------- */
.ink-portrait__fig {
  position: absolute; left: 0; right: 0; bottom: var(--ip-inset, 0px);
  margin: 0 auto;
  height: calc(100% - var(--ip-inset, 0px));
  max-width: 100%;
  aspect-ratio: var(--ip-ar, .7467);
  background: var(--ink);
  border: var(--line) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  isolation: isolate;
}
@supports (width: 1cqw) {
  .ink-portrait__fig {
    height: auto;
    width: min(100cqw, calc((100cqh - var(--ip-inset, 0px)) * var(--ip-ar, .7467)));
  }
}
/* 全屏查看：画框在「舞台去掉底部留白」的区域里垂直居中（留白放按钮） */
.ink-portrait.is-center .ink-portrait__fig { bottom: auto; top: calc((100% - var(--ip-inset, 0px)) / 2); transform: translateY(-50%); }
.ink-portrait__fig.is-nudge { animation: ink-portrait-nudge .26s var(--ease-pop); }
/* 未解锁：整幅灰度，底色换纸灰（底色由 JS 写 --ip-color） */
.ink-portrait.is-locked .ink-portrait__art { filter: grayscale(1) brightness(.72); }

.ink-portrait__art { position: absolute; inset: 0; transform-origin: 50% 60%; will-change: transform; }
.ink-portrait__img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  pointer-events: none; -webkit-user-drag: none;
}
/* 分层素材：加载完才显示；加载中整幅先藏起来，失败则退回上面的单张立绘 */
.ink-portrait__layers { position: absolute; inset: 0; display: none; }
.ink-portrait__fig.is-layered .ink-portrait__layers { display: block; }
.ink-portrait__fig.is-layered .ink-portrait__img { visibility: hidden; }
.ink-portrait__fig.is-pending .ink-portrait__art { visibility: hidden; }
.ink-portrait__layer {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; -webkit-user-drag: none; will-change: transform;
}
/* 发光层叠加：优先加法混合，不支持时退回滤色 */
.ink-portrait__layer.is-glowGround,
.ink-portrait__layer.is-glowBody { mix-blend-mode: screen; opacity: .5; }
@supports (mix-blend-mode: plus-lighter) {
  .ink-portrait__layer.is-glowGround,
  .ink-portrait__layer.is-glowBody { mix-blend-mode: plus-lighter; }
}

/* ---------- 斜向扫光：动态时约每 6 秒一次，扫过约 0.9 秒 ---------- */
.ink-portrait__sheen {
  position: absolute; left: 0; top: -10%; bottom: -10%; width: 34%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0 28%, rgba(255, 255, 255, .34) 28% 60%, transparent 60% 70%, rgba(255, 255, 255, .2) 70% 82%, transparent 82%);
  transform: translateX(-160%) skewX(-18deg);
}
.ink-portrait.is-live .ink-portrait__sheen { animation: ink-portrait-sheen 6s linear 1.2s infinite; }

/* ---------- 贴纸按钮：动态/静态、全身（≥44px）。默认在右上，使用方按需改位置 ---------- */
.ink-portrait__ctl {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
}
.ink-portrait__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 48px; min-height: 48px; padding: 3px 0 2px;
  background: var(--white); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900; font-size: 10.5px; line-height: 1.1; letter-spacing: .02em;
  transform: skewX(-8deg) rotate(-2deg);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.ink-portrait__btn > span { display: block; transform: skewX(8deg); }
.ink-portrait__ico { display: grid; place-items: center; line-height: 0; }
.ink-portrait__btn.is-on { background: var(--yellow); }
.ink-portrait__btn.is-locked { background: var(--paper-3); color: #555; }
.ink-portrait__btn:active { transform: skewX(-8deg) rotate(-2deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- 全屏查看弹层：顶部墨黑条（关闭 + 名字胶带），下面是占满的立绘舞台 ---------- */
.ink-portrait-viewer { display: block; padding: 0; background: var(--ink); z-index: 70; }
.ink-portrait-viewer__well {
  position: absolute; left: 0; right: 0;
  top: calc(var(--safe-top) + 58px); bottom: calc(var(--safe-bottom) + 12px);
  animation: ink-pop .3s var(--ease-pop) both;
}
.ink-portrait-viewer__well .ink-portrait__ctl { top: auto; bottom: 4px; right: 12px; }
.ink-portrait-viewer__x {
  position: absolute; left: 10px; top: var(--safe-top); z-index: 2;
  width: 48px; height: 48px;
  background: var(--red); color: var(--white);
  border: 3px solid var(--white);
  font-weight: 900; font-size: 24px; line-height: 1;
  transform: rotate(-6deg);
}
.ink-portrait-viewer__name {
  position: absolute; left: 74px; right: calc(var(--capsule-w) + 8px); top: var(--safe-top); z-index: 2;
  min-height: 48px; display: flex; align-items: center; gap: 12px; min-width: 0; pointer-events: none;
}

/* ---------- 动效 ---------- */
@keyframes ink-portrait-spin { to { transform: rotate(360deg); } }
@keyframes ink-portrait-sheen {
  0% { opacity: 1; transform: translateX(-160%) skewX(-18deg); }
  15% { opacity: 1; transform: translateX(420%) skewX(-18deg); }
  15.1%, 100% { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
}
@keyframes ink-portrait-nudge {
  0% { translate: 0 0; }
  40% { translate: 0 -6px; }
  100% { translate: 0 0; }
}