/* EASTER GAME  */

:root { --egg-size: 32px; --egg-tilt: 34deg; }

#ts-game{ position:absolute; width:100px; height:40px; top:0; overflow:hidden; touch-action:none; z-index: 999999; }
#ts-game img.actor{ position:absolute; bottom:-14px; width:40px; height:40px; user-select:none; pointer-events:auto; }
#ts-game img#hero{ position:absolute; transform-origin: 50% 86%; bottom:-6px; width:28px; height:28px; }
#ts-game img#hero[src*="duck"] { bottom: 0px; transform: rotate(0) scale(0.6); }

#ts-game .sleep { transform: rotate(34deg); }
#ts-game .back { transform: scaleX(-0.6) scaleY(0.6) !important; }
#ts-game .next { transform: rotate(0deg); animation: pause 0.5s forwards; }
#ts-game .tosleep { animation: sleep 1s ease-out forwards; }
#ts-game .wakeup { transform-origin: 50% 100%; animation: wakeupSun 1.6s cubic-bezier(.55,.06,.25,1) forwards;}
#ts-game .vwiggle { animation: eggHatchStory 2.4s cubic-bezier(.455,.030,.515,.955); animation-fill-mode: forwards; }

@keyframes pause {}

@keyframes wakeupSun{  
0%{ transform: rotate(var(--egg-tilt)) translateY(0) scale(1); }  
15%{ transform: rotate(calc(var(--egg-tilt) + 2deg)) translateY(2%) scale(1.02,.98); }  
45%{ transform: rotate(calc(var(--egg-tilt) - 12deg)) translateY(-6%) scale(.98,1.02); }  
75%{ transform: rotate(-2.5deg) translateY(1%) scale(1.01,.99); }  
90%{ transform: rotate(1deg) translateY(0) scale(1); }  
100%{ transform: rotate(0deg) translateY(0) scale(1); }  
}

@keyframes sleep {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(34deg); }
}
.bounce{animation:bounce 1.2s cubic-bezier(.34,1.56,.64,1);}

@keyframes bounce{
  0%   {transform:translateY(0)       scale( 1 , 1 );}
  30%  {transform:translateY(-30%)    scale(.92,1.08);}
  60%  {transform:translateY(0)       scale(1.12,.88);}
  80%  {transform:translateY(-15%)    scale(.96,1.04);}
  100% {transform:translateY(0)       scale( 1 , 1 );}
}

@keyframes eggHatchStory{
  0%   {transform:translate(0,0)  rotate(0deg)  scale(1);}
  5%   {transform:translate(1%,4%) rotate(-4deg) scale(1.04,.96);}
  10%  {transform:translate(-1%,5%) rotate(3deg) scale(1.03,.97);} 
  20%  {transform:translate(22%,-20%) rotate(14deg) scale(.96,1.02);}
  28%  {transform:translate(30%,-10%) rotate(8deg)  scale(.96,1.04);} 
  33%  {transform:translate(32%,0)   rotate(3deg)  scale(1.08,.92);} 

  38%  {transform:translate(30%,1%)  rotate(-2deg) scale(1.02,.98);}
  42%  {transform:translate(28%,0)   rotate(1deg)  scale(1);}

  50%  {transform:translate(27%,4%)  rotate(4deg)  scale(1.04,.96);}
  55%  {transform:translate(29%,5%)  rotate(-3deg) scale(1.03,.97);} 

  65%  {transform:translate(5%,-20%) rotate(-12deg) scale(.96,1.02);}
  73%  {transform:translate(-4%,-10%)rotate(-6deg) scale(.96,1.04);}
  78%  {transform:translate(-6%,0)   rotate(-2deg) scale(1.08,.92);}

  84%  {transform:translate(-4%,1%)  rotate(2deg)  scale(1.02,.98);}
  90%  {transform:translate(-2%,0)   rotate(-1deg) scale(1);}
  100% {transform:translate(0,0)     rotate(0deg)     scale(1);}
}