/**
 *
 * Copyright (c) 2020 Alexander Bazhanov
 * https://github.com/bazhanius/
 *
 */

.transition-screen {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: transparent;
    width: calc(100% - 0.5px);
    height: calc(100% - 0.5px);
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.circle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: circle(0% at 50% 50%);
    background-color: var(--yellow-lite);
    opacity: .5;
    animation-delay: 0ms;
}

.circle__fly-in {
    animation: fly-in 500ms 1 forwards;
}

.circle__fly-out {
    animation: fly-out 500ms 1 forwards;
}


@keyframes fly-in {
    from {clip-path: circle(0% at var(--clickX, 50%) var(--clickY, 50%)); opacity: .5;}
    to {clip-path: circle(150% at var(--clickX, 50%) var(--clickY, 50%)); opacity: 1;}
}

@keyframes fly-out {
    from {clip-path: circle(80% at 50% 50%); opacity: 1;}
    to {clip-path: circle(0% at 50% 50%); opacity: .5;}
}