@import "theme";

.home-page
{
	font-family: $display-font;
	color: $text-default;
	position: relative;
	width: 100%;
	height: 100%;
}

.top-left
{
	position: absolute;
	top: $deadzone-y;
	left: $deadzone-x;
	flex-direction: row;
	align-items: center;

	&:intro { transform: translateY( -20px ); opacity: 0; }
	transition: all 0.4s ease-out;
}

.brand
{
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.brand-text
{
	font-family: $header-font;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	color: rgba( $text-bright, 0.9 );
}

.hero
{
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: center;

	&:intro { transform: scale( 1.4 ); opacity: 0; }
	transition: all 0.45s ease-out;
}

// Centered as a block, but the eyebrow hugs the logo's left edge.
.hero-inner
{
	flex-direction: column;
	align-items: flex-start;
}

.title
{
	flex-direction: row;
	align-items: center;
	gap: 18px;
}

.title
{
	font-family: $header-font;
	font-size: 90px;
	font-weight: 800;
	letter-spacing: -2px;
	color: $text-bright;
}

.title strong
{
	font-family: $header-font;
	font-size: 80px;
	font-weight: 800;
	letter-spacing: -2px;
	color: white;
	background-color: $accent-red;
	padding: 4px 26px 14px 26px;
	border-radius: 16px;
	transform: rotate( -2deg );
	box-shadow:
		0px 8px 0px rgba( 0, 0, 0, 0.22 ),
		0px 10px 20px rgba( 255, 77, 106, 0.4 );
}

.menu
{
	position: absolute;
	bottom: $deadzone-y;
	left: $deadzone-x;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;

	&:intro { transform: translateX( -40px ); opacity: 0; }
	transition: all 0.45s ease-out;
}

.menu-item
{
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-width: 220px;
	padding: 18px 26px;
	border-radius: 26px;
	background-color: $surface-deep;
	border: 1px solid rgba( 42, 31, 48, 0.08 );
	cursor: pointer;
	box-shadow:
		0px 5px 0px $shadow-chunky,
		0px 10px 20px $shadow-soft;
	transition: transform 0.12s ease-out, background-color 0.12s ease-out;

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

	.menu-label
	{
		font-family: $header-font;
		font-size: 26px;
		font-weight: 800;
		letter-spacing: 1px;
		color: $text-default;
	}
}

.menu-item.primary
{
	background-color: $accent-red;
	border-color: rgba( 0, 0, 0, 0.18 );
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.25 ),
		0px 4px 12px rgba( 255, 77, 106, 0.45 );

	padding: 18px 32px;

	.menu-label { color: white; font-size: 32px; }
}

.menu-item.primary:hover
{
	background-color: #ff6680;
}

// Menu items ignore the mouse by default (controller behaviour); mouse mode turns
// pointer events on, which is what gives us a cursor + hover + click.
.menu-item
{
	pointer-events: none;
}

.home-page.mouse .menu-item
{
	pointer-events: all;
}

// Mouse hover gets the same chunky highlight ring as keyboard selection.
.home-page.mouse .menu-item:hover
{
	border-color: $accent-red;
	box-shadow:
		0px 5px 0px $shadow-chunky,
		0px 0px 0px 3px rgba( 255, 77, 106, 0.6 ),
		0px 10px 20px $shadow-soft;

	sound-in: element_switch;
}

.home-page.mouse .menu-item.primary:hover
{
	border-color: white;
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.25 ),
		0px 0px 0px 3px rgba( 255, 255, 255, 0.85 ),
		0px 12px 26px rgba( 255, 77, 106, 0.5 );
}

// Highlighted by keyboard / controller navigation.
.menu-item.selected
{
	transform: translateX( 12px );
	border-color: $accent-red;
	box-shadow:
		0px 5px 0px $shadow-chunky,
		0px 0px 0px 1px rgba( 255, 77, 106, 0.6 ),
		0px 10px 40px $shadow-soft;
}

.menu-item.primary.selected
{
	transform: translateX( 12px );
	border-color: white;
	box-shadow: 0px 6px 0px rgba( 0, 0, 0, 0.25 ), 0px 0px 0px 1px rgba( 255, 255, 255, 0.85 ), 0px 12px 26px rgba( 255, 77, 106, 0.5 );
}

// NavLink active state (PLAY while on /play, etc.)
.menu-item.active
{
	background-color: $text-default;
	.menu-label { color: white; }
}

.menu-key-glyph
{
	width: 30px;
	height: 30px;
}

.revision
{
	position: absolute;
	bottom: $deadzone-y;
	right: $deadzone-x;

	&:intro { transform: translateY( 30px ); opacity: 0; }
	transition: all 0.5s ease-out;
}

.footer
{
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 26px;
}

.hint
{
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.hint-glyph
{
	width: 26px;
	height: 26px;
	margin-right: 2px;
}

.hint-label
{
	font-family: $display-font;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: $text-bright;
}