/* ── 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;
  min-height: 100svh;
  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;
  /* svh: with plain vh this canvas RESIZES every time the phone's URL bar
     hides, and a resize is a full repaint of it - mid-scroll, which is
     precisely when you can least afford one. */
  height: 100vh;
  height: 100svh;
  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;
  min-height: 100svh;
  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; }
}

/* Present to assistive tech and to crawlers, absent to the eye. Used for the
   page headings only: the design is deliberately wordless, but a document
   with no <h1> at all is unnavigable with a screen reader. Not a place to
   put anything a sighted visitor isn't also being told. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}