/* ==========================================================================
   NAO STUDIO — MOTOR DECLARATIVO DE CRISTAL (NaoGlass)
   ========================================================================== */

/* 1. LIENZO GLOBAL DE CAMPO DE LUZ (SUSTRATO DE FONDO) */
#nao-lightfield-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background-color: var(--surface-bg);
}

/* El contenido interactivo siempre flota sobre el sustrato */
.nao-stage,
main#app {
  position: relative;
  z-index: 1;
}

/* 2. CONTENEDOR EN MODO LOCAL (data-glass-mode="local") */
[data-glass-mode="local"] {
  position: relative;
  overflow: hidden;
}

[data-glass-mode="local"] > canvas.nao-lightfield-local-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 3. SISTEMA DECLARATIVO DE CRISTAL (data-glass) */
[data-glass] {
  /* Sustrato al 25% de opacidad (color-mix con fallback a rgba) */
  background-color: rgba(17, 27, 43, 0.25);
  background-color: color-mix(in srgb, var(--glass-tint, var(--surface-card)) 25%, transparent);
  
  /* Mandato Cero Bordes por defecto */
  border: none;
  outline: none;
}

/* Escalas de Desenfoque Óptico en Tiempo Real */
[data-glass="sm"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-glass="md"] {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-glass="lg"] {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}

/* 4. EXCEPCIÓN DECLARATIVA DE BORDE (data-glass-border="true") */
[data-glass-border="true"] {
  border: 1px solid var(--border-subtle);
}