/* The homepage's Bible section (#bible): the page on the left (the kit in
 * /home-page.css), the app's Bible page on the right — its search bar and
 * Ask, the cards floating round the Story summary (src/lib/ui/bible/
 * bible.css, .bfx-card) — and Ask's island at its foot. /home-fx.js plays it.
 */
.bx { position: relative; padding: 110px 0 90px; isolation: isolate; }
.bx::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 72% 60%, rgba(139, 92, 246, 0.14), transparent 70%),
    radial-gradient(600px 380px at 20% 55%, rgba(245, 166, 106, 0.10), transparent 70%);
}
.bx-copy { max-width: 700px; margin: 0 auto 46px; text-align: center; }
.bx-copy .show-kicker { justify-content: center; }
.bx-copy h2 { font-family: var(--font-display); font-weight: 500; font-size: calc(clamp(30px, 4.4vw, 52px) / var(--tz, 1)); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 18px; text-wrap: balance; }
.bx-copy h2 em { display: block; font-style: italic; background: linear-gradient(100deg, #ffd27a, #f5a66a 30%, #f06a9b 70%, #c084fc); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hx-shine 9s ease-in-out infinite; }
.bx-copy > p { color: var(--fg-2); font-size: calc(16.5px / var(--tz, 1)); max-width: 56ch; margin: 0 auto 22px; text-wrap: pretty; }
.bx-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; }
.bx-points li { padding: 7px 13px; border-radius: 999px; font-size: calc(13px / var(--tz, 1)); font-weight: 600; color: var(--fg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); }
.bx-points li::before { content: "✓"; color: var(--ok); margin-right: 7px; font-weight: 800; }

/* ---- the stage: the page beside the Bible ---- */
.bx-stage { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.bx-page { min-height: 540px; }
.bx-page .pm-text { font-size: calc(15.5px / var(--tz, 1)); }
.bx-sync {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--ok);
  opacity: 0; transform: translateY(3px);
  transition: opacity 0.35s, transform 0.35s;
}
.bx-sync::before { content: ""; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); }
.bx-sync.on { opacity: 1; transform: none; }
.bx:not(.live) .bx-sync { opacity: 1; transform: none; }
/* A name the Bible just read: a soft wash under it. */
.bx-hl { border-radius: 4px; background: color-mix(in srgb, var(--tint, #f06a9b) 26%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint, #f06a9b) 26%, transparent); transition: background 1.2s, box-shadow 1.2s; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-hl { background: rgba(var(--tint__r, 240), var(--tint__g, 106), var(--tint__b, 155), calc(var(--tint__a, 1) * 0.26)); box-shadow: 0 0 0 2px rgba(var(--tint__r, 240), var(--tint__g, 106), var(--tint__b, 155), calc(var(--tint__a, 1) * 0.26)); } }
.bx-hl.off { background: transparent; box-shadow: 0 0 0 2px transparent; }

/* The Bible: the app's full-page view, dark. */
.bx-bible {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 540px;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(139, 92, 246, 0.12), transparent 70%),
    linear-gradient(180deg, #17141b, #110f14);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hairline), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.6s;
}
/* Ask: the edges light up. */
.bx-bible.asking { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55), inset 0 0 40px -6px rgba(167, 139, 250, 0.55), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 90px -30px rgba(139, 92, 246, 0.8); }
.bx-bar { position: relative; z-index: 3; display: flex; gap: 8px; }
.bx-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-radius: 999px;
  font-size: calc(13px / var(--tz, 1)); color: var(--fg-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  white-space: nowrap; overflow: hidden;
}
.bx-search span { overflow: hidden; text-overflow: ellipsis; }
.bx-search svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bx-ask {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px 0 9px;
  border-radius: 999px;
  font-size: calc(13px / var(--tz, 1)); font-weight: 700; color: var(--spark-text);
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.08));
  transition: transform 0.15s, box-shadow 0.25s;
}
.bx-ask.press { transform: scale(0.93); box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.2); }
.bx-orb {
  flex: none; display: inline-block;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, #d9ccff 22%, var(--spark) 52%, var(--spark-strong, #7c3aed) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 14px rgba(139, 92, 246, 0.7);
  animation: bx-orb 3.2s ease-in-out infinite;
}
@keyframes bx-orb { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 24px rgba(139, 92, 246, 0.95); } }

/* The field: the cards floating round the story. */
.bx-field { position: relative; flex: 1; min-height: 470px; margin-top: 10px; }
.bx-slot { position: absolute; left: 50%; top: 50%; width: 122px; transform: translate(-50%, -50%); }
.bx-slot.bx-center { width: 188px; z-index: 1; }
.bx-drift { animation: bx-drift var(--d, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes bx-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(3px, -6px); } 66% { transform: translate(-4px, 3px); } }
.bx-card {
  --tint: #f06a9b;
  position: relative;
  display: flex; flex-direction: column;
  padding: 7px 7px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #28232e, #1b1820);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 44px -24px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.4s, border-color 0.4s, transform 0.4s cubic-bezier(.2, .9, .3, 1.2);
}
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-card { --tint__r: 240; --tint__g: 106; --tint__b: 155; --tint__a: 1; } }
.bx-card.hit { transform: scale(1.08); border-color: color-mix(in srgb, var(--tint) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 26px 50px -22px rgba(0, 0, 0, 0.95), 0 0 50px -8px var(--tint); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-card.hit { border-color: rgba(var(--tint__r), var(--tint__g), var(--tint__b), calc(var(--tint__a) * 0.6)); } }
.bx-art { display: block; height: 46px; border-radius: 11px; overflow: hidden; background: radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 72%), rgba(255, 255, 255, 0.03); }
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-art { background: radial-gradient(120% 90% at 50% 18%, rgba(var(--tint__r), var(--tint__g), var(--tint__b), calc(var(--tint__a) * 0.22)), transparent 72%), rgba(255, 255, 255, 0.03); } }
.bx-art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.bx-name { margin: 7px 3px 0; font: 700 calc(12px / var(--tz, 1))/1.3 var(--font-ui); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--tint); box-shadow: 0 0 8px var(--tint); }
.bx-gist { margin: 3px 3px 0; font-size: calc(10.5px / var(--tz, 1)); line-height: 1.4; color: var(--fg-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: opacity 0.3s; }
.bx-summary { --tint: #f5a66a; padding: 9px 9px 13px; border-radius: 20px; }
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-summary { --tint__r: 245; --tint__g: 166; --tint__b: 106; --tint__a: 1; } }
.bx-summary .bx-art { height: 82px; border-radius: 14px; }
.bx-summary .bx-name { font-size: calc(13.5px / var(--tz, 1)); margin-top: 9px; }
.bx-prose { font-family: var(--font-display); font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-2); -webkit-line-clamp: 4; }
.bx-badge {
  position: absolute; top: -8px; right: -6px;
  padding: 3px 8px; border-radius: 999px;
  font-size: calc(10px / var(--tz, 1)); font-weight: 800; white-space: nowrap;
  color: #1a1210; background: linear-gradient(135deg, #ffd27a, #f5a66a);
  box-shadow: 0 0 16px rgba(255, 190, 110, 0.8);
}
.bx-badge.fact { background: linear-gradient(135deg, #c4b5fd, #a78bfa); box-shadow: 0 0 16px rgba(167, 139, 250, 0.8); }
/* A name on its way from the page to the Bible. */
.bx-chip {
  position: absolute; left: 0; top: 0; z-index: 20;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font: 700 calc(12px / var(--tz, 1))/1.2 var(--font-ui); color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #2b2531, #1d1922);
  border: 1px solid color-mix(in srgb, var(--tint) 60%, transparent);
  box-shadow: 0 0 22px -4px var(--tint), 0 10px 24px -12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
 .bx-chip { border: 1px solid rgba(var(--tint__r), var(--tint__g), var(--tint__b), calc(var(--tint__a) * 0.6)); } }
.bx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 8px var(--tint); }

/* Ask's island, at the Bible's foot. */
.bx-island {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(24, 20, 30, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px -20px rgba(0, 0, 0, 0.95), 0 0 50px -20px rgba(139, 92, 246, 0.8);
  opacity: 0; transform: translateY(16px) scale(0.97);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .9, .25, 1);
  pointer-events: none;
}
.bx-island.open { opacity: 1; transform: none; }
.bx-q { display: flex; align-items: center; gap: 10px; font-size: calc(13.5px / var(--tz, 1)); font-weight: 600; color: var(--fg); min-height: 20px; }
.bx-a { margin: 8px 0 0 30px; font-family: var(--font-display); font-size: calc(14px / var(--tz, 1)); line-height: 1.55; color: var(--fg-2); }
.bx-a:empty { display: none; }
.bx-a .bx-w { animation: bx-w 0.45s ease-out both; }
@keyframes bx-w { from { opacity: 0; filter: blur(4px); } }
.bx-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--spark-text); animation: hb-blink 0.9s steps(1) infinite; }

/* Paused off screen. */
.bx.paused .bx-drift, .bx.paused .bx-orb { animation-play-state: paused; }

@media (max-width: 900px) {
  .bx { padding: 80px 0 70px; }
  .bx-stage { grid-template-columns: 1fr; gap: 14px; max-width: 520px; }
  .bx-page { min-height: 0; }
}
@media (max-width: 720px) {
  .bx-copy { margin-bottom: 30px; }
  .bx-copy > p { font-size: calc(15px / var(--tz, 1)); }
  .bx-bible { min-height: 0; padding: 12px; border-radius: 18px; }
  .bx-field { min-height: 430px; }
  /* Chips: the drawing beside the name. */
  .bx-slot { width: 46%; max-width: 160px; }
  .bx-slot.bx-center { width: 168px; }
  .bx-card:not(.bx-summary) { flex-direction: row; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 13px; }
  .bx-card:not(.bx-summary) .bx-art { width: 40px; height: 40px; flex: none; border-radius: 9px; }
  .bx-card:not(.bx-summary) .bx-name { margin: 0; min-width: 0; }
  .bx-card:not(.bx-summary) .bx-gist { display: none; }
  .bx-summary .bx-art { height: 64px; }
  .bx-prose { -webkit-line-clamp: 3; }
  .bx-a { margin-left: 0; font-size: calc(13.5px / var(--tz, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-drift, .bx-orb, .bx-copy h2 em { animation: none !important; }
}