@charset "utf-8";

#animation_container {
  position: relative;
}

#_preload_div_ {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3e6;
  overflow: hidden;
  border-radius: 4px;
}

.prl-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.prl-bubbles span {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  opacity: .55;
  animation: prl-float linear infinite;
}

.prl-bubbles span:nth-child(1) { width:28px; height:28px; left:8%;  background:#fc9b38; animation-duration:4.2s; animation-delay:0s;    }
.prl-bubbles span:nth-child(2) { width:18px; height:18px; left:20%; background:#f4623a; animation-duration:3.5s; animation-delay:.8s;   }
.prl-bubbles span:nth-child(3) { width:36px; height:36px; left:33%; background:#ffc93c; animation-duration:5.1s; animation-delay:.3s;   }
.prl-bubbles span:nth-child(4) { width:14px; height:14px; left:47%; background:#fc9b38; animation-duration:3.8s; animation-delay:1.2s;  }
.prl-bubbles span:nth-child(5) { width:24px; height:24px; left:58%; background:#f4623a; animation-duration:4.6s; animation-delay:.5s;   }
.prl-bubbles span:nth-child(6) { width:32px; height:32px; left:68%; background:#ffc93c; animation-duration:3.9s; animation-delay:1.8s;  }
.prl-bubbles span:nth-child(7) { width:20px; height:20px; left:78%; background:#fc9b38; animation-duration:4.8s; animation-delay:.2s;   }
.prl-bubbles span:nth-child(8) { width:40px; height:40px; left:87%; background:#f4623a; animation-duration:5.5s; animation-delay:1s;    }
.prl-bubbles span:nth-child(9) { width:16px; height:16px; left:93%; background:#ffc93c; animation-duration:3.2s; animation-delay:2.1s;  }

@keyframes prl-float {
  0%   { transform: translateY(0)   scale(1);   opacity: .55; }
  80%  { opacity: .4; }
  100% { transform: translateY(-400px) scale(1.1); opacity: 0; }
}

.prl-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: clamp(140px, 55%, 320px);
}

.prl-bar-wrap {
  width: 100%;
  height: 14px;
  background: #fff;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.prl-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffc93c, #fc9b38, #f4623a);
  animation: prl-shimmer 1.6s linear infinite;
  background-size: 200% 100%;
  transition: width .3s ease;
}

@keyframes prl-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#canvas {
  max-width: 100% !important;
  opacity: 0;
  transition: opacity .6s ease;
}

#canvas.visible {
  opacity: 1;
}