.ck-right-engine {
    --ck-right-lift: 10px;
    --ck-right-glow-alpha: 0.55;
    --ck-right-tilt: 8deg;
    --ck-right-border-alpha: 0.45;
    --ck-right-icon-boost: 18%;
    --ck-right-duration: 320ms;
}

.ck-right-engine .btn {
    position: relative;
    overflow: visible;
}

.ck-right-engine .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,var(--ck-right-border-alpha));
    opacity: 0;
    transition: opacity var(--ck-right-duration) ease, box-shadow var(--ck-right-duration) ease, transform var(--ck-right-duration) ease;
}

.ck-right-engine .btn:hover {
    transform: translateY(calc(var(--ck-right-lift) * -1)) rotateZ(calc(var(--ck-right-tilt) * 0.25));
    box-shadow: 0 14px 28px rgba(0,0,0,.26), 0 0 24px rgba(102,126,234,var(--ck-right-glow-alpha));
    transition: transform var(--ck-right-duration) ease, box-shadow var(--ck-right-duration) ease;
}

.ck-right-engine .btn:hover::after {
    opacity: 1;
    box-shadow: 0 0 18px rgba(102,126,234,var(--ck-right-glow-alpha));
    transform: scale(1.015);
}

.ck-right-engine .btn .btn-content > i,
.ck-right-engine .btn .btn-content > .nav-action-icon-vfx-wrap > i {
    transition: transform var(--ck-right-duration) ease, filter var(--ck-right-duration) ease;
}

.ck-right-engine .btn:hover .btn-content > i,
.ck-right-engine .btn:hover .btn-content > .nav-action-icon-vfx-wrap > i {
    transform: rotate(var(--ck-right-tilt)) scale(calc(1 + (var(--ck-right-icon-boost) / 100)));
    filter: drop-shadow(0 0 10px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(102,126,234,var(--ck-right-glow-alpha)));
}

.ck-right-engine .btn-nav-notifications:hover .btn-content > i,
.ck-right-engine .btn-nav-notifications:hover .btn-content > .nav-action-icon-vfx-wrap > i {
    transform: rotate(calc(var(--ck-right-tilt) * -1)) scale(calc(1 + (var(--ck-right-icon-boost) / 100)));
}