/* ── Self-hosted Inter (variable) ──────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter.var.2bf3d951bf9d.woff2") format('woff2-variations'),
       url("../fonts/Inter.var.2bf3d951bf9d.woff2") format('woff2');
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Dark palette — paintings pop, drifting lights breathe. */
  --bg:           #13121a;
  --bg-deeper:    #0c0b13;
  --ink:          #ece8f4;
  --ink-soft:     rgba(236, 232, 244, 0.72);
  --ink-faint:    rgba(236, 232, 244, 0.48);
  --ink-ghost:    rgba(236, 232, 244, 0.22);
  --rule:         rgba(236, 232, 244, 0.10);

  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --transition:   0.6s ease;
}

html, body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
img.loaded {
  opacity: 1;
}

/* The reactive flow canvas. Sits ABOVE any per-page backdrop image
   (.room-bg / .rooms-bg) and BELOW page content + panels. */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* No top chrome. Navigation is the bottom-left FAB.
   Intentionally NO z-index here: main must not create a stacking
   context, otherwise the per-page .room-bg / .rooms-bg backdrop
   (which lives inside main) would get hoisted above #bg-canvas and
   hide the music-reactive flow layer. Individual content blocks
   (.home-wrap, .rooms-grid, .room) carry z-index:2 themselves so
   they sit above the canvas. */
main {
  position: relative;
  min-height: 100vh;
  animation: fadein 0.45s ease forwards;
}

main.htmx-swapping  { opacity: 0; transition: opacity 0.18s ease; }
main.htmx-settling  { opacity: 0; }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}