<div class="arcade-4">4. Hover me </div>

@property --sy1{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --sy2{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --sy3{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --sx1{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --sx2{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --fx1{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --fx2{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --fx3{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
 @property --so1{
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}
@property --so2{
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}
@property --so3{
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}


div.arcade-4 {
    --w:11ch;
    font-family: monospace;
    overflow: hidden;
    letter-spacing: var(--w);
    width: var(--w);
    line-height: 1.2em;
    white-space: nowrap;
    color:hsl(0deg,0%,calc(var(--so3)*100%));
    text-shadow: 
    calc(-1*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so3)*100%)),
    calc(-2*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so3)*100%)),

    calc(-3*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so1)*100%)), 
    calc(-4*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so1)*100%)), 
    calc(-5*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so1)*100%)), 
    calc(-6*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so1)*100%)),
    calc(-7*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so1)*100%)),

    calc(-8*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so2)*100%)),
    calc(-9*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so2)*100%)),
    calc(-10*var(--w)) 0 0 hsl(0deg,0%,calc(var(--so2)*100%));
   padding:0 8px 60px;
   --sy1:-20px;
   --sy2:0px;
   --sx1:0px;
   --sx2:0px;
   --fx1:-8px;
   --fx2:-8px;
   --fx3:-8px;
   --so1:1;
   --so2:1;
   --so3:1;
   background: 
     linear-gradient(rgba(0,0,0,var(--so3)) 0 0) top left /3ch 1.2em,
     linear-gradient(rgba(0,0,0,var(--so2)) 0 0) top right/3ch 1.2em,
     linear-gradient(rgba(0,0,0,var(--so1)) 0 0) top      /calc(100% - 6ch + 1px) 1.2em,


     linear-gradient(90deg,#000 4px,#0000 0 calc(100% - 4px),#000 0) bottom calc(var(--sy1) + var(--sy2)) left calc(50% + var(--sx1) + var(--sx2))/22px 20px,
     linear-gradient(#000 0 0)                                       bottom calc(3px + var(--sy1) + var(--sy2)) left calc(50% + var(--sx1) + var(--sx2))/22px 8px,
     linear-gradient(#000 0 0)                                       bottom calc(var(--sy1) + var(--sy2)) left calc(50% + var(--sx1) + var(--sx2))/8px  16px,

     /* first beam */
     linear-gradient(90deg,rgba(255,0,0,var(--so1))  4px,#0000 0 calc(100% - 4px),rgba(255,0,0,var(--so1))  0) bottom var(--fx1) left  50%/22px 7px,
     /* second beam */
     linear-gradient(90deg,rgba(255,0,0,var(--so2))  4px,#0000 0 calc(100% - 4px),rgba(255,0,0,var(--so2))  0) bottom var(--fx2) right 1ch/22px 7px,
     /* third beam */
     linear-gradient(90deg,rgba(255,0,0,var(--so3))  4px,#0000 0 calc(100% - 4px),rgba(255,0,0,var(--so3))  0) bottom var(--fx3) left  1ch/22px 7px;
   background-repeat: no-repeat;
 }
 div.arcade-4:hover {
   --fx1:60px;
   --fx2:60px;
   --fx3:60px;
   --sy1:0px;
   --sy2:calc(60px + 1.2em);
   --sx1:calc( 4ch +  8px);
   --sx2:calc(-8ch - 16px);
   --so1:0;
   --so2:0;
   --so3:0;
   transition: 
      --sy1 .2s,
      --fx1 .2s .2s,
      --so1 0s .4s,
      --sx1 .2s .4s,
      --fx2 .2s .6s,
      --so2 0s .8s,
      --sx2 .2s .8s,
      --fx3 .2s 1s,
      --so3 0s 1.2s,
      --sy2 .2s 1.4s; 
 }

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}