/**
 * Global Background Animation Stylesheet - SPCS Corporate Solutions
 */

.global-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    select-none: none;
    z-index: 0;
    background: transparent;
}

/* Layer 1: Blurred Morphing Mesh Shapes */
.global-bg-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    filter: blur(var(--bg-blur, 60px));
    opacity: var(--bg-overall-opacity, 1.0);
    will-change: transform;
}

.global-bg-shape {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply;
    will-change: transform;
    animation: bgDrift 20s infinite alternate ease-in-out;
}

/* Base shape size and positioning */
.global-bg-shape-1 {
    width: 50vw;
    height: 50vw;
    max-width: 650px;
    max-height: 650px;
    background-color: var(--bg-primary-color, #2563EB);
    opacity: var(--bg-mesh-opacity, 0.18);
    top: -15%;
    left: -15%;
    animation-duration: 35s;
}

.global-bg-shape-2 {
    width: 45vw;
    height: 45vw;
    max-width: 550px;
    max-height: 550px;
    background-color: var(--bg-secondary-color, #38BDF8);
    opacity: var(--bg-mesh-opacity, 0.18);
    bottom: -15%;
    right: -15%;
    animation-duration: 28s;
    animation-delay: -7s;
}

.global-bg-shape-3 {
    width: 35vw;
    height: 35vw;
    max-width: 450px;
    max-height: 450px;
    background-color: var(--bg-accent-color, #14B8A6);
    opacity: calc(var(--bg-mesh-opacity, 0.18) * 0.9);
    top: 40%;
    left: 30%;
    animation-duration: 32s;
    animation-delay: -14s;
}

/* Drift motion representing growth and organisation */
@keyframes bgDrift {
    0% {
        transform: translate(0px, 0px) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(80px, 60px) scale(1.15) rotate(120deg);
    }
    66% {
        transform: translate(-40px, 100px) scale(0.9) rotate(240deg);
    }
    100% {
        transform: translate(0px, 0px) scale(1) rotate(360deg);
    }
}

/* Reduced Motion Fallbacks */
@media (prefers-reduced-motion: reduce) {
    .global-bg-shape {
        animation: none !important;
        transform: none !important;
    }
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
    .global-bg-mesh {
        filter: blur(40px);
    }
    .global-bg-shape-1 {
        width: 70vw;
        height: 70vw;
        top: -10%;
        left: -10%;
    }
    .global-bg-shape-2 {
        width: 60vw;
        height: 60vw;
        bottom: -10%;
        right: -10%;
    }
    .global-bg-shape-3 {
        display: none; /* Hide smaller accents on mobile to save performance */
    }
}