@charset "UTF-8";
/**
 * スクロール演出の初期状態
 *
 * 原則:
 *   - JS が動く環境（html.ttcs-js）でのみ要素を隠す
 *   - prefers-reduced-motion が有効なら一切隠さない
 *   - JS の初期化が 2.5 秒以内に完了しなければ強制的に表示する
 *     （.ttcs-motion-fallback / inc/setup.php の保険スクリプト）
 *
 * これにより「JSが落ちたらコンテンツが見えない」事故を防ぐ。
 */

/* 演出対象の初期状態 ---------------------------------------------------- */

html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="fade"],
html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="fade-up"]:not(:has([data-anim-child])),
html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="fade-up"] > [data-anim-child],
html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="fade-up"] [data-anim-child] {
	opacity: 0;
}

/* :has() 非対応ブラウザ向けの保険（親も隠すが、子と同時に解除される） */
@supports not selector(:has(*)) {
	html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="fade-up"] {
		opacity: 0;
	}
}

html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="clip"] {
	clip-path: inset(0 0 100% 0);
}

html.ttcs-js:not(.ttcs-reduced-motion):not(.ttcs-motion-fallback) [data-anim="scale-in"] {
	opacity: 0;
	transform: scale(0.96);
}

/* 初期化完了後は CSS 側の指定を GSAP のインラインスタイルに委ねる */
html.ttcs-motion-ready [data-anim] {
	/* GSAP がインラインで制御するため、ここでは何もしない */
}

/* 行マスク（mask / lines）用のラッパ ------------------------------------ */

.ttcs-line-mask {
	display: block;
	overflow: hidden;
	padding-block: 0.06em; /* ディセンダの切れ防止 */
	margin-block: -0.06em;
}

.ttcs-line-inner {
	display: block;
	will-change: transform;
}

/*
 * 文字単位の演出。
 * 1文字ずつが inline-block だと、どの文字間でも改行できてしまうため、
 * <wbr> 区切りの「語」でひとまとめにして、その中では折り返させない。
 */
.ttcs-word {
	display: inline-block;
	white-space: nowrap;
}

.ttcs-char {
	display: inline-block;
	will-change: transform, opacity;
}

/* 視差 ------------------------------------------------------------------ */

[data-anim="parallax"] {
	will-change: transform;
}

.ttcs-parallax-wrap {
	overflow: hidden;
}

/* 横スクロールセクション ------------------------------------------------ */

.ttcs-hscroll {
	overflow: hidden;
}
.ttcs-hscroll__track {
	display: flex;
	gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	will-change: transform;
}
.ttcs-hscroll__item {
	flex: 0 0 auto;
	width: clamp(17rem, 26vw, 25rem);
}

/* GSAP が使えない環境では素の横スクロールにフォールバック */
html:not(.ttcs-motion-ready) .ttcs-hscroll,
html.ttcs-reduced-motion .ttcs-hscroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 1rem;
}
html:not(.ttcs-motion-ready) .ttcs-hscroll__item,
html.ttcs-reduced-motion .ttcs-hscroll__item {
	scroll-snap-align: start;
}

/* スクロール進捗バー ---------------------------------------------------- */

.ttcs-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--ttcs-accent);
	z-index: 100;
	pointer-events: none;
}

/* マグネティックボタン -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	[data-magnetic] {
		will-change: transform;
	}
}

/* reduced-motion の完全尊重 --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-anim] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.ttcs-marquee__track {
		transform: none !important;
	}
}

/* 強制表示（保険） ------------------------------------------------------ */

html.ttcs-motion-fallback [data-anim],
html.ttcs-motion-fallback [data-anim-child] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}