@charset "UTF-8";

/*
 * 本文を行ごとに見せるための土台。動かすのは /assets/js/text-reveal.js。
 *
 * ここに書くのは「隠す形」と「切り抜きの箱」だけ。どれを対象にするかは JS が
 * 決めるので、CSS 側から特定の要素を先回りで隠すことはしない。JS が動かない
 * 環境では .js-text-reveal が誰にも付かず、文章は普通に出る。
 */

/*
 * 分割が済むまでの仮の状態。JS が付けて、行の箱に組み替えた時点で外す。
 * transition は付けない——ここは「まだ測っていない」ことを表すだけで、
 * 見せる動きは GSAP が持つ。
 */
.js-text-reveal {
	opacity: 0;
}

/*
 * 文字を包む箱。ページ側の CSS から守る。
 *
 * サイトには .home-intro__column span { display: block } のような、span を
 * まとめて指す指定がある。そこへ1文字ずつ span を足すと、その1文字ずつが
 * ブロックになり、60文字の段落が60行として測られた（実際に起きた）。
 * 測る前に組版を壊されると、行の区切りは何をどう直しても正しくならない。
 *
 * all: unset は、継承する性質（書体・色・行間・組み方向）はそのまま引き継ぎ、
 * display や余白といった箱の性質だけを素に戻す。ページ側の指定に競り勝つ必要が
 * あるので !important を付ける。この3つの class はこちらが差し込んだ入れ物で、
 * ページの意匠が乗る場所ではない。
 */
.tr-atom {
	all: unset !important;
}

/*
 * 1行ぶんの窓。行は「次の行がある側」から入ってくるので、そちら側は切ったまま
 * にする。手前側だけ少し広げるのは、行間が詰まった見出しで文字の頭が欠けるのを
 * 避けるため。広げたぶんは負のマージンで戻すので、行送りは変わらない。
 *
 * 物理方向（top / bottom）ではなく block 方向で書くのは、このサイトに縦組みの
 * 見出しがあるため。縦組みでは行が右から左へ積まれるので、上下で書くと守る側と
 * 切る側が入れ替わり、出る前の文字が見えてしまう。
 */
.tr-line {
	display: block !important;
	overflow: hidden;
	padding-block-start: 0.14em;
	margin-block-start: -0.14em;
}

.tr-line__inner {
	display: block !important;
}

/*
 * 出終わったら切り抜きを解く。残したままだと、g や y の下端と、選択範囲や
 * フォーカスリングの縁が切れたままになる。
 */
.is-text-revealed .tr-line {
	overflow: visible;
}

/*
 * 動きを減らす設定のとき、JS は最初から何もしない（class を付けない）。
 * これは保険。付いた状態で JS が止まっても、文章が消えたままにはしない。
 */
@media (prefers-reduced-motion: reduce) {
	.js-text-reveal {
		opacity: 1;
	}

	.tr-line {
		overflow: visible;
	}
}