/* 
   2. BASE STYLES & RESET
*/

/* Page Background Gradients */
.page-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 70% 0%, rgba(0, 229, 255, 0.04), transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255, 0, 128, 0.03), transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* SPA Section Handling */
section {
    display: none;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

section.active-section {
    display: block;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-void-0);
    color: var(--color-void-800);
    font-family: var(--font-body);
    line-height: var(--leading-base);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: hidden;
    transition: background-color var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out);
}

/* NOISE TEXTURE OVERLAY */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    mix-blend-mode: overlay;
}

::selection {
    background-color: var(--color-cyan-500);
    color: #fff;
}

/* SCANLINE EFFECT (TALAS) */
body::after {
    content: '';
    position: fixed;
    inset: 0;

    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
    z-index: 9998;
    opacity: 0.15;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-void-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-void-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-cyan-500);
}

/* Global Spotlight Overlay */
html::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(800px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(0, 219, 245, 0.05), transparent 40%);
    mix-blend-mode: screen;
}

/* TYPOGRAPHY DEFAULTS */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-void-900);
    font-family: var(--font-head);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

h1 {
    font-size: var(--text-5xl);
}

h2 {
    font-size: var(--text-4xl);
}

h3 {
    font-size: var(--text-3xl);
}

h4 {
    font-size: var(--text-2xl);
}

h5 {
    font-size: var(--text-xl);
}

h6 {
    font-size: var(--text-lg);
}

p {
    margin-bottom: var(--space-4);
    color: var(--color-void-600);
}

a {
    color: var(--color-cyan-400);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--color-cyan-300);
    text-shadow: 0 0 8px var(--color-cyan-glow);
}

code,
pre {
    font-family: var(--font-mono);
}