/* =====================================================================
   linocut-avatar.css — LinocutAvatar 렌더러 스타일. 결정문 §8.4.
   배경 전환 1.8s·figure 페이드 0.2s는 reduced motion에서 즉시 전환한다.
   ===================================================================== */

.linocut-avatar {
  display: block;
  width: 100%;
  height: 100%;
}

.linocut-avatar__backdrop {
  transition: fill 1.8s ease;
}

.linocut-avatar__figure {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.linocut-avatar__figure[data-ready="true"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .linocut-avatar__backdrop {
    transition: none;
  }
  .linocut-avatar__figure {
    transition: none;
  }
}

/* 결·주름 등 순수 스트로크 요소 — 불투명도는 채널값에 따라 JS가 직접 쓴다. */
.linocut-avatar__wrinkle,
.linocut-avatar__crease,
.linocut-avatar__lower-lid,
.linocut-avatar__tear-pool,
.linocut-avatar__iris-radial {
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* 이마·팔자 주름 — 두께가 변하는 리본(채운 다각형). 불투명도는 JS가 직접 쓴다. */
.linocut-avatar__wrinkle-ribbon {
  stroke: none;
}

.linocut-avatar__tear-flow {
  stroke-width: 1;
  stroke-linejoin: round;
}

/* 눈썹 몸체 위로 삐져나온 털 획 — 정적 불투명도(채널 무관). */
.linocut-avatar__brow-hair {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.7;
}

/* 아랫입술 아래 그늘 초승달 해칭(입체감). */
.linocut-avatar__lip-shadow-crescent {
  opacity: 0.3;
}

/* 벌어졌을 때(g>0.5) 아랫입술 쪽에 보이는 가는 보조 선. */
.linocut-avatar__mouth-line-secondary {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
}

.linocut-avatar__pallor-color {
  mix-blend-mode: color;
}

.linocut-avatar__grain {
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}