#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease;
}
#page-loader.done { opacity: 0; pointer-events: none; }

.joint-loader {
  display: flex;
  align-items: center;
  position: relative;
  transform: rotate(-5deg);
}

.filter {
  width: 40px;
  height: 20px;
  background-color: #d19a66;
  border-radius: 10px 0 0 10px;
  border-right: 2px solid #b58050;
}

.paper {
  height: 20px;
  background-color: #f9f9f9;
  animation: consume 2.5s linear forwards;
}

.cherry {
  width: 12px;
  height: 20px;
  background-color: #ff3300;
  border-radius: 0 10px 10px 0;
  position: relative;
  animation: pulse 0.5s alternate infinite;
}

.cherry::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: blur(4px);
  animation: smoke 2s ease-out infinite;
}

@keyframes consume {
  0%   { width: 120px; }
  100% { width: 0px; }
}

@keyframes pulse {
  0%   { opacity: 0.8; box-shadow: 0 0 8px 1px #ff4500; }
  100% { opacity: 1;   box-shadow: 0 0 15px 4px #ff3300, 0 0 5px 2px #ff8c00 inset; }
}

@keyframes smoke {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(15px, -50px) scale(3); opacity: 0; }
}