/* Перелив экрана телефона. */
.screen-placeholder {
    background-image: linear-gradient(145deg,
    rgba(var(--rim-cyan), .28) 0%,
    rgba(var(--rim-cyan), .48) 28%,
    rgba(var(--rim-green), .74) 52%,
    rgba(var(--rim-cyan), .52) 76%,
    rgba(var(--rim-green), .34) 100%);
}

/* Две независимые полосы идут только справа налево с половинным сдвигом.
   В отличие от repeating-gradient у них нет стыка посреди экрана. */
.screen-placeholder::before,
.screen-placeholder::after {
    content: '';
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: 5%;
    width: 90%;
    background: linear-gradient(110deg,
    rgba(var(--rim-cyan), 0) 0%,
    rgba(var(--rim-cyan), .48) 26%,
    rgba(var(--rim-green), .74) 50%,
    rgba(var(--rim-cyan), .52) 74%,
    rgba(var(--rim-green), 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
    transform: translate3d(120%, 0, 0);
    animation: screenGlassDrift 1.267s linear infinite;
    animation-play-state: paused;
}

.screen-placeholder::after {
    animation-delay: -.6335s
}

.screen-placeholder.is-active::before,
.screen-placeholder.is-active::after {
    animation-play-state: running
}

@keyframes screenGlassDrift {
    to {
        transform: translate3d(-120%, 0, 0)
    }
}