/* Eye animation and section slideshow. Ported unchanged from the live homepage, 5 November 2026. */
/* Kill Reframe's WebGL hover canvas if main.js mounted it */
.picture-box canvas,
#profile-image-video { display:none !important; }

/* Picture box + layers */
.picture-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #181818;
}

/* Layer base */
.picture-box .profile-frames,
.picture-box .slideshow-imgs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;           /* hidden by default */
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 2;
}

/* Visible layer */
.picture-box .profile-frames.visible,
.picture-box .slideshow-imgs.visible {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

/* Hero frames */
.picture-box .profile-frames .frame-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.picture-box .profile-frames .frame-img.active { display: block; }

/* Slideshow items: crossfade + gentle zoom */
.picture-box .slideshow-imgs { overflow: hidden; }
.picture-box .slideshow-imgs .picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    z-index: 1;
    transition:
        opacity 0.7s cubic-bezier(0.7,0,0.3,1),
        transform 5s cubic-bezier(0.77,0,0.175,1);
    will-change: opacity, transform;
}
.picture-box .slideshow-imgs .picture.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1.09);
}
.picture-box .slideshow-imgs .picture.prev {
    opacity: 0;
    z-index: 1;
    transform: scale(1.12);
}