/**
 * SWG Tools page theme.
 *
 * Everything is scoped to body.swg-tools-page so it can't leak onto the rest of
 * the site, and it's pure CSS (no external images) so it survives the calc's CSP
 * and needs no asset pipeline. Palette harmonises with the calculator: gold
 * (#d9b45b) accents on deep space, with SWG hologram-teal for highlights.
 */

:root {
	--swg-gold: #d9b45b;
	--swg-teal: #5fd0e6;
	--swg-ink:  #070b12;
	/* Reusable starfield: four dot layers tiled together for parallax depth. */
	--swg-stars:
		radial-gradient(1.6px 1.6px at 40px 60px,  rgba(255,255,255,.95), transparent),
		radial-gradient(1px 1px   at 130px 22px,   rgba(255,255,255,.65), transparent),
		radial-gradient(1px 1px   at 90px 150px,   rgba(180,222,255,.75), transparent),
		radial-gradient(1.4px 1.4px at 185px 110px, rgba(255,240,205,.8),  transparent);
}

/* ── Page background takeover ────────────────────────────────────────────────
   The theme paints an opaque body background; we clear it and drop two fixed
   layers behind the content (z-index:-1, so non-positioned page content paints
   in front). ::before = deep-space gradient + nebula, ::after = drifting stars. */

body.swg-tools-page {
	background: transparent !important;
}

body.swg-tools-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 60% at 15% -5%,  rgba(43,130,165,.30), transparent 60%),
		radial-gradient(ellipse 80% 55% at 88% 108%, rgba(120,92,185,.20), transparent 60%),
		radial-gradient(ellipse 60% 40% at 50% 50%,  rgba(217,180,91,.06), transparent 70%),
		linear-gradient(180deg, #060a12 0%, var(--swg-ink) 45%, #04060c 100%);
}

body.swg-tools-page::after {
	content: "";
	position: fixed;
	inset: -60%;                 /* oversized so the drift never reveals an edge */
	z-index: -1;
	pointer-events: none;
	background-image: var(--swg-stars);
	background-size: 220px 220px, 340px 340px, 180px 180px, 300px 300px;
	opacity: .6;
	animation: swg-drift 240s linear infinite;
}

@keyframes swg-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-180px, -120px, 0); }
}

/* ── Hero header ─────────────────────────────────────────────────────────────*/

.swg-tools-header {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 1120px;
	padding: clamp(48px, 9vw, 112px) 24px;
	text-align: center;
	border-radius: 12px;
	border: 1px solid rgba(217,180,91,.22);
	background:
		radial-gradient(ellipse 70% 120% at 50% -25%, rgba(43,140,175,.35), transparent 62%),
		linear-gradient(180deg, rgba(11,17,28,.72) 0%, rgba(6,10,18,.88) 100%);
	box-shadow:
		inset 0 0 90px rgba(0,0,0,.55),
		inset 0 1px 0 rgba(255,255,255,.05),
		0 18px 50px rgba(0,0,0,.45);
}

/* Star sparkle inside the hero, denser than the page field. */
.swg-th-stars {
	position: absolute;
	inset: 0;
	background-image: var(--swg-stars);
	background-size: 170px 170px, 250px 250px, 200px 200px, 300px 300px;
	opacity: .5;
	animation: swg-twinkle 5s ease-in-out infinite alternate;
}
@keyframes swg-twinkle {
	from { opacity: .32; }
	to   { opacity: .62; }
}

/* Hyperspace streaks: thin vertical light lines sweeping across, masked to fade
   at the edges so they read as motion rather than a grille. */
.swg-th-streaks {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg,
		transparent 0, transparent 46px,
		rgba(95,208,230,.16) 47px, rgba(95,208,230,.16) 48px,
		transparent 49px, transparent 96px
	);
	-webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 50%, #000 35%, transparent 78%);
	        mask-image: radial-gradient(ellipse 75% 100% at 50% 50%, #000 35%, transparent 78%);
	opacity: .5;
	animation: swg-warp 6s linear infinite;
}
@keyframes swg-warp {
	from { background-position-x: 0; }
	to   { background-position-x: 96px; }
}

.swg-th-inner {
	position: relative;   /* above the star/streak layers */
	z-index: 1;
}

.swg-th-eyebrow {
	margin: 0 0 16px;
	color: var(--swg-teal);
	font-size: clamp(11px, 1.4vw, 14px);
	font-weight: 600;
	letter-spacing: .48em;
	text-indent: .48em;          /* balance the trailing letter-spacing */
	text-transform: uppercase;
	text-shadow: 0 0 18px rgba(95,208,230,.45);
}

.swg-th-title {
	margin: 0;
	font-size: clamp(40px, 8.5vw, 88px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: .06em;
	background: linear-gradient(180deg, #ffffff 0%, #f4dfa4 46%, var(--swg-gold) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(217,180,91,.28));
}

.swg-th-subtitle {
	margin: 18px auto 0;
	max-width: 46ch;
	color: #aeb9c8;
	font-size: clamp(14px, 2vw, 18px);
	line-height: 1.5;
}

/* Sweeping scanline along the hero's bottom edge. */
.swg-th-scanline {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--swg-gold), transparent);
	opacity: .55;
	animation: swg-scan 4.5s ease-in-out infinite;
}
@keyframes swg-scan {
	0%, 100% { transform: translateX(-30%); opacity: .2; }
	50%      { transform: translateX(30%);  opacity: .6; }
}

/* Motion off for anyone who asked. Background stays, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
	body.swg-tools-page::after,
	.swg-th-stars,
	.swg-th-streaks,
	.swg-th-scanline {
		animation: none;
	}
}