.kowPeeker
{
    position: fixed;
    top: var(--kow-peeker-y, 52vh);
    width: clamp(100px, 11vw, 180px);
    pointer-events: none;
    user-select: none;
    opacity: 0;
    z-index: 500;
    will-change: transform, opacity;
}

.kowPeeker img
{
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}

.kowPeeker--left
{
    left: 0;
    transform: translate(-105%, -50%);
}

.kowPeeker--right
{
    right: 0;
    transform: translate(105%, -50%);
}

.kowPeeker--right img
{
    transform: scaleX(-1);
}

.kowPeeker--left.is-peeking
{
    animation: kowPeekLeft 1200ms cubic-bezier(.2, .8, .25, 1) both;
}

.kowPeeker--right.is-peeking
{
    animation: kowPeekRight 1200ms cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes kowPeekLeft
{
    0%   { transform: translate(-105%, -50%); opacity: 0; }
    16%  { opacity: 1; }
    27%  { transform: translate(-32%, -50%); opacity: 1; }
    70%  { transform: translate(-32%, -50%); opacity: 1; }
    100% { transform: translate(-105%, -50%); opacity: 0; }
}

@keyframes kowPeekRight
{
    0%   { transform: translate(105%, -50%); opacity: 0; }
    16%  { opacity: 1; }
    27%  { transform: translate(32%, -50%); opacity: 1; }
    70%  { transform: translate(32%, -50%); opacity: 1; }
    100% { transform: translate(105%, -50%); opacity: 0; }
}

@media (max-width: 650px)
{
    .kowPeeker
    {
        width: 88px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .kowPeeker
    {
        display: none !important;
    }
}