/* ============================================================
   栗野郎マスコット演出 用スタイル
   ------------------------------------------------------------
   ・PC・スマホ/タブレットいずれでも動作する。
   ・スマホ/タブレットではマウス追従の代わりに、画面内の固定位置に
     浮かんだ状態で表示される（kuriyarou.js側の挙動）。
   ============================================================ */

/* ヒーローの丸窓に収まっている通常時の見た目
   （今までの .image-circle img と同じ扱い。JS無効時や、JSが
   まだ#kuriMascotを<body>直下へ移動する前の初期表示に使われる）
   ------------------------------------------------------------
   #kuriMascotは「本体（.kuri-body）＋目（.kuri-eyes）」の2層を
   重ねるラッパーdivになった。サイズ・位置・fixed配置・縁取りなど、
   これまで<img>単体に付けていたスタイルはすべてこのラッパー側に
   持たせ、中の.kuri-layerは常に親いっぱいに重ねて表示するだけにする。 */
.kuri-mascot {
    position: relative; /* 内側の.kuri-layer(position:absolute)の基準にする */
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer; /* クリックできることをそれとなく示す */
}

/* 本体レイヤー・目レイヤーを完全に重ねて表示する。
   クリック判定やドラッグはラッパー(.kuri-mascot)側にまとめるため、
   レイヤー自身はマウスイベントを拾わないようにしておく。 */
.kuri-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* 目レイヤーだけ、視線移動（translate）や瞬き（scaleY）の基準点を
   目の中心（キャンバス比でおよそ50%, 40%）に合わせておく。 */
.kuri-eyes {
    transform-origin: 50% 40%;
}

/* kuriyarou.jsが#kuriMascotを<body>直下へ移動したあと、
   ヒーローの丸窓（.image-circle）の位置に重ねて表示している間の見た目。
   ラッパーに角丸+overflow:hiddenを付けて、中の正方形レイヤーを
   丸窓と同じ円形にクリップする。 */
.kuri-mascot.kuri-in-hero {
    border-radius: 50%;
    overflow: hidden;
}

/* サブページで最初から画面に浮かんでいる状態のデフォルトサイズ。
   JS側でも同じ値(DOCK_SIZE)を指定しているので、変更する場合は
   kuriyarou.js の DOCK_SIZE も合わせて変更すること。 */
.kuri-mascot.kuri-docked {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden; /* 中のレイヤーを丸くクリップする */
    background: var(--bg-cream, #f9f7f2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    border: 2px solid #fff;
    pointer-events: none; /* マウス操作・クリックの邪魔をしない */
    z-index: 9999;
}

/* 「丸窓 → カーソル横」「カーソル横 → 丸窓」と、
   サイズ・位置が切り替わる瞬間だけ滑らかにアニメーションさせる。
   このクラスは kuriyarou.js が動的に付け外しする。 */
.kuri-mascot.kuri-transitioning {
    transition:
        top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}