/* =========================================================
   biz-mascot.css
   ---------------------------------------------------------
   Neutrope Biz サイト固有のステッキーヘッダーマスコット (Neuty)。
   元は親テーマ Neutrope Starter の assets/css/04-components.css
   内 "Sticky header mascot (v0.8 〜)" ブロックを、子テーマ側へ
   1:1 で移植したもの。

   Phase 3 Step 3.1 時点での状態:
     - 本 CSS は biz-child の functions.php (nbc_enqueue_mascot_assets)
       から enqueue される
     - 並行して、親テーマ側にもまだ同じ .nt-header__mascot CSS が
       存在する (削除は Step 3.2)
     - 同一セレクタ・同一プロパティの単純コピーなので、両方が
       適用されても視覚上の挙動は完全に同一
     - 子テーマ側の nbc_output_sticky_mascot() は関数定義だけで
       hook 未登録 (DOM 出力は引き続き親 header.php 由来 1 個のみ)

   Phase 3 Step 3.2 完了後:
     - 親テーマ側の .nt-header__mascot CSS は削除済み
     - 本 CSS が単独のスタイル源になる
     - DOM 出力は biz-child の nbc_output_sticky_mascot() 経由

   位置決め:
     positioning context は .nt-header__inner。
     mascot 自体は absolute で .nt-header__inner の左下に
     "ぴょこ" と顔を出す挙動。
     scroll 検出 (body.nt-is-scrolled) は親テーマ main.js の
     initScrollState() に依存。
   ========================================================= */

/* positioning context for the absolutely-positioned mascot.
   親テーマ 04-components.css にも同じ宣言があるが、Step 3.2 で
   親側のこの 1 行は撤去されないので残置で OK
   (.nt-header__inner には他のセレクタ (display:flex etc.) も
   存在するが、本 1 行は position 専用なので衝突しない)。 */
.nt-header__inner {
	position: relative;
}

.nt-header__mascot {
	--nt-mascot-left: 134px;
	--nt-mascot-width: 52px;
	--nt-mascot-peek: 6px;

	position: absolute;
	left: var(--nt-mascot-left);
	bottom: calc(-1 * var(--nt-mascot-peek));
	width: var(--nt-mascot-width);
	pointer-events: none;
	opacity: 0;
	transform: translateY(calc(-1 * var(--nt-mascot-peek)));
	transition: transform 0.24s ease, opacity 0.24s ease;
	z-index: 2;
}

.nt-header__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Scrolled state.
   body.nt-is-scrolled (main.js の initScrollState() がスクロール
   閾値超過で付与) のときだけ完全表示。閾値以下では opacity:0 で
   隠している。 */
body.nt-is-scrolled .nt-header__mascot {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.nt-header__mascot {
		transition: none;
	}
}

/* SP / モバイル領域 (≤ 900px) では mascot を完全非表示。
   親テーマ 04-components.css 内では mobile header consolidated
   ブロックの中に同じ display:none ルールが置かれていたが、
   子テーマ単体で完結させるため独立した @media に切り出す。 */
@media (max-width: 900px) {
	.nt-header__mascot {
		display: none;
	}
}