/*!
 * Hard Piston Toolkit - シーンタイムライン
 * レビュー記事内で動画の流れ・シーン構成・見どころを縦タイムラインで表示するUI。
 * BEM命名規則に準拠し、全セレクタを .hpt-timeline 名前空間配下に限定する。
 * 配色・質感（テーマ）・拡大縮小の仕組みは Piston Meter / 作品情報カードと統一。
 */

.hpt-timeline {
	--hpt-primary: #ff4fa3;
	--hpt-primary-rgb: 255, 79, 163;
	--hpt-max: #ff1493;
	--hpt-max-rgb: 255, 20, 147;
	--hpt-gold: #e8c15a;
	--hpt-gold-rgb: 232, 193, 90;
	--hpt-scale: 1;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(560px * var(--hpt-scale));
	margin: 0 auto;
	overflow: hidden;
	isolation: isolate;

	background: var(--hpt-bg,
		radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(140% 100% at 50% 115%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(155deg, #1a1a1a 0%, #101010 45%, #0a0a0a 75%, #050505 100%));

	border: 1px solid var(--hpt-accent, rgba(255, 255, 255, 0.07));
	border-radius: calc(18px * var(--hpt-scale));

	box-shadow:
		0 24px 48px rgba(0, 0, 0, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.02);

	color: var(--hpt-text, #ececec);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	line-height: 1.6;
}

.hpt-timeline *,
.hpt-timeline *::before,
.hpt-timeline *::after {
	box-sizing: border-box;
}

.hpt-timeline::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.06) 45%,
		rgba(255, 255, 255, 0.1) 50%,
		rgba(255, 255, 255, 0.02) 58%,
		rgba(255, 255, 255, 0) 70%
	);
	pointer-events: none;
	z-index: 1;
}

.hpt-timeline__texture {
	display: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* ---- カード上部（タイトル） ---- */
.hpt-timeline__header {
	position: relative;
	z-index: 2;
	padding: calc(20px * var(--hpt-scale)) calc(22px * var(--hpt-scale)) 0;
}

.hpt-timeline__title {
	margin: 0;
	font-size: calc(17px * var(--hpt-scale));
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--hpt-text, #ececec);
}

/* =========================================================
 * シーン画像カルーセル（カード上部・カードタイトルの下）
 *
 * 【重要】このギャラリーの画像には theme（dark/carbon/glass）による
 * カード装飾を一切適用しない。背景テクスチャ・カーボン模様・
 * グラデーション・mix-blend-mode・filter・backdrop-filter・
 * opacity変更・疑似要素オーバーレイは .hpt-timeline__gallery-image に
 * 対して適用せず、CSS側でも明示的に打ち消すガードを入れている。
 * テーマの装飾はカード背景（.hpt-timeline 本体）にのみ適用する。
 *
 * レイアウト・スクロール・ドラッグ等の挙動は共通カルーセル
 * （assets/css/carousel.css の data-hpt-carousel-* セレクタ）が担当し、
 * このブロックでは見た目（画像のアスペクト比・角丸・余白）のみを担当する。
 * ========================================================= */

.hpt-timeline__gallery {
	position: relative;
	z-index: 2;
	padding: calc(14px * var(--hpt-scale)) calc(22px * var(--hpt-scale)) 0;
}

/* enable_carousel="false" のときは横スクロールせず折り返し表示にする。 */
.hpt-timeline__gallery--static .hpt-timeline__gallery-track {
	flex-wrap: wrap;
	overflow: visible;
	scroll-snap-type: none;
	cursor: default;
}

.hpt-timeline__gallery-item {
	border-radius: calc(10px * var(--hpt-scale));
	overflow: hidden;
}

.hpt-timeline__gallery-image-trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.hpt-timeline__gallery-image-trigger:focus-visible {
	outline: 2px solid var(--hpt-accent, var(--hpt-primary));
	outline-offset: -2px;
}

.hpt-timeline__gallery-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #050505;

	/* テーマ由来の装飾効果が絶対に混入しないことを保証する明示的なガード。 */
	filter: none !important;
	mix-blend-mode: normal !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ---- タイムライン本体 ---- */
.hpt-timeline__list {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: calc(18px * var(--hpt-scale)) calc(22px * var(--hpt-scale)) calc(20px * var(--hpt-scale));
	list-style: none;
}

.hpt-timeline__item {
	position: relative;
	display: flex;
	gap: calc(12px * var(--hpt-scale));
	padding-bottom: calc(22px * var(--hpt-scale));
}

.hpt-timeline__item:last-child {
	padding-bottom: 0;
}

/* ---- 縦ライン（アイコンの中心を貫通するように配置） ---- */
.hpt-timeline__list--line .hpt-timeline__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(13px * var(--hpt-scale));
	top: calc(28px * var(--hpt-scale));
	bottom: 0;
	width: 2px;
	background: var(--hpt-accent, linear-gradient(180deg, rgba(var(--hpt-primary-rgb), 0.5) 0%, rgba(var(--hpt-primary-rgb), 0.1) 100%));
}

/* ---- アイコン（●） ---- */
.hpt-timeline__icon {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: calc(28px * var(--hpt-scale));
	height: calc(28px * var(--hpt-scale));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(13px * var(--hpt-scale));
	line-height: 1;
	border-radius: 50%;
	background: #1a1a1a;
	border: 1px solid var(--hpt-accent, rgba(255, 255, 255, 0.12));
	color: var(--hpt-accent, var(--hpt-primary));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ---- 強調表示 ---- */
.hpt-timeline__item[data-highlight="important"] .hpt-timeline__icon {
	border-color: var(--hpt-max);
	box-shadow: 0 0 0 3px rgba(var(--hpt-max-rgb), 0.25), 0 0 10px rgba(var(--hpt-max-rgb), 0.5);
	color: var(--hpt-max);
}

.hpt-timeline__item[data-highlight="important"] .hpt-timeline__title-text {
	color: var(--hpt-max);
}

.hpt-timeline__item[data-highlight="finish"] .hpt-timeline__icon {
	background: linear-gradient(135deg, var(--hpt-gold) 0%, #a9791f 100%);
	border-color: var(--hpt-gold);
	color: #241a03;
	box-shadow: 0 0 0 3px rgba(var(--hpt-gold-rgb), 0.25), 0 0 12px rgba(var(--hpt-gold-rgb), 0.55);
}

.hpt-timeline__item[data-highlight="finish"] .hpt-timeline__title-text {
	color: var(--hpt-gold);
}

/* ---- コンテンツ（時刻・タイトル・メーター・コメント） ---- */
.hpt-timeline__content {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: calc(2px * var(--hpt-scale));
}

.hpt-timeline__time {
	margin: 0 0 calc(2px * var(--hpt-scale));
	font-size: calc(12px * var(--hpt-scale));
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hpt-text, #9a9a9a);
	font-variant-numeric: tabular-nums;
}

.hpt-timeline__title-text {
	margin: 0 0 calc(4px * var(--hpt-scale));
	font-size: calc(15px * var(--hpt-scale));
	font-weight: 800;
	color: var(--hpt-text, #ececec);
}

.hpt-timeline__description {
	margin: 0;
	font-size: calc(13px * var(--hpt-scale));
	color: var(--hpt-text, #c9c9c9);
}

/* ---- シーン評価（コンパクトメーター）埋め込みエリア ---- */
.hpt-timeline__meter {
	margin: calc(6px * var(--hpt-scale)) 0;
	max-width: calc(220px * var(--hpt-scale));
}

.hpt-timeline__meter .hpt-meter__score-suffix,
.hpt-timeline__meter .hpt-meter__score-max {
	color: var(--hpt-secondary, currentColor);
}

/* =========================================================
 * テーマ・カラー・サイズ（Piston Meter / 作品情報カードと共通の考え方）
 * ========================================================= */

.hpt-timeline[data-theme="carbon"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 5px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.45) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 5px);
	background-size: 7px 7px;
	opacity: 0.4;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 1;
}

.hpt-timeline[data-theme="glass"] {
	background: var(--hpt-bg, linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(10, 10, 10, 0.4) 100%));
	border-color: var(--hpt-accent, rgba(255, 255, 255, 0.16));
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 20px 44px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -14px 26px rgba(0, 0, 0, 0.3);
}

.hpt-timeline[data-color="pink"] {
	--hpt-primary: #ff4fa3;
	--hpt-primary-rgb: 255, 79, 163;
	--hpt-max: #ff1493;
	--hpt-max-rgb: 255, 20, 147;
}

.hpt-timeline[data-color="red"] {
	--hpt-primary: #ff4f4f;
	--hpt-primary-rgb: 255, 79, 79;
	--hpt-max: #ff1a1a;
	--hpt-max-rgb: 255, 26, 26;
}

.hpt-timeline[data-color="blue"] {
	--hpt-primary: #4f9dff;
	--hpt-primary-rgb: 79, 157, 255;
	--hpt-max: #0066ff;
	--hpt-max-rgb: 0, 102, 255;
}

.hpt-timeline[data-color="green"] {
	--hpt-primary: #4fe38a;
	--hpt-primary-rgb: 79, 227, 138;
	--hpt-max: #00d26a;
	--hpt-max-rgb: 0, 210, 106;
}

.hpt-timeline[data-color="orange"] {
	--hpt-primary: #ff9d4f;
	--hpt-primary-rgb: 255, 157, 79;
	--hpt-max: #ff7a00;
	--hpt-max-rgb: 255, 122, 0;
}

.hpt-timeline[data-color="purple"] {
	--hpt-primary: #b34fff;
	--hpt-primary-rgb: 179, 79, 255;
	--hpt-max: #9000ff;
	--hpt-max-rgb: 144, 0, 255;
}

.hpt-timeline[data-size="small"] {
	--hpt-scale: 0.85;
}

.hpt-timeline[data-size="medium"] {
	--hpt-scale: 1;
}

.hpt-timeline[data-size="large"] {
	--hpt-scale: 1.15;
}

.hpt-timeline[data-size="xlarge"] {
	--hpt-scale: 1.3;
}

/* =========================================================
 * レスポンシブ
 * スマホでも縦タイムラインのレイアウト自体は変えず、
 * 横幅と余白のみを詰めてデザインを崩さないようにする。
 * ========================================================= */

@media (max-width: 768px) {
	.hpt-timeline {
		max-width: 100%;
	}

	.hpt-timeline__header,
	.hpt-timeline__gallery,
	.hpt-timeline__list {
		padding-left: calc(16px * var(--hpt-scale));
		padding-right: calc(16px * var(--hpt-scale));
	}

	.hpt-timeline__meter {
		max-width: 100%;
	}
}