/* ==========================================
UndefinedVerseOfficial
Obsidian Architecture Background System
========================================== */

:root {
--background-base: #090A0C;
--background-panel: #17191D;
--background-metal: #343B43;

--metal-gradient:
linear-gradient(
135deg,
#343B43 0%,
#777E87 28%,
#D8DCE2 48%,
#777E87 68%,
#343B43 100%
);

--surface-gradient:
linear-gradient(
145deg,
rgba(216, 220, 226, 0.055),
rgba(52, 59, 67, 0.025) 55%,
rgba(9, 10, 12, 0.1)
);
}

/* Main background */

.site-background {
position: fixed;
inset: 0;
z-index: var(--z-background);
overflow: hidden;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(119, 126, 135, 0.12),
transparent 55%
),
linear-gradient(
180deg,
#0D0F12 0%,
#090A0C 55%,
#08090B 100%
);
}

/* Architectural depth */

.site-background::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.45;
background:
linear-gradient(
115deg,
transparent 35%,
rgba(216, 220, 226, 0.035) 50%,
transparent 65%
);
}

/* Controlled ambient lighting */

.site-background::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.3;
background:
radial-gradient(
ellipse at 80% 35%,
rgba(119, 126, 135, 0.09),
transparent 42%
);
}

/* Background geometry container */

.architecture-layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}

/* Architectural panels */

.architecture-panel {
position: absolute;
border: 1px solid rgba(216, 220, 226, 0.12);
background: var(--surface-gradient);
box-shadow:
inset 0 1px 0 rgba(244, 245, 246, 0.045),
0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Metallic surfaces */

.metal-surface {
background: var(--metal-gradient);
background-size: 200% 200%;
border: 1px solid rgba(244, 245, 246, 0.2);
}

/* Directional lighting */

.ambient-light {
position: absolute;
width: min(55vw, 600px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(216, 220, 226, 0.075),
transparent 70%
);
filter: blur(30px);
pointer-events: none;
}

/* Content layer */

.site-content {
position: relative;
z-index: var(--z-content);
}

/* Glass-free architectural surfaces */

.architectural-surface {
background:
linear-gradient(
145deg,
rgba(216, 220, 226, 0.055),
rgba(23, 25, 29, 0.94) 55%
);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
}

/* Subtle metallic divider */

.metal-divider {
height: 1px;
border: 0;
background: linear-gradient(
90deg,
transparent,
rgba(216, 220, 226, 0.35),
transparent
);
}

/* Performance-conscious mobile behavior */

@media (max-width: 600px) {
.ambient-light {
filter: none;
opacity: 0.65;
}

.architecture-panel {
box-shadow: none;
}
}

@media (prefers-reduced-motion: reduce) {
.site-background,
.architecture-layer,
.architecture-panel {
animation: none !important;
transition: none !important;
}
}