/**
 * Hyperion Works login page theme -- the one page in smsui that gets the
 * full "deep space" marketing treatment (starfield, nebula, glassmorphic
 * card), mirroring hyperionworks.com / atlascore.app's login page.
 */

:root {
	--bg-primary:       #060c16;
	--bg-card:           rgba( 15, 31, 51, 0.65 );
	--border-color:      rgba( 88, 145, 220, 0.35 );
	--text-color:        #e8edf5;
	--text-muted:        #8fa3bf;
	--accent-blue:       #2e7bef;
	--accent-blue-dark:  #1c5fc4;
	--accent-yellow:     #ffd400;
	--font-heading:      'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
	--font-body:         'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
	box-sizing: border-box;
}

html, body {
	background-color: var( --bg-primary );
	color:             var( --text-color );
	font-family:       var( --font-body );
	height:            100%;
	margin:            0;
	overflow:          hidden;
	padding:           0;
}

.scene {
	height:   100%;
	left:     0;
	overflow: hidden;
	position: fixed;
	top:      0;
	width:    100%;
	z-index:  0;
}

.stars {
	height:   100%;
	left:     0;
	position: absolute;
	top:      0;
	width:    100%;
}

.star {
	background:    #fff;
	border-radius: 50%;
	position:      absolute;
	animation:     twinkle var( --d, 4s ) ease-in-out infinite;
	animation-delay: var( --delay, 0s );
	opacity:         var( --op, 0.6 );
}

@keyframes twinkle {

	0%, 100% {
		opacity: var( --op, 0.6 );
		transform: scale( 1 );
	}

	50% {
		opacity:   1;
		transform: scale( 1.3 );
	}
}

.nebula {
	border-radius: 50%;
	filter:        blur( 60px );
	position:      absolute;
}

.nebula-1 {
	background: #2e7bef;
	height:     420px;
	left:       -120px;
	opacity:    0.12;
	top:        -80px;
	width:      420px;
}

.nebula-2 {
	background: #6c3ff0;
	bottom:      -140px;
	height:     460px;
	opacity:    0.10;
	right:       -140px;
	width:      460px;
}

.login-wrapper {
	align-items:     center;
	display:         flex;
	height:          100%;
	justify-content: center;
	position:        relative;
	z-index:         1;
}

.hw-brand {
	align-items:    center;
	display:        flex;
	gap:            10px;
	justify-content: center;
	margin-bottom:   28px;
}

.hw-brand .hw-mark img {
	display: block;
	height:  40px;
	width:   40px;
}

.hw-brand .hw-wordmark {
	font-family:    var( --font-heading );
	font-size:      22px;
	font-weight:    300;
	letter-spacing: 1px;
}

.hw-brand .hw-hyperion {
	color: #fff;
}

.hw-brand .hw-works {
	color: var( --accent-yellow );
}

.login-card {
	backdrop-filter:         blur( 24px );
	-webkit-backdrop-filter: blur( 24px );
	background:              var( --bg-card );
	border:                  1px solid var( --border-color );
	border-radius:           16px;
	box-shadow:              0 20px 60px rgba( 0, 0, 0, 0.45 ), inset 0 1px 0 rgba( 255, 255, 255, 0.05 );
	padding:                 40px;
	width:                   380px;
}

.login-card h4 {
	font-family:   var( --font-heading );
	font-size:     20px;
	margin:        0 0 6px 0;
	text-align:    center;
}

.login-card p.subtitle {
	color:         var( --text-muted );
	font-size:     13px;
	margin:        0 0 24px 0;
	text-align:    center;
}

.login-card .form-group {
	margin-bottom: 18px;
}

.login-card label {
	color:          var( --text-muted );
	display:        block;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.5px;
	margin-bottom:  6px;
	text-transform: uppercase;
}

.login-card .form-control {
	background-color: rgba( 255, 255, 255, 0.04 );
	border:            1px solid var( --border-color );
	border-radius:     8px;
	color:              var( --text-color );
	font-size:         14px;
	padding:           10px 14px;
	width:             100%;
}

.login-card .form-control:focus {
	border-color: var( --accent-blue );
	box-shadow:   0 0 0 3px rgba( 46, 123, 239, 0.25 );
	outline:      none;
}

.login-card .form-control::placeholder {
	color: var( --text-muted );
}

.login-card .btn-login {
	background:     linear-gradient( 135deg, var( --accent-blue ) 0%, var( --accent-blue-dark ) 100% );
	border:         none;
	border-radius:  8px;
	color:          #fff;
	cursor:         pointer;
	font-family:    var( --font-heading );
	font-size:      14px;
	font-weight:    600;
	letter-spacing: 1px;
	padding:        12px 20px;
	text-transform: uppercase;
	transition:     all 0.2s ease;
	width:          100%;
}

.login-card .btn-login:hover {
	background: linear-gradient( 135deg, #4c8ff5 0%, var( --accent-blue ) 100% );
	transform:  translateY( -1px );
}

.login-card .error-message {
	background:    rgba( 220, 53, 69, 0.15 );
	border:        1px solid #dc3545;
	border-radius: 8px;
	color:         #f087a1;
	font-size:     13px;
	margin-bottom: 18px;
	padding:       10px 14px;
	text-align:    center;
}

.login-card .powered-by {
	color:         var( --text-muted );
	font-size:     12px;
	margin:        22px 0 0 0;
	text-align:    center;
}

@media ( max-width: 480px ) {

	.login-card {
		border-radius: 0;
		height:        100%;
		width:         100%;
	}

	.nebula {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.star {
		animation: none;
	}
}