:root{
  /* Size of the owl block */
  --owl-w: 220px;
  --owl-h: 260px;

  /* Drill placement relative to the owl block */
  --drill-left: 17%;   /* move horizontally */
  --drill-top:  110%;   /* move vertically */
  --drill-w:    70%;

  /* Panel size/spacing */
  --panel-w: clamp(220px, 52vw, 520px);
  --panel-h: 56px;
}

#loading-screen{
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 40%, #00111a, #000);
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center;
  color: #1bbdfe;
  transition: opacity .6s ease, visibility .6s ease;
}
#loading-screen.hidden{ opacity: 0; visibility: hidden; }

.loader-owl{
  position: relative;
  width: var(--owl-w);
  height: var(--owl-h);
}

/* Owl layers */
.owl{
  position: absolute; inset: 0;
  top:60%;
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center bottom;
animation: wobble .55s ease-in-out infinite, bob 2.2s ease-in-out infinite;

}


.face-open   { animation: faceOpen 6s linear infinite,   bob 2.2s ease-in-out infinite; }
.face-closed { animation: faceClosed 6s linear infinite; }
.face-down   { animation: faceDown 6s linear infinite; }


/* Panel the drill “works on” */
.loading-panel{
  width: var(--panel-w);
  height: var(--panel-h);
  margin-top: 10px;
  border-radius: 12px;
  background: rgba(0, 10, 16, .55);
  border: 1px solid rgba(27,189,254,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 20px rgba(27,189,254,.18);
  position: relative;
  z-index: 1; /* drill has z-index:2 so it sits above */
  overflow: hidden;
}
.loading-text{
  height: 100%;
  display: grid; place-items: center;
  font-family: "Orbitron";
  letter-spacing: .25em; text-transform: uppercase;
  font-size: clamp(.9rem, 2vw, 1.05rem);
  color: #bfefff;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Animations */
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
@keyframes wobble { 0%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} 100%{transform:rotate(-7deg)} }
@keyframes chip {
  0% { opacity:0; transform: translate(0,0) scale(.6); }
  20%{ opacity:1; transform: translate(6px,-6px) scale(1); }
  60%{ opacity:.7; transform: translate(14px,-12px) scale(.9); }
  100%{opacity:0; transform: translate(18px,-16px) scale(.7); }
}

/* Face timing */
@keyframes faceOpen {
  0%   { opacity:1 }
  10%  { opacity:1 }   /* blink happens via closed layer */
  11%  { opacity:1 }
  32%  { opacity:1 }   /* prepare to look down */
  42%  { opacity:0 }   /* hidden while looking down */
  60%  { opacity:1 }
  80%  { opacity:1 }
  100% { opacity:1 }
}
@keyframes faceClosed {
  0%, 8%, 12%, 58%, 62%, 100% { opacity:0 }
  9%                          { opacity:1 } /* quick blink */
  60%                         { opacity:1 } /* another blink */
}
@keyframes faceDown {
  0%, 38% { opacity:0 }
  39%, 49%{ opacity:1 }  /* looks down briefly */
  50%, 100%{ opacity:0 }
}

@keyframes pulse { 0%,100%{opacity:.75} 50%{opacity:1} }

@media (prefers-reduced-motion: reduce){
  .owl, .face-open, .face-closed, .face-down, .drill, .chip, .loading-text { animation: none !important; }
}