/* ============================================================
   shared.css
   Bread Gets Broke — cross-page tokens and primitives

   Linked from every screen via:
     <link rel="stylesheet" href="shared.css">

   Each screen keeps its own <style> block for layout, ornaments,
   and screen-specific animations. This file owns:
     - color and typography tokens
     - base body styles (font, bg, ink, reset)
     - the noise overlay
     - the primary pill button (.btn)
     - the italic continue link (.continue)
     - the fadeUp / fadeIn animations

   Each HTML file should set these meta tags in <head>:
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="color-scheme" content="dark">
     <meta name="theme-color" content="#1a1410">
   ============================================================ */


/* ---------- TOKENS ---------- */
:root {
  color-scheme: dark;

  /* Color */
  --bg:           #1a1410;
  --ink:          #ebdcc4;
  --ink-bright:   #f5ede0;
  --amber:        #c4682a;
  --amber-soft:   rgba(196, 104, 42, 0.18);

  /* Ink opacity variants for hierarchy */
  --dim:    rgba(235, 220, 196, 0.62);
  --dim-2:  rgba(235, 220, 196, 0.34);
  --line:   rgba(235, 220, 196, 0.14);
  --card:   rgba(235, 220, 196, 0.035);

  /* Typography */
  --font-serif:   Georgia, 'Times New Roman', serif;
  --font-display: 'Cochin', 'Didot', 'Bodoni 72', 'Hoefler Text', 'Palatino Linotype', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Layout — pages can override on their own :root or .container */
  --container-width: 480px;
}


/* ---------- RESET ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}


/* ---------- BASE ---------- */
html, body {
  min-height: 100%;
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  /* No-scroll default: lock the body to the small viewport so each
     screen fits within the visible area with browser chrome showing.
     Pages that need to scroll opt in via body.scroll below. */
  height: 100vh;     /* fallback */
  height: 100svh;    /* accounts for the visible browser chrome */
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

/* Opt-out for gallery screens that intentionally scroll. */
body.scroll {
  height: auto;
  min-height: 100svh;
  overflow-y: auto;
}


/* ---------- CONTAINER ---------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}


/* ---------- NOISE OVERLAY ----------
   Page-wide film grain. SVG turbulence pattern at 0.09 opacity,
   blended with screen mode for a warm subtle tint over the bg.
   Pinned at z-index 100 so it sits over fullscreen video and
   cinematic layers (some screens use z-index 20–50 for those).
   Pages can opt out by setting body::before { display: none; }
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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>");
  opacity: 0.09;
  mix-blend-mode: screen;
}


/* ---------- PRIMARY PILL BUTTON ----------
   Outlined oval that fills amber on hover and selection.
   Used across landing, survey questions, opener, and wildcards.
   Pages can override padding for wider/narrower variants.
*/
.btn {
  padding: 1.05rem 1.5rem;
  border: 1.75px solid var(--ink);
  border-radius: 100px;
  background: transparent;
  font-family: inherit;
  font-size: 1.125rem;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease,
    transform 0.1s ease;
}
/* selected state applies on every device (it's a real toggle, not hover) */
.btn.selected {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-bright);
}
/* hover-only treatment is gated to devices with real hover capability so it
   doesn't trigger as a sticky paint or double-tap-to-activate on iOS. */
@media (hover: hover) {
  .btn:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink-bright);
  }
}
.btn:active {
  transform: scale(0.97);
}


/* ---------- CONTINUE LINK ----------
   Italic "let's go →" affordance that appears once a screen has
   resolved into a continue-ready state. Some screens fade it in
   via the .visible class — page-specific styles handle that.
*/
.continue {
  font-family: inherit;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  padding: 0.6rem 0.4rem;
  transition:
    color 0.2s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}
.continue .arrow {
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}
/* hover-only treatments gated to non-touch devices so iOS doesn't treat
   the first tap as "hover" and require a second tap to fire click. */
@media (hover: hover) {
  .continue:hover { color: var(--amber); }
  .continue:hover .arrow { transform: translateX(3px); }
}


/* ---------- ANIMATIONS ----------
   Two universal keyframes used by almost every screen.
   Screen-specific keyframes (frame-fall, card-cascade, etc.)
   stay in the screen's own <style> block.
*/
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* breadFadeIn — used by the bread icon on every survey question page.
   Fades to opacity 0.65 (not 1) so the icon settles at brand-faded,
   matching the .bread base style. Pages reference it with `both` so
   the end state sticks and the icon doesn't snap from full-bright
   back down to faded when the animation ends. */
@keyframes breadFadeIn {
  from { opacity: 0;    transform: translateY(8px); }
  to   { opacity: 0.85; transform: translateY(0); }
}
