/*
 * Palette-following gradient system.
 *
 * The twelve compositions are derived from the active palette's primary and
 * accent colors. They intentionally describe reusable geometry rather than
 * preserving the motion-template-kit source colors.
 */

:root {
	--tiptop-gradient-primary-soft: color-mix(in srgb, var(--tiptop-primary) 20%, transparent);
	--tiptop-gradient-primary-faint: color-mix(in srgb, var(--tiptop-primary) 8%, transparent);
	--tiptop-gradient-accent-soft: color-mix(in srgb, var(--tiptop-accent) 22%, transparent);
	--tiptop-gradient-accent-faint: color-mix(in srgb, var(--tiptop-accent) 8%, transparent);
	--tiptop-gradient-surface: color-mix(in srgb, var(--tiptop-surface) 88%, transparent);

	/* motion-template-kit の実測12種から、角度・種別・stop構成だけを一般化。 */
	--tiptop-gradient-01: linear-gradient(135deg, var(--tiptop-gradient-primary-soft) 0%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-02: linear-gradient(120deg, var(--tiptop-gradient-primary-soft) 0%, transparent 48%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-03: linear-gradient(180deg, var(--tiptop-gradient-primary-faint) 0%, var(--tiptop-gradient-accent-soft) 58%, transparent 100%);
	--tiptop-gradient-04: linear-gradient(90deg, var(--tiptop-gradient-primary-soft) 0%, var(--tiptop-gradient-surface) 52%, var(--tiptop-gradient-accent-soft) 100%);
	--tiptop-gradient-05: radial-gradient(circle at 18% 24%, var(--tiptop-gradient-primary-soft) 0%, transparent 58%);
	--tiptop-gradient-06: radial-gradient(circle at 82% 20%, var(--tiptop-gradient-accent-soft) 0%, transparent 60%);
	--tiptop-gradient-07: radial-gradient(ellipse at center, var(--tiptop-gradient-primary-faint) 0%, var(--tiptop-gradient-accent-faint) 52%, transparent 76%);
	--tiptop-gradient-08: radial-gradient(circle at 25% 80%, var(--tiptop-gradient-accent-soft) 0%, transparent 48%), radial-gradient(circle at 82% 18%, var(--tiptop-gradient-primary-soft) 0%, transparent 54%);
	--tiptop-gradient-09: conic-gradient(from 210deg at 50% 50%, var(--tiptop-gradient-primary-soft), transparent 32%, var(--tiptop-gradient-accent-soft) 66%, var(--tiptop-gradient-primary-soft));
	--tiptop-gradient-10: conic-gradient(from 90deg at 75% 25%, transparent 0 22%, var(--tiptop-gradient-accent-soft) 38%, transparent 58%, var(--tiptop-gradient-primary-soft) 78%, transparent 100%);
	--tiptop-gradient-11: linear-gradient(150deg, var(--tiptop-gradient-primary-soft) 0 28%, transparent 28% 64%, var(--tiptop-gradient-accent-soft) 64% 100%);
	--tiptop-gradient-12: radial-gradient(circle at 12% 18%, var(--tiptop-gradient-primary-soft) 0%, transparent 38%), radial-gradient(circle at 88% 82%, var(--tiptop-gradient-accent-soft) 0%, transparent 42%), linear-gradient(135deg, var(--tiptop-gradient-primary-faint), var(--tiptop-gradient-accent-faint));

	/* 初回導入で使う役割トークン。構図の差し替えを利用側から分離する。 */
	--tiptop-gradient-hero: var(--tiptop-gradient-12);
	--tiptop-gradient-heading-accent: var(--tiptop-gradient-01);
}

/*
 * Hero trial layer: the negative stacking level keeps the gradient below an
 * existing ::before veil while leaving configured media and text untouched.
 */
.archive-hero,
.tiptop-service-hero {
	position: relative;
	isolation: isolate;
}

.archive-hero::after,
.tiptop-service-hero::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--tiptop-gradient-hero);
	content: "";
	pointer-events: none;
}

/* Small heading accents only; text color and readable contrast stay unchanged.
 * width:fit-content は下線をラベルの幅に合わせるために要る（2026-08-10）。実サイトの
 * eyebrowはどれも幅いっぱいのブロック（トップのWorksで1280px）なので、これが無いと
 * 下の width:100% が「コンテナ幅の下線」になってしまう。承認済みモックも
 * _mockup/tiptop-shared.css:183 の .eyebrow で同じ指定を持つ。
 * 実測(1920px)では全ページのeyebrowが左揃え・margin-inline:0 なので、
 * fit-content にしても中央寄せが崩れる箇所は無い。 */
.archive-hero__eyebrow,
.section__eyebrow,
.tiptop-service-eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-detail__eyebrow,
[class*="__eyebrow"] {
	position: relative;
	width: fit-content;
}

/* 下線は承認済みモック（_mockup/tiptop-shared.css:196）へ揃える（2026-08-10）。
 * 旧実装は「幅52px固定・2px・黒20%→青#3450dc 22%のグラデ」で、モックの
 * 「ラベル幅・1px・単色 --tiptop-contrast」と色/太さ/幅/余白の4点すべて違っていた。
 * グラデを外すので、ここは --tiptop-gradient-heading-accent の唯一の参照だった。
 * 変数自体は front-gradient-system.css:32 に残す（他の gradient と同じ体系で、
 * 将来の参照先が無いと断定しない）。 */
.archive-hero__eyebrow::after,
.section__eyebrow::after,
.tiptop-service-eyebrow::after,
.tiptop-work-detail__eyebrow::after,
.tiptop-news-detail__eyebrow::after,
[class*="__eyebrow"]::after {
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 6px;
	background: var(--tiptop-contrast);
	content: "";
}

@media (prefers-reduced-motion: reduce) {
	.archive-hero::after,
	.tiptop-service-hero::after {
		transition: none;
	}
}