/* THE BIBLE SCROLL (story/story.js, story/art.js) */
.sb { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.5); opacity: 0; transition: opacity 0.25s ease; }
.sb.open { opacity: 1; }
.sb[hidden] { display: none; }
html.sb-open, html.sb-open body { overflow: hidden; }
.sb-box { position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); height: min(760px, 100%); overflow: hidden; border-radius: 24px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 40px 80px -30px rgba(20, 16, 12, 0.6); transform: translateY(20px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sb.open .sb-box { transform: none; }
@media (max-width: 700px) { .sb { padding: 0; } .sb-box { width: 100%; height: 100%; border-radius: 0; border: none; } }

.sb-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--rule); background: var(--bg-raised); }
.sb-titles { flex: 1; min-width: 0; }
.sb-kicker { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sb-title { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.15; color: var(--ink); }
.sb-count { flex: none; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* one scene per screen, sideways */
.sb-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.sb-rail { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.sb-rail::-webkit-scrollbar { display: none; }
.sb-slide { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; }
.sb-scene { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #1A1614; }
.sb-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a fine grain over each picture, for a printed, grown-up finish */
.sb-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sb-text { padding: 18px 20px 24px; max-width: 720px; }
/* Like a real book: each scene is a page of warm paper, set in a book face. On a wide screen it's an
   open book, the picture on the left page and the story on the right, with the fold between them. */
.sb { --paper: #FBF6EA; --paper-edge: #E4D8BE; --book: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
body.site-dark .sb { --paper: #211D18; --paper-edge: #3A3229; }
.sb-rail, .sb-slide { background: var(--paper); }
@media (min-width: 900px) {
  .sb-slide { flex-direction: row; overflow: hidden; }
  .sb-slide .sb-scene { flex: 0 0 50%; aspect-ratio: auto; height: 100%; }
  .sb-slide .sb-scene::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 48px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.32)); } /* (the fold) */
  .sb-text { flex: 1; max-width: none; overflow-y: auto; padding: 44px 76px 40px 52px; background: linear-gradient(90deg, rgba(60, 40, 20, 0.16), rgba(60, 40, 20, 0.05) 18px, transparent 56px), var(--paper); } /* (the fold, and room on the right for the next arrow) */
  .sb-text > * { max-width: 620px; }
}
.sb-era { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--era); }
.sb-era i { width: 8px; height: 8px; border-radius: 50%; background: var(--era); }
body.site-dark .sb-era { color: color-mix(in srgb, var(--era) 60%, #fff); }
.sb-h { margin: 6px 0 12px; font-family: var(--book); font-weight: 400; font-size: clamp(24px, 5.5vw, 32px); line-height: 1.12; color: var(--ink); }
.sb-gist { margin: 0 0 18px; font-family: var(--book); font-size: 18px; line-height: 1.7; color: var(--ink); text-wrap: pretty; hyphens: manual; }
.sb-gist::first-letter { float: left; margin: 6px 8px 0 0; font-size: 3.35em; line-height: 0.8; color: var(--era); } /* (a drop cap, as a chapter opens) */
body.site-dark .sb-gist::first-letter { color: color-mix(in srgb, var(--era) 60%, #fff); }
.sb-folio { margin: 26px 0 0; font-family: var(--book); font-style: italic; font-size: 14px; color: var(--muted); text-align: center; letter-spacing: 0.08em; }
.sb-folio::before, .sb-folio::after { content: '·'; margin: 0 10px; opacity: 0.6; }
.sb-thread { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--era); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--era) 9%, transparent); font-family: var(--book); font-size: 16px; line-height: 1.6; color: var(--muted); }
.sb-thread b { color: var(--ink); }
.sb-who { margin: 0 0 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sb-people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sb-person { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 13.5px; line-height: 1.3; }
.sb-person small { font-size: 12px; color: var(--muted); }
.sb-person.is-linked { cursor: pointer; border-color: color-mix(in srgb, var(--era) 45%, var(--rule)); -webkit-tap-highlight-color: transparent; }
.sb-person.is-linked svg { width: 14px; height: 14px; align-self: center; color: var(--era); }
@media (hover: hover) { .sb-person.is-linked:hover { background: color-mix(in srgb, var(--era) 10%, var(--bg-raised)); } }
.sb-read { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 999px; background: var(--era); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.sb-read svg { width: 18px; height: 18px; }
.sb-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-dv, .sb-print { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid var(--era); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.sb-dv svg, .sb-print svg { width: 17px; height: 17px; color: var(--era); }
.sb-dv.is-done { background: color-mix(in srgb, var(--era) 14%, transparent); }
.sb-dv:hover, .sb-print:hover { background: color-mix(in srgb, var(--era) 12%, transparent); }
.sb-inline { padding: 0; border: none; background: none; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--era); text-underline-offset: 3px; cursor: pointer; }
/* the paths through it (story/paths.js): a row of chips under the head */
.sb-paths { flex: none; display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--bg-raised); }
.sb-paths::-webkit-scrollbar { display: none; }
.sb-path { flex: none; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sb-path:hover { color: var(--ink); border-color: var(--muted); }
.sb-path.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg-raised); }
.sb-path.is-back { color: var(--ink); }
.sb-path.is-here { cursor: default; }
.sb-immersive .sb-paths { display: none; }
.sb-many .sb-stop { flex: 0 1 3px; min-width: 0; width: 3px; height: 3px; border: none; background: var(--c); opacity: 0.5; }
.sb-many .sb-stop.is-on { opacity: 1; transform: scale(2.4); }

/* the road: where you are in the whole story */
.sb-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 22px 4px; border-top: 1px solid var(--rule); background: var(--bg-raised); }
/* back and next: the page's own edges. Each runs the full height of the page (of the picture, on a
   phone), a soft shade from the edge with one long, fine stroke in it, like the turned edge of a
   leaf. They come up when the pointer nears an edge, or for a moment after a turn, then fade away. */
.sb-nav { position: absolute; top: 0; bottom: 0; z-index: 5; display: flex; align-items: center; width: clamp(48px, 6vw, 84px); padding: 0; border: none; background: none; color: #FFF8EA; opacity: 0; cursor: pointer; transition: opacity 1.1s ease; -webkit-tap-highlight-color: transparent; }
.sb-nav::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 8, 0.34), rgba(20, 14, 8, 0.12) 45%, transparent); }
.sb-nav svg { position: relative; width: 14px; height: min(120px, 40%); margin-left: clamp(12px, 1.6vw, 22px); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sb-prev { left: 0; }
.sb-prev svg { transform: scaleX(-1); }
.sb-next { right: 0; justify-content: flex-end; }
.sb-next::before { background: linear-gradient(270deg, rgba(20, 14, 8, 0.34), rgba(20, 14, 8, 0.12) 45%, transparent); }
.sb-next svg { margin: 0 clamp(12px, 1.6vw, 22px) 0 0; }
.sb-nav:disabled { opacity: 0 !important; pointer-events: none; }
.sb-hint .sb-nav { opacity: 0.55; transition-duration: 0.3s; }
@media (hover: hover) {
  .sb-nav:hover, .sb-nav:focus-visible { opacity: 1; transition-duration: 0.3s; }
  .sb-next:hover svg { transform: translateX(3px); }
  .sb-prev:hover svg { transform: scaleX(-1) translateX(3px); }
}
.sb-nav:focus-visible { outline: none; }
.sb-nav:focus-visible svg { stroke-width: 2; }
@media (min-width: 900px) { /* (the open book: the next edge lies on the paper, so it's shaded and drawn in ink) */
  .sb-next { right: 10px; color: var(--ink); } /* (clear of the page's scrollbar) */
  .sb-next::before { background: linear-gradient(270deg, rgba(60, 40, 20, 0.14), rgba(60, 40, 20, 0.05) 50%, transparent); }
  .sb-next svg { filter: none; }
}
@media (max-width: 899px) { /* (the picture's full height: it's 16:10, the whole width; read on down, and they step aside) */
  .sb-stage { container-type: inline-size; }
  .sb-nav { bottom: auto; height: calc(100cqw * 10 / 16); width: 44px; }
  .sb-nav svg { height: 46%; margin-left: 10px; }
  .sb-next svg { margin: 0 10px 0 0; }
  .sb-reading .sb-nav { opacity: 0 !important; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .sb-nav, .sb-nav svg { transition: none; } }
.sb-road { flex: 1; display: flex; align-items: center; justify-content: space-between; position: relative; height: 28px; }
.sb-road::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--road, #999); opacity: 0.45; }
.sb-stop { position: relative; width: 11px; height: 11px; padding: 0; border: 2.5px solid var(--c); border-radius: 50%; background: var(--bg-raised); cursor: pointer; transition: transform 0.2s, background 0.2s; }
.sb-stop::before { content: ''; position: absolute; inset: -10px -4px; } /* a bigger target */
.sb-stop.is-past { background: color-mix(in srgb, var(--c) 45%, var(--bg-raised)); }
.sb-stop.is-on { transform: scale(1.6); background: var(--c); }
.sb-where { flex: none; padding: 2px 16px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--bg-raised); font-family: var(--sans); font-size: 12.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { /* seventy stops: small pips on a phone (swipe, or the arrows, to move) */
  .sb-foot { gap: 8px; }
  .sb-stop { width: 4px; height: 4px; border: none; background: var(--c); opacity: 0.5; }
  .sb-stop::before { inset: -12px -1px; }
  .sb-stop.is-past { background: var(--c); opacity: 0.9; }
  .sb-stop.is-on { transform: scale(2.6); opacity: 1; }
}

/* ---------------------------------------------------------------- the scenes' motion
   Quiet loops, and only on the scene you're looking at. */
.sb-slide:not(.is-live) .sb-scene * { animation-play-state: paused !important; }
.sb-scene [class*="a-"], .sb-scene [class*="dg-"] { transform-box: fill-box; transform-origin: center; }
.a-twinkle { animation: a-twinkle 3.2s ease-in-out infinite; }
@keyframes a-twinkle { 50% { opacity: 0.2; } }
.a-dawn { animation: a-dawn 12s ease-in-out infinite; }
@keyframes a-dawn { 0%, 10% { opacity: 0; } 50%, 100% { opacity: 0.22; } }
.a-sunrise { animation: a-sunrise 12s ease-in-out infinite; }
@keyframes a-sunrise { 0% { transform: translateY(70px); opacity: 0.4; } 50%, 100% { transform: none; opacity: 1; } }
.a-spin-slow { transform-box: view-box !important; animation: a-spin 90s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
.a-shimmer { animation: a-shimmer 4s ease-in-out infinite; }
@keyframes a-shimmer { 50% { opacity: 0.25; transform: translateX(10px); } }
.a-flap { animation: a-flap 0.55s ease-in-out infinite alternate; }
@keyframes a-flap { to { transform: scaleY(0.35); } }
.a-fly { transform-box: view-box !important; animation: a-fly 22s linear infinite; }
@keyframes a-fly { from { transform: translate(-160px, 20px); } to { transform: translate(900px, -30px); } }
.a-sway { transform-box: view-box !important; animation: a-sway 6s ease-in-out infinite; }
@keyframes a-sway { 50% { transform: rotate(1.6deg); } }
.a-drift { animation: a-drift 30s ease-in-out infinite alternate; }
@keyframes a-drift { to { transform: translateX(60px); } }
.a-flicker { animation: a-flicker 2.6s ease-in-out infinite; }
@keyframes a-flicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.8; } 55% { opacity: 0.95; } 75% { opacity: 0.75; } }
.a-flame { animation: a-flame 0.9s ease-in-out infinite alternate; transform-origin: 50% 100% !important; }
@keyframes a-flame { from { transform: scale(0.92, 0.9) skewX(-3deg); } to { transform: scale(1.05, 1.12) skewX(3deg); } }
.a-rain { animation: a-rain 0.8s linear infinite; transform-box: view-box !important; }
@keyframes a-rain { to { transform: translate(-18px, 500px); } }
.a-bolt { animation: a-bolt 7s linear infinite; }
@keyframes a-bolt { 0%, 40% { opacity: 0; } 41% { opacity: 1; } 43% { opacity: 0; } 45% { opacity: 0.85; } 48%, 100% { opacity: 0; } }
.a-waves { transform-box: view-box !important; animation: a-waves 7s linear infinite; }
.a-waves-slow { transform-box: view-box !important; animation: a-waves 12s linear infinite reverse; }
@keyframes a-waves { to { transform: translateX(-240px); } }
.a-smoke { animation: a-smoke 9s ease-in-out infinite; }
@keyframes a-smoke { 0% { transform: translate(0, 0); opacity: 0.9; } 100% { transform: translate(40px, -40px) scale(1.2); opacity: 0; } }

/* creation */
/* fall */
.a-slither { animation: a-slither 4s ease-in-out infinite; }
@keyframes a-slither { 50% { transform: translateX(6px) scaleX(1.04); } }
.a-leave { transform-box: view-box !important; animation: a-leave 14s linear infinite; }
@keyframes a-leave { 0% { transform: translateX(40px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(-120px); opacity: 0; } }
.a-fall { animation: a-fall 8s linear infinite; }
@keyframes a-fall { from { transform: translate(0, 0) rotate(0); opacity: 0.9; } to { transform: translate(-40px, 220px) rotate(260deg); opacity: 0; } }
/* flood */
.a-ride { transform-box: view-box !important; transform-origin: 400px 340px !important; animation: a-ride 5s ease-in-out infinite; }
@keyframes a-ride { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(8px); } }
.a-rainbow { animation: a-rainbow 16s ease-in-out infinite; }
@keyframes a-rainbow { 0%, 55% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sb-scene .a-dove { transform-box: view-box; animation: a-dove 16s ease-in-out infinite; }
@keyframes a-dove { 0%, 60% { transform: translate(840px, 120px); } 90% { transform: translate(430px, 200px); } 100% { transform: translate(410px, 250px); opacity: 0; } }
/* abraham */
.a-shoot { transform-box: view-box !important; animation: a-shoot 9s ease-out infinite; }
@keyframes a-shoot { 0%, 70% { transform: translate(700px, 40px); opacity: 0; } 72% { opacity: 1; } 80% { transform: translate(560px, 94px); opacity: 0; } 100% { opacity: 0; } }
/* exodus */
.a-wall { animation: a-wall 5s ease-in-out infinite; }
@keyframes a-wall { 50% { transform: translateY(-5px); } }
.a-foam { animation: a-shimmer 3s ease-in-out infinite; }
.a-march { transform-box: view-box !important; animation: a-march 10s linear infinite; }
@keyframes a-march { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
/* sinai */
.a-tablets { animation: a-tablets 4s ease-in-out infinite; }
@keyframes a-tablets { 50% { filter: drop-shadow(0 0 8px #FFE6A8); } }
/* jericho */
.a-crumble { transform-box: view-box !important; animation: a-crumble 10s ease-in infinite; }
@keyframes a-crumble { 0%, 60% { transform: none; } 62% { transform: translateX(-3px); } 64% { transform: translateX(3px); } 80%, 92% { transform: translateY(30px) scaleY(0.6); opacity: 0.6; } 100% { transform: none; opacity: 1; } }
.a-dust { animation: a-dustpuff 10s ease-out infinite; }
@keyframes a-dustpuff { 0%, 64% { opacity: 0; transform: scale(0.6); } 72% { opacity: 0.8; } 92%, 100% { opacity: 0; transform: scale(1.3); } }
.a-stones { animation: a-stones 10s ease-in infinite; }
@keyframes a-stones { 0%, 62% { transform: none; opacity: 0; } 64% { opacity: 1; } 80% { transform: translateY(60px) rotate(40deg); opacity: 1; } 90%, 100% { opacity: 0; } }
/* judges */
.a-torch { animation: a-torch 6s ease-out infinite; }
@keyframes a-torch { 0%, 30% { opacity: 0; transform: scale(0.4); } 36% { opacity: 1; transform: scale(1.2); } 45%, 100% { opacity: 1; transform: none; } }
.a-shards { animation: a-torch 6s ease-out infinite; }
/* ruth */
.a-wheat { transform-box: view-box !important; animation: a-sway 5s ease-in-out infinite; transform-origin: 400px 500px !important; }
.a-glean { transform-box: view-box !important; animation: a-glean 6s ease-in-out infinite; transform-origin: 300px 430px !important; }
@keyframes a-glean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
/* david and goliath */
.dg-sling { transform-box: view-box !important; transform-origin: 214px 268px !important; animation: dg-sling 7s linear infinite; }
@keyframes dg-sling { 0% { transform: rotate(0); } 30% { transform: rotate(1440deg); } 31%, 100% { transform: rotate(1440deg); opacity: 0; } }
.dg-stone { transform-box: view-box !important; animation: dg-stone 7s linear infinite; }
@keyframes dg-stone { 0%, 30% { transform: none; opacity: 0; } 31% { opacity: 1; } 42% { transform: translate(350px, -100px); opacity: 1; } 43%, 100% { transform: translate(350px, -100px); opacity: 0; } }
.dg-giant { transform-box: view-box !important; transform-origin: 600px 338px !important; animation: dg-giant 7s ease-in infinite; }
@keyframes dg-giant { 0%, 42% { transform: none; } 44% { transform: rotate(-3deg); } 58%, 86% { transform: rotate(82deg) translateY(12px); } 88%, 94% { transform: rotate(82deg) translateY(12px); opacity: 0; } 97%, 100% { transform: none; opacity: 1; } }
.dg-spear { transform-box: view-box !important; transform-origin: 646px 200px !important; animation: dg-spear 3.5s ease-in-out infinite; }
@keyframes dg-spear { 50% { transform: rotate(-3deg); } }
.dg-hit { animation: dg-hit 7s linear infinite; }
@keyframes dg-hit { 0%, 41% { opacity: 0; transform: scale(0.4); } 43% { opacity: 1; transform: scale(1.2); } 50%, 100% { opacity: 0; transform: scale(1.7); } }
.dg-dust { animation: dg-dust 7s ease-out infinite; }
@keyframes dg-dust { 0%, 56% { opacity: 0; transform: scale(0.5); } 60% { opacity: 0.7; } 76%, 100% { opacity: 0; transform: scale(1.8); } }
.a-cheer { animation: a-cheer 7s ease-in-out infinite; }
@keyframes a-cheer { 0%, 58% { transform: none; } 62%, 70% { transform: translateY(-5px); } 66%, 74%, 100% { transform: none; } }
/* elijah */
.a-firefall { transform-box: view-box !important; animation: a-firefall 9s ease-in infinite; }
@keyframes a-firefall { 0%, 25% { opacity: 0; transform: translateY(-120px); } 30% { opacity: 1; } 38% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: none; } }
.a-altarfire { animation: a-altarfire 9s ease-out infinite; }
@keyframes a-altarfire { 0%, 36% { opacity: 0; transform: scale(0.3); } 42% { opacity: 1; transform: scale(1.1); } 50%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.a-altarglow { animation: a-altarfire 9s ease-out infinite; }
.a-fallface { transform-box: view-box !important; animation: a-fallface 9s ease-in-out infinite; }
@keyframes a-fallface { 0%, 40% { transform: none; } 48%, 88% { transform: translateY(12px) scaleY(0.8); } 100% { transform: none; } }
.a-raincloud { animation: a-raincloud 9s ease-in-out infinite; }
@keyframes a-raincloud { 0%, 70% { transform: scale(0.4); opacity: 0; } 90%, 100% { transform: scale(1.3); opacity: 1; } }
/* jonah */
.a-ship { transform-box: view-box !important; transform-origin: 310px 280px !important; animation: a-ship 3.2s ease-in-out infinite; }
@keyframes a-ship { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) translateY(6px); } }
.sb-scene .a-fish { transform-box: view-box; animation: a-fish 12s ease-in-out infinite; }
@keyframes a-fish { 0% { transform: translate(800px, 0); } 45% { transform: translate(200px, -6px); } 55% { transform: translate(140px, 0); } 100% { transform: translate(-400px, 10px); } }
.a-jonah { transform-box: view-box !important; animation: a-jonah 12s ease-in infinite; }
@keyframes a-jonah { 0%, 32% { transform: none; opacity: 1; } 44% { transform: translate(-6px, 120px); opacity: 1; } 47%, 88% { transform: translate(-6px, 130px); opacity: 0; } 92%, 100% { transform: none; opacity: 1; } }
/* daniel */
.a-shaft { animation: a-shaft 6s ease-in-out infinite; }
@keyframes a-shaft { 50% { opacity: 0.75; } }
.a-breathe { transform-box: view-box !important; animation: a-breathe 4s ease-in-out infinite; }
@keyframes a-breathe { 50% { transform: scaleY(1.03); } }
/* esther */
.a-scepter { transform-box: view-box !important; animation: a-scepter 8s ease-in-out infinite; }
@keyframes a-scepter { 0%, 30% { transform: rotate(-40deg); } 50%, 90% { transform: none; } 100% { transform: rotate(-40deg); } }
.a-approach { transform-box: view-box !important; animation: a-approach 8s ease-in-out infinite; }
@keyframes a-approach { 0% { transform: translateX(-40px); } 45%, 100% { transform: none; } }
/* birth */
.a-starpulse { transform-box: view-box !important; animation: a-starpulse 4s ease-in-out infinite; transform-origin: 470px 90px !important; }
@keyframes a-starpulse { 50% { transform: scale(1.12); opacity: 0.85; } }
.a-caravan { transform-box: view-box !important; animation: a-caravan 40s linear infinite; }
@keyframes a-caravan { from { transform: translateX(160px); } to { transform: translateX(-60px); } }
.a-lookup { animation: none; }
/* ministry */
.a-rock { transform-box: view-box !important; transform-origin: 460px 400px !important; animation: a-ride 4s ease-in-out infinite; }
.a-fishjump { animation: a-fishjump 2.4s ease-in-out infinite; }
@keyframes a-fishjump { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) rotate(-20deg); } }
/* cross */
.a-eclipse { transform-box: view-box !important; animation: a-eclipse 14s ease-in-out infinite; }
@keyframes a-eclipse { 0% { transform: translate(40px, 0); } 50%, 80% { transform: translate(-12px, 4px); } 100% { transform: translate(40px, 0); } }
/* resurrection */
.a-approach2 { transform-box: view-box !important; animation: a-approach2 12s ease-in-out infinite; }
@keyframes a-approach2 { 0% { transform: translateX(120px); opacity: 0; } 15% { opacity: 1; } 60%, 100% { transform: none; } }
/* pentecost */
.a-wind { animation: a-wind 5s ease-in-out infinite; }
@keyframes a-wind { 0% { transform: translateX(-80px); opacity: 0; } 30% { opacity: 0.5; } 100% { transform: translateX(120px); opacity: 0; } }
.a-tongue { animation: a-torch 7s ease-out infinite; }
/* paul */
.a-route { animation: a-route 3s linear infinite; }
@keyframes a-route { to { stroke-dashoffset: -24; } }
.sb-scene .a-voyage { transform-box: view-box; animation: a-voyage 24s ease-in-out infinite; }
@keyframes a-voyage { 0% { transform: translate(640px, 250px); } 33% { transform: translate(500px, 220px); } 66% { transform: translate(360px, 250px); } 100% { transform: translate(200px, 230px); } }
/* new creation */
.a-walkin { transform-box: view-box !important; animation: a-march 12s ease-in-out infinite; }

/* babel */
.a-crane { transform-box: view-box !important; transform-origin: 470px 100px !important; animation: a-sway 5s ease-in-out infinite; }
.a-scatterL, .a-scatterR { transform-box: view-box !important; animation: a-scatterL 12s ease-in-out infinite; }
.a-scatterR { animation-name: a-scatterR; }
@keyframes a-scatterL { 0%, 45% { transform: none; opacity: 1; } 75%, 88% { transform: translateX(-70px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@keyframes a-scatterR { 0%, 45% { transform: none; opacity: 1; } 75%, 88% { transform: translateX(70px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.a-babble { animation: a-babble 6s ease-out infinite both; }
@keyframes a-babble { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translateY(-70px); opacity: 0; } }
/* jacob */
.a-ascend, .a-descend { transform-box: view-box !important; animation: a-ascend 9s linear infinite both; }
.a-descend { animation-name: a-descend; }
@keyframes a-ascend { 0% { transform: none; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translate(78px, -360px) scale(0.6); opacity: 0; } }
@keyframes a-descend { 0% { transform: none; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-70px, 330px) scale(1.3); opacity: 0; } }
/* wilderness, and the golden calf */
.a-glint { animation: a-glint 3.4s ease-in-out infinite; }
@keyframes a-glint { 50% { opacity: 0.35; } }
/* samuel */
.a-voice circle { transform-box: fill-box; transform-origin: center; animation: a-voice 3.9s ease-out infinite both; }
@keyframes a-voice { 0% { transform: scale(0.3); opacity: 0; } 20% { opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
/* solomon */
.a-glory { animation: a-glory 7s ease-in-out infinite; }
@keyframes a-glory { 0%, 100% { transform: scale(0.94); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
/* the divided kingdom */
.a-splitL, .a-splitR { transform-box: view-box !important; animation: a-splitL 8s ease-in-out infinite; }
.a-splitR { animation-name: a-splitR; }
@keyframes a-splitL { 50% { transform: translateX(-8px); } }
@keyframes a-splitR { 50% { transform: translateX(8px); } }
.a-crack { animation: a-crack 8s ease-in-out infinite; }
@keyframes a-crack { 50% { transform: scaleX(2.2); } }
/* isaiah, and the throne */
.a-train { animation: a-shimmer 7s ease-in-out infinite; }
.a-hover, .a-hover2 { animation: a-hover 4.5s ease-in-out infinite; }
.a-hover2 { animation-delay: -2.2s; }
@keyframes a-hover { 50% { transform: translateY(-9px); } }
.a-cast { transform-box: view-box !important; animation: a-cast 9s ease-in-out infinite; }
@keyframes a-cast { 0%, 55% { transform: none; } 68%, 86% { transform: translateY(9px); } 100% { transform: none; } }
/* josiah */
.a-topple { transform-box: view-box !important; transform-origin: 192px 400px !important; animation: a-topple 10s ease-in infinite; }
@keyframes a-topple { 0%, 35% { transform: none; opacity: 1; } 50%, 86% { transform: rotate(-84deg); opacity: 1; } 94% { transform: rotate(-84deg); opacity: 0; } 100% { transform: none; opacity: 0; } }
.a-unroll { animation: a-unroll 8s ease-in-out infinite; }
@keyframes a-unroll { 0%, 100% { transform: scaleX(0.15); } 25%, 80% { transform: none; } }
/* return */
.a-brick { animation: a-brick 12s ease-out infinite both; }
@keyframes a-brick { 0% { transform: translateY(-26px); opacity: 0; } 6% { transform: none; opacity: 1; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* baptism */
.a-heaven { animation: a-glint 6s ease-in-out infinite; }
.sb-scene .a-dove2 { transform-box: view-box; animation: a-dove2 10s ease-in-out infinite; }
@keyframes a-dove2 { 0% { transform: translate(430px, -30px); opacity: 0; } 10% { opacity: 1; } 55%, 85% { transform: translate(422px, 300px); opacity: 1; } 100% { transform: translate(422px, 300px); opacity: 0; } }
.a-ripple ellipse { transform-box: fill-box; transform-origin: center; animation: a-ripple 3.6s ease-out infinite both; }
@keyframes a-ripple { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
/* the storm, and the calm */
.a-storm { animation: a-storm 14s ease-in-out infinite; }
@keyframes a-storm { 0%, 44% { opacity: 1; } 54%, 90% { opacity: 0; } 100% { opacity: 1; } }
.a-calm { animation: a-calm 14s ease-in-out infinite; }
@keyframes a-calm { 0%, 44% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }
.a-tossed { transform-box: view-box !important; transform-origin: 400px 350px !important; animation: a-tossed 14s ease-in-out infinite; }
@keyframes a-tossed { 0% { transform: rotate(-9deg) translateY(4px); } 7% { transform: rotate(9deg) translateY(-12px); } 14% { transform: rotate(-9deg) translateY(6px); } 21% { transform: rotate(8deg) translateY(-10px); } 28% { transform: rotate(-9deg) translateY(6px); } 35% { transform: rotate(8deg) translateY(-8px); } 44% { transform: rotate(-6deg); } 54%, 90% { transform: rotate(0); } 100% { transform: rotate(-9deg) translateY(4px); } }
/* lazarus */
.a-comeout { transform-origin: 50% 100% !important; animation: a-comeout 9s ease-out infinite; }
@keyframes a-comeout { 0%, 15% { transform: scale(0.75); opacity: 0; } 45%, 88% { transform: translateY(6px); opacity: 1; } 100% { transform: scale(0.75); opacity: 0; } }
/* the last supper */
.a-breakL, .a-breakR { animation: a-breakL 7s ease-in-out infinite; }
.a-breakR { animation-name: a-breakR; }
@keyframes a-breakL { 0%, 30% { transform: none; } 45%, 85% { transform: translate(-8px, -2px) rotate(-8deg); } 100% { transform: none; } }
@keyframes a-breakR { 0%, 30% { transform: none; } 45%, 85% { transform: translate(8px, -2px) rotate(8deg); } 100% { transform: none; } }
/* ascension */
.a-rise { animation: a-rise 10s ease-in-out infinite; }
@keyframes a-rise { 0% { transform: translateY(40px); opacity: 0.6; } 50% { opacity: 1; } 100% { transform: translateY(-60px) scale(0.85); opacity: 0.3; } }
/* damascus */
.a-flash { animation: a-flash 6s ease-in-out infinite; }
/* the church's story to the end (story/art.js): the prison shaking, its door swinging open, hymns
   rising in the dark, and a runner on the track */
.a-quake { transform-box: view-box !important; animation: a-quake 8s linear infinite; }
@keyframes a-quake { 0%, 58%, 76%, 100% { transform: none; } 60% { transform: translate(-5px, 2px); } 62% { transform: translate(5px, -2px); } 64% { transform: translate(-4px, -1px); } 66% { transform: translate(4px, 2px); } 68% { transform: translate(-3px, 1px); } 72% { transform: translate(2px, -1px); } }
.a-door { transform-box: view-box !important; animation: a-door 8s ease-out infinite; }
@keyframes a-door { 0%, 62% { transform: none; } 74%, 94% { transform: scaleX(0.18); } 100% { transform: none; } }
.a-sing { animation: a-sing 4.2s ease-out infinite; }
@keyframes a-sing { 0% { transform: translate(0, 10px); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translate(24px, -90px); opacity: 0; } }
.a-run { transform-box: view-box !important; animation: a-run 6s ease-in-out infinite; }
@keyframes a-run { 0% { transform: translate(-60px, 26px); } 50% { transform: translate(60px, -14px); } 100% { transform: translate(-60px, 26px); } }
@keyframes a-flash { 0%, 100% { opacity: 0.7; } 12% { opacity: 1; } 16% { opacity: 0.85; } 20% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sb-scene * { animation: none !important; }
  .sb-scene .a-dove, .sb-scene .a-rainbow { opacity: 1; }
  .sb-scene .a-dove { transform: translate(410px, 250px); }
  .sb-scene .a-dove2 { transform: translate(422px, 300px); }
  .sb-scene .a-calm { opacity: 0; }
  .sb, .sb-box { transition: none; }
}
/* While a person from the Scroll is open in the family tree: the kids' stage or game it was
   opened over waits out of sight, and so does the devotion's own "Back" (the Scroll's comes first) */
html.sb-parked .ks, html.sb-parked .gg { visibility: hidden; }

/* the road's handle (story.js): press and hold, then slide through the scenes */
.sb-road { touch-action: none; -webkit-user-select: none; user-select: none; }
.sb-road::before { transition: opacity 0.25s, height 0.25s, margin 0.25s; }
.sb-stop { scale: var(--m, 1); transition: transform 0.2s, background 0.2s, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sb-knob { position: absolute; left: 0; top: 50%; z-index: 2; width: 26px; height: 26px; transform: translate(calc(var(--x, 0px) - 50%), calc(-50% + var(--ky, 0px))); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); cursor: grab; touch-action: none; }
.sb-knob i { position: absolute; inset: 3px; border-radius: 50%; background: var(--kc, var(--coral)); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1), box-shadow 0.3s; }
.sb-tip { position: absolute; left: 50%; bottom: calc(100% + 86px); width: max-content; max-width: min(300px, 84vw); padding: 10px 16px; border-radius: 18px; background: var(--kc, var(--coral)); color: #fff; font: 800 18px/1.25 var(--sans); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.5); transform: translate(calc(-50% + var(--tx, 0px)), 14px) scale(0.6); transform-origin: 50% 100%; opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.2s; }
.sb-tip b { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.sb-tip::after { content: ''; position: absolute; left: calc(50% - var(--tx, 0px)); bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: inherit; transform: rotate(45deg); }
.sb-waving .sb-knob { transition: none; }
.sb-scrubbing .sb-knob { cursor: grabbing; }
.sb-scrubbing .sb-knob i { transform: scale(2.3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--kc) 30%, transparent), 0 10px 18px -4px rgba(0, 0, 0, 0.45); }
.sb-scrubbing .sb-tip { transform: translate(calc(-50% + var(--tx, 0px)), 0) scale(1); opacity: 1; }
.sb-scrubbing .sb-road::before { opacity: 1; height: 5px; margin-top: -2.5px; }
.sb-scrubbing .sb-stop { transition: transform 0.2s, background 0.2s, scale 0.12s ease-out; }
@media (prefers-reduced-motion: reduce) { .sb-knob, .sb-knob i, .sb-tip, .sb-stop { transition: none; } }
/* turning scenes: a page turn (story.js; the pieces are reader.css's .br-peel), not a sideways scroll */
.sb-rail { overflow-x: hidden; scroll-snap-type: none; touch-action: pan-y; }
/* (and on the pages too: each scrolls up and down on its own, and a scroller doesn't take on the rail's
   pan-y, so without this, once a page is scrolled, a sideways finger was the browser's, not the turn's) */
.sb-slide, .sb-slide *, .sb-peel, .sb-peel * { touch-action: pan-y pinch-zoom; }
.sb-peel { z-index: 3; }
.sb-peel .sb-slide { position: absolute; left: 0; top: 0; }
.sb-peel, .sb-peel * { animation: none !important; transition: none !important; } /* (the pages' copies hold still while they turn: less for the phone to draw) */
/* the road, bending: drawn as a line through the bend while the handle's held (story.js), the stops
   riding on it; flat again, it's the plain road */
.sb-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.sb-wave path { fill: none; stroke: url(#sb-wave-g); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sb-waving .sb-wave { opacity: 1; }
.sb-waving .sb-road::before { opacity: 0 !important; }
.sb-waving .sb-stop { transition: transform 0.2s, background 0.2s; }

/* ---------------------------------------------------------------- reading mode (story.js): just the book
   on a dark desk, no head, no road; the arrows and the way out come back when the pointer moves */
.sb-immerse { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12px var(--sans); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sb-immerse svg { width: 16px; height: 16px; }
@media (hover: hover) { .sb-immerse:hover { border-color: var(--coral); color: var(--gold); } }
@media (max-width: 560px) { .sb-immerse { width: 38px; padding: 0; justify-content: center; } .sb-immerse span { display: none; } }
.sb-unimmerse { display: none; position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 7; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(20, 16, 12, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #F4ECDC; opacity: 0; cursor: pointer; transition: opacity 0.3s; }
.sb-unimmerse svg { width: 18px; height: 18px; }
.sb.sb-immersive { padding: 0; background: #14110D; }
.sb.sb-immersive .sb-box { width: 100%; height: 100%; border: none; border-radius: 0; background: transparent; box-shadow: none; }
.sb-immersive .sb-head, .sb-immersive .sb-foot, .sb-immersive .sb-where { display: none; }
.sb-immersive .sb-stage { width: min(100% - 48px, 1560px); margin: max(24px, env(safe-area-inset-top)) auto max(28px, env(safe-area-inset-bottom)); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 0 var(--paper-edge), 0 4px 0 color-mix(in srgb, var(--paper-edge) 80%, #000), 0 6px 0 var(--paper-edge), 0 40px 90px -20px rgba(0, 0, 0, 0.85); } /* (the pages' edges, stacked) */
.sb-immersive .sb-unimmerse { display: grid; }
.sb-immersive.sb-awake .sb-unimmerse, .sb-unimmerse:focus-visible { opacity: 1; }
@media (hover: hover) { .sb-immersive:not(.sb-awake) .sb-nav { opacity: 0; } .sb-immersive:not(.sb-awake) .sb-box { cursor: none; } }
@media (hover: none) { .sb-immersive .sb-unimmerse { opacity: 0.7; } }
@media (max-width: 899px) { .sb-immersive .sb-stage { width: 100%; margin: 0; border-radius: 0; box-shadow: none; } }
@media (max-width: 440px) { /* (a phone's head: room for the title beside the buttons; the road shows where you are) */
  .sb-head .sb-count { display: none; }
  .sb-kicker, .sb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}