/* Lucleus Gitea theme — brand skin + landing page.
   Loaded via custom/templates/custom/header.tmpl on every page, after Gitea's
   own stylesheets so these rules win. Pair this with a dark base theme in
   app.ini:  [ui] DEFAULT_THEME = gitea-dark  (see gitea/README.md).

   Mirrors the lucleus.com homepage: dark #111 ground, Inter (weight 100-300),
   letter-spaced uppercase accents, gradient orbs + glow on the hero. */

/* ============================================================
   Global brand skin
   ============================================================ */

/* Inter everywhere (loaded via header.tmpl). */
body,
.ui,
input, textarea, button, select, .ui.menu, .ui.dropdown {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Brand accent + dark ground. Gitea component CSS reads these custom
   properties; values for variables not present in a given Gitea version are
   simply ignored (harmless no-op), so this stays portable across releases.
   Scoped to :root and the theme classes so it isn't outranked by the active
   theme's own :root.theme-* block. */
:root,
:root.theme-gitea,
:root.theme-gitea-dark,
:root.theme-gitea-light,
:root.theme-arc-green,
:root[data-theme] {
	/* Brand accent (Lucleus greys) */
	--color-primary: #6b7280;
	--color-primary-dark-1: #7d828b;
	--color-primary-dark-2: #8d929b;
	--color-primary-dark-3: #9da2ab;
	--color-primary-light-1: #5b606b;
	--color-primary-light-2: #4b505b;
	--color-primary-contrast: #ffffff;

	/* Dark ground to match lucleus.com (#111 page, near-black chrome) */
	--color-body: #111111;
	--color-nav-bg: #0c0c0c;
	--color-footer: #010101;
	--color-box-body: #141414;
	--color-box-header: #171717;
	--color-box-body-highlight: #1a1a1a;
	--color-menu: #141414;
	--color-secondary: #212121;
	--color-secondary-dark-1: #2a2a2a;
	--color-secondary-dark-2: #333333;

	--color-text: #f1f1f1;
	--color-text-dark: #ffffff;
	--color-text-light: #c9c9c9;
	--color-text-light-1: #9ca3af;
	--color-text-light-2: #888888;
	--color-text-light-3: #6b7280;
}

/* ============================================================
   Landing page (templates/home.tmpl) — faithful to lucleus.com hero
   ============================================================ */

.lucleus-home {
	width: 100%;
	background: #111;
	color: #f1f1f1;
}

.lucleus-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 78vh;
	padding: 6rem 2rem 5rem;
	overflow: hidden;
	text-align: center;
}

.lucleus-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lucleus-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 50px 50px;
	opacity: 0.3;
}

.lucleus-orb {
	position: absolute;
	filter: blur(100px);
	opacity: 0.08;
}

.lucleus-orb-1 {
	top: 10%;
	left: 10%;
	width: 500px;
	height: 500px;
	border-radius: 40%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
	animation: lucleus-float 20s ease-in-out infinite;
}

.lucleus-orb-2 {
	right: 10%;
	bottom: 10%;
	width: 400px;
	height: 400px;
	border-radius: 45%;
	background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15), transparent);
	animation: lucleus-float 25s ease-in-out infinite reverse;
}

@keyframes lucleus-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -30px); }
}

.lucleus-hero-content {
	position: relative;
	z-index: 1;
}

.lucleus-logo {
	position: relative;
	width: 50vh;
	height: 50vh;
	max-width: 256px;
	max-height: 256px;
	margin: 0 auto 3rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(25, 25, 25, 0.9), rgba(15, 15, 15, 0.6));
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.02);
	overflow: hidden;
	transition: all 0.5s ease;
}

.lucleus-logo:hover {
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 80px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(255, 255, 255, 0.05);
}

.lucleus-logo-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 55%;
	height: 55%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	opacity: 0.9;
	pointer-events: none;
	transition: all 0.5s ease;
}

.lucleus-logo:hover .lucleus-logo-img {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.06);
}

.lucleus-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 60%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	opacity: 0.2;
	transition: opacity 0.8s ease;
}

.lucleus-logo:hover .lucleus-glow { opacity: 0.3; }

.lucleus-title {
	margin: 0 0 2rem;
}

.lucleus-title-main {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 5rem;
	font-weight: 200;
	letter-spacing: 0.05em;
	background: linear-gradient(180deg, #ffffff 0%, #888888 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lucleus-title-sub {
	display: block;
	font-size: 2rem;
	font-weight: 200;
	color: #666;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lucleus-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: 2rem;
}

.lucleus-btn {
	padding: 0.6rem 1.6rem;
	border-radius: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	color: #fff !important;
	font-size: 0.9rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}

.lucleus-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.lucleus-btn-primary {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}

.lucleus-links {
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: #6b7280;
}

.lucleus-links a { color: #9ca3af; }
.lucleus-links a:hover { color: #fff; }
.lucleus-links span { margin: 0 0.5rem; }

@media (max-width: 768px) {
	.lucleus-title-main { font-size: 3rem; }
	.lucleus-title-sub { font-size: 1.5rem; }
}