/* Era backgrounds: a fixed stage behind the app with two image layers that
   crossfade, plus a tint in the era's own background colour so text on the page
   keeps WCAG AA contrast (checked by pipeline/check_contrast.py). Panels stay opaque.
   The art is drawn sharp (no blur): legibility comes from the tint, and app.js picks
   a variant from bg-variants.json that covers the viewport at the device pixel ratio. */

.bgstage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bglayer {
  position: absolute;
  inset: -1.5%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  filter: saturate(var(--bg-sat, 0.9));
  will-change: opacity, transform;
}
.bglayer.on { opacity: 1; }
.bgtint {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--bg-tint, 0.8);
  transition: background-color 0.5s ease, opacity 0.5s ease;
}
/* No art on the home and results screens (the present): the plain base colour shows through. */
[data-era="capsule"] .bgtint { opacity: 1; }

/* Slow drift ("Ken Burns"): transform only, so it stays on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  .bglayer.on { animation: bg-drift 48s ease-in-out infinite alternate; }
}
@keyframes bg-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.03) translate3d(-0.8%, -0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bglayer, .bgtint { transition: none; }
}

/* Per-era tint strength over the sharp art. */
[data-era="ancient"] { --bg-tint: 0.76; }
[data-era="medieval"] { --bg-tint: 0.72; }
[data-era="early-modern"] { --bg-tint: 0.58; }
[data-era="1800s"] { --bg-tint: 0.64; }
[data-era="deco"] { --bg-tint: 0.72; }
[data-era="1950s"] { --bg-tint: 0.42; }
[data-era="1960s"] { --bg-tint: 0.62; }
[data-era="1970s"] { --bg-tint: 0.6; }
[data-era="1980s"] { --bg-tint: 0.42; }
[data-era="1990s"] { --bg-tint: 0.78; }
[data-era="2000s"] { --bg-tint: 0.4; }
[data-era="2010s"] { --bg-tint: 0.45; }
[data-era="2020s"] { --bg-tint: 0.3; }

/* The era's own CSS pattern is drawn on the tint layer so it survives over the art. */
.bgtint { background-image: var(--bg-image); }
[data-era="medieval"] .bgtint { background-size: 48px 48px; }

/* ---- 1950s skin: atomic-age cream, teal and coral ---- */
[data-era="1950s"] {
  --bg: #f3e7cf;
  --bg-image: none;
  --panel: #fffaf0;
  --ink: #26323a;
  --muted: #59646b;
  --line: #3fb6a8;
  --accent: #e2533f;
  --accent-ink: #fffaf0;
  --on-bg: #26323a;
  --flap: #2d4a5a;
  --flap-ink: #f3e7cf;
  --radius: 18px;
  --radius-btn: 999px;
  --panel-border: 2px solid;
  --panel-shadow: 6px 6px 0 #3fb6a8;
  --font-display: "Yellowtail", "Brush Script MT", cursive;
  --display-weight: 400;
  --display-tracking: 0.01em;
}
[data-era="1950s"] .prompt-text { font-size: clamp(2.1rem, 9.4vw, 2.7rem); line-height: 1.02; }
[data-era="1950s"] .wordmark svg { color: #e2533f; }

/* Credits link on the help screen */
.credits-link { display: inline-block; margin: 0 0 20px; color: inherit; font-weight: 600; }