/**
 * ヒーロー → Store: スクロールハイジャック方式の円形マスク＋ポスト演出。
 *
 * CSS変数（JSが設定）:
 *   --hero-store-post-bg-p        : Phase A  グラデ＋星
 *   --hero-store-post-content-p   : Phase B  右ロゴ＋文言フェードイン
 *   --hero-store-post-fadeout-p   : Phase C  右ロゴ＋文言フェードアウト
 *   --hero-store-post-logo-shift-p: Phase D  左ロゴフェードイン
 */

.hero-store-iris {
	--hero-store-post-bg-p: 0;
	--hero-store-post-content-p: 0;
	--hero-store-post-fadeout-p: 0;
	--hero-store-post-logo-shift-p: 0;
	position: absolute;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	overflow: visible;
	isolation: isolate;
}

.hero--front.hero--store-iris-sealed .hero__visual {
	visibility: hidden;
}

.hero-store-iris__scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	visibility: hidden;
}

.hero-store-iris.is-post-active .hero-store-iris__scene {
	visibility: visible;
}

/* ── Phase A: グラデーション＋星 ── */

.hero-store-iris__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #1b2b52;
	opacity: 0;
	transition: none;
}

.hero-store-iris.is-post-active .hero-store-iris__backdrop {
	opacity: 1;
}

.hero-store-iris__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, #1b2b52 0%, #2f3568 42%, #4a3789 100% );
	opacity: var( --hero-store-post-bg-p );
}

.hero-store-iris__stars-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	opacity: calc( var( --hero-store-post-bg-p ) * 0.95 );
}

.hero-store-iris__sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero-store-iris__star {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba( 255, 255, 255, 0.95 ) 0 40%,
		rgba( 255, 255, 255, 0 ) 70%
	);
	opacity: var( --base-opacity, 0.65 );
	animation: hero-store-iris-twinkle var( --twinkle, 2.2s ) ease-in-out infinite;
	animation-delay: calc( var( --delay, 0s ) * -1 );
}

@keyframes hero-store-iris-twinkle {
	0%,
	100% {
		opacity: 0.6;
		transform: scale( 1 );
	}

	40% {
		opacity: 0.2;
	}

	70% {
		opacity: 1;
		transform: scale( 1.1 );
	}
}

.hero-store-iris__stars {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center top;
}

/* ── 星空フェーズ: 星座デザイン再生ボタン ── */

.hero-store-iris__audio {
	position: absolute;
	top: 38%;
	left: 50%;
	z-index: 5;
	transform: translate( -50%, -50% );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.hero-store-iris__audio.is-visible {
	visibility: visible;
}

.hero-store-iris__audio-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	outline: none;
	animation: hero-store-iris-audio-twinkle 3s ease-in-out infinite;
	transition: opacity 0.4s ease;
}

.hero-store-iris__audio-toggle.is-playing {
	animation: none;
	opacity: 1;
}

.hero-store-iris__audio-icon {
	width: clamp( 56px, 10vw, 80px );
	height: clamp( 56px, 10vw, 80px );
	transition: all 0.4s ease;
	stroke: rgba( 150, 200, 255, 0.2 );
	stroke-width: 0.5;
	fill: none;
}

.hero-store-iris__audio-icon circle {
	fill: rgba( 255, 255, 255, 0.85 );
	stroke: none;
}

.hero-store-iris__audio-toggle:hover .hero-store-iris__audio-icon,
.hero-store-iris__audio-toggle:focus-visible .hero-store-iris__audio-icon {
	transform: scale( 1.1 );
	stroke: #fff;
	filter: drop-shadow( 0 0 10px rgba( 255, 255, 255, 0.9 ) )
		drop-shadow( 0 0 20px rgba( 100, 150, 255, 0.6 ) )
		drop-shadow( 0 0 35px rgba( 50, 100, 255, 0.4 ) );
}

.hero-store-iris__audio-toggle:active .hero-store-iris__audio-icon {
	transform: scale( 0.9 );
	filter: drop-shadow( 0 0 5px rgba( 255, 255, 255, 0.9 ) );
}

.hero-store-iris__audio-icon--pause[hidden] {
	display: none;
}

@keyframes hero-store-iris-audio-twinkle {
	0%,
	100% {
		opacity: 0.85;
		transform: scale( 1 );
	}

	40% {
		opacity: 0.5;
	}

	70% {
		opacity: 1;
		transform: scale( 1.02 );
	}
}

/* ── 丘（巨大円 SVG の回転・クリップ枠内のみ表示）・地面 ── */

.hero-store-iris__hill {
	--hero-store-wheel-size: max( 430vw, 3400px );
	/* 円中心の配置（circle.svg viewBox 1170.96×1160.73, cx=585.68 cy=581.14 r=553.93） */
	--hero-store-wheel-radius-ratio: 0.477;
	/* 円の中心 — 回転軸（cy / viewBox 高さ） */
	--hero-store-wheel-origin-y: 50.07%;
	/* 旧丘 SVG との cy 差分（52.6% − 50.07%）— 画面上の円位置を維持 */
	--hero-store-wheel-center-nudge: 0.0252;
	/* 稜線・キャラを少し上へ（円弧と羊を同じ量だけ持ち上げる） */
	--hero-store-hill-lift: clamp( 0.5rem, 1.5vh, 1.25rem );
	--hero-store-hill-crest-y: calc( 100% - var( --hero-store-hill-lift ) );
	/* 回転円だけさらに下（羊の bottom には使わない） */
	--hero-store-hill-drop: clamp( 1rem, 2.5vh, 1.75rem );
	/* 羊だけ丘より少し上（回転円の位置は hill-lift のみ） */
	--hero-store-walker-lift-extra: clamp( 3.25rem, 7.5vh, 4.75rem );
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: block;
	width: 100%;
	overflow: visible;
	opacity: var( --hero-store-post-bg-p );
	pointer-events: none;
}

/* 丘だけの固定高さウィンドウ（上下セクションのレイアウトに影響しない） */
.hero-store-iris__hill-layout {
	position: relative;
	display: block;
	width: 100%;
	height: clamp( 30rem, 50vw, 50vh );
	overflow: visible;
}

/* hill-window：巨大円のはみ出しだけクリップ */
.hero-store-iris__hill-wheel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

/* 回転中心：稜線位置 + 半径分だけ下に円の中心を置く */
.hero-store-iris__hill-rotation-center {
	position: absolute;
	left: 50%;
	top: calc(
		var( --hero-store-hill-crest-y ) +
		( var( --hero-store-wheel-size ) * ( var( --hero-store-wheel-radius-ratio ) - var( --hero-store-wheel-center-nudge ) ) ) +
		var( --hero-store-hill-drop )
	);
	z-index: 1;
	pointer-events: none;
}

.hero-store-iris__hill-piece {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	display: block;
	width: var( --hero-store-wheel-size );
	height: var( --hero-store-wheel-size );
	line-height: 0;
	transform: translate( -50%, -50.07% );
	transform-origin: 50% 50.07%;
	animation: hero-store-iris-hill-spin 200s linear infinite;
}

.hero-store-iris__hill-piece svg {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

@keyframes hero-store-iris-hill-spin {
	0% {
		transform: translate( -50%, -50.07% ) rotate( 0deg );
	}

	100% {
		transform: translate( -50%, -50.07% ) rotate( -360deg );
	}
}

.hero-store-iris__ground-piece {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 0;
	display: block;
	width: 100%;
	line-height: 0;
}

/* 地面 SVG 下端と次セクションの継ぎ目（白線）防止 */
.hero-store-iris__ground-piece::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 6px;
	background-color: #da9d20;
	pointer-events: none;
}

.hero-store-iris__ground-piece svg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	shape-rendering: geometricPrecision;
}

/* Illustrator 出力の cls-*（他CSSと被ったときの保険・色は SVG 内定義どおり） */
.hero-store-iris__ground-piece path {
	stroke: none;
	stroke-width: 0;
	vector-effect: non-scaling-stroke;
}

.hero-store-iris__ground-piece .ground-cls-1 {
	fill: #298d44;
}

.hero-store-iris__ground-piece .ground-cls-2 {
	fill: #da9d20;
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-store-iris__hill-piece {
		animation: none;
	}
}

/* SP: 丘の無限回転・星のトゥインクル・歩行を止めてコンポジット負荷を下げる */
@media ( max-width: 767px ) {
	.hero-store-iris__hill-piece {
		animation: none;
	}

	.hero-store-iris__star {
		animation: none;
	}

	.hero-store-iris__walker {
		display: none !important;
	}

	.hero-store-iris__sky {
		display: none !important;
	}
}

/* 画面外のヒーロー演出を凍結（スクロール中の描画落ち対策） */
.hero-store-iris.is-hero-away .hero-store-iris__scene,
.hero-store-iris.is-hero-away .hero-store-iris__layer {
	visibility: hidden !important;
	content-visibility: hidden;
}

.hero-store-iris.is-hero-away .hero-store-iris__hill-piece {
	animation: none !important;
}

/* ── Store 商品キャンバス（地面上） ── */

.hero-store-iris__store {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2;
	height: calc( 1221.82 / 1281 * 100vw );
	min-height: 0;
	padding-top: clamp( 0.35rem, 1.2vw, 0.85rem );
	box-sizing: border-box;
	overflow: visible;
	opacity: var( --hero-store-post-bg-p );
	pointer-events: auto;
}

.hero-store-iris__store .front-store__hero {
	top: -4%;
	left: -2%;
	bottom: auto;
	width: auto;
	max-width: clamp( 480px, 78vw, 1180px );
	transform: rotate( -20deg );
	transform-origin: 28% 92%;
	z-index: 2;
}

.hero-store-iris__store .front-store__hero img {
	max-height: clamp( 420px, min( 88vw, 96vh ), 1280px );
	filter: drop-shadow( 4px 10px 28px rgba( 0, 0, 0, 0.28 ) );
}

.hero-store-iris__store .front-store__hero:hover {
	transform: rotate( -14deg ) translateY( -2px ) scale( 1.02 );
}

.hero-store-iris__store .front-store__hero-label,
.hero-store-iris__store .front-store__float-label {
	color: rgba( 26, 43, 72, 0.78 );
}

/* Just Friends — 中央やや下。ケースは地面に置く */
.hero-store-iris__store .front-store__float--1 {
	top: 38%;
	left: 48%;
	right: auto;
	width: clamp( 160px, 18vw, 260px );
	transform: rotate( 6deg );
	z-index: 4;
}

/* Sengoku — XYZ の右肩。次点の主役 */
.hero-store-iris__store .front-store__float--2 {
	top: 8%;
	left: 38%;
	right: auto;
	width: clamp( 190px, 20vw, 300px );
	transform: rotate( -8deg );
	z-index: 5;
}

/* マウスピース — 右下のアクセント */
.hero-store-iris__store .front-store__float--3 {
	top: 30%;
	left: 78%;
	right: auto;
	width: clamp( 88px, 9.5vw, 140px );
	transform: rotate( 10deg );
	z-index: 3;
}

/* Maestro Steps — 右上。軽く浮かせる */
.hero-store-iris__store .front-store__float--4 {
	top: 0;
	left: 64%;
	right: auto;
	width: clamp( 118px, 13vw, 190px );
	transform: rotate( -11deg );
	z-index: 3;
}

@media ( max-width: 1024px ) {
	.hero-store-iris__store .front-store__hero {
		top: -2%;
		left: 0%;
		max-width: clamp( 380px, 74vw, 900px );
		transform: rotate( -18deg );
	}

	.hero-store-iris__store .front-store__hero img {
		max-height: clamp( 340px, min( 76vw, 80vh ), 960px );
	}

	.hero-store-iris__store .front-store__float--1 {
		top: 40%;
		left: 46%;
		width: clamp( 145px, 20vw, 230px );
	}

	.hero-store-iris__store .front-store__float--2 {
		top: 10%;
		left: 36%;
		width: clamp( 170px, 22vw, 260px );
	}

	.hero-store-iris__store .front-store__float--3 {
		top: 32%;
		left: 76%;
		right: auto;
		width: clamp( 80px, 11vw, 120px );
	}

	.hero-store-iris__store .front-store__float--4 {
		top: 2%;
		left: 62%;
		right: auto;
		width: clamp( 108px, 14vw, 170px );
	}
}

@media ( max-width: 767px ) {
	.hero-store-iris__store .front-store__hero {
		top: 2%;
		left: 0%;
		max-width: clamp( 280px, 82vw, 520px );
		transform: rotate( -16deg );
	}

	.hero-store-iris__store .front-store__hero img {
		max-height: clamp( 260px, min( 80vw, 70vh ), 560px );
	}

	.hero-store-iris__store .front-store__float--1 {
		top: 42%;
		left: 44%;
		width: clamp( 130px, 26vw, 210px );
	}

	.hero-store-iris__store .front-store__float--2 {
		top: 10%;
		left: 34%;
		width: clamp( 150px, 30vw, 230px );
	}

	.hero-store-iris__store .front-store__float--4 {
		top: 4%;
		left: 60%;
		right: auto;
		width: clamp( 100px, 18vw, 150px );
	}

	.hero-store-iris__store .front-store__float--3 {
		top: 32%;
		left: 74%;
		right: auto;
		width: clamp( 76px, 16vw, 110px );
	}
}

/* ── ヘレ歩行 ── */

.hero-store-iris__walker {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	width: clamp( 4.5rem, 11vw, 8.5rem );
	aspect-ratio: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateX( -50% );
	transform-origin: 50% 100%;
	will-change: opacity, left, top;
	transition: opacity 0.33s ease;
}

/* Walker path: circle_2.svg */
.hero-store-iris__hill-piece svg .st0 {
	fill: #298d44;
}

.hero-store-iris__walker-frame {
	position: absolute;
	inset: 0;
	display: block;
	transition: opacity 0.38s ease;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
	transition: opacity 0.28s ease;
}

.hero-store-iris__walker-frame--1 {
	opacity: 1;
}

.hero-store-iris__walker-frame--2 {
	opacity: 0;
}

/* ── ロゴ＋テキスト ── */

.hero-store-iris__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

/* Phase B+C: 右側ロゴ（出現→消滅） */
.hero-store-iris__logo-slot {
	position: absolute;
	top: clamp( 5.5rem, 14vh, 9.5rem );
	max-width: min( 26rem, 44vw );
	pointer-events: none;
}

.hero-store-iris__logo-slot--right {
	right: clamp( 2.75rem, 9vw, 7.5rem );
	left: auto;
	opacity: calc(
		var( --hero-store-post-content-p ) * ( 1 - var( --hero-store-post-fadeout-p ) )
	);
	visibility: hidden;
	transform: translate3d(
		calc( 24px * ( 1 - var( --hero-store-post-content-p ) ) ),
		calc( 10px * ( 1 - var( --hero-store-post-content-p ) ) ),
		0
	);
}

.hero-store-iris.is-post-content-visible .hero-store-iris__logo-slot--right {
	visibility: visible;
}

/* Phase D: 左側ロゴ（出現のみ） */
.hero-store-iris__logo-slot--left {
	left: clamp( 1.75rem, 5.5vw, 4rem );
	right: auto;
	opacity: var( --hero-store-post-logo-shift-p );
	visibility: hidden;
	transform: translate3d( 0, 0, 0 );
}

.hero-store-iris.is-logo-shift-active .hero-store-iris__logo-slot--left {
	visibility: visible;
}

/* Phase D: 右側 3D サイネージ（左ロゴと同期） */
.hero-store-iris__signage-slot {
	position: absolute;
	right: clamp( 2rem, 6vw, 4.5rem );
	top: clamp( 6.5rem, 16vh, 10.75rem );
	max-width: min( 34rem, 52vw );
	opacity: var( --hero-store-post-logo-shift-p );
	visibility: hidden;
	transform: translate3d(
		calc( 20px * ( 1 - var( --hero-store-post-logo-shift-p ) ) ),
		calc( 8px * ( 1 - var( --hero-store-post-logo-shift-p ) ) ),
		0
	);
	transition: opacity 0.2s linear;
	pointer-events: none;
	z-index: 2;
}

.hero-store-iris.is-logo-shift-active .hero-store-iris__signage-slot {
	visibility: visible;
	pointer-events: auto;
}

.hero-store-iris__logo {
	display: block;
	width: min( 100%, clamp( 200px, 28vw, 360px ) );
	height: auto;
}

/* Phase B+C: テキスト（出現→消滅、右ロゴと同期） */
.hero-store-iris__copy {
	position: absolute;
	right: clamp( 2.75rem, 9vw, 7.5rem );
	top: clamp( 15.5rem, 30vh, 19.5rem );
	z-index: 3;
	max-width: min( 26rem, 44vw );
	display: flex;
	flex-direction: column;
	gap: clamp( 0.875rem, 2vw, 1.25rem );
	text-align: left;
	visibility: hidden;
	transform: translate3d(
		calc( 24px * ( 1 - var( --hero-store-post-content-p ) ) ),
		calc( 10px * ( 1 - var( --hero-store-post-content-p ) ) ),
		0
	);
	opacity: calc(
		var( --hero-store-post-content-p ) * ( 1 - var( --hero-store-post-fadeout-p ) )
	);
	pointer-events: none;
}

.hero-store-iris.is-post-content-visible .hero-store-iris__copy {
	visibility: visible;
	pointer-events: auto;
}

.hero-store-iris__lead {
	margin: 0;
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	font-size: clamp( 0.8125rem, 1.2vw, 1rem );
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.06em;
	color: rgba( 255, 255, 255, 0.9 );
	text-align: left;
}

/* ── 円形マスク ── */

.hero-store-iris__layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	visibility: hidden;
	background-color: transparent;
	will-change: background-image;
}

.hero-store-iris__layer.is-active {
	visibility: visible;
}

.hero-store-iris.is-post-active .hero-store-iris__layer {
	visibility: hidden;
}

/* ── モバイル ── */

@media ( max-width: 767px ) {
	/* ── ロゴスロット: 右だけ中央寄せ、左は非表示 ── */
	.hero-store-iris__logo-slot {
		top: clamp( 3rem, 8vh, 5rem );
		max-width: min( 19rem, 92vw );
	}

	.hero-store-iris__logo-slot--right {
		right: auto;
		left: 50%;
		transform: translate3d(
			calc( -50% + 12px * ( 1 - var( --hero-store-post-content-p ) ) ),
			calc( 10px * ( 1 - var( --hero-store-post-content-p ) ) ),
			0
		);
	}

	.hero-store-iris__logo-slot--left {
		display: none;
	}

	/* ── サイネージ: フラット2D化して中央配置 ── */
	.hero-store-iris__signage-slot {
		right: auto;
		left: 50%;
		transform: translateX( -50% );
		top: clamp( 4rem, 10vh, 6.5rem );
		max-width: calc( 100vw - 1rem );
		width: calc( 100vw - 1rem );
		overflow: hidden;
		opacity: var( --hero-store-post-logo-shift-p );
	}

	/* ── コピーテキスト: 画面中央・幅を広く ── */
	.hero-store-iris__copy {
		right: auto;
		left: 50%;
		transform: translate3d(
			calc( -50% + 12px * ( 1 - var( --hero-store-post-content-p ) ) ),
			calc( 10px * ( 1 - var( --hero-store-post-content-p ) ) ),
			0
		);
		top: clamp( 10rem, 20vh, 14rem );
		max-width: 94vw;
		width: 94vw;
		text-align: center;
		padding-inline: clamp( 0.75rem, 3vw, 1.25rem );
		box-sizing: border-box;
	}

	.hero-store-iris__lead {
		font-size: 0.875rem;
		line-height: 2;
		text-align: center;
	}

	.hero-store-iris__logo {
		width: min( 100%, clamp( 160px, 54vw, 240px ) );
		margin-inline: auto;
	}

	.hero-store-iris__walker {
		width: clamp( 3.75rem, 18vw, 6.5rem );
	}

	/* ── Product ゾーン: SP ではグリッド配置に変更 ── */
	.hero-store-iris__store {
		height: auto;
		min-height: calc( 1221.82 / 1281 * 100vw );
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: clamp( 0.75rem, 2.5vw, 1.25rem );
		padding: clamp( 1rem, 3vw, 1.5rem );
		box-sizing: border-box;
		align-items: center;
		justify-items: center;
	}

	.hero-store-iris__store .front-store__hero {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		grid-column: 1 / -1;
		max-width: clamp( 180px, 52vw, 280px );
		transform: rotate( -10deg );
		transform-origin: center;
		justify-self: center;
	}

	.hero-store-iris__store .front-store__hero img {
		max-height: clamp( 180px, min( 52vw, 42vh ), 320px );
	}

	.hero-store-iris__store .front-store__float {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: auto !important;
	}

	.hero-store-iris__store .front-store__float img {
		width: clamp( 84px, 24vw, 130px );
		height: auto;
		object-fit: contain;
	}

	.hero-store-iris__store .front-store__float--2 img {
		width: clamp( 120px, 36vw, 200px );
	}

	.hero-store-iris__store .front-store__float-label {
		opacity: 1;
		transform: none;
		font-size: 0.7rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-store-iris {
		display: none;
	}

	.hero-store-iris__star {
		animation: none;
	}

	.hero-store-iris__walker-frame--1 {
		opacity: 1;
	}

	.hero-store-iris__walker-frame--2 {
		opacity: 0;
	}
}