@import "theme";

.customize-page
{
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: $deadzone-y $deadzone-x;
}

.eyebrow
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 4px;
	color: $accent-red;
}

.page-title
{
	font-family: $header-font;
	font-size: 44px;
	font-weight: 800;
	color: $text-bright;
	margin-bottom: 8px;
}

.card-stage
{
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

// Car switch: the card is remounted (@key) each change, so the animation replays.
// Direction class picks the side it slides in from; the overshoot mid-keyframe gives
// it a springy pop.
@keyframes car-swap-right
{
	0%   { opacity: 0; transform: translateX( 90px ) scale( 0.9 ) rotate( 2.5deg ); }
	65%  { opacity: 1; transform: translateX( -14px ) scale( 1.015 ) rotate( -0.6deg ); }
	100% { opacity: 1; transform: translateX( 0px ) scale( 1 ) rotate( 0deg ); }
}

@keyframes car-swap-left
{
	0%   { opacity: 0; transform: translateX( -90px ) scale( 0.9 ) rotate( -2.5deg ); }
	65%  { opacity: 1; transform: translateX( 14px ) scale( 1.015 ) rotate( 0.6deg ); }
	100% { opacity: 1; transform: translateX( 0px ) scale( 1 ) rotate( 0deg ); }
}

.car-card
{
	flex-direction: row;
	align-items: center;
	gap: 28px;
	width: 900px;
	padding: 28px;
	border-radius: 24px;
	background-color: $surface-deep;
	border: 2px solid $surface-light;
	box-shadow:
		0px 8px 0px rgba( 0, 0, 0, 0.06 ),
		0px 24px 48px $shadow-soft;

	&.from-right { animation: car-swap-right 0.34s ease-out; }
	&.from-left  { animation: car-swap-left 0.34s ease-out; }

	position: relative;
}

// Badge marking the locked-in car on the big card.
.picked-badge
{
	position: absolute;
	top: -14px;
	left: -14px;
	z-index: 20;
	padding: 7px 16px;
	border-radius: 16px;
	background-color: $accent-green;
	font-family: $display-font;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: white;
	box-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.18 );
	transform: rotate( -4deg );
}

.car-photo
{
	width: 420px;
	height: 300px;
	flex-shrink: 0;
	border-radius: 18px;
	background-color: $bg-cream;
	align-items: center;
	justify-content: center;
	position: relative;
}

.car-photo-img
{
	width: 100%;
	height: 100%;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.photo-empty
{
	position: absolute;
	font-family: $header-font;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 2px;
	color: rgba( 42, 31, 48, 0.25 );
}

.car-info
{
	flex-direction: column;
	flex-grow: 1;
	gap: 4px;
}

.car-name
{
	font-family: $header-font;
	font-size: 48px;
	font-weight: 800;
	color: $text-default;
}

.car-desc
{
	font-family: $display-font;
	font-size: 16px;
	color: $text-muted;
	margin-bottom: 16px;
}

.stat-grid
{
	flex-direction: column;
	gap: 12px;
}

.stat
{
	flex-direction: column;
	gap: 6px;
}

.stat-head
{
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.stat-label
{
	font-family: $display-font;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: $text-muted;
}

.stat-num
{
	font-family: $header-font;
	font-size: 15px;
	font-weight: 800;
	color: $text-default;
}

.stat-bar
{
	flex-direction: row;
	gap: 6px;
}

.seg
{
	width: 44px;
	height: 12px;
	border-radius: 6px;
	background-color: $surface-light;

	&.on.stat-red { background-color: $accent-red; }
	&.on.stat-yellow { background-color: $accent-yellow; }
	&.on.stat-blue { background-color: $accent-blue; }
	&.on.stat-green { background-color: $accent-green; }
}

.cycle
{
	height: 56px;
	border-radius: 28px;
	background-color: $surface-deep;
	border: 2px solid rgba( 0, 0, 0, 0.08 );
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 16px;
	cursor: pointer;
	box-shadow:
		0px 4px 0px rgba( 0, 0, 0, 0.1 ),
		0px 10px 20px $shadow-soft;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.chevron
	{
		font-family: $display-font;
		font-size: 30px;
		font-weight: 800;
		color: $text-default;
		padding-bottom: 4px;
	}

	InputHint
	{
		width: 24px;
		height: 24px;
	}
}

.thumb-strip
{
	flex-direction: row;
	gap: 14px;
	margin-top: 12px;
}

.thumb
{
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 70px;
	border-radius: 16px;
	background-color: $surface-mid;
	border: 3px solid rgba( 0, 0, 0, 0 );
	cursor: pointer;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }

	// The car you're currently previewing.
	&.active
	{
		border-color: $text-default;
		background-color: $surface-deep;
	}

	// The car that's locked in - green to match the card badge.
	&.picked
	{
		border-color: $accent-green;
	}

	.thumb-name
	{
		font-family: $display-font;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 1px;
		color: $text-default;
	}
}

.thumb-check
{
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: $accent-green;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: white;
	box-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.15 );
}

.footer-row
{
	flex-direction: row;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.back-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: 28px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
	box-shadow: 0px 3px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.back-glyph
	{
		width: 24px;
		height: 24px;
	}

	.back-label
	{
		font-family: $display-font;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 2px;
		color: $text-default;
	}
}

.lock-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 28px;
	background-color: $accent-red;
	cursor: pointer;
	box-shadow: 0px 4px 0px rgba( 0, 0, 0, 0.18 );
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.lock-label
	{
		font-family: $header-font;
		font-size: 18px;
		font-weight: 800;
		letter-spacing: 1px;
		color: white;
	}

	.lock-glyph
	{
		width: 24px;
		height: 24px;
	}
}

// Already the active car: fade the button out and stop it reacting.
.lock-btn.is-active
{
	opacity: 0.4;
	box-shadow: none;
	transform: none;
}

// Interactive elements ignore the mouse by default (controller behaviour); mouse
// mode turns pointer events on, which is what gives us a cursor + hover + click.

.cycle,
.thumb,
.back-btn,
.lock-btn
{
	pointer-events: none;
}

.customize-page.mouse .cycle,
.customize-page.mouse .thumb,
.customize-page.mouse .back-btn,
.customize-page.mouse .lock-btn
{
	pointer-events: all;
}

// Faded lock button is inert.
.customize-page.mouse .lock-btn.is-active
{
	pointer-events: none;
}

.customize-page.mouse .cycle:hover
{
	background-color: $accent-red;
	sound-in: element_switch;

	.chevron { color: white; }
}