/* =============================================================================
   NEXILIA NETWORK — base.css
   Reset, typography, and generic page scaffolding (background layers, section
   rhythm, focus states). Component-level styles live in components.css.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Page-load fade-in: pure CSS, so it fires even before js/layout.js runs
     and there's zero flash-of-unstyled-opacity for no-js visitors. */
  animation: fadeIn var(--dur-slow) var(--ease-standard) both;
}

/* Page-leave fade-out, toggled by js/layout.js right before it navigates
   an internal link away — gives every page-to-page click a soft crossfade
   instead of the browser's default hard cut. */
body.is-leaving {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; display: block; }
svg { display: block; }

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Visible keyboard focus everywhere — never suppressed */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--purple-soft);
  color: var(--white);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(138, 43, 226, 0.4), rgba(24, 176, 255, 0.4));
  border-radius: var(--radius-pill);
}

/* -----------------------------------------------------------------------
   Layout helpers
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  position: relative;
  padding: var(--space-9) 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
}

.section-desc {
  color: var(--gray);
  max-width: 520px;
  font-size: 15px;
}

/* -----------------------------------------------------------------------
   Section separation — item 11. Every long page (home, launcher) stacks
   several .section blocks with nothing but padding between them; scrolling
   through, there's no visual cue that one block ended and the next began,
   just a wall of the same background. A full alternating band background
   was considered and rejected — item 6 deliberately made the atmosphere
   layers fixed/sitewide instead of per-section, and tiling a tint per
   section would undo that. A hairline seam is the same "HUD panel" language
   already used for card borders and the nav's bottom edge, just applied at
   the section boundary: quiet, on-brand, and needs zero HTML changes since
   it targets the sibling relationship directly.
   ----------------------------------------------------------------------- */
.section + .section {
  overflow: visible;
}

.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 72%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-hi), transparent);
}

/* -----------------------------------------------------------------------
   Empty states — faq.js, news-page.js and store.js each render a "no
   results for this filter" message, but until now it was just a line of
   gray text with no visual weight, easy to miss and inconsistent with how
   deliberate the rest of the UI is about feedback. One shared component:
   a dashed HUD-style box (dashed reads as "placeholder", distinct from the
   solid-bordered glass cards used for real content) with a small icon.
   ----------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
}

.empty-state-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--space-3);
  color: var(--gray-dim);
  opacity: 0.8;
}

.empty-state-text {
  color: var(--gray-dim);
  font-size: 14px;
}

/* -----------------------------------------------------------------------
   Background layers — same layered-atmosphere system as the launcher app,
   adapted for a scrolling page (fixed, sits behind all content).
   ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
   Background layers — item 6 of the redesign.
   The old system was one .bg-gradient div: three centered radial blobs in
   brand purple/blue, the exact "AI site" backdrop the brief calls out by
   name. It's replaced with five independent layers, back to front, each
   doing one job instead of one div trying to do all of them:

     .bg-nebula      — large, off-center, asymmetric color fields (not
                        centered blobs) that slowly drift; reads as
                        atmosphere, not a logo-colored spotlight.
     .bg-volumetric  — two soft light beams swaying behind the hero, the
                        "shaft of light through a window" cue no template
                        purple-blob background bothers with.
     .bg-dust        — a field of tiny, individually twinkling points,
                        distinct from the grain layer below (dust reads as
                        depth/distance; grain reads as material texture).
     .bg-grain       — unchanged: the fractal-noise texture over
                        everything, so no surface looks like a flat CSS
                        gradient up close.
     #particlesCanvas — unchanged: js/particles.js's drifting motes, the
                        one layer with real per-frame motion.

   Every layer is `position: fixed`, so the atmosphere stays put while the
   page scrolls through it rather than repeating per-section.
   ----------------------------------------------------------------------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.bg-nebula {
  background: var(--bg);
  overflow: hidden;
  /* Parallax lives on this outer box (nudged a few px opposite the cursor
     by js/parallax.js); the drift animation lives on ::before below so the
     two transforms don't fight over the same `transform` property. */
  transform: translate3d(var(--pgx, 0px), var(--pgy, 0px), 0);
}

.bg-nebula::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(138, 43, 226, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 55% at 88% 8%, rgba(24, 176, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 92%, rgba(61, 22, 113, 0.24), transparent 65%),
    radial-gradient(ellipse 45% 40% at 8% 88%, rgba(24, 176, 255, 0.08), transparent 58%);
  animation: driftA 34s ease-in-out infinite;
}

.bg-volumetric {
  overflow: hidden;
}

.bg-volumetric::before,
.bg-volumetric::after {
  content: '';
  position: absolute;
  top: -10%;
  width: 240px;
  height: 140%;
  filter: blur(60px);
  transform-origin: top center;
  mix-blend-mode: screen;
}

.bg-volumetric::before {
  left: 30%;
  background: linear-gradient(180deg, rgba(138, 43, 226, 0.14) 0%, transparent 70%);
  animation: beamDrift 18s ease-in-out infinite;
}

.bg-volumetric::after {
  left: 68%;
  width: 200px;
  background: linear-gradient(180deg, rgba(24, 176, 255, 0.1) 0%, transparent 65%);
  animation: beamDrift 22s ease-in-out infinite reverse;
  animation-delay: -6s;
}

.bg-dust {
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(248, 248, 248, 0.55), transparent),
    radial-gradient(1px 1px at 42% 65%, rgba(248, 248, 248, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 68% 20%, rgba(24, 176, 255, 0.5), transparent),
    radial-gradient(1px 1px at 85% 78%, rgba(248, 248, 248, 0.4), transparent),
    radial-gradient(1px 1px at 25% 88%, rgba(138, 43, 226, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 92% 45%, rgba(248, 248, 248, 0.45), transparent),
    radial-gradient(1px 1px at 55% 10%, rgba(248, 248, 248, 0.35), transparent);
  background-repeat: repeat;
  background-size: 640px 640px;
  animation: dustTwinkle 5s ease-in-out infinite;
}

.bg-grain {
  z-index: -2;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

#particlesCanvas {
  z-index: -1;
}

/* Accessibility: fully respect the OS-level reduced-motion preference across
   every animation on the site, not just a token gesture on one element. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 720px) {
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-8) 0; }
}