/* css/base.css
 *
 * The app shell: ambient drifting background, vignette, film grain, and
 * global typography defaults. Everything here is decorative scaffolding
 * that sits behind the four cards.
 */

html,
body {
  width: 100%;
  overflow: hidden; /* the shell never scrolls; individual panels may */
  background: var(--color-bg-start);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-serif);
  letter-spacing: var(--tracking-hero);
}

#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100vh; /* fallback for kiosk WebViews without dvh support */
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ---- Slow-drifting ambient background --------------------------------
 * A soft amber glow that never sits still, so the screen never reads as
 * frozen even when nothing else is animating. Transform-only for GPU
 * friendliness; the element is oversized so drifting never reveals an edge.
 */
.ambient-bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 22% 28%, var(--color-accent-faint), transparent 45%),
    radial-gradient(circle at 78% 68%, var(--color-accent-faint), transparent 50%);
  animation: ambient-drift var(--ambient-drift-duration) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ambient-drift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 2%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.02);
  }
}

/* ---- Vignette ----------------------------------------------------------
 * A faint radial darkening at the screen edges for depth.
 */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, var(--color-vignette-edge) 100%);
}

/* ---- Film grain ----------------------------------------------------------
 * A static, GPU-cheap feTurbulence texture (inline SVG data URI, not an
 * image file) laid over the whole shell at ~3% opacity via mix-blend-mode
 * so it reads as texture rather than noise.
 */
.grain {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg {
    animation: none;
  }
}