/* Spaceship layer for the research console (index.html, index-zh.html only: scoped to body.ship).
   Deep-space backdrop with a drifting starfield, cartoon planets as section waypoints, a cockpit clock,
   a navigation-computer rail, HUD framing, and the career trajectory chart. Decorative elements are
   aria-hidden and pointer-events: none; motion stops under prefers-reduced-motion. */

body.ship {
	background:
		radial-gradient(1100px 760px at 82% -12%, rgba(58, 122, 176, 0.24), transparent 62%),
		radial-gradient(900px 720px at -12% 58%, rgba(122, 92, 200, 0.15), transparent 62%),
		radial-gradient(820px 620px at 62% 112%, rgba(38, 150, 164, 0.13), transparent 62%),
		#050c18;
}

body.ship::before {
	opacity: 0.55;
}

/* ---------- starfield ---------- */
.ship-sky {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	/* stars stay bright at the edges and dim behind the reading column */
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--rail), rgba(0, 0, 0, 0.42) calc(var(--rail) + 7rem), rgba(0, 0, 0, 0.42) calc(100% - 7rem), #000 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 var(--rail), rgba(0, 0, 0, 0.42) calc(var(--rail) + 7rem), rgba(0, 0, 0, 0.42) calc(100% - 7rem), #000 100%);
}

@media (max-width: 1199px) {
	.ship-sparkle {
		display: none;
	}
}

@media (max-width: 920px) {
	.ship-sky {
		opacity: 0.5;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.ship-sky-layer {
	position: absolute;
	inset: 0 0 auto;
	background-repeat: repeat;
	will-change: transform;
}

.ship-sparkle {
	position: absolute;
	width: var(--size, 14px);
	height: var(--size, 14px);
	opacity: 0.75;
	animation: ship-twinkle var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

.ship-sparkle svg {
	width: 100%;
	height: 100%;
}

.ship-shooting {
	position: absolute;
	top: 14%;
	left: -12rem;
	width: 11rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(110, 231, 242, 0.85));
	opacity: 0;
	transform: rotate(-14deg);
	animation: ship-shoot 26s linear 6s infinite;
}

@keyframes ship-twinkle {
	0%, 100% { opacity: 0.25; transform: scale(0.72) rotate(0deg); }
	50% { opacity: 0.95; transform: scale(1) rotate(12deg); }
}

@keyframes ship-shoot {
	0%, 94% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-14deg); }
	95% { opacity: 0.9; }
	99% { opacity: 0; transform: translate3d(70vw, -18vh, 0) rotate(-14deg); }
	100% { opacity: 0; }
}

/* ---------- cockpit top bar ---------- */
.ship .topbar {
	background: rgba(5, 12, 24, 0.86);
	box-shadow: 0 1px 0 rgba(110, 231, 242, 0.05), 0 12px 32px rgba(0, 0, 0, 0.25);
}

.ship .topbar::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(110, 231, 242, 0.55) 30%, rgba(255, 201, 120, 0.45) 70%, transparent);
	content: "";
	opacity: 0.6;
}

.ship-readout {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	margin-left: 0.35rem;
	padding-left: 0.9rem;
	border-left: 1px solid var(--line);
	color: #7f97a8;
	white-space: nowrap;
}

.ship-readout time {
	color: var(--amber);
	font-variant-numeric: tabular-nums;
}

.ship-readout .ship-coords {
	color: #5f7a8e;
}

@media (max-width: 1180px) {
	.ship-readout .ship-coords {
		display: none;
	}
}

/* ---------- navigation computer (rail) ---------- */
.ship .rail {
	background:
		linear-gradient(180deg, rgba(110, 231, 242, 0.035), transparent 30%),
		rgba(6, 15, 28, 0.78);
}

.ship .rail-nav {
	position: relative;
	margin-top: 1.9rem;
	padding-top: 1.55rem;
}

.ship .rail-nav::before {
	position: absolute;
	top: 0;
	left: 0.65rem;
	color: #5f7a8e;
	content: "nav · sectors";
	font: 500 0.6rem/1 var(--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

html[lang^="zh"] .ship .rail-nav::before {
	content: "导航 · 区段";
	letter-spacing: 0.1em;
}

.ship .rail-nav::after {
	position: absolute;
	top: 2.75rem;
	bottom: 1.2rem;
	left: 1.62rem;
	width: 1px;
	background: repeating-linear-gradient(180deg, rgba(110, 231, 242, 0.35) 0 3px, transparent 3px 7px);
	content: "";
}

.ship .rail-nav a {
	position: relative;
	z-index: 1;
	grid-template-columns: 2.2rem 1fr 1.25rem;
	border-left: 0;
	border-radius: 0.35rem;
}

.ship .rail-nav a span {
	display: grid;
	place-items: center;
	width: 1.95rem;
	height: 1.35rem;
	border: 1px solid rgba(110, 231, 242, 0.18);
	border-radius: 999px;
	background: #07121f;
}

.ship .rail-nav a:hover {
	background: rgba(110, 231, 242, 0.05);
}

.ship .rail-nav a.is-active {
	background: linear-gradient(90deg, rgba(110, 231, 242, 0.13), rgba(110, 231, 242, 0.02));
	box-shadow: inset 0 0 0 1px rgba(110, 231, 242, 0.16);
}

.ship .rail-nav a.is-active span {
	border-color: rgba(110, 231, 242, 0.7);
	box-shadow: 0 0 12px rgba(110, 231, 242, 0.35);
}

.ship .rail-nav a.is-active::after {
	width: 1.15rem;
	height: 1.15rem;
	background: url("../../images/space/rocket.svg") center / contain no-repeat;
	content: "";
	filter: drop-shadow(0 0 6px rgba(255, 201, 120, 0.35));
}

/* ---------- hero art (sits on top of the cockpit screen) ---------- */
.ship-hero-art {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.9rem);
	width: 100%;
	height: 8.6rem;
	pointer-events: none;
}

.ship-hero-art img {
	position: absolute;
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.ship-hero-planet {
	right: 0.4rem;
	bottom: 0;
	width: 11.5rem;
	animation: ship-float 14s ease-in-out infinite;
}

.ship-hero-moon {
	right: 12.6rem;
	bottom: 4.4rem;
	width: 2.9rem;
	animation: ship-float 10s ease-in-out -3s infinite;
}

.ship-hero-rocket {
	right: 15.9rem;
	bottom: 0.8rem;
	width: 2.7rem;
	animation: ship-drift 9s ease-in-out infinite;
}

@keyframes ship-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -10px, 0); }
}

@keyframes ship-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(8px, -8px, 0) rotate(3deg); }
}

/* cockpit screen framing for the terminal */
.ship .boot-console {
	position: relative;
	overflow: visible;
	border-color: rgba(110, 231, 242, 0.28);
	background: rgba(5, 13, 25, 0.86);
	box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35), inset 0 0 2.5rem rgba(110, 231, 242, 0.04);
}

.ship .boot-console > .console-bar {
	border-radius: 0.45rem 0.45rem 0 0;
}

/* overflow is visible (for the art above the screen), so keep the screen from widening its grid column */
.ship .boot-console {
	min-width: 0;
}

.ship .boot-console > :not(.ship-hero-art) {
	max-width: 100%;
}

.ship .terminal-shortcuts {
	overflow-x: auto;
	scrollbar-width: none;
}

.ship .terminal-shortcuts::-webkit-scrollbar {
	display: none;
}

.ship .boot-console::before {
	position: absolute;
	inset: -7px;
	border-radius: 0.6rem;
	background:
		linear-gradient(var(--cyan), var(--cyan)) top left / 16px 2px,
		linear-gradient(var(--cyan), var(--cyan)) top left / 2px 16px,
		linear-gradient(var(--cyan), var(--cyan)) top right / 16px 2px,
		linear-gradient(var(--cyan), var(--cyan)) top right / 2px 16px,
		linear-gradient(var(--amber), var(--amber)) bottom left / 16px 2px,
		linear-gradient(var(--amber), var(--amber)) bottom left / 2px 16px,
		linear-gradient(var(--amber), var(--amber)) bottom right / 16px 2px,
		linear-gradient(var(--amber), var(--amber)) bottom right / 2px 16px;
	background-repeat: no-repeat;
	content: "";
	opacity: 0.75;
	pointer-events: none;
}

/* ---------- section waypoints ---------- */
/* the planet takes the header's top-right cell, so it can never sit on text */
.ship .section-header {
	position: relative;
	grid-template-rows: auto auto;
}

.ship .section-header > div {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: end;
}

.ship .section-header > p {
	grid-column: 2;
	grid-row: 2;
}

.ship-waypoint {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	width: 6.6rem;
	height: auto;
	margin: -0.5rem 0.25rem 0.4rem 0;
	pointer-events: none;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
	animation: ship-float 12s ease-in-out infinite;
}

.ship-waypoint--wide {
	width: 8.6rem;
}

.ship .section-header::after {
	position: absolute;
	right: 0;
	bottom: -1.9rem;
	left: 0;
	height: 6px;
	background:
		repeating-linear-gradient(90deg, rgba(110, 231, 242, 0.32) 0 1px, transparent 1px 28px) 0 0 / 100% 6px no-repeat,
		linear-gradient(90deg, rgba(110, 231, 242, 0.4), rgba(164, 198, 221, 0.08) 45%, transparent) 0 100% / 100% 1px no-repeat;
	content: "";
	pointer-events: none;
}

.ship-contact-art {
	position: absolute;
	top: 4.5rem;
	left: 0;
	width: 6rem;
	pointer-events: none;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
	animation: ship-float 11s ease-in-out infinite;
}

.ship .contact {
	position: relative;
}

/* ---------- career trajectory ---------- */
.trajectory {
	position: relative;
	margin: 0 0 4.5rem;
	padding: 1.6rem 1.7rem 1.4rem;
	border: 1px solid rgba(110, 231, 242, 0.16);
	border-radius: 0.6rem;
	background:
		linear-gradient(180deg, rgba(110, 231, 242, 0.04), transparent 40%),
		rgba(6, 16, 30, 0.78);
	box-shadow: inset 0 0 3rem rgba(110, 231, 242, 0.03);
}

.trajectory-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 2rem;
	align-items: end;
	margin-bottom: 1.3rem;
}

.trajectory-head .eyebrow {
	margin-bottom: 0.45rem;
}

.trajectory-head h3 {
	margin: 0;
	font: 500 1.55rem/1.15 var(--serif);
	letter-spacing: -0.02em;
}

.trajectory-head p.trajectory-note {
	margin: 0.35rem 0 0;
	color: var(--muted);
	font-size: 0.86rem;
}

.trajectory-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trajectory-stats li {
	display: grid;
	min-width: 5.6rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.4rem;
	background: rgba(7, 18, 31, 0.8);
}

.trajectory-stats strong {
	font: 500 1.35rem/1 var(--serif);
}

.trajectory-stats span {
	margin-top: 0.3rem;
	color: #7f97a8;
	font: 400 0.6rem/1.2 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.traj-chart {
	--span: 12;
	position: relative;
	display: grid;
	gap: 0.55rem;
}

.traj-lane {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0 1rem;
	align-items: start;
	padding: 0.55rem 0;
	border-top: 1px solid var(--line);
}

.traj-lane-label {
	margin: 0;
	padding-top: 0.15rem;
	color: var(--muted);
	font: 500 0.66rem/1.3 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.traj-lane-label::before {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.45rem;
	border-radius: 50%;
	background: var(--lane, var(--cyan));
	box-shadow: 0 0 8px var(--lane, var(--cyan));
	content: "";
}

.traj-lane--edu { --lane: var(--violet); }
.traj-lane--work { --lane: var(--cyan); }
.traj-lane--teach { --lane: var(--amber); }

.traj-track {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	background: repeating-linear-gradient(90deg, rgba(164, 198, 221, 0.07) 0 1px, transparent 1px calc(100% / 12));
}

.traj-track li {
	position: relative;
	height: 1.55rem;
}

.traj-track a {
	position: absolute;
	top: 0.3rem;
	left: calc(var(--s) / var(--span, 12) * 100%);
	display: flex;
	align-items: center;
	width: calc((var(--e) - var(--s)) / var(--span, 12) * 100%);
	min-width: 0.55rem;
	height: 0.95rem;
	color: var(--paper);
	text-decoration: none;
}

.traj-bar {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--lane) 55%, transparent), var(--lane));
	box-shadow: 0 0 10px color-mix(in srgb, var(--lane) 45%, transparent);
	transition: filter 160ms ease, box-shadow 160ms ease;
}

.traj-track a.is-expected .traj-bar {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--lane) 55%, transparent), var(--lane)) 0 0 / var(--done, 40%) 100% no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--lane) 45%, transparent) 0 6px, transparent 6px 11px);
}

.traj-label {
	position: absolute;
	z-index: 1;
	left: calc(100% + 0.45rem);
	padding: 0.12rem 0.32rem;
	border-radius: 0.25rem;
	background: rgba(6, 16, 30, 0.88);
	color: #d6e6ee;
	font: 500 0.72rem/1 var(--sans);
	white-space: nowrap;
}

.traj-track a.label-left .traj-label {
	right: calc(100% + 0.55rem);
	left: auto;
}

.traj-dates {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.traj-track a:hover .traj-bar,
.traj-track a:focus-visible .traj-bar {
	filter: brightness(1.25);
	box-shadow: 0 0 16px var(--lane);
}

.traj-track a:hover .traj-label,
.traj-track a:focus-visible .traj-label {
	color: var(--cyan);
}

.traj-axis {
	position: relative;
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0 1rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--line);
	color: #6b8496;
	font: 400 0.6rem/1 var(--mono);
}

.traj-axis ol {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.traj-axis li {
	padding-left: 0.2rem;
	border-left: 1px solid rgba(164, 198, 221, 0.18);
}

.traj-now {
	position: absolute;
	top: 0;
	bottom: 1.4rem;
	left: calc(8.5rem + 1rem + (100% - 9.5rem) * var(--now, 8.8) / 12);
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--amber) 12%, var(--amber));
	pointer-events: none;
}

.traj-now span {
	position: absolute;
	top: -0.15rem;
	left: 0.3rem;
	color: var(--amber);
	font: 500 0.58rem/1 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- footer horizon ---------- */
.ship .lab-footer {
	position: relative;
	padding-top: 6.5rem;
	overflow: hidden;
}

.ship .lab-footer::before {
	position: absolute;
	top: 1.2rem;
	left: 50%;
	width: 170%;
	height: 34rem;
	border-radius: 50%;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(110, 231, 242, 0.16), transparent 18%),
		linear-gradient(180deg, #0b2a3a, #071824 30%, #050c18 60%);
	box-shadow: 0 -2px 0 rgba(110, 231, 242, 0.45), 0 -18px 48px rgba(110, 231, 242, 0.18);
	content: "";
	transform: translateX(-50%);
	pointer-events: none;
}

.ship .lab-footer p {
	position: relative;
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
	.ship-hero-art {
		height: 6.6rem;
	}

	.ship-hero-planet {
		width: 8.6rem;
	}

	.ship-hero-moon {
		right: 9.6rem;
		bottom: 3.4rem;
		width: 2.3rem;
	}

	.ship-hero-rocket {
		right: 12.4rem;
		bottom: 0.5rem;
		width: 2.2rem;
	}
}

@media (max-width: 920px) {
	.ship .rail-nav {
		margin-top: 0;
		padding-top: 0;
	}

	.ship .rail-nav::before,
	.ship .rail-nav::after,
	.ship .rail-nav a.is-active::after {
		display: none;
	}

	.ship .rail-nav a {
		grid-template-columns: auto;
	}

	.ship-hero-art {
		display: none;
	}

	.ship .section-header > div,
	.ship .section-header > p {
		grid-column: 1;
		grid-row: auto;
	}

	.ship-waypoint {
		grid-row: 1;
		grid-column: 1;
		width: 4.6rem;
		margin: 0 0 -0.6rem;
	}

	.ship-waypoint--wide {
		width: 6rem;
	}

	.ship-contact-art {
		display: none;
	}
}

@media (max-width: 760px) {
	.trajectory {
		padding: 1.2rem 1rem;
	}

	.trajectory-head {
		grid-template-columns: 1fr;
	}

	.traj-axis,
	.traj-now {
		display: none;
	}

	.traj-lane {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.traj-track {
		background: none;
	}

	.traj-track li {
		height: auto;
	}

	.traj-track a {
		position: static;
		display: grid;
		grid-template-columns: 0.55rem minmax(0, 1fr) auto;
		gap: 0.6rem;
		width: auto;
		height: auto;
		padding: 0.35rem 0;
	}

	.traj-bar {
		position: static;
		width: 0.55rem;
		height: 0.55rem;
	}

	.traj-label,
	.traj-track a.label-left .traj-label {
		position: static;
		white-space: normal;
	}

	.traj-dates {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		color: #7f97a8;
		font: 400 0.66rem/1.2 var(--mono);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ship-sparkle,
	.ship-shooting,
	.ship-hero-art img,
	.ship-waypoint,
	.ship-contact-art {
		animation: none;
	}

	.ship-shooting {
		display: none;
	}
}

@media print {
	.ship-sky,
	.ship-hero-art,
	.ship-waypoint,
	.ship-contact-art {
		display: none;
	}
}