/* ============================================================
   The home page's six stages — "Show, Don't Tell".

   Approved 2026-09-14. The feature cards used to describe what the
   site does; each now carries a small scene that shows it happening,
   and the copy shrank to make room.

   THE RULE THIS FILE OBEYS: every block under `.ui` below is copied
   from the site's own stylesheets, at the same pixel values, and each
   block names where it came from. Nothing is re-tuned for the scene —
   the whole miniature is one `transform: scale()`, so what a reader
   sees is the real component, smaller. Shrinking a component's own
   font is what makes a miniature look fake, and it is not done here.

   These are copies, not the stylesheet itself: the reader's CSS is
   inline in bible.html and cannot be linked. When you change a rule
   there, change it here. `scripts/check_scene_css.py` compares the
   two and fails the build when they part company.

   Tokens are styles.css's own (:root there).
   ============================================================ */

/* ---- the card that carries a stage ---- */
.feature-grid{gap:22px}
.scene-card{padding:0;overflow:hidden}
.scene-card .card-body{padding:26px 28px 28px;position:relative}
.scene-card h3{margin-top:0;margin-bottom:10px;padding-right:104px}
.scene-card .card-foot{margin-top:14px}

.stage{position:relative;display:block;height:176px;overflow:hidden;
  background:#070B1C;border-bottom:1px solid rgba(142,153,194,.16);
  text-decoration:none;color:inherit}
.stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 76%,rgba(4,6,15,.42))}
.stage:hover::after{background:linear-gradient(180deg,transparent 82%,rgba(4,6,15,.3))}
.stage:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
/* `--k` carries the card's width relative to the desk card the scales were
   measured against, so one number per breakpoint fits every scene at once */
.ui{position:absolute;left:0;top:0;width:var(--w,740px);height:var(--h,auto);
  transform:scale(calc(var(--s,.6) * var(--k,1)));transform-origin:top left;
  font-family:var(--font-body);pointer-events:none}

/* ---- copied from bible.html: the reader ---- */
.ui .verse{display:flex;gap:13px;padding:9px 12px;border-radius:12px;
  line-height:1.75;font-size:16.5px;font-weight:300;position:relative;color:var(--starlight)}
.ui .vnum{font-family:var(--font-display);font-size:12px;color:var(--gold);
  min-width:22px;text-align:right;padding-top:7px;flex:none;opacity:.85}
.ui .verse.sel{background:rgba(232,184,115,.09);box-shadow:inset 2px 0 0 var(--gold)}
.ui .wj{color:#F27676}
.ui .chapHead{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;padding:0 12px}
.ui .chapHead h2{font-family:var(--font-display);font-size:24px;letter-spacing:.06em;
  margin:0;font-weight:600;color:var(--starlight)}
.ui .chapHead .grp{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua)}
.ui .verSelect{border:1px solid var(--line-faint);border-radius:10px;padding:7px 12px;
  background:rgba(13,18,40,.7);color:var(--starlight);font:500 12px var(--font-body)}

/* ---- copied from bible/desk.css: the rail ---- */
.ui .rail{position:absolute;left:0;top:0;bottom:0;width:150px;padding:12px 10px;
  border-right:1px solid var(--line-faint);background:rgba(10,15,34,.55);overflow:hidden}
.ui .rlLbl{font:600 10.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.ui .rlGrp{font:600 10px var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  margin:7px 0 2px;padding-left:8px;color:var(--aqua)}
.ui .rlBook{padding:5px 8px;border-radius:8px;color:#B4BDDD;font:400 13px var(--font-body);display:block}
.ui .rlBook.on{background:rgba(232,184,115,.12);color:#F5D9A8;font-weight:600}
.ui .rlChapters{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:4px 0 8px}
.ui .rlCh{height:22px;border-radius:7px;border:1px solid rgba(142,153,194,.2);color:var(--faint);
  display:flex;align-items:center;justify-content:center;font:400 11.5px var(--font-body)}
.ui .rlCh.on{background:rgba(232,184,115,.18);border-color:var(--gold);color:#F5D9A8;font-weight:600}

/* ---- copied from bible.html + bible/desk.css: the study panel ---- */
.ui .panel{position:absolute;right:0;top:0;bottom:0;width:212px;padding:14px 16px;
  border-left:1px solid var(--hairline);background:rgba(10,15,34,.72);overflow:hidden}
.ui .pRefRow{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ui .pRef{font-family:var(--font-display);font-size:21px;color:var(--gold);letter-spacing:.05em;flex:1}
.ui .pStep{background:none;border:1px solid rgba(232,184,115,.35);color:var(--gold);
  border-radius:999px;width:28px;height:28px;font-size:16px;line-height:1;flex:none;
  display:flex;align-items:center;justify-content:center}
.ui .pTabs{display:flex;gap:4px;margin:2px 0 16px;flex-wrap:wrap}
.ui .pTabs span{padding:6px 9px;border-radius:999px;background:none;border:1px solid var(--line-faint);
  color:var(--faint);font:600 9.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.ui .pTabs span.on{color:var(--gold);border-color:var(--hairline);background:rgba(232,184,115,.08)}
.ui .pSec{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
  margin:20px 0 10px;display:flex;align-items:center;gap:8px;font-family:var(--font-body)}
.ui .pSec::after{content:'';flex:1;height:1px;background:var(--line-faint)}
.ui .xr{display:block;width:100%;text-align:left;padding:11px 13px;border-radius:12px;
  background:rgba(13,18,40,.5);border:1px solid var(--line-faint);margin-bottom:8px;
  color:var(--starlight);font:300 13.5px var(--font-body);line-height:1.55}
.ui .xr b{display:block;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  color:var(--aqua);letter-spacing:.06em;margin-bottom:3px}

/* ---- copied from bible/desk.css: the name sheet ---- */
.ui .entName{border-bottom:1px dotted rgba(232,184,115,.65);padding-bottom:1px}
.ui .entSheet{position:absolute;width:360px;padding:14px 16px 14px;border-radius:16px;
  background:rgba(10,15,34,.97);border:1px solid rgba(232,184,115,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.6);font:400 13px var(--font-body);
  color:var(--starlight);line-height:1.5}
.ui .esEyebrow{font:600 10.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ui .esName{font-family:var(--font-display);font-size:20px;letter-spacing:.05em;margin:4px 0 2px;line-height:1.2}
.ui .esOrig{font-size:12px;color:var(--faint);margin-bottom:6px}
.ui .esShort{margin:6px 0 4px;font-size:13px;color:#DDE3F5;font-weight:300}
.ui .esShort strong{font-weight:600;color:var(--starlight)}
.ui .esDict{margin:4px 0 6px;font-size:12.5px;color:var(--faint);font-weight:300}
.ui .esDict b{color:var(--gold);font-weight:600}
.ui .esBtns{display:flex;gap:8px;margin-top:10px}
.ui .esBtn{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 12px;
  border-radius:999px;background:linear-gradient(105deg,#FDF6E8,var(--gold));
  color:#1a1206;font:600 12.5px var(--font-body)}
.ui .esBtn.ghost{background:none;border:1px solid rgba(232,184,115,.5);color:var(--gold)}
.ui .esCredit{margin-top:10px;font-size:10.5px;color:rgba(142,153,194,.7);text-align:center}

/* ---- copied from bible/desk.css: the Sage tab ---- */
/* Sage's face beside the answer — copied from bible/desk.css .sgRow/.sgAvatar */
.ui .sgRow{display:flex;align-items:flex-start;gap:8px}
.ui .sgRow .sgBubble{flex:1;min-width:0}
.ui .sgAvatar{flex:none;width:36px;height:36px;padding:2px;border-radius:50%;overflow:hidden;
  background:rgba(10,15,34,.9);border:1px solid rgba(232,184,115,.35);
  box-shadow:0 0 9px rgba(232,184,115,.1)}
.ui .sgAvatar img{display:block;width:100%;height:100%;object-fit:contain}
.ui .sgThread{display:flex;flex-direction:column;gap:10px}
.ui .sgBubble{border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.6}
.ui .sgBubble.me{background:rgba(232,184,115,.12);border:1px solid rgba(232,184,115,.3);
  margin-left:120px;color:var(--starlight)}
.ui .sgBubble.sage{background:rgba(17,22,44,.85);border:1px solid rgba(142,153,194,.22);color:var(--starlight)}
.ui .sgCite{display:inline-flex;align-items:center;font:600 10px var(--font-body);color:var(--aqua);
  border:1px solid rgba(91,227,213,.4);border-radius:6px;padding:0 5px;margin:0 2px;
  vertical-align:1px;line-height:16px}
.ui .sgSources{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ui .sgSrc{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;
  border:1px solid rgba(142,153,194,.28);color:var(--faint);font:400 11.5px var(--font-body)}
.ui .sgSrc b{color:var(--aqua);font-weight:600}
.ui .sgChips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---- copied from bible.html: the apologetics row ---- */
.ui .apoLink{display:block;padding:12px 14px;border-radius:12px;margin-bottom:8px;
  background:rgba(232,184,115,.07);border:1px solid rgba(232,184,115,.3)}
.ui .apoLink b{display:block;font-size:13.5px;color:var(--starlight);font-weight:500;margin-bottom:2px}
.ui .apoLink span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ui .claim{font-family:var(--font-display);font-size:17px;letter-spacing:.04em;
  color:var(--starlight);margin:0 0 4px;line-height:1.35}
.ui .claimSub{font-size:12px;color:var(--faint);margin:0 0 12px}

/* ---- copied from refui/when.css + chronochart.py: the chronology ---- */
.ui .cTrueLbl{display:flex;gap:10px;font-size:11px;color:rgba(142,153,194,.8);margin-bottom:7px}
.ui .fLbl{font:600 9.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ui .bands{display:flex;gap:2px}
.ui .bd{flex:1;height:26px;border-radius:3px;opacity:.3;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:8.6px;letter-spacing:.07em;color:var(--starlight)}
.ui .marks{position:relative;height:100px;margin-top:4px;border-bottom:1px solid rgba(142,153,194,.28)}
.ui .mk{position:absolute;bottom:1px;width:6px;border-radius:1px}
.ui .facet{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;
  border-radius:999px;border:1px solid rgba(142,153,194,.3);color:#B4BDDD;font:400 11px var(--font-body)}
.ui .facet.on{background:rgba(232,184,115,.16);border-color:var(--gold);color:#F5D9A8;font-weight:600}
.ui .facet .dot{width:8px;height:8px;border-radius:2px}
.ui .brushSel{position:absolute;top:-30px;height:104px;border:1.4px solid var(--gold);
  background:rgba(232,184,115,.14);border-radius:3px}

/* ============================================================
   The motion. Nine-second loops, and only while the stage is on
   screen — scenes.js adds `.playing` when it scrolls into view and
   takes it away again, so a stage the reader cannot see costs
   nothing at all.
   ============================================================ */
.stage .ui *{animation-play-state:paused}
.stage.playing .ui *{animation-play-state:running}

/* 1 · READ — the words arrive, the red letters light, the version turns */
.s1 .prim,.s1 .v1{animation:primOut 9s linear infinite}
.s1 .alt,.s1 .v2{opacity:0;animation:altIn 9s linear infinite}
@keyframes primOut{0%,60%{opacity:1}68%,96%{opacity:0}100%{opacity:1}}
@keyframes altIn{0%,64%{opacity:0}72%,94%{opacity:1}100%{opacity:0}}
.s1 .wj{color:var(--starlight);animation:redOn 9s linear infinite}
@keyframes redOn{0%,22%{color:#EFF3FF}28%,92%{color:#F27676}98%,100%{color:#EFF3FF}}

/* 2 · STUDY — three panes assemble, a verse is chosen, the panel fills */
.s2 .rail{opacity:0;animation:slideR 9s ease infinite}
.s2 .mid{opacity:0;animation:midIn 9s ease infinite}
.s2 .panel{opacity:0;animation:slideL 9s ease infinite}
@keyframes slideR{0%{opacity:0;transform:translateX(-22px)}14%,100%{opacity:1;transform:translateX(0)}}
@keyframes slideL{0%,8%{opacity:0;transform:translateX(22px)}24%,100%{opacity:1;transform:translateX(0)}}
@keyframes midIn{0%,12%{opacity:0}24%,100%{opacity:1}}
.s2 .verse.sel{box-shadow:none;background:transparent;animation:selOn 9s ease infinite}
@keyframes selOn{0%,34%{background:transparent;box-shadow:none}
  42%,100%{background:rgba(232,184,115,.09);box-shadow:inset 2px 0 0 #E8B873}}
.s2 .xr{opacity:0;animation:xrIn 9s ease infinite}
.s2 .xr:nth-of-type(2){animation-delay:.14s}
.s2 .xr:nth-of-type(3){animation-delay:.28s}
@keyframes xrIn{0%,46%{opacity:0;transform:translateY(6px)}56%,100%{opacity:1;transform:translateY(0)}}

/* 3 · LOOK IT UP — a name is tapped and its sheet opens */
.s3 .entName{animation:nameLit 9s ease infinite}
@keyframes nameLit{0%,22%{background:transparent}
  28%,74%{background:rgba(232,184,115,.18);border-radius:3px}80%,100%{background:transparent}}
.s3 .entSheet{opacity:0;transform:translateY(9px) scale(.97);transform-origin:top left;
  animation:sheetIn 9s ease infinite}
@keyframes sheetIn{0%,28%{opacity:0;transform:translateY(9px) scale(.97)}
  36%,74%{opacity:1;transform:translateY(0) scale(1)}82%,100%{opacity:0;transform:translateY(9px) scale(.97)}}
.s3 .cursor{position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(232,184,115,.9);left:24px;top:200px;opacity:0;animation:curMove 9s ease infinite}
@keyframes curMove{0%{opacity:0;transform:translate(0,0)}
  8%{opacity:1;transform:translate(0,0)}
  22%{opacity:1;transform:translate(416px,-166px)}
  26%{opacity:1;transform:translate(416px,-166px) scale(.7)}
  30%,74%{opacity:1;transform:translate(416px,-166px)}
  82%,100%{opacity:0;transform:translate(416px,-166px)}}

/* 4 · ASK — the answer arrives word by word and its citations land */
.s4 .sgBubble.sage i{font-style:normal;opacity:0;animation:wordIn 9s ease infinite}
@keyframes wordIn{0%,14%{opacity:0}22%,96%{opacity:1}100%{opacity:0}}
.s4 .sgSources,.s4 .sgChips{opacity:0;animation:citeIn 9s ease infinite}
@keyframes citeIn{0%,56%{opacity:0;transform:translateY(6px)}64%,100%{opacity:1;transform:translateY(0)}}

/* 5 · EXAMINE and BEGIN — the two sides arrive */
.s5 .apoLink{opacity:0;animation:rowIn 9s ease infinite}
.s5 .apoLink:nth-of-type(2){animation-delay:.5s}
@keyframes rowIn{0%,26%{opacity:0;transform:translateY(10px)}38%,100%{opacity:1;transform:translateY(0)}}

/* 6 · WHEN — the chronology draws itself and a brush sweeps it */
.s6 .bd{opacity:0;animation:bdIn 9s ease infinite}
@keyframes bdIn{0%,4%{opacity:0}14%,100%{opacity:.3}}
.s6 .mk{transform:scaleY(0);transform-origin:bottom;animation:mkIn 9s ease infinite}
@keyframes mkIn{0%,18%{transform:scaleY(0)}30%,100%{transform:scaleY(1)}}
.s6 .brushSel,.s6 .rd{opacity:0;animation:brIn 9s ease infinite}
@keyframes brIn{0%,46%{opacity:0}56%,86%{opacity:1}94%,100%{opacity:0}}

/* ---- the five beats: one verse, all the way down ---- */
.beats{display:flex;gap:14px;align-items:stretch;margin:26px 0 40px}
.beat{flex:1;min-width:0;border:1px solid rgba(142,153,194,.22);border-radius:14px;
  background:rgba(9,13,30,.7);padding:18px 20px;position:relative;transition:border-color .4s,background .4s}
.beat .n{font:600 9px var(--font-body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px}
.beat p{margin:0;font-size:12.5px;line-height:1.55;color:#C6CDE8;font-weight:300}
.beat p b{color:var(--starlight);font-weight:500}
.beat.on{border-color:rgba(232,184,115,.5);background:rgba(232,184,115,.06)}
.beats-lede{margin:0 auto 4px;max-width:720px;text-align:center;font-size:14.5px;
  line-height:1.7;color:#B4BDDD;font-weight:300}

@media(max-width:900px){
  .stage{height:152px;--k:.962}
  .scene-card .card-body{padding:18px 20px 22px}
  .scene-card h3{padding-right:0}
  .scene-card .surf{position:static;display:inline-block;margin-bottom:12px}
  .beats{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion: reduce){
  .stage .ui *{animation:none !important}
  .ui *{opacity:1 !important;transform:none !important}
  .s1 .alt,.s1 .v2,.s3 .cursor{display:none}
  .s1 .wj{color:#F27676 !important}
  .s2 .verse.sel{background:rgba(232,184,115,.09) !important;box-shadow:inset 2px 0 0 #E8B873 !important}
}

/* ---- the closing card: full width, the scene beside the words ---- */
.scene-card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch}
.scene-card.wide .stage{height:100%;min-height:236px;border-bottom:0;
  border-right:1px solid rgba(142,153,194,.16);--k:1.57}
.scene-card.wide .card-body{display:flex;flex-direction:column;justify-content:center;padding:26px 32px}
@media(max-width:760px){
  .scene-card.wide{grid-template-columns:1fr}
  .scene-card.wide .stage{min-height:144px;border-right:0;
    border-bottom:1px solid rgba(142,153,194,.16);--k:.962}
}