/* ============================================================
   Delusion Index — Base
   ------------------------------------------------------------
   Reset, page basics, and the four atmospheric background
   layers that sit behind all content (.bg-glow / .bg-grain /
   .bg-stars / .edge-note).
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

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

/* ---------- Background atmosphere ----------
   Four fixed layers stacked behind everything:
   1. bg-glow   — two big blurred radial blooms (pink + gold)
   2. bg-grain  — inline SVG fractal-noise film grain
   3. bg-stars  — drifting gold sparkle motes
   4. edge-note — large vertical margin text (desktop only)
   ------------------------------------------------- */

.bg-glow,
.bg-grain,
.bg-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-glow { overflow: hidden; }
.bg-glow::before,
.bg-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
}
.bg-glow::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 79, 163, .40), transparent 70%);
  top: -160px;
  left: -120px;
}
.bg-glow::after {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 201, 60, .42), transparent 70%);
  bottom: -200px;
  right: -140px;
}

.bg-grain {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-stars span {
  position: absolute;
  color: var(--gold);
  opacity: .4;
  font-size: 14px;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50%      { opacity: .7;  transform: scale(1.15); }
}

/* Vertical "delulu" / "oracle" margin text — desktop only */
.edge-note {
  position: fixed;
  z-index: 0;
  font-family: var(--font-accent);
  color: rgba(212, 38, 126, .22);
  font-size: 80px;
  line-height: .8;
  writing-mode: vertical-rl;
  user-select: none;
  display: none;
}
.edge-note.left  { left: 18px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.edge-note.right { right: 18px; top: 46%; transform: translateY(-50%); }
@media (min-width: 1180px) { .edge-note { display: block; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}