/*
 * No.18 トップのヒーロー（sumida-cc/hero）。Figma: 840:17324。
 *
 * 高さは固定（画面の幅・高さで変えない）。ヘッダー（position: fixed）の裏まで伸ばす（Figma ではヒーローの上端がページの上端）。
 * JS が無いとき・読み込み前：カードを縦に詰めて静止して並べる（列ごとに上から。はみ出した列は切れる）。
 * JS（hero.js）が配置すると data-state="flow" になり、カード・装飾は transform で流れる。
 * data-state="loading" は JS が付ける（配置し終わるまで隠す）。
 *
 * 調整用（.hero に書く）
 *   --hero-height                           高さ（PC・SP 共通）
 *   --hero-bg                               背景色
 *   --hero-gap                              JS が無いときのカードの間隔
 *   --hero-card-large / --hero-card-small   カードの画像の大きさ（正方形。SP は小さくする）
 *   --hero-deco-scale                       装飾の大きさ（素材の width・height に対する比率。SP は縮める）
 *   --hero-card-opacity                     カード全体の不透明度（ホバー・フォーカス中のカードは 1） */

.hero,
.front-intro {
	--hero-height: 810px;
}

.hero {
	--hero-bg: var(--wp--preset--color--base-white, #fff);
	--hero-gap: var(--wp--custom--molecule--rg, 2rem);
	--hero-card-large: 360px;
	--hero-card-small: 180px;
	--hero-deco-scale: 1;
	--hero-card-opacity: 0.75;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: var(--hero-height);
	margin-block-start: calc(var(--site-header-height, 0px) * -1);
	overflow: clip;
	background-color: var(--hero-bg);
	border-block-end: 1px solid var(--wp--preset--color--line-grey, #9e9e9e);
}

.hero__inner {
	position: absolute;
	inset: 0;
}

/*
 * トップ（front-page.html の front-intro）：ヒーローをその場に固定し、続くセクション（about）が下から覆っていく。
 * ヘッダー（position: fixed）は front-intro より上のまま。覆われている間は hero.js が動きを止める。
 * reduced-motion でも固定はそのまま（レイアウトのため）。
 *
 * sticky の要素はコンテナの下端より下へ行けないので、ヒーローより低いセクション（SP の about など）では、
 * 覆い終わる前に固定が外れてヒーローがふつうにスクロールしてしまう。そこでヒーローの下のマージンを高さ分だけ負にして
 * （続くセクションは同じ分の上のマージンで元の位置に戻す）、続くセクションの下端が画面を出るまで固定を続ける。
 * そのときヒーローは front-intro の下にはみ出すので、overflow: clip で切る（clip はスクロールコンテナを作らないので sticky は効く）。
 */
.front-intro {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.front-intro > * {
	margin-block: 0;
}

.front-intro > .hero {
	position: sticky;
	inset-block-start: 0;
	z-index: 0;
	margin-block: calc(var(--site-header-height, 0px) * -1) calc(var(--hero-height) * -1);
}

.front-intro > .hero + * {
	position: relative;
	z-index: 1;
	margin-block-start: var(--hero-height);
}

.hero[data-state="loading"] :is(.hero__items, .hero__decos) {
	visibility: hidden;
}

/* --- 装飾（カードより後ろ。飾りなので操作できない） --- */

.hero__decos {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__deco {
	position: absolute;
	inset-block-start: calc(var(--top) * (100% - var(--h) * var(--hero-deco-scale)));
	inset-inline-start: calc((var(--i) + 0.5) / var(--deco-count) * 100%);
	display: block;
	width: calc(var(--w) * var(--hero-deco-scale));
	max-width: none;
	height: calc(var(--h) * var(--hero-deco-scale));
}

/* --- カードの並び --- */

.hero__items {
	position: absolute;
	inset: 0;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--hero-gap);
	margin: 0;
	/* 上はヘッダーの裏になるので、その下から並べる（JS はここで並んだ一番上をレーンの上端にする） */
	padding: calc(var(--site-header-height, 0px) + var(--hero-gap)) var(--hero-gap) var(--hero-gap);
	list-style: none;
}

.hero[data-state="flow"] .hero__items {
	display: block;
	padding: 0;
}

.hero[data-state="flow"] :is(.hero__item, .hero__deco) {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	will-change: transform;
}

/* --- カード1枚（Figma 840:17382 / 847:14590） --- */

.hero-card {
	--hero-card-size: var(--hero-card-small);

	flex: none;
	box-sizing: border-box;
	width: var(--hero-card-size);
	margin: 0;
	background-color: var(--wp--preset--color--base-white, #fff);
}

.hero-card[data-size="large"] {
	--hero-card-size: var(--hero-card-large);
}

.hero-card__link {
	position: relative;
	display: block;
	color: var(--wp--preset--color--base-black, #161616);
	text-decoration: none;
}

/* theme.json の a:hover underline を打ち消し */
a.hero-card__link:hover,
a.hero-card__link:focus {
	text-decoration: none;
}

.hero-card__link:focus {
	outline: none;
}

/*
 * ホバー・フォーカス中（4.3）：乗っているカード以外は、ゆっくり沈む（ブラー＋不透明度＋縮小）。マウスは受け付けたまま。
 * 値は hero.js の SINK が --hero-sink-* に書き込む（縮小・時間・遅れはカードごとにランダム）。
 * 流れの transform は li、沈む見た目はリンクに付けて重ならないようにする。
 */
.hero-card__link {
	opacity: var(--hero-card-opacity, 0.75);
	transition:
		filter var(--hero-sink-duration, 0.8s) ease-in-out var(--hero-sink-delay, 0s),
		opacity var(--hero-sink-duration, 0.8s) ease-in-out var(--hero-sink-delay, 0s),
		scale var(--hero-sink-duration, 0.8s) ease-in-out var(--hero-sink-delay, 0s);
}

.hero-card[data-state="sunk"] .hero-card__link {
	filter: blur(var(--hero-sink-blur, 10px));
	opacity: var(--hero-sink-opacity, 0.6);
	scale: var(--hero-sink-scale, 0.88);
}

/* 沈んだカードは白背景も透明にする（沈む見た目と同じ時間・遅れ） */
.hero-card {
	transition: background-color var(--hero-sink-duration, 0.8s) ease-in-out var(--hero-sink-delay, 0s);
}

.hero-card[data-state="sunk"] {
	background-color: transparent;
}

/* 乗っている・フォーカスの入ったカードだけ不透明に戻す（JS が無いとき・reduced-motion でも :hover・:focus-visible で戻る） */
.hero-card[data-state="active"] .hero-card__link,
.hero-card__link:focus-visible {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.hero-card__link:hover {
		opacity: 1;
	}
}

.hero-card[data-state="active"] {
	z-index: 2;
}

/*
 * 常駐のカード（開催中・予定のグループ展。hero.js が中央付近で漂わせる）：ほかのカード・装飾より上。
 * 静止の位置を測る間（data-state="measure"）は列から外し、ほかのカードを詰めて並べる。
 * reduced-motion で静止するときは、ヘッダーの下〜下端の中央に置く。
 */
.hero-card[data-resident="true"] {
	z-index: 3;
}

.hero[data-state="measure"] .hero-card[data-resident="true"] {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hero[data-state="static"] .hero-card[data-resident="true"] {
		position: absolute;
		inset-block-start: calc(var(--site-header-height, 0px) + (100% - var(--site-header-height, 0px)) / 2);
		inset-inline-start: 50%;
		translate: -50% -50%;
	}
}

.hero-card__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue, #004098);
	outline-offset: 2px;
}

.hero-card__inner {
	display: flex;
	flex-direction: column;
}

.hero-card__figure {
	display: block;
	width: var(--hero-card-size);
	height: var(--hero-card-size);
	overflow: hidden;
}

.hero-card__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* タイトル：先頭に「-」、1行で末尾を省略（Figma は折り返さない） */
.hero-card__head {
	display: block;
	padding-block: 4px;
	padding-inline: var(--wp--custom--atom--rg, 0.5rem);
}

.hero-card .hero-card__marker {
	display: flex;
	gap: var(--wp--custom--atom--xs, 0.25rem);
	min-width: 0;
	font-size: var(--wp--preset--font-size--text-xs, 0.75rem);
	line-height: 1.25;
}

.hero-card .hero-card__marker::before {
	content: "-";
	flex: none;
}

.hero-card .hero-card__marker .marker-text__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ラベル：カードの左上（Figma の ::after。上に 2px はみ出す） */
.hero-card__label {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: 0;
	z-index: 1;
}

/* 公開時はグループ展以外がほぼ「作品」になり、うるさく見えるため当面は出さない（T5.15-2） */
.hero-card .hero-card__label {
	display: none;
}

.hero-card .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- SP（Figma 847:14738。高さは PC と同じ。カード・装飾を縮める。画像の sizes は hero.php と合わせる） --- */

@media (max-width: 767px) {
	.hero {
		--hero-card-large: 280px;
		--hero-card-small: 150px;
		--hero-deco-scale: 0.6;
		--hero-gap: var(--wp--custom--molecule--sm, 1rem);
	}
}