/*
 * 動きの層。
 * 内容を隠す指定はすべて html.sb-motion の下にあります。このクラスは、
 * 「動きを減らす」設定でない場合にだけ付き、スクリプトが動かなければ外れます。
 */

:root { --sb-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- 大きな英字：輪郭だけにして、スクロールで横へ流す ---------- */

.sb-ghost {
	color: transparent;
	-webkit-text-stroke: 1.5px #DDE4E1;
	will-change: transform;
}
.sb-ghost--tint,
.sb-page-hero .sb-ghost { -webkit-text-stroke-color: #D3DAD7; }
.sb-ghost--cta { -webkit-text-stroke-color: #3A4642; }

/* ---------- ヘッダー：上に固定し、下へ読み進めると隠れる ---------- */

.sb-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: transform .4s var(--sb-ease), box-shadow .3s ease;
}
.sb-header.is-scrolled { box-shadow: 0 6px 24px rgba(20, 20, 20, .07); }
.sb-header.is-hidden { transform: translateY(-110%); }

/* ---------- 読み進めバー ---------- */

.sb-progress {
	position: fixed; z-index: 50; left: 0; right: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	height: 3px; pointer-events: none;
}
.sb-progress i {
	display: block; height: 100%;
	transform-origin: 0 50%; transform: scaleX(var(--p, 0));
	background: linear-gradient(90deg, var(--sb-cyan), var(--sb-red));
}

/* ---------- ボタン・カード・パネルのホバー ---------- */

.sb-btn { transition: opacity .15s ease, background-color .15s ease, transform .3s var(--sb-ease), box-shadow .3s ease; }
.sb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 20, 20, .16); }
.sb-btn--sm:hover { box-shadow: 0 6px 16px rgba(20, 20, 20, .16); }

.sb-card { transition: transform .4s var(--sb-ease), box-shadow .4s ease; }
.sb-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 20, 20, .12); }
.sb-card__image { overflow: hidden; }
.sb-card__image img { transition: transform .8s var(--sb-ease); }
.sb-card:hover .sb-card__image img { transform: scale(1.06); }

.sb-business__panel { transition: transform .4s var(--sb-ease), box-shadow .4s ease; }
.sb-business__panel:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(20, 20, 20, .14); }

.sb-issues__item { transition: transform .4s var(--sb-ease), background-color .3s ease; }
.sb-issues__item:hover { transform: translateY(-4px); background: var(--sb-tint-strong); }

.sb-business__stat-value { font-variant-numeric: tabular-nums; }

/* ---------- ヒーロー・ミッション帯の図形 ---------- */

.sb-hero, .sb-mission { position: relative; overflow: hidden; }
.sb-hero__inner, .sb-mission__inner { position: relative; z-index: 1; }

.sb-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sb-shape { position: absolute; display: block; will-change: transform; }
.sb-shape > i { display: block; width: 100%; height: 100%; }

.sb-shape--a { width: clamp(220px, 32vw, 460px); aspect-ratio: 1; right: -6%; top: -18%; }
.sb-shape--a > i { border-radius: 50%; background: rgba(92, 225, 230, .30); }
.sb-shape--b { width: clamp(120px, 16vw, 240px); aspect-ratio: 1; left: 44%; bottom: 6%; }
.sb-shape--b > i { background: rgba(247, 50, 92, .16); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.sb-shape--c { width: clamp(120px, 15vw, 220px); aspect-ratio: 1; left: -3%; top: 32%; }
.sb-shape--c > i { border-radius: 50%; border: 2px solid rgba(20, 20, 20, .12); }
.sb-shape--d { width: clamp(40px, 5vw, 72px); aspect-ratio: 1; left: 30%; top: 12%; }
.sb-shape--d > i { background: rgba(20, 20, 20, .07); transform: rotate(18deg); }

.sb-shape--e { width: clamp(220px, 30vw, 440px); aspect-ratio: 1; right: -4%; top: -24%; }
.sb-shape--e > i { border-radius: 50%; background: rgba(92, 225, 230, .16); }
.sb-shape--f { width: clamp(160px, 20vw, 300px); aspect-ratio: 1; left: 8%; bottom: -26%; }
.sb-shape--f > i { border-radius: 50%; background: rgba(247, 50, 92, .20); }

/* ---------- 英語キャッチの流れる帯（トップ） ---------- */

.sb-marquee {
	overflow: hidden; background: var(--sb-white);
	border-bottom: 1px solid var(--sb-line); padding: 18px 0 14px;
}
.sb-marquee__track { display: flex; width: max-content; }
.sb-marquee__group { display: flex; flex: none; }
.sb-marquee__group span {
	flex: none; padding-right: 56px;
	font-family: var(--sb-font-en); font-weight: 800; line-height: 1.1;
	font-size: clamp(48px, 8vw, 104px); letter-spacing: -.02em; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1.5px var(--sb-ink);
}
.sb-marquee__group span:nth-child(even) { color: var(--sb-red-display); -webkit-text-stroke: 0; }

/* ---------- ここから先は「動きを減らす」でない人だけ ---------- */

@media (prefers-reduced-motion: no-preference) {
	.sb-marquee__track { animation: sb-marquee 46s linear infinite; }
	.sb-marquee:hover .sb-marquee__track { animation-play-state: paused; }
	@keyframes sb-marquee { to { transform: translate3d(-50%, 0, 0); } }

	.sb-shape > i { animation: sb-drift 16s ease-in-out infinite alternate; }
	.sb-shape--b > i, .sb-shape--e > i { animation-duration: 22s; animation-direction: alternate-reverse; }
	.sb-shape--c > i, .sb-shape--f > i { animation-duration: 19s; }
	@keyframes sb-drift {
		from { transform: translate3d(0, 0, 0) rotate(0deg); }
		to   { transform: translate3d(26px, -34px, 0) rotate(14deg); }
	}
	.sb-shape--d > i { animation-name: sb-spin; }
	@keyframes sb-spin { from { transform: rotate(18deg); } to { transform: rotate(198deg); } }

	/* 順番に現れる */
	html.sb-motion [data-sb-reveal] { opacity: 0; }
	html.sb-motion [data-sb-reveal].is-in {
		opacity: 1;
		animation: sb-up .9s var(--sb-ease) var(--sb-d, 0s) backwards;
	}
	html.sb-motion [data-sb-reveal="wipe"].is-in { animation-name: sb-wipe; animation-duration: 1s; }
	html.sb-motion [data-sb-reveal="pop"].is-in { animation-name: sb-pop; animation-duration: .6s; }
	@keyframes sb-up   { from { opacity: 0; transform: translate3d(0, 32px, 0); } }
	@keyframes sb-wipe {
		from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-14px, 0, 0); }
		to   { opacity: 1; clip-path: inset(0 0 0 0); }
	}
	@keyframes sb-pop  { from { opacity: 0; transform: scale(.86) translate3d(0, 10px, 0); } }

	/* 見出しを1文字ずつ */
	.sb-ch { display: inline-block; }
	html.sb-motion [data-sb-split]:not(.is-in) .sb-ch { opacity: 0; }
	html.sb-motion [data-sb-split].is-in .sb-ch {
		animation: sb-char .85s var(--sb-ease) calc(var(--i) * 38ms + var(--sb-d, 0s)) backwards;
	}
	@keyframes sb-char { from { opacity: 0; transform: translate3d(0, .7em, 0) rotate(4deg); } }

	/* ヒーローのロゴ：棒が伸び、浮かび、マウスに寄る */
	html.sb-motion .sb-hero__mark rect { transform-box: fill-box; transform-origin: 50% 100%; }
	html.sb-motion:not(.sb-ready) .sb-hero__mark rect { transform: scaleY(0); }
	html.sb-motion.sb-ready .sb-hero__mark rect {
		animation: sb-grow 1s var(--sb-ease) calc(var(--i) * 110ms + .3s) backwards;
	}
	@keyframes sb-grow { from { transform: scaleY(0); } }
	html.sb-motion .sb-bar {
		transform: translate3d(calc(var(--mx, 0) * var(--dx, 10) * 1px), calc(var(--my, 0) * var(--dx, 10) * .7px), 0);
		transition: transform .7s var(--sb-ease);
		animation: sb-bob 5.5s ease-in-out infinite alternate;
		animation-delay: calc(var(--i) * -1.3s);
	}
	@keyframes sb-bob { from { translate: 0 0; } to { translate: 0 -12px; } }

	/* 事業アイコンの線を描く */
	html.sb-motion .sb-business__icon path,
	html.sb-motion .sb-business__icon circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
	html.sb-motion .sb-business__panel.is-in .sb-business__icon path,
	html.sb-motion .sb-business__panel.is-in .sb-business__icon circle {
		animation: sb-draw 1.6s var(--sb-ease) .4s forwards;
	}
	@keyframes sb-draw { to { stroke-dashoffset: 0; } }
}