/**
 * css/components/media-frame.css
 * ============================================================
 * A LEGEND 2：Media Frame
 * ============================================================
 *
 * 役割：
 * - 画像・動画を装飾する共通フレーム表現を定義します。
 *
 * 今回の改修：
 * - 固定白ハイライト / 固定水色グローを、Design Token由来の
 *   --aleg2-glow-primary / --aleg2-color-border / --aleg2-color-surface へ接続します。
 * - 角丸を design.radius.media 由来の --aleg2-radius-media へ接続します。
 * - 影を design.shadow.soft / card 由来の --aleg2-shadow-soft / --aleg2-shadow-card へ接続します。
 * - background.glow がOFFの場合は、フレーム内の装飾グローを抑制します。
 * - 既存の .aleg2-media-frame / modifier / 子要素クラスは維持します。
 */

.aleg2-media-frame {
	position: relative;
	overflow: hidden;
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-media);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * メディア上の薄い光沢レイヤー。
 *
 * 旧コードでは rgba(255,255,255,0.18) と rgba(142,230,255,0.12) の固定色でした。
 * 今回は surface / glow / border 系tokenに寄せ、ライト・ダーク両方のプリセットに追従させます。
 */
.aleg2-media-frame::before {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(
			135deg,
			var(--aleg2-glass-bg-strong),
			transparent 28%,
			transparent 70%,
			var(--aleg2-glow-primary)
		);
	mix-blend-mode: screen;
	opacity: 0.65;
}

/**
 * 内側の細いフレーム線。
 *
 * 旧コードでは rgba(255,255,255,0.14) 固定でした。
 * 今回は --aleg2-color-border を使い、プリセットの枠線色に追従させます。
 */
.aleg2-media-frame::after {
	position: absolute;
	inset: 12px;
	z-index: 3;
	pointer-events: none;
	content: "";
	border: 1px solid var(--aleg2-color-border);
	border-radius: calc(var(--aleg2-radius-media) - 10px);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かないため、
 * フレーム上の光沢・グロー表現も控えめにします。
 */
body:not(.aleg2-bg-glow) .aleg2-media-frame::before {
	opacity: 0.18;
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-surface-strong),
			transparent 34%,
			transparent 72%,
			var(--aleg2-color-surface)
		);
}

/**
 * 画像・動画本体。
 *
 * 既存の cover 表示を維持します。
 */
.aleg2-media-frame__image,
.aleg2-media-frame__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * アスペクト比 modifier。
 *
 * 既存modifierを維持します。
 */
.aleg2-media-frame--16-9 {
	aspect-ratio: 16 / 9;
}

.aleg2-media-frame--4-3 {
	aspect-ratio: 4 / 3;
}

.aleg2-media-frame--1-1 {
	aspect-ratio: 1 / 1;
}

.aleg2-media-frame--portrait {
	aspect-ratio: 3 / 4;
}

/**
 * glow modifier。
 *
 * 旧コードの見た目は維持しつつ、glow色はtokenへ接続します。
 */
.aleg2-media-frame--glow {
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-shadow-glow-primary);
}

/**
 * 背景グローOFF時は、glow modifierでも過度な発光を抑えます。
 */
body:not(.aleg2-bg-glow) .aleg2-media-frame--glow {
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * tilt modifier。
 *
 * 既存の傾き表現を維持します。
 */
.aleg2-media-frame--tilt-left {
	transform: rotate(-2deg);
}

.aleg2-media-frame--tilt-right {
	transform: rotate(2deg);
}

/**
 * hover補助。
 *
 * media-frameがリンクやカード内で使われる場合に、共通の影へ自然につながるようにします。
 * 既存HTMLへ影響しすぎないよう、単独hoverではなく :where(a, button) 内利用にも耐える軽い指定です。
 */
.aleg2-media-frame {
	transition:
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

a:hover .aleg2-media-frame,
button:hover .aleg2-media-frame {
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-card);
}

/**
 * focus-visible補助。
 *
 * media-frame自体がフォーカス可能な場合に備えます。
 */
.aleg2-media-frame:focus-visible {
	outline: none;
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

@media (max-width: 640px) {
	.aleg2-media-frame {
		border-radius: var(--aleg2-radius-media);
	}

	.aleg2-media-frame::after {
		inset: 8px;
		border-radius: calc(var(--aleg2-radius-media) - 6px);
	}

	.aleg2-media-frame--tilt-left,
	.aleg2-media-frame--tilt-right {
		transform: none;
	}
}