/* ==========================================================================
   Gutzgutz page styles
   トークンを body[data-page="gutzgutz"] スコープで上書きし、
   page-header / service-card / philosophy-point 等の共通コンポーネントを
   そのまま「アーケード筐体」に再配色する。
   ========================================================================== */

@layer gutzgutz {
	body[data-page="gutzgutz"] {
		--color-primary: #ffece2;
		--color-accent: #ff3b30;
		--color-accent-alt: #ff9a3c;
		--color-border: #5c1a16;
		--color-text: #f3d9cf;
		--color-text-light: #c98f82;
		--color-bg: #120504;
		--color-bg-light: #1d0908;
		--color-bg-dark: #0a0302;

		position: relative;
	}

	/* --------------------------------------------------------------------------
	   ブラウン管 — スキャンライン + ビネット + フリッカー
	   -------------------------------------------------------------------------- */

	body[data-page="gutzgutz"]::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			repeating-linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0.18) 0,
				rgba(0, 0, 0, 0.18) 1px,
				transparent 1px,
				transparent 3px
			),
			radial-gradient(
				ellipse at center,
				transparent 55%,
				rgba(0, 0, 0, 0.6) 100%
			);
		mix-blend-mode: multiply;
		animation: gutz-flicker 6s infinite;
	}

	@keyframes gutz-flicker {
		0%,
		96%,
		100% {
			opacity: 1;
		}
		97% {
			opacity: 0.85;
		}
		98% {
			opacity: 1;
		}
		99% {
			opacity: 0.9;
		}
	}

	/* --------------------------------------------------------------------------
	   見出し — ネオン管のグロー
	   -------------------------------------------------------------------------- */

	body[data-page="gutzgutz"] .page-header h1,
	body[data-page="gutzgutz"] h2 {
		color: var(--color-accent);
		text-shadow:
			0 0 6px color-mix(in srgb, var(--color-accent) 70%, transparent),
			0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent),
			0 3px 0 var(--color-bg-dark);
	}

	body[data-page="gutzgutz"] .section-eyebrow {
		color: var(--color-accent-alt);
	}

	/* --------------------------------------------------------------------------
	   アーケード導入 — INSERT COIN ラベル（非点滅、クリック可能に見せない）
	   -------------------------------------------------------------------------- */

	.gutz-insert-coin {
		margin-bottom: var(--spacing-md);
	}

	/* --------------------------------------------------------------------------
	   煮え滾る背景 — page-header の下でうねる熱源
	   -------------------------------------------------------------------------- */

	body[data-page="gutzgutz"] .page-header {
		position: relative;
		isolation: isolate;
		overflow: clip;

		&::before {
			content: "";
			position: absolute;
			inset: -20%;
			z-index: -1;
			background: radial-gradient(
				ellipse at 50% 120%,
				color-mix(in srgb, var(--color-accent) 55%, transparent) 0%,
				transparent 60%
			);
			filter: blur(40px);
			animation: gutz-boil 5s ease-in-out infinite alternate;
		}
	}

	@keyframes gutz-boil {
		from {
			transform: scale(1) translateY(0);
			opacity: 0.5;
		}
		to {
			transform: scale(1.08) translateY(-2%);
			opacity: 0.85;
		}
	}

	body[data-page="gutzgutz"] .icon-accent {
		filter: invert(24%) sepia(80%) saturate(3000%) hue-rotate(-8deg)
			brightness(100%) contrast(105%);
	}

	/* --------------------------------------------------------------------------
	   バトルカード — service-card / philosophy-point（平面のまま、色のみで戦わせる）
	   -------------------------------------------------------------------------- */

	body[data-page="gutzgutz"] .service-card,
	body[data-page="gutzgutz"] .philosophy-point {
		transition: box-shadow var(--transition-base);

		&:hover {
			box-shadow: inset 0 -2px 0 var(--color-accent);
		}
	}

	/* --------------------------------------------------------------------------
	   ボタン — 攻撃色に
	   -------------------------------------------------------------------------- */

	body[data-page="gutzgutz"] .btn,
	body[data-page="gutzgutz"] .service-card,
	body[data-page="gutzgutz"] .philosophy-point {
		box-shadow: none;
	}

	body[data-page="gutzgutz"] .btn:hover,
	body[data-page="gutzgutz"] .btn:active {
		transform: none;
	}

	body[data-page="gutzgutz"] .btn-primary:hover {
		box-shadow: 0 0 18px
			color-mix(in srgb, var(--color-accent) 60%, transparent);
	}

	@media (prefers-reduced-motion: reduce) {
		body[data-page="gutzgutz"]::after,
		body[data-page="gutzgutz"] .page-header::before {
			animation: none;
		}
	}
}