/* ===== PRELOADER OVERLAY =====
   Works with your JS (adds .is-hidden when ready).
   Sits IN FRONT of everything, then fades out and stops intercepting clicks.
*/

#preloader{
  position: fixed;        /* cover viewport */
  inset: 0;               /* top/right/bottom/left: 0 */
  z-index: 10000;         /* on top */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #717171;   /* overlay bg */
  transition: opacity 300ms ease;
}

#preloader.is-hidden{
  opacity: 0;
  pointer-events: none;        /* let page receive clicks once hidden */
}

/* ------- Animation layout (scoped so it doesn't leak styles) ------- */

#preloader .wrapper{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader .glass-wrapper{ position: relative; }

#preloader .glass{
  border: 8px solid #fff;
  border-bottom-width: 16px;
  border-top: transparent;
  border-radius: 0 0 4px 4px;
  height: 240px;
  width: 144px;
  transform: perspective(240px) rotateX(-10deg);
  position: relative;
  overflow: hidden;
}

#preloader .beer{
  height: 90%;
  width: 100%;
  background-color: gold;
  position: absolute;
  bottom: 0;
  transform: scaleY(1);
  transform-origin: bottom;
  animation: beer-fill 4000ms linear infinite;
}

#preloader .bubble{
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: rgba(0,0,0,.2);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  animation: bubble-rise 4000ms infinite;
}

/* bubble positions */
#preloader .bubble:nth-child(1){ left:3.7%;  bottom:.4%;  animation-duration:3860ms; animation-delay:140ms; }
#preloader .bubble:nth-child(2){ left:51%;   bottom:6.4%; animation-duration:3640ms; animation-delay:360ms; }
#preloader .bubble:nth-child(3){ left:18%;   bottom:1.4%; animation-duration:3940ms; animation-delay:60ms; }
#preloader .bubble:nth-child(4){ left:83%;   bottom:9.1%; animation-duration:3590ms; animation-delay:410ms; }
#preloader .bubble:nth-child(5){ left:58%;   bottom:14.7%;animation-duration:3930ms; animation-delay:70ms; }
#preloader .bubble:nth-child(6){ left:13%;   bottom:3.6%; animation-duration:3770ms; animation-delay:230ms; }
#preloader .bubble:nth-child(7){ left:73%;   bottom:.4%;  animation-duration:3900ms; animation-delay:100ms; }
#preloader .bubble:nth-child(8){ left:41%;   bottom:14.4%;animation-duration:3690ms; animation-delay:310ms; }
#preloader .bubble:nth-child(9){ left:35%;   bottom:.4%;  animation-duration:4000ms; }

#preloader .foambubble{
  display: inline-block;
  width: 70px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -15px;
  z-index: 2;
}
#preloader .foambubble:nth-child(1){ left:-21%; }
#preloader .foambubble:nth-child(2){ left:3%; }
#preloader .foambubble:nth-child(3){ left:18%; }
#preloader .foambubble:nth-child(4){ left:37%; }
#preloader .foambubble:nth-child(5){ left:65%; }

#preloader .foamtop{
  position: absolute;
  z-index: 2;
  top: -35px;
  left: 0;
  width: 100%;
  height: 60px;
  animation: ftbubble-appear 4s infinite;
}

#preloader .ft-bubble{
  display: inline-block;
  width: 90px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 0;
}
#preloader .ft-bubble:nth-child(1){ left:-12%; }
#preloader .ft-bubble:nth-child(2){ left:13%; }
#preloader .ft-bubble:nth-child(3){ left:43%; }
#preloader .ft-bubble:nth-child(4){ left:57%; }

#preloader .coaster{
  height: 16px;
  width: 120%;
  margin-left: -10%;
  margin-top: -10%;
  background-color: rgba(50,50,50,.5);
}

/* disclaimer (optional) */
#preloader .disclaimer{
  color:#fff;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  position: fixed;
  bottom: 0;
}
#preloader .disclaimer a{ color:#fff; }

/* ---------- Animations ---------- */
@keyframes beer-fill{
  0% { transform: scaleY(0); }
  48%,100% { transform: scaleY(1); }
}

@keyframes bubble-rise{
  0%,20%   { opacity:0; transform: translate3d(0,0,0); }
  85%      { opacity:1; transform: translate3d(0,-1920%,0); }
  100%     { opacity:.5; transform: translate3d(0,-1870%,0); }
}

@keyframes ftbubble-appear{
  0%,40% { opacity:0; transform: translateY(35px) scale3d(0,0,0); }
  42%    { opacity:0; transform: translateY(27px) scale3d(.4,0,0); }
  67%,100% { opacity:1; transform: translateY(0) scale3d(1,1,0); }
}

/* Respect user’s reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  #preloader *,
  #preloader { animation: none !important; transition: none !important; }
}