/* ============================================================
   Base — reset, body, stage frame, slide container + animation,
   decorative grid background.
   ============================================================ */

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

html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Subtle grain for tactile, almost-print feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Scaled stage — fixed 1600×900 design scaled to viewport.
   See scripts/stage.js for the resize logic.
   ============================================================ */
#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
}

/* ============================================================
   Slide container — only `.slide.active` is visible.
   ============================================================ */
.slide {
  position: absolute;
  inset: 44px 0;
  display: none;
  padding: 56px 80px;
  opacity: 0;
  flex-direction: column;
}
.slide.active {
  display: flex;
  animation: slideIn var(--anim-slide) var(--ease) forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Decorative grid backdrop opt-in (add `.cross-bg` div inside a slide) */
.cross-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.slide > * { position: relative; z-index: 1; }