/* ==========================================================
   RESET & BASE STYLES
   ----------------------------------------------------------
   Global reset, base typography, cosmic background, and
   defensive image sizing.
   ========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-primary);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----- Cosmic gradient background ----- */

body::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -2;
    background:
        radial-gradient(900px 620px at 80% 4%, rgba(0, 168, 255, .12), transparent 60%),
        radial-gradient(800px 700px at 10% 34%, rgba(168, 77, 255, .16), transparent 60%),
        radial-gradient(700px 600px at 88% 72%, rgba(255, 152, 0, .07), transparent 60%),
        linear-gradient(180deg, #030817, #020512 55%, #04091d);
}

/* ----- Animated starfield overlay ----- */

body::after {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    opacity: .5;
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 70%, #cfe6ff, transparent),
        radial-gradient(1px 1px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 35% 80%, #bcd6ff, transparent),
        radial-gradient(1px 1px at 90% 50%, #fff, transparent),
        radial-gradient(1px 1px at 12% 62%, #fff, transparent),
        radial-gradient(1px 1px at 50% 14%, #d8ecff, transparent),
        radial-gradient(1px 1px at 72% 90%, #fff, transparent);
    background-repeat: repeat;
    background-size: 520px 520px;
    animation: starfield-twinkle 6s ease-in-out infinite alternate;
}

@keyframes starfield-twinkle {
    from { opacity: .32; }
    to   { opacity: .58; }
}