/* Background Elements for British Motorcycles */

/* Base styling for the background container */
.bg-elements-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Individual elements styling */
.bg-element {
    position: absolute;
    opacity: 0.03;
    filter: blur(0.5px);
    color: var(--primary-color, var(--primary-color));
}

/* Motorcycle silhouette elements */
.bg-element-motorcycle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M280 32c-13.3 0-24 10.7-24 24s10.7 24 24 24h57.7l16.4 30.3L256 192l-45.3-45.3c-12-12-28.3-18.7-45.3-18.7H64c-17.7 0-32 14.3-32 32v32h96c88.4 0 160 71.6 160 160c0 11-1.1 21.7-3.2 32h70.4c-2.1-10.3-3.2-21-3.2-32c0-52.2 25-98.6 63.7-127.8l15.4 28.6C402.4 276.3 384 312 384 352c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-13.5 0-26.5 2.1-38.7 6L418.2 128H480c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H459.6c-7.5 0-14.7 2.6-20.5 7.4L391.7 78.9l-14-26c-1.4-2.6-3.9-4.3-6.8-4.7l-56-8c-5.5-.8-10.9 2.9-11.9 8.4s2.9 10.9 8.4 11.9l48.9 7L335.5 115 280 32zM432 512c-61.9 0-112-50.1-112-112s50.1-112 112-112s112 50.1 112 112s-50.1 112-112 112zM48 352c-8.8 0-16-7.2-16-16s7.2-16 16-16H208c8.8 0 16 7.2 16 16s-7.2 16-16 16H48zM240 512c-70.7 0-128-57.3-128-128s57.3-128 128-128s128 57.3 128 128s-57.3 128-128 128zm0-32c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96s43 96 96 96z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bg-element-helmet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M256 32c-17.7 0-32 14.3-32 32v2.3 99.6c0 5.6-4.5 10.1-10.1 10.1c-3.6 0-7-1.9-8.8-5.1L157.1 87C83.5 114.7 32 187.2 32 271.6V312c0 13.3-10.7 24-24 24s-8 24 8 24H64h64 64c17.7 0 32-14.3 32-32V296c0-13.3-10.7-24-24-24s-24 10.7-24 24v8H128V271.6c0-49.5 22.1-94.8 58.2-125.1l14.5 20.3c12 16.8 31.5 26.9 52.4 26.9c5.2 0 10.2-.6 15.1-1.7C288.5 263.9 368.7 320 461.8 320h10.2c16.9 0 30.7-13.4 31-30.3C505 148.5 392.6 32 256 32zM320 352c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V384c0-17.7-14.3-32-32-32H320zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bg-element-gear {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bg-element-wheel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192zm0 224a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bg-element-flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bg-element-union-jack {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23FFF' d='M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z'/%3E%3Cpath fill='%23C8102E' d='M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z'/%3E%3Cpath fill='%23FFF' d='M241 0v480h160V0H241zM0 160v160h640V160H0z'/%3E%3Cpath fill='%23C8102E' d='M0 193v96h640v-96H0zM273 0v480h96V0h-96z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.02;
}

/* Element positions */
.bg-element-1 {
    top: 10%;
    left: 5%;
    width: 150px;
    height: 150px;
    transform: rotate(15deg);
}

.bg-element-2 {
    top: 70%;
    left: 80%;
    width: 200px;
    height: 200px;
    transform: rotate(-10deg);
}

.bg-element-3 {
    top: 40%;
    left: 85%;
    width: 120px;
    height: 120px;
    transform: rotate(45deg);
}

.bg-element-4 {
    top: 80%;
    left: 15%;
    width: 180px;
    height: 180px;
    transform: rotate(-25deg);
}

.bg-element-5 {
    top: 20%;
    left: 60%;
    width: 140px;
    height: 140px;
    transform: rotate(30deg);
}

.bg-element-6 {
    top: 60%;
    left: 40%;
    width: 250px;
    height: 250px;
    transform: rotate(-5deg);
}

.bg-element-7 {
    top: 5%;
    left: 30%;
    width: 100px;
    height: 100px;
    transform: rotate(60deg);
}

.bg-element-8 {
    top: 30%;
    left: 10%;
    width: 160px;
    height: 160px;
    transform: rotate(-40deg);
}

/* Union Jack background */
.bg-element-flag-large {
    top: 50%;
    left: 50%;
    width: 600px;
    height: 450px;
    transform: translate(-50%, -50%);
}

/* Media queries for responsive behavior */
@media (max-width: 768px) {
    .bg-element {
        opacity: 0.02;
    }
    
    .bg-element-flag-large {
        width: 400px;
        height: 300px;
    }
}