@charset "UTF-8";


#loader-overlay { position: fixed; inset: 0; background: #000; z-index: 1000; }
/* Loader styles (keep for loading animation) */
#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);}
/* Center container */
#animation_container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(600px, 100vw);
  height: min(600px, 100vh);
  transform: translate(-50%, -50%) translateZ(0); /* force GPU layer */
  z-index: 1;
  will-change: transform; /* hint to browser */
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.frame {
  position: fixed;
  background: black;
  z-index: 2;
  pointer-events: none;
  will-change: transform, width, height; /* GPU + size changes */
  transform: translateZ(0); /* force compositing layer */
}

/* Overlap by 1px to cover subpixel gaps (safe because canvas is on top) */
.frame.top {
  top: 0;
  left: 0;
  right: 0;
  height: 0; /* updated in JS */
}

.frame.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0; /* updated in JS */
}

.frame.left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 0; /* updated in JS */
}

.frame.right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 0; /* updated in JS */
}