@keyframes p-text-shadow {
  0% {
    text-shadow: .16vmin .08vmin 0 #000,
      .2vmin .1vmin 0 #000,
      .24vmin .12vmin 0 #000,
      .28vmin .14vmin 0 #000,
      .32vmin .16vmin 0 #000,
      .36vmin .18vmin 0 #000,
      .4vmin .2vmin 0 #000,
      .44vmin .24vmin 0 #000,
      .48vmin .24vmin 0 #000;
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  
  100% {
    text-shadow: -.16vmin .08vmin 0 #000,
      -.2vmin .1vmin 0 #000,
      -.24vmin .12vmin 0 #000,
      -.28vmin .14vmin 0 #000,
      -.32vmin .16vmin 0 #000,
      -.36vmin .18vmin 0 #000,
      -.4vmin .2vmin 0 #000,
      -.44vmin .24vmin 0 #000,
      -.48vmin .24vmin 0 #000;
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
}

@keyframes ls-text-shadow {
  0% {
    text-shadow: .08vmax .04vmax 0 #000,
      .1vmax .05vmax 0 #000,
      .12vmax .06vmax 0 #000,
      .14vmax .07vmax 0 #000,
      .16vmax .08vmax 0 #000,
      .18vmax .09vmax 0 #000,
      .2vmax .1vmax 0 #000,
      .22vmax .11vmax 0 #000,
      .24vmax .12vmax 0 #000;
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  
  100% {
    text-shadow: -.08vmax .04vmax 0 #000,
      -.1vmax .05vmax 0 #000,
      -.12vmax .06vmax 0 #000,
      -.14vmax .07vmax 0 #000,
      -.16vmax .08vmax 0 #000,
      -.18vmax .09vmax 0 #000,
      -.2vmax .1vmax 0 #000,
      -.22vmax .11vmax 0 #000,
      -.24vmax .12vmax 0 #000;
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
}

body {
  overflow: hidden;
}

#tmp-msg {
  animation: p-text-shadow 5s linear infinite alternate;
  font: bold 8vmin arial;
  height: 8vmin;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: font .5s, height .5s, width .5s;
  width: 76vmin;
}

#tmp-msg::after {
  border-radius: 2vmin;
  box-shadow: 0 0 1vmin .6vmin #000, inset 0 0 1vmin .2vmin #000;
  content: "";
  height: 12vmin;
  left: 50%;
  position: absolute;
  top: 60%;
  transform: translate(-50%, -50%);
  transition: border-radius .5s, box-shadow .5s, height .5s, width .5s;
  width: 80vmin;
  z-index: -1;
}

@media all and (orientation:landscape) {
  #tmp-msg {
    animation: ls-text-shadow 5s linear infinite alternate;
    font: bold 4vmax arial;
    height: 4vmax;
    width: 38vmax;
  }
  
  #tmp-msg::after {
    border-radius: 1vmax;
    box-shadow: 0 0 .5vmax .3vmax #000, inset 0 0 .5vmax .1vmax #000;
    height: 6vmax;
    width: 40vmax;
  }
}