/* =========================================================
   v18: スクロール演出（refined）
   - サイトのトーンに馴染む上品な reveal
   - 画像のクリップマスク
   - h2 下線の draw-in
   - スクロール進捗ライン
   ========================================================= */

/* ---------- 1. 画像クリップマスク reveal は無効化（表示崩れの対策） ---------- */
.hp-img-reveal {
	clip-path: none !important;
	transition: none !important;
}

.hp-img-reveal.is-img-revealed {
	clip-path: none !important;
}

/* ---------- 2. h2 タイトル下線は廃止（キッカー「— XXX」と冗長なため） ---------- */
.hp-section-h2-line::after {
	display: none !important;
	content: none !important;
}

/* ---------- 3. スクロール進捗ライン（右端、固定） ---------- */
.hp-scroll-progress {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9000;
	width: 2px;
	height: 100vh;
	background: rgba(180, 0, 0, .08);
	pointer-events: none;
}

.hp-scroll-progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, var(--hp-red-line, #b40000), rgba(180, 0, 0, .4));
	box-shadow: 0 0 6px rgba(180, 0, 0, .55);
	transition: height .12s linear;
}

/* SP では非表示にしてもよい */
@media (max-width: 700px) {
	.hp-scroll-progress { display: none; }
}

/* ---------- 4. セクションが入る時、上下に赤い水平線が薄く広がる ---------- */
.hp-section-entered.hp-food,
.hp-section-entered.hp-english,
.hp-section-entered.hp-gallery,
.hp-section-entered.hp-redesign-section,
.hp-section-entered.hp-overview {
	position: relative;
}

/* ---------- 5. 既存 .hp-reveal を少し上品に：translateY 強化のみ ---------- */
.hp-reveal {
	transform: translateY(32px);
}

.hp-reveal.is-revealed {
	transform: translateY(0);
}

/* ---------- 6. 食事のヒーローカードは特別に大きな reveal ---------- */
.hp-food-card--hero {
	transform: translateY(48px);
	transition-duration: 1.2s !important;
}

/* ---------- 7. ギャラリーのヘッダーが入る時の演出 ---------- */
.hp-gallery__head .hp-story-kicker,
.hp-gallery__head h2,
.hp-gallery__lead,
.hp-english__head .hp-story-kicker,
.hp-english__head h2,
.hp-english__lead,
.hp-food__head .hp-story-kicker,
.hp-food__head h2,
.hp-food__lead {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .9s cubic-bezier(.22, 1, .25, 1),
		transform .9s cubic-bezier(.22, 1, .25, 1);
}

.hp-section-entered .hp-gallery__head .hp-story-kicker,
.hp-section-entered .hp-english__head .hp-story-kicker,
.hp-section-entered .hp-food__head .hp-story-kicker {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .1s;
}

.hp-section-entered .hp-gallery__head h2,
.hp-section-entered .hp-english__head h2,
.hp-section-entered .hp-food__head h2 {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .3s;
}

.hp-section-entered .hp-gallery__lead,
.hp-section-entered .hp-english__lead,
.hp-section-entered .hp-food__lead {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .55s;
}

/* ---------- 8. food bento カードの reveal: 左から（画像左、コピー右なので） ---------- */
.hp-food-card.is-revealed {
	clip-path: inset(0 0 0 0);
}

/* ---------- 9. 食事マーキーの上下にも赤線（セクション入場時に伸びる） ---------- */
.hp-food__marquee {
	position: relative;
}

.hp-food__marquee::before,
.hp-food__marquee::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hp-red-line, #b40000) 50%, transparent);
	box-shadow: 0 0 4px rgba(180, 0, 0, .35);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 1.2s cubic-bezier(.22, 1, .25, 1);
	z-index: 3;
	pointer-events: none;
}

.hp-food__marquee::before { top: 0; }
.hp-food__marquee::after  { bottom: 0; }

.hp-section-entered.hp-food .hp-food__marquee::before,
.hp-section-entered.hp-food .hp-food__marquee::after {
	transform: scaleX(1);
	transition-delay: .8s;
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
	.hp-img-reveal,
	.hp-img-reveal.is-img-revealed,
	.hp-scroll-progress,
	.hp-scroll-progress__bar,
	.hp-section-h2-line::after,
	.hp-gallery__head .hp-story-kicker,
	.hp-english__head .hp-story-kicker,
	.hp-food__head .hp-story-kicker,
	.hp-gallery__head h2,
	.hp-english__head h2,
	.hp-food__head h2,
	.hp-gallery__lead,
	.hp-english__lead,
	.hp-food__lead,
	.hp-food__marquee::before,
	.hp-food__marquee::after {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.hp-reveal {
		filter: none !important;
		transform: none !important;
	}
}