/* =========================
   BASE
========================= */
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    position: relative;
    background: #0f1115;
}

/* =========================
   MOVING GRADIENT LAYERS
========================= */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    overflow: hidden;
}

/* ORB 1 */
.bg-animation span:nth-child(1) {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #6c5ce7 0%, transparent 60%);
    top: -10%;
    left: -10%;
    animation: move1 18s infinite ease-in-out;
    filter: blur(60px);
}

/* ORB 2 */
.bg-animation span:nth-child(2) {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #00d2ff 0%, transparent 60%);
    bottom: -15%;
    right: -10%;
    animation: move2 22s infinite ease-in-out;
    filter: blur(70px);
}

/* ORB 3 */
.bg-animation span:nth-child(3) {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #ff4d8d 0%, transparent 60%);
    top: 40%;
    left: 60%;
    animation: move3 25s infinite ease-in-out;
    filter: blur(80px);
}

/* =========================
   ANIMATIONS (REAL MOTION)
========================= */
@keyframes move1 {
    0%   { transform: translate(0px, 0px) scale(1); }
    25%  { transform: translate(120px, 80px) scale(1.1); }
    50%  { transform: translate(60px, 200px) scale(1.2); }
    75%  { transform: translate(-80px, 120px) scale(1.05); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes move2 {
    0%   { transform: translate(0px, 0px) scale(1); }
    25%  { transform: translate(-140px, -60px) scale(1.2); }
    50%  { transform: translate(-80px, -180px) scale(1.1); }
    75%  { transform: translate(60px, -100px) scale(1.05); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes move3 {
    0%   { transform: translate(0px, 0px) scale(1); }
    25%  { transform: translate(100px, -120px) scale(1.15); }
    50%  { transform: translate(-100px, -80px) scale(1.25); }
    75%  { transform: translate(-60px, 140px) scale(1.1); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* =========================
   NOISE OVERLAY (PRO LOOK)
========================= */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.05;

    background-image: url("https://www.transparenttextures.com/patterns/noise.png");
}

/* =========================
   OPTIONAL LIGHT MODE
========================= */
body.light {
    background: #f5f7fa;
}

body.light .bg-animation span:nth-child(1) {
    background: radial-gradient(circle, #6c5ce7 0%, transparent 60%);
}

body.light .bg-animation span:nth-child(2) {
    background: radial-gradient(circle, #00d2ff 0%, transparent 60%);
}

body.light .bg-animation span:nth-child(3) {
    background: radial-gradient(circle, #ff4d8d 0%, transparent 60%);
}