/*
 * 写真のヒーロー（sumida-cc/photo-hero）。Figma: PC 1192:30401 / SP 1210:31383。
 *
 * 高さは固定（画面の幅・高さで変えない）。収まらない写真・背景は切れてよい。
 * 写真の楕円（motion=ring）は角度（--a）から位置・大きさ・重なり順を計算する。
 * 角度と楕円の横の半径は photo-hero.js が写真どうしの間隔（--ring-gap）から求めて書き込む。
 * JS が無いときは番号（--i）と --ring-density からの近似で並ぶ。
 *
 * 調整用（.photo-hero に書く）
 *   --photo-hero-height / --photo-hero-inner-height      全体と文言の領域の高さ（PC）
 *   --photo-hero-height-sp                               全体の高さ（SP）
 *   --photo-hero-bg-width                                背景の幅（PC は 1440px まで固定、それより広い画面は画面の幅）。
 *                                                        背景の高さの計算にも使うため、% ではなく cqi（ヒーローの幅）で書く
 *   --ring-cx / --ring-cy                                楕円の中心（cqi はヒーローの幅に対する割合）
 *   --ring-ry                                            楕円の縦の半径
 *   --ring-gap                                           写真どうしの間隔（奥でも手前でも同じ）。横の半径はここから決まる
 *   --ring-rx                                            楕円の横の半径（JS が無いときだけ使う。JS は --ring-gap から計算して上書きする。
 *                                                        --ring-gap などを変えたら、JS が書き込む値に合わせると読み込み時に写真が動かない）
 *   --ring-tilt / --ring-tilt-depth                      楕円の傾き／手前と奥の傾きの差（手前＝tilt＋depth、奥＝tilt−depth）
 *   --ring-size-back / --ring-size-front                 奥・手前の写真の大きさ（白い枠を含む）
 *   --ring-frame-ratio                                   白い枠の太さ（写真の大きさに対する比率。写真と一緒に縮む）
 *   --ring-x-scale-back                                  奥の横の広がり（手前を 1 とした比率）
 *   --ring-density                                       JS が無いときの、奥に写真を寄せる強さ（0 で等間隔）
 *   --ring-opacity-back                                  奥の写真の不透明度
 *   --photo-hero-title-chars / --photo-hero-lead-chars   見出し・リード文の一番長い行の文字数（文字サイズの上限の計算に使う）
 *   --photo-hero-title-max / --photo-hero-lead-max       見出し・リード文の文字サイズの上限（PC。SP は heading-xs・text-md のトークン）
 *
 * 楕円なし（data-motion="none"、トップの about セクション）は高さを中身で決める。背景の上端は下の「楕円なし」の --photo-hero-bg-top（PC・SP）。
 */

.photo-hero {
	--photo-hero-height: 994px;
	--photo-hero-inner-height: 834px;
	--photo-hero-height-sp: 480px;
	--photo-hero-bg-width: max(1440px, 100cqi);
	--photo-hero-pad-inline: var(--wp--custom--molecule--rg, 1rem);
	--photo-hero-title-chars: 18.5;
	--photo-hero-lead-chars: 23.5;
	--photo-hero-title-max: var(--wp--preset--font-size--heading-xl, 3rem);
	--photo-hero-lead-max: var(--wp--preset--font-size--text-xxl, 1.375rem);

	--ring-angle: 0deg;
	--ring-cx: 51cqi;
	--ring-cy: 425px;
	--ring-rx: 843px;
	--ring-ry: 354px;
	--ring-gap: 28px;
	--ring-tilt: -9.8deg;
	--ring-tilt-depth: 2.3deg;
	--ring-size-back: 42px;
	--ring-size-front: 160px;
	--ring-frame-ratio: 0.05;
	--ring-x-scale-back: 0.8;
	--ring-density: 0.5;
	--ring-opacity-back: 1;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: var(--photo-hero-height);
	margin: 0;
	/* 横は切る（横スクロールを出さない）。縦は切らない（スクロールで楕円が傾いたときに写真が上下にはみ出す）。clip に対応していないブラウザは hidden（縦も切る） */
	overflow: hidden;
	overflow: clip visible;
	container-type: inline-size;
	background-color: var(--wp--preset--color--base-white, #fff);
}

/*
 * 背景（街並み＋下のグラデーション）。Figma（1440px）では __head の上端から 161px。
 * 街並みの SVG は 1440×514、グラデーション（bg-blue → 白）はその下に 192px（幅に合わせて伸縮）。
 * 広い画面で背景が伸びても、グラデーションはヒーローの下端で白になるように縮める。
 * 高さは aspect-ratio と max-height の組み合わせにしない（Safari は max-height を幅の上限に読み替え、幅が縮んで左右が空く）。
 */
.photo-hero__bg {
	--photo-hero-bg-top: 161px;

	position: absolute;
	inset-block-start: var(--photo-hero-bg-top);
	inset-inline-start: 50%;
	z-index: 0;
	display: flex;
	flex-direction: column;
	width: var(--photo-hero-bg-width);
	height: min(calc(var(--photo-hero-bg-width) * 706 / 1440), calc(var(--photo-hero-height) - var(--photo-hero-bg-top)));
	pointer-events: none;
	transform: translateX(-50%);
}

.photo-hero__bg::after {
	content: "";
	flex: 1 1 auto;
	background: linear-gradient(var(--wp--preset--color--bg-blue, #e6ecf5), var(--wp--preset--color--base-white, #fff));
}

.photo-hero__bg-image {
	display: block;
	flex: none;
	width: 100%;
	max-width: none;
	height: auto;
}

/* 写真の楕円 */
.photo-hero__ring {
	position: absolute;
	inset-block-start: var(--ring-cy);
	inset-inline-start: var(--ring-cx);
	z-index: 1;
	width: 0;
	height: 0;
	pointer-events: none;
}

.photo-hero__photo {
	--u: calc(var(--i) / var(--ring-count) * 1turn + var(--ring-angle));
	--a: var(--photo-a, calc(var(--u) - var(--ring-density) * cos(var(--u)) * 1rad));
	--s: sin(var(--a));
	--t: calc((var(--s) + 1) / 2);
	--tilt: calc(var(--ring-tilt) + var(--ring-tilt-depth) * var(--s));
	--x: calc(cos(var(--a)) * var(--ring-rx) * (var(--ring-x-scale-back) + (1 - var(--ring-x-scale-back)) * var(--t)));
	--y: calc(var(--s) * var(--ring-ry) + var(--x) * tan(var(--tilt)));
	--size: calc(var(--ring-size-back) + (var(--ring-size-front) - var(--ring-size-back)) * var(--t));

	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: calc(var(--t) * 100);
	box-sizing: border-box;
	display: block;
	width: var(--size);
	height: var(--size);
	padding: calc(var(--size) * var(--ring-frame-ratio));
	background-color: var(--wp--preset--color--base-white, #fff);
	opacity: calc(var(--ring-opacity-back) + (1 - var(--ring-opacity-back)) * var(--t));
	transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) rotate(var(--tilt));
}

.photo-hero__photo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.photo-hero__photo-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* 文言（見出し・リード文・吹き出し）。常に写真より前。 */
.photo-hero__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--photo-hero-inner-height);
	padding-inline: var(--photo-hero-pad-inline);
}

.photo-hero__poster {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	text-align: center;
}

.photo-hero .photo-hero__title,
.photo-hero .photo-hero__lead {
	margin: 0;
	text-align: center;
	line-height: 2;
	letter-spacing: 0;
	overflow-wrap: normal;
	word-break: normal;
	line-break: strict;
}

/* PC の文字サイズは、一番長い行がヒーローの幅（左右の余白を除く）に収まる大きさを上限まで（fluid）。 */
.photo-hero .photo-hero__title {
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: clamp(0.75rem, calc((100cqi - var(--photo-hero-pad-inline) * 2) / var(--photo-hero-title-chars)), var(--photo-hero-title-max));
	font-weight: 900;
	color: var(--wp--preset--color--logo-blue, #004098);
}

.photo-hero .photo-hero__lead {
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: clamp(0.625rem, calc((100cqi - var(--photo-hero-pad-inline) * 2) / var(--photo-hero-lead-chars)), var(--photo-hero-lead-max));
	font-weight: 700;
	color: var(--wp--preset--color--base-black, #161616);
	text-shadow: 0 4px 4px var(--wp--preset--color--base-white, #fff);
}

/* 吹き出し。Figma では見出しの中心から右へ 125px、上端から 103px 上。 */
.photo-hero__pop {
	--pop-bubble-size: 124px;
	--pop-bubble-rotate: -21.95deg;
	--pop-size-main: 18px;
	--pop-size-sub: 12px;

	position: absolute;
	inset-block-start: -103px;
	inset-inline-start: calc(50% + 125px);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 124px;
	margin: 0;
	text-align: center;
}

.photo-hero__pop-bubble {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: block;
	width: var(--pop-bubble-size);
	height: var(--pop-bubble-size);
	max-width: none;
	transform: translate(-50%, -50%) rotate(var(--pop-bubble-rotate));
}

.photo-hero__pop-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--wp--preset--font-family--jp-sans);
	line-height: 1.5;
	white-space: nowrap;
	color: var(--wp--preset--color--base-black, #161616);
}

.photo-hero__pop-line {
	font-size: var(--pop-size-sub);
	font-weight: 400;
}

.photo-hero__pop-line:first-child {
	font-size: var(--pop-size-main);
	font-weight: 700;
}

/*
 * 見出し・リード文の下のボタン（buttonLabel があるとき）。PC は xl（photo-hero.php）、SP は下で md 相当に縮める。
 * 「すみだクリエイターズクラブについて」は xl の最大幅（454px）では2行になるため、最大幅は画面の幅まで広げて1行にする。
 */
.photo-hero__action {
	position: relative;
	display: flex;
	justify-content: center;
}

.photo-hero__action .wp-block-button .btn[data-size] {
	max-width: 100%;
}

/*
 * 楕円なし（data-motion="none"、トップの about セクション）。Figma: PC 847:22704。
 * 高さは中身で決める。ヒーロー（sumida-cc/hero）の上を覆うので、背景は透けない白で、下端で背景を切る。
 * 上下の余白（--photo-hero-pad-block）は organism/xl（Figma は organism/sm。スクロールで覆っていくときに文言が早く入ってこないよう広げた）。
 * 背景の上端は「上の余白＋差分」（文言と一緒に動く）。Figma は PC 96px・SP 172px だが、文言（見出し3行＋リード文）が
 * Figma（見出し4行）より多いため、街並みが見出しの後ろ半分〜ボタンの上にかかるよう差分を決めている（PC 44px・SP 100px）。
 */
.photo-hero[data-motion="none"] {
	--photo-hero-pad-inline: var(--wp--custom--molecule--lg, 1.75rem);
	--photo-hero-pad-block: var(--wp--custom--organism--xl, 8.75rem);

	height: auto;
	overflow: hidden;
	overflow: clip;
}

.photo-hero[data-motion="none"] .photo-hero__bg {
	--photo-hero-bg-top: calc(var(--photo-hero-pad-block) + 44px);

	height: calc(var(--photo-hero-bg-width) * 706 / 1440);
}

.photo-hero[data-motion="none"] .photo-hero__inner {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--molecule--xxl, 2rem);
	height: auto;
	padding-block: var(--photo-hero-pad-block);
}

/*
 * JS が楕円を配置し終わるまで隠す（data-state="loading" はヒーローの先頭のインラインスクリプトが付ける）。
 * 入場の動き（6.1）の前は、楕円・見出し・リード文・吹き出しを隠す（data-intro="pending"。reduced-motion では付かない）。背景は最初から見せる。
 * 時間・距離・イージングは photo-hero.js の INTRO が --intro-* に書き込む。
 */
.photo-hero[data-state="loading"] .photo-hero__ring {
	visibility: hidden;
}

.photo-hero[data-intro="pending"] :is(.photo-hero__ring, .photo-hero__title, .photo-hero__lead, .photo-hero__pop, .photo-hero__action) {
	opacity: 0;
}

.photo-hero__title-line {
	display: inline-block;
}

/* 楕円・リード文：移動なしのフェードイン */
.photo-hero [data-intro] {
	transition:
		opacity var(--intro-duration, 1s) var(--intro-ease, ease-out),
		translate var(--intro-duration, 1s) var(--intro-ease, ease-out);
}

.photo-hero [data-intro][data-state="hidden"] {
	opacity: 0;
}

/* タイトルの行：上から下へ */
.photo-hero [data-intro="title-line"] {
	transition:
		opacity var(--intro-title-duration, 0.4s) var(--intro-title-ease, ease-out),
		translate var(--intro-title-duration, 0.4s) var(--intro-title-ease, ease-out);
}

.photo-hero [data-intro="title-line"][data-state="hidden"] {
	translate: 0 calc(var(--intro-title-distance, 20px) * -1);
}

/*
 * 吹き出し：上から下へ、最初はゆっくり・最後に向かって速く下りて（--intro-pop-ease）、
 * 着地の位置より --intro-pop-overshoot だけ下まで行き、少しだけ上に戻って止まる。不透明度は別のアニメーションで先に上げる。
 */
.photo-hero [data-intro="pop"] {
	transition: none;
}

.photo-hero [data-intro="pop"][data-state="hidden"] {
	translate: 0 calc(var(--intro-pop-distance, 32px) * -1);
}

.photo-hero [data-intro="pop"][data-state="shown"] {
	animation:
		photo-hero-pop var(--intro-pop-duration, 0.3s) both,
		photo-hero-pop-fade var(--intro-pop-fade-duration, 0.09s) linear both;
}

@keyframes photo-hero-pop {
	0% {
		translate: 0 calc(var(--intro-pop-distance, 32px) * -1);
		animation-timing-function: var(--intro-pop-ease, ease-in);
	}

	75% {
		translate: 0 var(--intro-pop-overshoot, 6px);
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}

	100% {
		translate: 0 0;
	}
}

@keyframes photo-hero-pop-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.photo-hero [data-intro] {
		transition: none;
		animation: none;
	}
}

/*
 * SP（Figma 1210:31383）：写真を出さない（picture の source で画像も読まない）。背景と文言だけ。
 * 背景は画面の幅で上端から 132px。文言は上から organism/md（吹き出しが見出しに重ならないよう Figma の organism/sm から広げた）、左右 atom/xxl。
 * 吹き出しはヒーローの上端から 26px はみ出すので、縦方向だけ切らない。
 */
@media (max-width: 767px) {
	/*
	 * 画面の全幅（alignfull の余白の指定より強くする）。置くのは main の左右余白が 0 の 1カラムの固定ページと、main の外のトップだけ。
	 */
	.photo-hero.photo-hero,
	.has-global-padding > .photo-hero.alignfull {
		--photo-hero-bg-width: 100cqi;
		--photo-hero-pad-inline: var(--wp--custom--atom--xxl, 1rem);

		width: 100%;
		height: var(--photo-hero-height-sp);
		margin-inline: 0;
		overflow: hidden;
		overflow: clip visible;
	}

	.photo-hero__bg {
		--photo-hero-bg-top: 132px;

		height: min(calc(var(--photo-hero-bg-width) * 706 / 1440), calc(var(--photo-hero-height-sp) - var(--photo-hero-bg-top)));
	}

	.photo-hero__ring {
		display: none;
	}

	.photo-hero__inner {
		align-items: flex-start;
		height: auto;
		padding-block-start: var(--wp--custom--organism--md);
	}

	.photo-hero__poster {
		position: static;
		width: 100%;
	}

	/* 文字サイズは Figma SP のトークン（fluid の計算は PC だけ）。見出しは PC と同じ位置で改行し、リード文は改行（br）を無視して自然に折り返す。 */
	.photo-hero .photo-hero__title {
		font-size: var(--wp--preset--font-size--heading-xs, 1.5rem);
	}

	.photo-hero .photo-hero__lead {
		font-size: var(--wp--preset--font-size--text-md, 1rem);
	}

	.photo-hero .photo-hero__lead br {
		display: none;
	}

	.photo-hero__pop {
		--pop-bubble-size: 104px;
		--pop-bubble-rotate: -11.26deg;
		--pop-size-main: 16px;
		--pop-size-sub: 10px;

		inset-block-start: -26px;
		inset-inline-start: auto;
		inset-inline-end: 20px;
	}

	/* ボタンは Figma SP（1357:48271）の padding atom/lg・16px・min 176px（md 相当） */
	.photo-hero__action .wp-block-button .btn[data-size] {
		--sumida-btn-pad: var(--wp--custom--atom--lg);
		--sumida-btn-gap: var(--wp--custom--atom--lg);
		min-width: var(--wp--custom--sizing--button-min--md);
		max-width: min(100%, var(--wp--custom--sizing--button-max--md));
		font-size: var(--wp--preset--font-size--text-md);
	}

	/* 楕円なし（Figma 1357:48263）：高さは中身で決める。背景は画面の幅、下に線。 */
	.photo-hero.photo-hero[data-motion="none"] {
		height: auto;
		overflow: hidden;
		overflow: clip;
		border-block-end: 1px solid var(--wp--preset--color--line-grey, #9e9e9e);
	}

	.photo-hero[data-motion="none"] .photo-hero__bg {
		--photo-hero-bg-top: calc(var(--photo-hero-pad-block) + 100px);

		height: calc(var(--photo-hero-bg-width) * 706 / 1440);
	}
}