/**
 * Login screen (Login.dc.html parity).
 * Colors/motion/shadows via tokens; structural px offsets mirror the mock.
 */

.csc-login {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px;
	background-color: var(--wp--preset--color--paper);
	--grid-line: var(--wp--custom--grid--line);
	--grid-pitch: 48px;
}

.csc-login__card {
	position: relative;
	z-index: 2;
	width: 460px;
	max-width: 100%;
	background: var(--wp--preset--color--white);
	border: 1px solid #E4EDF6; /* mock-exact card border tint */
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--login);
	padding: 40px 44px;
	animation: hubIn var(--wp--custom--motion--reveal) var(--wp--custom--motion--ease);
}

.csc-login__logo { height: 30px; display: block; width: auto; }

.csc-login__overline {
	font: 700 12px/16px var(--wp--preset--font-family--lato);
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	display: block;
	margin: 24px 0 20px;
}

.csc-login__title {
	font: 900 30px/36px var(--wp--preset--font-family--lato);
	color: var(--wp--preset--color--blue-dark);
	margin: 0 0 10px;
	letter-spacing: -0.4px;
}

.csc-login__lead {
	font: 400 15px/23px var(--wp--preset--font-family--lato);
	color: var(--wp--preset--color--muted);
	margin: 0 0 28px;
	text-wrap: pretty;
}

.csc-login__btn { height: 50px; width: 100%; }

.csc-login__divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; }
.csc-login__divider-line { flex: 1; height: 1px; background: var(--wp--preset--color--hairline); }
.csc-login__divider-label { font: 400 12.5px/1 var(--wp--preset--font-family--lato); color: var(--wp--preset--color--muted); }

.csc-login__help { display: flex; justify-content: center; margin-top: 14px; }
.csc-login__help a { font: 700 13px/1 var(--wp--preset--font-family--lato); text-decoration: none; }

/* ---------- Decorative construction scene ---------- */
.csc-login__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.csc-login__plot { position: absolute; border: 1.5px dashed var(--wp--preset--color--blue-40); border-radius: 4px; }
.csc-login__plot--1 { left: 4%; top: 7%; width: 240px; height: 150px; }
.csc-login__plot--2 { right: 4%; top: 8%; width: 280px; height: 140px; }
.csc-login__plot-label {
	position: absolute;
	padding: 6px 10px;
	font: 700 11px/1 var(--wp--preset--font-family--lato);
	letter-spacing: 1.2px;
	color: var(--wp--preset--color--blue-60);
}
.csc-login__plot-label--1 { left: 4%; top: 7%; }
.csc-login__plot-label--2 { right: 4%; top: calc(8% + 140px); }

.csc-login__site { position: absolute; right: 5%; bottom: 10%; width: 290px; height: 312px; }
.csc-login__ground { position: absolute; left: -40px; top: 310px; width: 340px; height: 2px; background: var(--wp--preset--color--blue-40); }

.csc-login__jib { position: absolute; left: 0; top: 22px; width: 250px; height: 10px; background: var(--wp--preset--color--blue-dark); border-radius: 3px; animation: hubIn 500ms var(--wp--custom--motion--ease) 200ms backwards; }
.csc-login__counterweight { position: absolute; left: 0; top: 32px; width: 28px; height: 20px; background: var(--wp--preset--color--blue); border-radius: 2px; animation: hubIn 500ms var(--wp--custom--motion--ease) 200ms backwards; }
.csc-login__mast { position: absolute; left: 80px; top: 26px; width: 12px; height: 284px; background: var(--wp--preset--color--blue-dark); background-image: repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,0.28) 14px 16px); border-radius: 2px; animation: hubIn 500ms var(--wp--custom--motion--ease) 100ms backwards; }
.csc-login__mast-top { position: absolute; left: 82px; top: 10px; width: 8px; height: 16px; background: var(--wp--preset--color--blue-dark); border-radius: 2px 2px 0 0; animation: hubIn 500ms var(--wp--custom--motion--ease) 100ms backwards; }
.csc-login__beacon { position: absolute; left: 83px; top: 2px; width: 6px; height: 6px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--blue-10); box-shadow: 0 0 8px 2px rgba(230,240,250,0.9); animation: blinkLight 1.6s ease-in-out infinite; }

.csc-login__trolley { position: absolute; left: 202px; top: 30px; animation: craneSlide 7s ease-in-out infinite alternate; }
.csc-login__trolley-cab { width: 16px; height: 8px; background: var(--wp--preset--color--blue); border-radius: 2px; margin: 0 auto; }
.csc-login__cable-wrap { display: flex; flex-direction: column; align-items: center; }
.csc-login__cable { width: 2px; height: 64px; background: var(--wp--preset--color--muted); animation: cableLen 3.4s ease-in-out infinite; }
.csc-login__load { width: 20px; height: 20px; background: var(--wp--preset--color--blue); border-radius: 3px; border: 2px solid var(--wp--preset--color--blue-dark); }

.csc-login__floor { position: absolute; left: 130px; width: 120px; height: 30px; background: var(--wp--preset--color--blue); border-radius: 2px; background-image: repeating-linear-gradient(90deg, rgba(230,240,250,0.9) 0 9px, transparent 9px 24px); background-size: calc(100% - 16px) 7px; background-repeat: no-repeat; background-position: 8px center; }
.csc-login__floor--1 { top: 280px; animation: floorUp 500ms var(--wp--custom--motion--ease) 900ms backwards; }
.csc-login__floor--2 { top: 250px; animation: floorUp 500ms var(--wp--custom--motion--ease) 1500ms backwards; }
.csc-login__floor--3 { top: 220px; animation: floorUp 500ms var(--wp--custom--motion--ease) 2100ms backwards; }
.csc-login__roof { position: absolute; left: 124px; top: 206px; width: 132px; height: 14px; background: var(--wp--preset--color--blue-dark); border-radius: 3px; animation: floorUp 500ms var(--wp--custom--motion--ease) 2700ms backwards; }

.csc-login__flag { position: absolute; left: 178px; top: 180px; animation: hubPop 500ms var(--wp--custom--motion--ease-celebrate) 3300ms backwards; }
.csc-login__flag-pole { position: absolute; left: 0; top: 0; width: 2.5px; height: 28px; background: var(--wp--preset--color--blue-dark); display: block; }
.csc-login__flag-cloth { position: absolute; left: 2.5px; top: 1px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 18px solid var(--wp--preset--color--yellow); display: block; transform-origin: left center; animation: flagWave 2.2s ease-in-out infinite; }

/* Hide the heavy scene on small screens (mobile reference keeps the card only) */
@media (max-width: 900px) {
	.csc-login__scene { display: none; }
	.csc-login__card { padding: 32px 24px; }
}