/* =========================================
   Eclipse Reveal
========================================= */

.eclipse-wrap {
    --eclipse-size: 220px;
    --eclipse-mobile-size: 170px;
    --eclipse-delay: 500ms;

    display: flex;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    margin: 40px 0;
    overflow: visible;
}

/* Grid stage */
.eclipse-inner,
.eclipse-inner > .e-con-inner {
    display: grid !important;

    width: var(--eclipse-size);
    max-width: 100%;

    overflow: visible !important;
}

/* Image layers */
.eclipse-inner .eclipse-moon,
.eclipse-inner .eclipse-portrait {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;

    width: 100% !important;
    margin: 0 !important;

    transform: translate(0, 0);

    transition:
        transform 1800ms cubic-bezier(.19, 1, .22, 1);

    transition-delay: var(--eclipse-delay, 500ms);
}

/* Layer order */
.eclipse-inner .eclipse-moon {
    z-index: 1;
}

.eclipse-inner .eclipse-portrait {
    z-index: 2;
}

/* Images */
.eclipse-inner .eclipse-moon img,
.eclipse-inner .eclipse-portrait img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
}

/* Animation */
.eclipse-inner.in-view .eclipse-moon {
    transform:
        translate(
            var(--eclipse-moon-x),
            var(--eclipse-moon-y)
        );
}

.eclipse-inner.in-view .eclipse-portrait {
    transform:
        translate(
            var(--eclipse-portrait-x),
            var(--eclipse-portrait-y)
        );
}

/* Hover restores original aligned eclipse */
.eclipse-inner:hover .eclipse-moon,
.eclipse-inner:hover .eclipse-portrait {
    transform: translate(0, 0) !important;
}

/* Mobile */
@media (max-width: 767px) {
    .eclipse-inner,
    .eclipse-inner > .e-con-inner {
        width: var(--eclipse-mobile-size);
    }
}