.about-main .image-container {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    overflow: visible;

}

/*
   XRAY FILM
*/

.about-main .xray-film {

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 220px;
    height: 220px;

    padding: 16px;

    background: #021426;

    border: 4px solid #0167E3;

    border-radius: 4px;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;

    box-shadow:
        0 0 10px rgba(1,103,227,.45),
        inset 0 0 25px rgba(0,0,0,.7);

}



.about-main .xray-film.show {

    opacity: 1;
    visibility: visible;

}



.about-main #hover-img {

    width: 180px;
    height: auto;

    display: block;

    image-rendering: pixelated;

    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(98%)
        saturate(3500%)
        hue-rotate(35deg)
        brightness(104%)
        contrast(104%);

    z-index: 3;

}



.about-main .film-plus {

    position: absolute;

    top: 10px;
    left: 12px;

    color: #0167E3;

    font-size: 22px;

    font-family: monospace;

    font-weight: bold;

    text-shadow: 0 0 8px #0167E3;

    z-index: 5;

}

/* ===========================
   GLOW
=========================== */

.about-main .xray-film::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(

            circle,

            rgba(138,251,4,.12) 0%,

            transparent 70%

        );

    z-index: 1;

    pointer-events: none;

}

/* ===========================
   SCAN LINES
=========================== */

.about-main .xray-film::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(

            to bottom,

            rgba(255,255,255,.05) 0px,

            rgba(255,255,255,.05) 1px,

            transparent 1px,

            transparent 4px

        );

    opacity: .35;

    pointer-events: none;

    z-index: 4;

}


.about-main .xray-film.fan-out {

    animation: fanOut .45s cubic-bezier(.16,1,.3,1);

}

.about-main .xray-film.slide-left {

    animation: slideLeft .35s ease-out;

}

.about-main .xray-film.slide-right {

    animation: slideRight .35s ease-out;

}


@keyframes fanOut {

    0% {

        opacity: 0;

        transform:
            translateY(-25px)
            rotate(-22deg)
            scale(.75);

    }

    60% {

        transform:
            translateY(6px)
            rotate(4deg)
            scale(1.05);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            rotate(-6deg)
            scale(1);

    }

}

@keyframes slideLeft {

    0% {

        opacity: 0;

        transform:
            translateX(-140px)
            rotate(-18deg)
            scale(.85);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotate(-5deg)
            scale(1);

    }

}

@keyframes slideRight {

    0% {

        opacity: 0;

        transform:
            translateX(140px)
            rotate(18deg)
            scale(.85);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            rotate(5deg)
            scale(1);

    }

}