/* ============================================
   Background Styles
   ============================================ */

/* Body Backgrounds */
body.bg-blue {
    background: rgb(105, 212, 255);
    background: linear-gradient(160deg, rgba(105, 212, 255, 1) 0%, rgb(0, 82, 204) 100%);
}

body.bg-green {
    background: rgb(105, 212, 255);
    background: linear-gradient(160deg, rgba(105, 212, 255, 1) 0%, rgb(5, 185, 14) 100%);
    min-height: 100vh;
}

body.bg-animate {
    animation: bgAnimation 15s infinite ease-in-out alternate;
}

@keyframes bgAnimation {
    0% {
        background-size: 100%;
    }
    100% {
        background-size: 600%;
    }
}

/* Frutiger Aero Content Container */
.f-content {
    position: relative;
    background: linear-gradient(180deg,
        var(--color-bg-light) 3%,
        var(--color-bg-mid) 5%,
        var(--color-bg-dark) 100%);
    box-shadow: inset 0px -10px 30px 15px rgba(255, 255, 255, 0.5);
}

.f-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
}

/* Frutiger Aero Background Variants */
.f-black-bg {
    border: 1px solid rgba(80, 80, 80, 0.6);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0px 2px 1px rgba(255, 255, 255, 0.2),
        inset 0px -2px 1px rgba(0, 0, 0, 0.5);
    animation: bgAnimation 15s infinite ease-in-out alternate;
    background: linear-gradient(180deg,
        rgba(120, 120, 120, .65) 0%,
        rgba(70, 70, 70, .65) 25%,
        rgba(30, 30, 30, .65) 60%,
        rgba(0, 0, 0, .65) 100%);
}

.f-black-bg-metal {
    border: 1px solid rgba(80, 80, 80, 0.6);
    box-shadow:
        var(--shadow-black),
        var(--shadow-inset-top),
        var(--shadow-inset-bottom);
    animation: bgAnimation 15s infinite ease-in-out alternate;
    background: linear-gradient(180deg,
        var(--color-gray-light) 0%,
        var(--color-gray-mid) 24%,
        var(--color-gray-mid) 45%,
        var(--color-black) 76%);
}

.f-orange-bg {
    border: 1px solid rgba(255, 124, 0, 0.7);
    box-shadow: 0 4px 20px rgba(255, 124, 0, 0.2);
    animation: bgAnimation 15s infinite ease-in-out alternate;
    background: linear-gradient(180deg,
        var(--color-orange-light) 0%,
        var(--color-orange-mid) 24%,
        var(--color-orange-dark) 76%);
}

.f-img-small {
    padding: 12px;
    border-radius: var(--radius-image);
    background: rgb(206, 235, 255);
    background: linear-gradient(0deg,
        rgba(206, 235, 255, 0.8) 3%,
        rgba(233, 246, 255, 0.8) 5%,
        rgba(188, 227, 255, 0.8) 100%);
    box-shadow: var(--shadow-white);
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}