@use "../kit-deps" as *;
@use "typography" as *;

.page-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: $space-5;
	width: 100%;
	padding: $space-5;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;
	overflow: hidden;
	animation: panel_boot $motion-slow $motion-ease both;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 34%;
		height: $border-width-base;
		background: linear-gradient(90deg, transparent, $color-secondary, transparent);
		opacity: 0.72;
		pointer-events: none;
		transform: translateX(-120%);
	}

	@include hover_touch {
		&::after {
			animation: terminal_scan_x 0.9s $motion-ease;
		}
	}

	.page-header-content {
		display: flex;
		flex-direction: column;
		gap: $space-2;
		min-width: min(100%, 320px);
	}

	.page-header-kicker {
		color: $color-secondary;
		font-size: $font-size-sm;
		font-weight: $font-weight-bold;
		line-height: $line-height-base;
		text-transform: uppercase;
		transition-duration: $motion-base;
		transition-timing-function: $motion-ease;
		transition-property: color;
	}

	.page-header-title {
		margin: 0;
		color: $color-text-light;
		font-size: $font-size-h2;
		font-weight: $font-weight-bold;
		line-height: $line-height-tight;
	}

	.page-header-subtitle {
		max-width: 720px;
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-base;
		line-height: $line-height-relaxed;
	}

	.page-header-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: $space-2;
		color: $color-text-dark;
		font-size: $font-size-sm;
	}

	.page-header-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: $space-2;
	}

	&.page-header-compact {
		align-items: center;
		padding: $space-4;

		.page-header-title {
			font-size: $font-size-h4;
		}
	}

	&.page-header-accent {
		border-color: $color-secondary;
		background: rgba($color-secondary, 0.055);
	}
}