/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

.so-iris-cluster {
    position: relative;
    width: 260px;
    max-width: 60vw;
    aspect-ratio: 1 / 1;
    margin: 0 auto 2rem;
}

/* Muiseffect: variabelen op sectie .iris-effect */
.iris-effect {
    --mouse-x: 0;
    --mouse-y: 0;
}

.iris-effect .so-iris {
    transition: transform 0.25s ease-out;
}

.so-iris {
    position: absolute;
    width: 90px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease;
}

.so-iris__inner {
    position: absolute;
    inset: 0;
}

.so-iris img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.so-iris-img--hover {
    opacity: 0;
}

.so-iris:hover .so-iris-img--default {
    opacity: 0;
}

.so-iris:hover .so-iris-img--hover {
    opacity: 1;
}

/* Middelste oog */
.so-iris--center {
    width: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px));
    z-index: 2;
}

.so-iris--center:hover {
    transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08);
}

/* 7 ogen rondom – posities grofweg zoals je voorbeeld */
.so-iris--pos-1 { top: 0; left: 50%; transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-1:hover { transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-2 { top: 18%; right: 13%; transform: translate(50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-2:hover { transform: translate(50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-3 { top: 60%; right: 0; transform: translate(50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-3:hover { transform: translate(50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-4 { bottom: 0; right: 28%; transform: translate(50%, 50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-4:hover { transform: translate(50%, 50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-5 { bottom: 7%; left: 28%; transform: translate(-50%, 50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-5:hover { transform: translate(-50%, 50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-6 { top: 60%; left: 0; transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-6:hover { transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }
.so-iris--pos-7 { top: 18%; left: 5%; transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)); }
.so-iris--pos-7:hover { transform: translate(-50%, -50%) translate(calc(var(--mouse-x, 0) * 4px), calc(var(--mouse-y, 0) * 4px)) scale(1.08); }