/* ===== 背景演出レイヤー：body直下に出力され、z-index:-1で常に一番奥 ===== */
.mob-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}
.mob-bg__layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
		ellipse at 50% 20%,
		color-mix(in srgb, var(--mob-scope-glow) 12%, var(--mob-bg-color)) 0%,
		var(--mob-bg-color) 75%
	);
}
.mob-bg__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ===== fxレイヤー：スキャンライン・ビネット・VHSグリッチ帯 ===== */
/* デフォルトは背景側（z-index:0、.mob-bgと同じ層）。
   body.mob-fx-front が付くページだけ、コンテンツより手前（z-index:30）に切り替わる */
.mob-fx {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}
body.mob-fx-front .mob-fx {
	z-index: 30;
}
.mob-fx__scanlines {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0.35) 2px,
		rgba(0, 0, 0, 0.35) 3px
	);
	mix-blend-mode: multiply;
}
.mob-fx__vignette {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: inset 0 0 140px 30px rgba(0, 0, 0, 0.85);
}
.mob-fx__vhs-band {
	position: fixed;
	left: 0;
	right: 0;
	height: 14px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
	filter: blur(0.5px);
	mix-blend-mode: screen;
	opacity: 0;
}

/* ===== ヘッダー（iPhone Safe Area対応） ===== */
.site-header {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: calc(18px + env(safe-area-inset-top));
	padding-right: calc(28px + env(safe-area-inset-right));
	padding-bottom: 18px;
	padding-left: calc(28px + env(safe-area-inset-left));
	background-color: rgba(5, 7, 10, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 255, 106, 0.15);
}
.site-header__logo {
	font-family: 'Times New Roman', serif;
	letter-spacing: 0.08em;
	font-size: 15px;
	color: var(--mob-paper);
}
.site-header__logo a { text-decoration: none; }
.site-header__nav ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-header__nav a {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-decoration: none;
	opacity: 0.75;
}

@media (max-width: 640px) {
	.site-header {
		padding-top: calc(14px + env(safe-area-inset-top));
	}
	.site-header__nav ul { gap: 14px; }
}

/* ===== ホームのヒーロー ===== */
.mob-hero {
	position: relative;
	z-index: 10;
	min-height: var(--mob-hero-min-height, 78vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 28px;
}
.mob-hero__image-slot { width: min(260px, 60vw); }
.mob-hero__image-slot--empty {
	aspect-ratio: 1 / 1;
	border: 1px dashed rgba(242, 240, 232, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(242, 240, 232, 0.4);
	font-size: 11px;
	letter-spacing: 0.15em;
	background: rgba(0, 0, 0, 0.15);
}
.mob-hero__sub {
	margin-top: 14px;
	font-size: 10px;
	letter-spacing: 0.35em;
	color: var(--mob-scope-glow);
	text-transform: uppercase;
	opacity: 0.8;
}
.mob-hero__cta-row {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	max-width: 560px;
}
.mob-hero__cta-btn {
	padding: 10px 22px;
	border: 1px solid color-mix(in srgb, var(--mob-scope-glow) 40%, transparent);
	color: var(--mob-paper);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 0 var(--mob-accent-a), -1px 0 var(--mob-accent-b);
	background: rgba(0, 20, 0, 0.35);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.mob-hero__cta-btn:hover {
	border-color: var(--mob-scope-glow);
	color: var(--mob-scope-glow);
}

/* ===== フッター ===== */
.site-footer {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 28px;
	padding-bottom: calc(28px + env(safe-area-inset-bottom));
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--mob-ink-dim);
}

@media (prefers-reduced-motion: reduce) {
	.mob-bg__canvas,
	.mob-fx__vhs-band {
		display: none;
	}
}

/* ===== ボタンブロック「オシロスコープ」スタイル ===== */
.wp-block-button.is-style-oscilloscope .wp-block-button__link {
	padding: 10px 22px;
	border: 1px solid color-mix(in srgb, var(--mob-scope-glow) 40%, transparent);
	border-radius: 0;
	color: var(--mob-paper);
	background-color: rgba(0, 20, 0, 0.35);
	font-family: 'Share Tech Mono', 'DotGothic16', 'Courier New', monospace;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-shadow: 1px 0 var(--mob-accent-a), -1px 0 var(--mob-accent-b);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: border-color 0.2s, color 0.2s;
}
.wp-block-button.is-style-oscilloscope .wp-block-button__link:hover {
	border-color: var(--mob-scope-glow);
	color: var(--mob-scope-glow);
	background-color: rgba(0, 20, 0, 0.5);
}