/* site.css — production overrides for the live da.place landing page.
   Loaded AFTER styles.css. The design's styles.css centres a single board
   inside a dark canvas (for design review). In production we want the
   landing to be full-bleed and to scale to fit any viewport width. */

html, body {
  background: var(--bg);
  margin: 0;
  padding: 0;
}
/* concrete fallbacks before the theme vars resolve */
html { background: #F6F3EE; }
html[data-theme="dark"] { background: #0F1115; }

body {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* React mounts App here; keep it out of the way (App provides #frame/#board) */
#root {
  display: block;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
}

/* The frame: fills the theme background, clips horizontal overflow. */
#frame {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  min-height: 100vh;
}

/* Fixed-width design board, centred; scaled to fit via CSS `zoom` (set in JS).
   zoom (not transform:scale) keeps it in normal flow at its real scaled size,
   so there's no giant composited layer to blow up mobile memory. */
#board {
  width: 1440px;
  margin: 0 auto;
}

/* Real mobile layout (< 768px): full-width, natural flow, no zoom. */
#board-mobile {
  width: 100%;
  margin: 0 auto;
}

/* ── Mobile performance hardening ──────────────────────────────────────────
   The embedded phone mockups carry ~40 backdrop-filter blur layers. Stacked
   inside the scaled board they flicker and crash mobile Safari. Drop the blur
   — the translucent tint backgrounds stay, so it still reads as glass at the
   size shown on the landing. */
#board *, #board *::before, #board *::after,
#board-mobile *, #board-mobile *::before, #board-mobile *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The app screens have internal overflow:auto regions that hijack touch
   scrolling on the page. They're decorative here — freeze them. */
#board [style*="overflow: auto"],
#board [style*="overflow:auto"],
#board [style*="overflow-x: auto"],
#board [style*="overflow-x:auto"],
#board-mobile [style*="overflow: auto"],
#board-mobile [style*="overflow:auto"],
#board-mobile [style*="overflow-x: auto"],
#board-mobile [style*="overflow-x:auto"] {
  overflow: hidden !important;
}

/* The design canvas floated the theme toggle over empty gutter space; on the
   full-width production board it would cover the nav CTA, so dock it bottom-right. */
.theme-toggle {
  top: auto;
  bottom: 20px;
  right: 20px;
}

/* Respect reduced-motion for the ambient animations from styles.css */
@media (prefers-reduced-motion: reduce) {
  .live-pulse, .ring-pulse, .shimmer, .fade-in, .sheet-in, .heartbeat {
    animation: none !important;
  }
}