/* ========================================
   Global Background - Unified Design
   Apple/iOS Inspired Aesthetic
   ========================================

   统一的全局背景，包含浮动色块动画
   所有section共享这个背景，营造连续流畅的视觉体验

   ======================================== */

/* Global Background Container */
body {
    position: relative;
    background: linear-gradient(135deg,
    #fafafa 0%,
    #ffffff 25%,
    #f8f9fa 50%,
    #ffffff 75%,
    #f5f5f5 100%) fixed;
    min-height: 100vh;
}

/* Background Blobs Container */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Individual Floating Blobs */
.global-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    mix-blend-mode: multiply;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    pointer-events: none;
}

/* Blob 1 - Soft Blue (Top Left) */
.global-blob-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #a8d8ea 0%, #d4a5f9 100%);
    top: -10%;
    left: -8%;
    animation: global-float-1 20s;
}

/* Blob 2 - Soft Purple (Top Right) */
.global-blob-2 {
    width: 550px;
    height: 550px;
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    top: 5%;
    right: -10%;
    animation: global-float-2 25s;
}

/* Blob 3 - Soft Pink (Middle Left) */
.global-blob-3 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    top: 35%;
    left: 10%;
    animation: global-float-3 22s;
}

/* Blob 4 - Soft Orange (Middle Right) */
.global-blob-4 {
    width: 480px;
    height: 480px;
    background: linear-gradient(135deg, #ffd89b 0%, #ffb6c1 100%);
    top: 40%;
    right: 5%;
    animation: global-float-4 18s;
}

/* Blob 5 - Soft Mint (Bottom Left) */
.global-blob-5 {
    width: 520px;
    height: 520px;
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    bottom: -5%;
    left: 15%;
    animation: global-float-5 24s;
}

/* Blob 6 - Soft Teal (Bottom Right) */
.global-blob-6 {
    width: 450px;
    height: 450px;
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    bottom: 10%;
    right: 20%;
    animation: global-float-6 19s;
}

/* Blob 7 - Soft Yellow (Middle) */
.global-blob-7 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    top: 55%;
    left: 45%;
    animation: global-float-7 21s;
}

/* Blob 8 - Soft Lavender (Top Middle) */
.global-blob-8 {
    width: 420px;
    height: 420px;
    background: linear-gradient(135deg, #e0c3fc 0%, #a8d8ea 100%);
    top: 20%;
    left: 35%;
    animation: global-float-8 23s;
}

/* Keyframe Animations */
@keyframes global-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 40px) scale(0.95); }
}

@keyframes global-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-50px, 40px) scale(0.9); }
    66% { transform: translate(30px, -35px) scale(1.15); }
}

@keyframes global-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(35px, 45px) scale(1.05); }
    66% { transform: translate(-40px, -30px) scale(0.92); }
}

@keyframes global-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-35px, -40px) scale(1.08); }
    66% { transform: translate(45px, 35px) scale(0.96); }
}

@keyframes global-float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -45px) scale(1.12); }
    66% { transform: translate(-35px, 30px) scale(0.9); }
}

@keyframes global-float-6 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 35px) scale(0.94); }
    66% { transform: translate(35px, -40px) scale(1.1); }
}

@keyframes global-float-7 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, 40px) scale(1.06); }
    66% { transform: translate(-30px, -25px) scale(0.97); }
}

@keyframes global-float-8 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, -35px) scale(1.04); }
    66% { transform: translate(40px, 30px) scale(0.93); }
}

/* Section Backgrounds - Remove solid backgrounds, keep transparent */
.about-section,
.projects-section,
.blogs-section {
    background: transparent !important;
    position: relative;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .global-blob-1 { width: 500px; height: 500px; }
    .global-blob-2 { width: 450px; height: 450px; }
    .global-blob-3 { width: 420px; height: 420px; }
    .global-blob-4 { width: 400px; height: 400px; }
    .global-blob-5 { width: 440px; height: 440px; }
    .global-blob-6 { width: 380px; height: 380px; }
    .global-blob-7 { width: 340px; height: 340px; }
    .global-blob-8 { width: 360px; height: 360px; }
}

@media (max-width: 992px) {
    .global-blob-1 { width: 400px; height: 400px; }
    .global-blob-2 { width: 380px; height: 380px; }
    .global-blob-3 { width: 350px; height: 350px; }
    .global-blob-4 { width: 330px; height: 330px; }
    .global-blob-5 { width: 360px; height: 360px; }
    .global-blob-6 { width: 320px; height: 320px; }
    .global-blob-7 { width: 300px; height: 300px; }
    .global-blob-8 { width: 310px; height: 310px; }
}

@media (max-width: 576px) {
    .global-blob { filter: blur(60px); opacity: 0.3; }
    .global-blob-1 { width: 280px; height: 280px; }
    .global-blob-2 { width: 260px; height: 260px; }
    .global-blob-3 { width: 250px; height: 250px; }
    .global-blob-4 { width: 240px; height: 240px; }
    .global-blob-5 { width: 270px; height: 270px; }
    .global-blob-6 { width: 230px; height: 230px; }
    .global-blob-7 { width: 220px; height: 220px; }
    .global-blob-8 { width: 240px; height: 240px; }
}