/* ============================================
   Arcynia — Base + Typography + Background FX
   ============================================ */

html { scroll-behavior: smooth; }

body {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 400;
    background: var(--ar-bg-deep);
    color: var(--ar-text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Typography helpers */
.font-display {
    font-family: 'Orbitron', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.font-body {
    font-family: 'Rajdhani', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ar-text);
}

a { color: var(--ar-neon-cyan); text-decoration: none; }
a:hover { color: var(--ar-neon-pink); }

::selection { background: var(--ar-neon-pink); color: #fff; }

/* ── Synthwave background layers (fixed, behind content) ── */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-fx::before {
    /* radial sun glow at the bottom */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -20vh;
    width: 120vw;
    height: 80vh;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(255, 0, 255, 0.18) 0%,
        rgba(123, 47, 247, 0.08) 30%,
        transparent 60%);
    filter: blur(20px);
}

.bg-fx::after {
    /* perspective grid floor */
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: 0;
    height: 50vh;
    background:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 0, 255, 0.05) 60%,
            rgba(255, 0, 255, 0.10) 100%),
        repeating-linear-gradient(90deg,
            rgba(255, 45, 123, 0.18) 0px,
            rgba(255, 45, 123, 0.18) 1px,
            transparent 1px,
            transparent 80px),
        repeating-linear-gradient(0deg,
            rgba(0, 240, 255, 0.12) 0px,
            rgba(0, 240, 255, 0.12) 1px,
            transparent 1px,
            transparent 60px);
    transform: perspective(400px) rotateX(60deg);
    transform-origin: bottom;
    opacity: 0.55;
    mask-image: linear-gradient(to top, #000 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}

/* Subtle scanlines overlay */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 3px
    );
    mix-blend-mode: multiply;
}