:root {
  --sprite-hello-rotation: 26deg;
}

@keyframes spriteHello {
 0%  { -webkit-transform: translate(-100vmin, 100vmin) rotate(var(--sprite-hello-rotation)) }
 100%  { -webkit-transform: rotate(0deg) }
}
@keyframes spriteIdle {
 0%  { -webkit-transform: rotate(0deg) }
 50% { -webkit-transform: rotate(8deg) }
 100%  { -webkit-transform: translate(0, 0) }
}

@keyframes promptShow {
 0%  { -webkit-transform: translate(-15%, 25%) scale(0) }
 100%  { -webkit-transform: translate(0, 0) scale(1) }
}

.shard_sprite {
    background-color: violet;

    width: 8vmin;
    height: 8vmin;

    rotate: var(--sprite-hello-rotation);

    position: absolute;
    left: 40%;
    bottom: 35%;

    animation: 1s ease-out 0s 1 spriteHello, 
               1s ease-in-out 1s 4 spriteIdle, 
               1s ease-out 4s 1 spriteHello reverse forwards;
}

.shard_prompt {
    background-image:linear-gradient(to bottom right,  rgb(38, 32, 40),  rgb(57, 47, 60));
    
    color: rgb(240, 225, 245);
    width: 50%;
    height: 50%;
    
    position: absolute;
    left: 25%;
    top: 25%;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3vmin;
    box-sizing: border-box;
    padding: 2%;

    
    text-align: center;
    animation: 0.3s ease-out 1.25s 1 promptShow backwards;
}