/*
 * TOPページのヒーロー（ゆらぐのれん）。
 * inc/hero-wave.php がフロントページだけで読み込み、本文の先頭に差し込む。
 *
 * Snow Monkey Blocks には依存しない（section-with-bgimage をページから消すと
 * そのブロックの CSS も読み込まれなくなるため）。
 * 使っているのはテーマ側の .alignfull だけ。
 *
 * 画像の比率は _dev/build-hero-images.py と揃えてある（PC 2.10 / SP 0.70）。
 * 枠の高さをこの比率から計算することで、のれん本体と「なぎのゑ」の文字が
 * ビューポート幅によって切れないようにしている。
 */

/*
 * 幅と高さを両方とも明示する。
 * aspect-ratio + min/max-height の組み合わせは WebKit（Safari）で
 * 「高さから幅を逆算する」挙動になり、全幅にならない・逆にはみ出すことがある
 * （実測: iPhone 375px 幅で 336px、640px 幅で 882px になった）。
 * 明示すればどのエンジンでも曖昧さが無い。
 */
.ry-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-block: 0;
	width: 100%;
	height: min(calc(100vw / 2.1), 92svh);
	background-color: #1a170d; /* 画像が来るまでの下地。のれん画像の暗部に合わせる */
}

/* 本文の先頭に来るので、テーマ側の上マージンを打ち消す */
.c-entry__content > .ry-hero:first-child {
	margin-top: 0;
}

.ry-hero__picture {
	position: absolute;
	inset: 0;
	display: block;
}

.ry-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.ry-hero__wave {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* WebGL の初期化と画像読み込みが終わるまでは後ろの <picture> を見せる */
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.ry-hero__wave.is-ready {
	opacity: 1;
}

/* 動きを減らす設定では canvas を出さず、静止画のままにする */
@media (prefers-reduced-motion: reduce) {
	.ry-hero__wave {
		display: none;
	}
}

@media (max-width: 639px) {
	.ry-hero {
		height: min(calc(100vw / 0.7), 92svh);
	}
}