/* =========================================
   BUILD BRAND COMPONENTS
   Reusable UI Systems
========================================= */


/* =========================================
 Start GRID BACKGROUND SYSTEM
========================================= */

/* Wrapper */
.bb-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Inner Grid */
.bb-grid-inner {
    position: relative;
    width: min(1400px, 90vw);
    height: min(1400px, 90vw);

    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:
        40px 40px,
        40px 40px,
        160px 160px,
        160px 160px;

    animation: bb-grid-rotate 180s linear infinite;
}

/* Extra grid layer for depth */
.bb-grid-inner::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}


/* =========================================
   GRID POSITION VARIANTS
========================================= */

/* Center (default look) */
.bb-grid--center .bb-grid-inner {
    transform: translate(0, 0);
}

/* Left offset (hero style) */
.bb-grid--left .bb-grid-inner {
    transform: translate(-25%, 0);
}

/* Right offset */
.bb-grid--right .bb-grid-inner {
    transform: translate(75%, 0);
}


/* =========================================
   GRID INTENSITY VARIANTS
========================================= */

/* Soft */
.bb-grid--soft .bb-grid-inner {
    opacity: 0.3;
}

/* Normal */
.bb-grid--normal .bb-grid-inner {
    opacity: 0.6;
}

/* Strong */
.bb-grid--strong .bb-grid-inner {
    opacity: 1;
}


/* =========================================
   OPTIONAL: FADE MASK (Premium Touch)
========================================= */

.bb-grid-inner {
    mask-image: radial-gradient(circle, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
}


/* =========================================
   GRID ANIMATION
========================================= */

@keyframes bb-grid-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
 End GRID BACKGROUND SYSTEM
========================================= */