/*
 * 玉名サンクリーン 子テーマ用 CSS
 * 方針：既存の見た目は変えない。追加するのは「動き」「フォーカス表示」「画像の収まり」だけ。
 * 動きは transform / opacity のみ。prefers-reduced-motion では止める。
 */

:root {
	--tama-green: #7ac810;
	--tama-focus: #1f5c00; /* フォーカス枠：白・灰背景どちらでもコントラスト 3:1 以上 */
	--tama-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------
 * ファーストビュー（<picture> 化した画像）
 * --------------------------------------------------------------- */
.tama-fv picture {
	display: block;
}
.tama-fv img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
 * キーボード操作時のフォーカス表示
 * マウス操作時は出さない（:focus-visible）
 * --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.vk-mobile-nav-menu-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--tama-focus);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Lightning はフォーカス時に背景色を付けるが、--vk-color-primary を none にしているため見えない。枠で補う */
.global-nav-list a:focus-visible {
	outline-offset: -3px;
}

/* ---------------------------------------------------------------
 * 施工事例カード（クリックでポップアップが開く列）
 * --------------------------------------------------------------- */
[class*="popmake-"].wp-block-column {
	cursor: pointer;
}
[class*="popmake-"].wp-block-column .wp-block-image {
	overflow: hidden;
}
[class*="popmake-"].wp-block-column .wp-block-image img {
	transition: transform 0.3s var(--tama-ease);
}

/* ---------------------------------------------------------------
 * マイクロインタラクション（マウス操作の端末のみ）
 * --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link {
		transition: transform 0.15s var(--tama-ease), box-shadow 0.15s var(--tama-ease), opacity 0.15s;
	}
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	}
	.wp-block-button__link:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
	}
	[class*="popmake-"].wp-block-column:hover .wp-block-image img {
		transform: scale(1.03);
	}
}

/* ---------------------------------------------------------------
 * スクロールに合わせたフェードイン
 * .tama-reveal は site.js が「読み込み時に画面より下にある要素」にだけ付ける。
 * 最初の画面に見えている要素は隠さないので、表示速度（FCP/LCP）に影響しない。
 * --------------------------------------------------------------- */
.tama-reveal:not(.is-inview) {
	opacity: 0;
	transform: translateY(16px);
}
.tama-reveal.is-inview {
	transition:
		opacity 0.6s var(--tama-ease) var(--tama-delay, 0s),
		transform 0.6s var(--tama-ease) var(--tama-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.tama-reveal:not(.is-inview) {
		opacity: 1;
		transform: none;
	}
	.wp-block-button__link,
	[class*="popmake-"].wp-block-column .wp-block-image img {
		transition: none !important;
	}
	.wp-block-button__link:hover,
	[class*="popmake-"].wp-block-column:hover .wp-block-image img {
		transform: none !important;
	}
}