/**
 * Magnetic Images - CSS Styles
 * 
 * Deze CSS is specifiek voor het magnetic images effect.
 * Pas de positionering en maten aan naar wens in Bricks Builder.
 */

/* Container voor de images */
.magnetic-container {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Effect instellingen */
    --max-speed: 8;         /* Max muissnelheid (hoger = sneller reageren) */
    --push-force: 15;       /* Hoe ver de images weggeduwd worden */
    --rotation-force: 0.8;  /* Hoeveel extra rotatie bij beweging */
    --scale-force: 0.01;    /* Hoeveel de images vergroten */
    --radius: 400;          /* Invloedsradius in pixels */
    --duration: 0.6;        /* Animatie duur in seconden */
}

/* Basis styling voor magnetic images */
.magnetic-image {
    position: absolute;
    /* Responsieve grootte: min 120px, preferred 18vw, max 300px */
    width: clamp(120px, 18vw, 250px) !important;
    height: clamp(120px, 18vw, 250px) !important;
    cursor: pointer;
    will-change: transform;
}

.magnetic-image img,
.magnetic-image .brxe-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    border-radius: 11%;
    /*box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);*/
	box-shadow:0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05),0px 151px 60px rgba(0,0,0,.01);
    pointer-events: none;
}

/**
 * Positionering en rotatie per image
 * 
 * Pas deze waarden aan of override ze in Bricks met custom CSS per element.
 * Je kunt ook inline styles gebruiken in Bricks:
 * --rotation: 5deg;
 * --offset-y: -20px;
 */

/* Image 1 */
.magnetic-image:nth-child(1) {
    left: calc(50% - clamp(200px, 30vw, 500px));
    z-index: 1;
    --rotation: 4deg;
    --offset-y: 0px;
    --speed: 0.3;
}

/* Image 2 */
.magnetic-image:nth-child(2) {
    left: calc(50% - clamp(120px, 18vw, 300px));
    z-index: 2;
    --rotation: -3deg;
    --offset-y: -30px;
    --speed: 0.5;
}

/* Image 3 */
.magnetic-image:nth-child(3) {
    left: calc(50% - clamp(60px, 9vw, 150px));
    z-index: 3;
    --rotation: 5deg;
    --offset-y: 0px;
    --speed: 0.4;
}

/* Image 4 */
.magnetic-image:nth-child(4) {
    left: calc(50% + clamp(10px, 1.5vw, 20px));
    z-index: 4;
    --rotation: -3deg;
    --offset-y: -30px;
    --speed: 0.6;
}

/* Image 5 */
.magnetic-image:nth-child(5) {
    left: calc(50% + clamp(80px, 12vw, 200px));
    z-index: 5;
    --rotation: 4deg;
    --offset-y: -20px;
    --speed: 0.35;
}

/* =====================================================
   RESPONSIVE - extra aanpassingen voor kleine schermen
   ===================================================== */

@media (max-width: 768px) {
    .magnetic-container {
        height: 300px;
    }
}