/* ============================================================
   ShiftSafe — 3D Viewport CSS
   Canvas overlay & WebGL container styles
   ============================================================ */

/* ── Three.js Canvas Container ─────────────────────────────── */
#three-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

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

/* ── Canvas Loading Overlay ────────────────────────────────── */
.canvas-loading {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  transition: opacity 0.5s ease;
}

.canvas-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: canvasRotate 1s linear infinite;
}

.canvas-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── WebGL Fallback ────────────────────────────────────────── */
.webgl-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(16, 185, 129, 0.06) 0%,
    transparent 60%
  );
  display: none;
  z-index: 1;
}

.webgl-fallback.visible {
  display: block;
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes canvasRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .canvas-loading {
    left: 50%;
  }
}

@media (max-width: 768px) {
  #three-canvas-container {
    opacity: 0.35;
  }

  .canvas-loading {
    display: none;
  }
}