/*
 * theme.css — Bible Gallery Feed · design system
 * Light / Day baseline · warm ivory · violet dominant · neon-lime accent.
 * Ported from docs/mockups/premium/light/*. One source of truth for tokens,
 * the app shell, bottom nav, reveal motion, and the museum "scene" palettes.
 */

:root {
  /* warm ivory canvas */
  --bg: #f6f2ea;
  --bg-2: #fbf8f2;
  --surface: #ffffff;
  --surface-2: #f1ecf8;
  --hair: rgba(124, 58, 237, .12);
  --hair-2: rgba(124, 58, 237, .2);

  /* violet */
  --violet: #8b5cf6;
  --violet-dark: #7c3aed;
  --violet-deep: #5b21b6;
  --violet-light: #c4b5fd;

  /* neon lime accent + violet "deep-lime" for thin text on ivory */
  --lime: #dfff32;
  --lime-deep: #7c3aed;
  --lime-soft: #eef7c0;

  /* ink */
  --ink: #23163f;
  --ink-soft: #5d4f78;
  --ink-dim: #8e82a6;

  --serif: "Fraunces", Georgia, serif;
  --grotesk: "Space Grotesk", sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --app-max: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% -10%, #efe6fb 0%, #f3eee6 40%, #ece3d6 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* film-grain noise overlay (subtle, gallery feel) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── App shell ──────────────────────────────────────────────
   Mobile: fills the viewport. Desktop: a centred 480px "device"
   column with an ambient frame shadow, so the PWA previews nicely
   on a laptop yet goes full-bleed when installed on a phone. */
.app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 540px) {
  .app {
    margin: 18px auto;
    min-height: calc(100dvh - 36px);
    border-radius: 40px;
    box-shadow: 0 50px 110px -24px rgba(91, 33, 182, .34),
      0 0 0 1.5px rgba(124, 58, 237, .1), 0 0 0 11px #efe9f7, 0 0 0 12px rgba(139, 92, 246, .2);
  }
}

/* scrollable screen region (most screens). Feed reel overrides this. */
.screen {
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  padding-bottom: 112px; /* clear the floating nav */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* ── Header (Discover / Room) ── */
.hd { padding: 28px 24px 2px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hair-2);
  border-radius: 999px; padding: 5px 12px; font-family: var(--grotesk); font-size: 10px;
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--violet-dark);
  background: rgba(139, 92, 246, .07);
}
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(223, 255, 50, .7); }
.hd h1 { font-family: var(--serif); font-size: 46px; font-weight: 340; line-height: .96; margin-top: 16px; letter-spacing: -.025em; color: var(--ink); }
.hd h1 em { font-style: italic; color: var(--violet-dark); }
.hd .sub { font-family: var(--serif); font-style: italic; color: var(--ink-dim); font-size: 15px; margin-top: 11px; line-height: 1.4; }

/* ── Section header ── */
.sec { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 24px 14px; }
.sec h2 { font-family: var(--serif); font-size: 21px; font-weight: 380; color: var(--ink); letter-spacing: -.01em; }
.sec .day { font-family: var(--grotesk); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--violet-dark); text-transform: uppercase; }
.sec a { font-family: var(--grotesk); font-size: 12px; color: var(--lime-deep); font-weight: 600; letter-spacing: .02em; text-decoration: none; }

/* ── Bottom nav · 2 tabs, floating island ── */
.nav {
  position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; gap: 6px; padding: 7px; border-radius: 999px;
  background: rgba(255, 253, 249, .82); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--hair-2); box-shadow: 0 18px 44px -12px rgba(91, 33, 182, .35), inset 0 1px 1px rgba(255, 255, 255, .9);
}
.ni {
  display: flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
  color: var(--ink-dim); font-family: var(--grotesk); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .5s var(--ease); cursor: pointer; border: none; background: none;
}
.ni svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ni.active { background: var(--violet); color: #fff; box-shadow: 0 8px 22px -6px rgba(139, 92, 246, .6); }

/* ── Reveal-on-scroll ── */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── Museum "scene" placeholder palettes (no external images) ──
   Shared by Discover tiles, Works tiles, Room cards, Feed slides, list thumbs.
   Warm golden chiaroscuro → violet/earth/green/blue museum tones. */
.scene { position: relative; }
/* Real masterwork image (background-image supplied inline by scene_style). */
.scene--art { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #0c0814; }
.scene--1 { background: radial-gradient(96% 60% at 50% 26%, rgba(255,248,222,.98), rgba(252,224,150,.82) 18%, rgba(139,92,246,.62) 46%, rgba(20,14,52,.96) 86%), linear-gradient(180deg,#5b3aa6,#0c0830); }
.scene--2 { background: linear-gradient(180deg,#b9a6e8 0%,#cdb3f0 28%,rgba(255,240,196,.92) 50%,#3a2b6e 62%,#0f0c33 100%); }
.scene--3 { background: radial-gradient(120% 96% at 52% 22%, rgba(238,247,192,.96), rgba(180,224,120,.78) 26%, rgba(96,128,64,.78) 56%, rgba(34,52,30,.92) 96%); }
.scene--4 { background: radial-gradient(96% 64% at 50% 18%, rgba(255,250,224,.96), rgba(196,181,253,.8) 30%, rgba(91,33,182,.86) 70%, #140e34 100%); }
.scene--5 { background: radial-gradient(120% 96% at 42% 26%, rgba(207,232,255,.95), rgba(140,180,224,.8) 28%, rgba(60,92,150,.82) 58%, rgba(20,30,64,.92) 96%); }
.scene--6 { background: radial-gradient(80% 70% at 50% 12%, rgba(255,246,210,.95), rgba(217,160,90,.72) 38%, rgba(110,62,40,.92) 74%, #2a1530 100%); }
.scene--7 { background: radial-gradient(110% 86% at 50% 20%, rgba(255,250,224,.96), rgba(196,181,253,.78) 36%, rgba(124,58,237,.86) 78%, #2a1550 100%); }
.scene--8 { background: radial-gradient(70% 60% at 50% 32%, rgba(244,238,180,.94), rgba(150,196,86,.78) 36%, rgba(58,108,52,.92) 72%, #16331f 100%); }
.scene--9 { background: radial-gradient(110% 84% at 44% 22%, rgba(255,243,207,.95), rgba(196,181,253,.78) 34%, rgba(124,58,237,.84) 76%, #3b1574 100%); }
.scene--10 { background: radial-gradient(78% 64% at 62% 22%, rgba(255,240,196,.94), rgba(206,150,78,.72) 40%, rgba(96,58,34,.92) 76%, #241a2e 100%); }