/* =========================================================
   FLOATING CERTIFICATION BADGE STACK
   ========================================================= */

.badge-stack {
    position: fixed;
    right: 24px;
    bottom: 129px;
    width: 70px;
    height: 70px;
    z-index: 9998;
    pointer-events: none;
    overflow: visible;
}

.badge-items {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 70px;
    pointer-events: none;
    overflow: visible;
}


/* =========================================================
   BADGE ITEM
   ========================================================= */

.badge-item {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 70px;
    height: 70px;

    pointer-events: auto;
    opacity: 0;

    transform: translate(0, 0);

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1),
        opacity .20s ease;

    z-index: 1;
}


/* =========================================================
   BADGE IMAGE
   ========================================================= */

.badge-icon {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 70px;
    height: 70px;

    max-width: 70px;
    max-height: 70px;

    object-fit: contain;

    cursor: pointer;

    transform-origin: bottom right;

    filter:
        drop-shadow(0 6px 10px rgba(0,0,0,.25));

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .5s ease,
        opacity .5s ease;
}


/* =========================================================
   COLLAPSED STATE
   ========================================================= */

.badge-stack:not(.expanded)
.badge-item {
    opacity: 1;

    transform:
        translate(
            calc(var(--collapsed-position) * -5px),
            calc(var(--collapsed-position) * -5px)
        );

    z-index:
        calc(100 - var(--collapsed-position));
}


/* Front badge */

.badge-stack:not(.expanded)
.badge-item:first-child {
    z-index: 100;
}


/* Badges behind */

.badge-stack:not(.expanded)
.badge-item:not(:first-child)
.badge-icon {
    opacity: .88;
}


/*
 * IMPORTANT:
 * No hover enlargement in collapsed state.
 */


/* =========================================================
   EXPANDED STATE
   ========================================================= */

.badge-stack.expanded {
    height: var(--expanded-height, 430px);
}


/* =========================================================
   FIVE VISIBLE BADGES
   ========================================================= */

.badge-stack.expanded
.badge-item.visible {
    opacity: 1;

    transform:
        translateY(
            calc(
                (var(--position) * -80px)
                - var(--hover-shift, 0px)
            )
        );

    z-index: 20;
}


/* =========================================================
   REMAINING BADGES
   ONE STACKED POSITION
   ========================================================= */

.badge-stack.expanded
.badge-item.stack-top,
.badge-stack.expanded
.badge-item.stack-bottom {
    opacity: 1 !important;

    transform:
        translate(
            calc(var(--stack-offset) * -5px),
            calc(var(--stack-offset) * -5px)
        ) !important;

    z-index:
        calc(10 - var(--stack-offset));
}


/* Stacked badges appearance */

.badge-stack.expanded
.badge-item.stack-top .badge-icon,
.badge-stack.expanded
.badge-item.stack-bottom .badge-icon {
    opacity: .82;
}


/* =========================================================
   HOVER ENLARGEMENT
   ONLY WHEN EXPANDED
   ========================================================= */

.badge-stack.expanded
.badge-item.visible:hover {
    z-index: 1000;
}

.badge-stack.expanded
.badge-item.visible:hover
.badge-icon {
    transform: scale(1.8);

    opacity: 1;

    filter:
        drop-shadow(0 14px 25px rgba(0,0,0,.45));
}


/* Hover the remaining stacked badges */

.badge-stack.expanded
.badge-item.stack-top:hover,
.badge-stack.expanded
.badge-item.stack-bottom:hover {
    z-index: 1000 !important;
}

.badge-stack.expanded
.badge-item.stack-top:hover
.badge-icon,
.badge-stack.expanded
.badge-item.stack-bottom:hover
.badge-icon {
    transform: scale(1.25);

    opacity: 1;

    filter:
        drop-shadow(0 12px 22px rgba(0,0,0,.40));
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .badge-stack {
        right: 18px;
        bottom: 129px;
    }

    .badge-stack.expanded {
        height: var(--expanded-height, 430px);
    }

    .badge-item,
    .badge-icon {
        width: 70px;
        height: 70px;

        max-width: 70px;
        max-height: 70px;
    }

    .badge-stack:not(.expanded)
    .badge-item {
        transform:
            translate(
                calc(var(--collapsed-position) * -4px),
                calc(var(--collapsed-position) * -4px)
            );
    }

    .badge-stack.expanded
    .badge-item.stack-top,
    .badge-stack.expanded
    .badge-item.stack-bottom {
        transform:
            translate(
                calc(var(--stack-offset) * -4px),
                calc(var(--stack-offset) * -4px)
            ) !important;
    }

    /* Hover spacing is enabled on desktop only. */
    .badge-stack.expanded
    .badge-item.visible {
        transform:
            translateY(
                calc(var(--position) * -80px)
            );
    }

    .badge-stack.expanded
    .badge-item.visible:hover
    .badge-icon {
        transform: scale(1.30);
    }
}