/* ==========================================================================
   TEYLL — セクションの見出し・グラデーションの文字・ロゴの形・動き
   （Figma c-teyll-heading 1317:1292・c-teyll-heading-sp 1370:95904。helpers.php の truss_teyll_heading()・truss_teyll_mark()）
   - c-teyll-heading：小さな日本語のラベル（色の点つき）＋大きな英字（TEYLL のページだけの例外。h2 は日本語・英字は飾り）
     L＝英字 TEYLL/PC/EN-Hero 88（SP 48）／M＝TEYLL/PC/EN-H1 56（SP 36）。英字は Gradient/Brand
   - 英字は画面に入ったときに左から出る（clip-path のマスク。teyll.js が画面の外のものに is-reveal-wait を付け、入ったら外す）。
     動きを減らす設定・JS なしでは、最初から見える
   - c-teyll-mark：ロゴの三角の3本。--color＝ロゴの色 22% を乗算（ヒーロー・下層の見出しの後ろ）／--white＝白 14%（CTA のカード・メニュー）
   ========================================================================== */

/* ---------- グラデーションの文字（Gradient/Brand。24px 以上の太字だけ） ----------
   字の下（g・y など）が背景の外に出て消えないように、下に余白を足して同じだけ詰める */
.c-teyll-heading__en,
.u-teyll-gradient-text {
	width: fit-content; /* 列より長い語（MESSAGE など）は列の外まで出す（max-width で切ると、はみ出た字が消える） */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	background: var(--teyll-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---------- c-teyll-heading ---------- */
.c-teyll-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	font-weight: inherit;
}

.c-teyll-heading__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-primary);
}

.c-teyll-heading__label::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--teyll-heading-dot, var(--teyll-accent-green));
}

.c-teyll-heading--purple {
	--teyll-heading-dot: var(--teyll-accent-purple);
}

.c-teyll-heading--sky {
	--teyll-heading-dot: var(--teyll-accent-sky);
}

.c-teyll-heading--yellow {
	--teyll-heading-dot: var(--teyll-accent-yellow);
}

.c-teyll-heading__en {
	display: block;
	font: var(--text-teyll-en-hero);
	letter-spacing: var(--ls-teyll-en-hero);
	white-space: nowrap;
}

.c-teyll-heading--m .c-teyll-heading__en {
	font: var(--text-teyll-en-h1);
	letter-spacing: var(--ls-teyll-en-h1);
}

@media (max-width: 767px) {
	.c-teyll-heading__label {
		gap: 8px;
	}

	.c-teyll-heading__label::before {
		width: 8px;
		height: 8px;
	}

	.c-teyll-heading--m {
		gap: 2px;
	}

	.c-teyll-heading__en {
		white-space: normal;
	}
}

/* ---------- 画面に入ったときの動き（teyll.js） ---------- */
[data-teyll-reveal] {
	transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 英字：左から出る（字の上下・左右のはみ出しは切らない） */
[data-teyll-reveal=""] {
	clip-path: inset(-20% -10% -30% -10%);
}

[data-teyll-reveal=""].is-reveal-wait {
	clip-path: inset(-20% 100% -30% -10%);
}

/* 丸い写真：丸いマスクが広がる */
[data-teyll-reveal="circle"] {
	clip-path: circle(72% at 50% 50%);
}

[data-teyll-reveal="circle"].is-reveal-wait {
	clip-path: circle(0% at 50% 50%);
}

/* 読み込んだときに画面の上にある丸い写真（ヒーロー・下層の見出し）は、CSS で1回だけ広げる */
@keyframes teyll-circle-in {
	from {
		clip-path: circle(0% at 50% 50%);
	}

	to {
		clip-path: circle(72% at 50% 50%);
	}
}

/* 読み込んだときに画面の上にある英字（下層の見出し）は、CSS で1回だけ左から出す */
@keyframes teyll-text-in {
	from {
		clip-path: inset(-20% 100% -30% -10%);
	}

	to {
		clip-path: inset(-20% -10% -30% -10%);
	}
}

/* ---------- c-teyll-mark（ロゴの三角の3本・飾り） ---------- */
.c-teyll-mark {
	display: block;
	overflow: visible;
	pointer-events: none;
}

.c-teyll-mark--color {
	isolation: isolate;
}

.c-teyll-mark--color path {
	fill-opacity: 0.22;
	mix-blend-mode: multiply;
}

.c-teyll-mark--color .c-teyll-mark__sky {
	fill: var(--teyll-accent-sky);
}

.c-teyll-mark--color .c-teyll-mark__purple {
	fill: var(--teyll-accent-purple);
}

.c-teyll-mark--color .c-teyll-mark__yellow {
	fill: var(--teyll-accent-yellow);
}

.c-teyll-mark--white path {
	fill: var(--teyll-text-on-dark);
	fill-opacity: 0.14;
}

/* 形がゆっくり漂う（20〜30秒の小さな揺れと回転。Figma の注記の①）。動きを減らす設定では foundation.css が止める */
@keyframes teyll-drift {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		transform: translate(14px, -10px) rotate(2deg);
	}

	100% {
		transform: translate(-10px, 8px) rotate(-1.5deg);
	}
}

@keyframes teyll-float {
	0% {
		transform: translate(0, 0) scale(1);
	}

	100% {
		transform: translate(-18px, 14px) scale(1.04);
	}
}