/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 #character-popup{position:fixed; bottom:0; right:15%; z-index:1000;}

 #character{background-position:0 0;background-repeat:no-repeat;position:relative;}
 
 #character a{display:block;width:100%;height:100%;}
 
 #character-popup {
     position: fixed;
     bottom: -100%; /* Start off-screen */
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     animation: peek-and-reveal 13s ease-in-out infinite 1s; /* Total animation duration */
 }
 
 /* Keyframes for peeking, revealing, and wiggling */
 @keyframes peek-and-reveal {
  /* Peeking */
  0% {
      bottom: -100%; /* Fully off-screen */
  }
  10% {
      bottom: -10%; /* Peek out slightly */
  }
  20% {
      bottom: -10%; /* Peek out slightly */
  }
  40% {
      bottom: -100%; /* Hide again */
  }

  /* Delay before full reveal */
  45% {
      bottom: -100%; /* Stay hidden */
  }
  60% {
      bottom: 0%; /* Fully reveal */
      transform: translateX(-50%) rotate(0deg); /* Reset position */
  }

  /* Wiggle effect on full reveal */
  75% {
    bottom: 0%; /* Fully reveal */
      transform: translateX(-50%) rotate(-5deg); /* Slight left rotation */
  }
  80% {
    bottom: 0%; /* Fully reveal */
      transform: translateX(-50%) rotate(5deg); /* Slight right rotation */
  }
  85% {
    bottom: 0%; /* Fully reveal */
      transform: translateX(-50%) rotate(-3deg); /* Slight left rotation */
  }
  90% {
    bottom: 0%; /* Stay on screen */
      transform: translateX(-50%) rotate(2deg); /* Slight right rotation */
  }
  100% {
      bottom: 0%; /* Stay on screen */
      transform: translateX(-50%) rotate(0deg); /* Final reset */
  }

  /* Slide out */
  100% {
      bottom: -100%; /* Slide back off-screen */
  }
}
 
 
 
 #character.presenta{width:168px; height:168px;background-image:url('../RR-TICKET.png');background-size: contain;}
 
 #character .overlay{display:none;background-color: #026d72; opacity: .85; padding:1.5em; color:#fff;position:absolute; bottom:0;width:100%;}
 #character:hover{filter: brightness(0.5);}
 #character .overlay h3{color:#fff;line-height:1.4em;text-align: center;}
 
 /*#character.presenta.animate {
   -webkit-animation: presenta steps(60) 3s alternate;
   -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
   -moz-animation: presenta steps(60) 3s;
   -ms-animation: presenta steps(60) 3s;
 }
 
 @keyframes presenta {
 
 
 from { background-position:-7800px 0px; }
     to { background-position: 0 0; }
 
 }*/
 
 
 
 #character.elfb{width:131px; height:210px;background-image:url('../elfb.png');background-size: contain;}
 
 /*#character.elfb.animate {
   -webkit-animation: elfb steps(30) 1.5s alternate;
   -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
   -moz-animation: elfb steps(30) 1.5s;
   -ms-animation: elfb steps(30) 1.5s;
 }
 
 @keyframes elfb {
 
 
 from { background-position:-3930px 0px; }
     to { background-position: 0 0; }
 
 }*/