@charset "UTF-8";

html.is-loading,
body.is-loading {
  overflow: hidden;
}

#loader_wrapper { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; transform-origin: center center; contain: paint;
    will-change: transform, opacity;
    transform: translateZ(0); }

#animation_container {
position: fixed;
left: 0; 
	right: 0;
  top: 0; 
	bottom: 0;
  width: min(300px, 100vw);
  height: min(300px, 100vh);
  transform: translateZ(0) scale(0.3333);
  margin: auto;
  z-index: 10000;
  will-change: transform;   
	 pointer-events: none;
	align-items: center;
display: flex;

}

/* Canvas fills its container exactly - no stretching beyond 300px */
#canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 300px;
  max-height: 300px;
  display: block;
	margin:0 auto;
}

/* Optional: darken background so white animation is visible */
#loader-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  pointer-events: none;
}

/* No frames needed */
.frame {
  display: none;
}

@media (max-width: 650px) {
    #animation_container {
        transform: scale(0.5) !important;
        width: 300px;
        height: 300px;
    }
}