/* 瞬きの層 — widgets/lip-sync/character-widget.css の .eye* をそのまま持ってきたもの。
   🚨 写して使う。座標はすべて character-eyes.js が pack から入れるので、ここに数字を書かない。
   @keyframes と --blink-cycle は make-eyes.mjs が作る blink-keyframes.css の側にある。

   置き場所の前提:
     .chr … キャラの器。**絵と同じ縦横比**にしておくこと（例 1024×1536 の絵なら 218×327）。
            そうすると % がそのまま絵の座標になる。
     .chr > img … 土台と口の絵だけ。🚨 直下（`>`）に限ること。目の中の絵まで
            width:100% で潰すと、原寸に拡げる指定が上書きされて瞬きが崩れる。 */

.chr-eye { position: absolute; pointer-events: none }

/* 姿勢の専用絵に切り替わっているあいだは、口も目も重ねない。
   姿勢の絵は同じキャラを別に描いたものなので、測った座標に顔の部品が無い
   （pack の featureOverlays: false がそれを指している） */
.chr.is-pose .chr-eye,
.chr.is-pose .chr-mouth { display: none }

/* まぶたと目の窓は同じ楕円。肌と潰れた目の輪郭が1つになり、継ぎ目が開かない。
   --lid-core は不透明でなくなる位置で、js が pack の feather から出している */
.chr-eye-lid,
.chr-eye-aperture {
  position: absolute;
  left: var(--lid-left); top: var(--lid-top);
  width: var(--lid-width); height: var(--lid-height);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0 var(--lid-core, 88%), transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0 var(--lid-core, 88%), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.chr-eye-lid {
  opacity: 0;
  background: linear-gradient(180deg, var(--lid-top-color, #f7d0b9) 0%, var(--lid-mid-color, #fbd7c1) 46%, var(--lid-bottom-color, #fcd9c2) 100%);
  animation: chr-blink-lid var(--blink-cycle, 9.4s) linear infinite;
}

.chr-eye-aperture { overflow: hidden }

/* 🚨 順番が大事。.chr-eye-squash が**先に**目だけへ切り抜き、そのあとで潰れる。
   潰してから切り抜くと、頭も体も目の中へ引きずり込まれる。
   原点は上下のまぶたが合わさる線なので、上と下から同時に閉じる */
.chr-eye-squash {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: 50% var(--squash-origin, 50%);
  animation: chr-blink-aperture var(--blink-cycle, 9.4s) linear infinite;
}

.chr-eye-art {
  position: absolute;
  left: var(--art-left); top: var(--art-top);
  width: var(--art-width); height: var(--art-height);
  object-fit: contain;
}

/* 閉じたまつ毛：楕円から同じ楕円を下へずらして引いた残り＝真ん中が太く、
   両端へ細く消えていく線。上辺で回すので、pack の傾きが線を傾ける */
.chr-eye-lash {
  position: absolute; opacity: 0;
  left: var(--lash-left); top: var(--lash-top);
  width: var(--lash-width); height: var(--lash-height);
  rotate: var(--lash-rotate, 0deg);
  transform-origin: 50% 0;
  border-radius: 50%;
  background: var(--lash-color, #2b1a12);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% calc(50% + var(--lash-weight, 30%)), transparent 0 97%, #000 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% calc(50% + var(--lash-weight, 30%)), transparent 0 97%, #000 100%);
  animation: chr-blink-lash var(--blink-cycle, 9.4s) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* 止めた姿は「目が開いたまま」＝素の絵なので、欠けた絵にならない */
  .chr, .chr * { animation: none !important }
}