/* ====================================================================
   LiquidBackground.css — Hyper-Visible Crystal & Glass Atmosphere
   "Palpable Luxury" Edition
   ==================================================================== */

.dynamic-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #000;
    overflow: hidden;
    perspective: 1500px;
}

/* Base Image - Brighter and more present */
.bg-base-image {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background: url('../../images/Partenaires_bg.webp') no-repeat center center;
    background-size: cover;
    opacity: 1; /* Full opacity for better quality */
    filter: contrast(1.05) brightness(1); /* Sharp and clear */
    image-rendering: -webkit-optimize-contrast;
    animation: slowOrbit 60s linear infinite;
}

/* Sharp Glass Refractions - High Contrast */
.bg-glass-refraction {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.2) 48%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.2) 52%,
        rgba(255, 255, 255, 0.0) 70%,
        transparent 80%
    );
    background-size: 50% 100%;
    mix-blend-mode: overlay;
    opacity: 0.8;
    animation: glassSweep 12s ease-in-out infinite;
}

/* Floating Crystal Plates (Large, palpable glass pieces) */
.crystal-plate {
    position: absolute;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.plate-1 { width: 400px; height: 600px; top: 10%; left: -5%; transform: rotate(-15deg); animation: plateFloat 20s infinite alternate; }
.plate-2 { width: 500px; height: 300px; bottom: 5%; right: -10%; transform: rotate(10deg); animation: plateFloat 25s infinite alternate-reverse; }

/* Small Iridescent Shards (Palpable particles) */
.bg-crystal-shards {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    mix-blend-mode: color-dodge;
    background-image: 
        linear-gradient(45deg, rgba(201, 168, 76, 0.1) 25%, transparent 25.5%, transparent 75%, rgba(138, 43, 226, 0.1) 75%),
        linear-gradient(-45deg, rgba(0, 242, 255, 0.1) 25%, transparent 25.5%, transparent 75%, rgba(255, 0, 127, 0.1) 75%);
    background-size: 150px 150px;
    animation: shardFlow 40s linear infinite;
}

/* Moving Iridescent Blobs (The "Liquid" part) */
.bg-blobs-container {
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    filter: blur(120px);
}

.liquid-blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
    animation: liquidDrift 30s infinite alternate ease-in-out;
}

.blob-purple { width: 80vw; height: 80vh; background: radial-gradient(circle, #8A2BE2 0%, transparent 70%); top: -10%; left: -10%; }
.blob-cyan { width: 70vw; height: 70vh; background: radial-gradient(circle, #00f2ff 0%, transparent 70%); bottom: -10%; right: -10%; animation-delay: -5s; }
.blob-gold { width: 50vw; height: 50vh; background: radial-gradient(circle, #c9a84c 0%, transparent 70%); top: 30%; left: 30%; animation-delay: -10s; }

/* Mist for depth */
.bg-mist {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}

/* Keyframes */
@keyframes slowOrbit {
    0% { transform: scale(1.1) rotate(0deg); }
    100% { transform: scale(1.3) rotate(10deg); }
}

@keyframes glassSweep {
    0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translateX(100%) skewX(-20deg); opacity: 0; }
}

@keyframes plateFloat {
    0% { transform: translate(0, 0) rotate(-15deg); }
    100% { transform: translate(30px, 50px) rotate(-10deg); }
}

@keyframes shardFlow {
    0% { background-position: 0 0; }
    100% { background-position: 1000px 1000px; }
}

@keyframes liquidDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(15%, 10%) scale(1.2); }
}