/* =========================
   RESET & BASE
========================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition), color var(--transition);
}

/* BACKGROUND — capa base */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-gradient);
    pointer-events: none;
    z-index: 0;
}

/* BACKGROUND — orbes de color */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 45%, rgba(79, 140, 255, 0.08), transparent),
        radial-gradient(ellipse 50% 60% at 85% 25%, rgba(99, 102, 241, 0.06), transparent),
        radial-gradient(ellipse 40% 40% at 50% 90%, rgba(16, 217, 160, 0.03), transparent);
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--transition-slow);
}

body.light::after {
    background:
        radial-gradient(ellipse 60% 50% at 15% 45%, rgba(37, 99, 235, 0.06), transparent),
        radial-gradient(ellipse 50% 60% at 85% 25%, rgba(99, 102, 241, 0.04), transparent),
        radial-gradient(ellipse 40% 40% at 50% 90%, rgba(16, 185, 129, 0.025), transparent);
}

.particle-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle-layer .particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.75;
    filter: blur(0.3px);
    background: rgba(255, 255, 255, 0.75);
    animation: drift 16s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(18px, -24px) scale(1.12);
        opacity: 0.9;
    }
    100% {
        transform: translate(-10px, 20px) scale(0.95);
        opacity: 0.6;
    }
}