/* ── base.css — reset, tokens, global ── */

:root {
  --gold:        #f2a624;
  --gold-dim:    #c47d12;
  --rust:        #c9442c;
  /* cream → dusty rose-white, slightly pinkish to match bg warmth */
  --cream:       #ede3f0;
  --muted:       rgba(237,227,240,0.48);
  --muted2:      rgba(237,227,240,0.24);
  --sep:         rgba(237,227,240,0.10);

  --font-body:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", "Courier New", monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--cream);
  background: #0a0510;
}

/*
 * Atmospheric gradient — warm pink-orange light from top-right, deep plum base.
 * Strong amber halo, rose-violet smoke mid-field.
 * Direction: bright top-right → dark bottom-left.
 */
/*
 * Right-dominant gradients — low parallax depth (--px-r / --py-r).
 * Left gradients live in .bg-left (bg-left div) with a higher depth.
 */
body::before {
  content: "";
  position: fixed;
  inset: var(--inset-r, -2%);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate(var(--px-r, 0px), var(--py-r, 0px));
  background:
    /* ① Bright hot spot — top-right, warm golden-white */
    radial-gradient(ellipse 52% 52% at 100% 0%,
      rgba(231, 228, 225, 0.301) 0%,
      rgba(255, 181, 121, 0.205)  30%,
      transparent            64%),

    /* ② Primary off-screen light — amber-rose from right */
    radial-gradient(ellipse 58% 115% at 108% 45%,
      rgba(238, 114, 57, 0.582)  0%,
      rgba(200,80,120,0.20)  38%,
      transparent            63%),

    /* ③ Rose/pink bleed mid-right */
    radial-gradient(ellipse 42% 52% at 80% 30%,
      rgba(210,90,140,0.18)  0%,
      transparent            64%),

    /* ④ Warm amber diffusion, centre-right */
    radial-gradient(ellipse 52% 62% at 66% 60%,
      rgba(185,85,28,0.16)  0%,
      transparent           57%),

    /* ⑤ Dusty violet/mauve smoke — dominant mid-field tone */
    radial-gradient(ellipse 90% 70% at 50% 38%,
      rgba(120, 30, 90, 0.3)  0%,
      rgba(70,18,95,0.18)   40%,
      transparent           72%),

    /* ⑨ Top center-left accent — warm pink-violet bloom */
    radial-gradient(ellipse 75% 58% at 52% 0%,
      rgba(219, 93, 93, 0.305) 0%,
      transparent           65%),

    /* ⑩ Top-right glow — bright near-white warm core */
    radial-gradient(ellipse 42% 84% at 98% 17%,
      rgba(255, 242, 210, 0.72) 0%,
      rgba(255, 185,  85, 0.42) 32%,
      transparent               88%),

    /* ⑪ Top-right glow — wider amber halo */
    radial-gradient(ellipse 50% 92% at 104% 0%,
      rgba(245, 115, 55, 0.48) 0%,
      rgba(210, 100,  35, 0.22) 42%,
      transparent               70%),

    #1a0f17;
}

/*
 * Left-dominant gradients — high parallax depth (--px-l / --py-l).
 * Moves ~4× more than body::before, creating a strong depth-shift on the dark side.
 */
.bg-left {
  position: fixed;
  inset: var(--inset-l, -15%);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate(var(--px-l, 0px), var(--py-l, 0px));
  background:
    /* ⑥ Muted plum lower-centre */
    radial-gradient(ellipse 70% 55% at 40% 80%,
      rgba(39, 11, 66, 0.42)  0%,
      transparent          60%),

    /* ⑦ Warm dark plum — left side */
    radial-gradient(ellipse 78% 68% at -6% 52%,
      rgba(32, 6, 30, 0.85)  0%,
      rgba(22, 4, 15, 0.2)  50%,
      transparent         75%),

    /* ⑧ Dark mauve pool — bottom-left corner */
    radial-gradient(ellipse 78% 62% at 6% 90%,
      rgba(12,3,18,0.92) 0%,
      transparent        90%);
}

/* ── Layer 2: Anatolian pattern — full screen, very subtle ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpolygon points='24,4 44,24 24,44 4,24' fill='none' stroke='%23f2a624' stroke-width='1'/%3E%3Cpolygon points='24,14 34,24 24,34 14,24' fill='none' stroke='%23f2a624' stroke-width='0.6'/%3E%3Ccircle cx='24' cy='4' r='2' fill='%23f2a624'/%3E%3Ccircle cx='44' cy='24' r='2' fill='%23f2a624'/%3E%3Ccircle cx='24' cy='44' r='2' fill='%23f2a624'/%3E%3Ccircle cx='4' cy='24' r='2' fill='%23f2a624'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}

#dust-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

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