/* ============================================================
   BIBLEBINGE MOTION KIT (docs/handoffs/BRAND-PROMO-PLAN.md section 3)
   Six moves, driven by assets/motion.js. Colors come only from the
   site.css tokens so a rebrand carries straight through.
   Every animation lives under html.mo, which motion.js sets only when
   the reader has not asked for reduced motion; the media query at the
   bottom switches everything off again as a second guard.
   ============================================================ */
:root{--mo-ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- red thread (home hero) ---------- */
html.mo .hero .thread{animation:mo-thread 1.1s var(--mo-ease) .25s both;transform-origin:left center}
@keyframes mo-thread{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 1. cold open ---------- */
html.mo .mo-draw .mo-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:mo-draw 1.5s var(--mo-ease) var(--d,.15s) forwards}
@keyframes mo-draw{to{stroke-dashoffset:0}}
html.mo .mo-draw .mo-rise-svg{opacity:0;animation:mo-fade .8s ease var(--d,.6s) forwards}
@keyframes mo-fade{to{opacity:1}}
html.mo .mo-rise{animation:mo-rise .7s var(--mo-ease) both}
html.mo .mo-rise.mo-d2{animation-delay:.12s}
@keyframes mo-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 2. lens focus pull ---------- */
html.mo .lpanel-body.mo-pull{animation:mo-pull .45s var(--mo-ease) both}
@keyframes mo-pull{from{filter:blur(6px);opacity:.3}to{filter:blur(0);opacity:1}}

/* ---------- 3. up next ---------- */
.mo-next{max-width:820px;margin:30px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:center;border:1px solid var(--line-strong);border-radius:12px;padding:18px 22px;background:linear-gradient(120deg,var(--surface2),var(--surface));box-shadow:var(--shadow)}
.mo-next-ring{width:64px;height:64px;flex:none}
.mo-next-ring svg{width:64px;height:64px;overflow:visible}
.mo-next-ring .trk{fill:none;stroke:var(--line-strong);stroke-width:3}
.mo-next-ring .run{fill:none;stroke:var(--rubric-hi);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1.01;stroke-dashoffset:1.01}
.mo-next-ring path{fill:var(--rubric-hi)}
.mo-next.is-last .mo-next-ring .run{display:none}
.mo-next-txt{min-width:0}
.mo-next-eb{margin:0;font-family:var(--ui);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rubric-hi);font-weight:500}
.mo-next-t{margin:4px 0 2px;font-family:var(--disp);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ivory);overflow-wrap:anywhere}
.mo-next-sub{margin:0;font-family:var(--ui);font-size:.78rem;letter-spacing:.06em;color:var(--ivory-faint);font-variant-numeric:tabular-nums}
.mo-next-act{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mo-next-act .btn{padding:11px 18px;font-size:.88rem}
.mo-next-streak{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.mo-next-streak[hidden]{display:none}
.mo-next-streak .mo-streak{margin:0}
@media(max-width:640px){
  .mo-next{grid-template-columns:auto 1fr;padding:16px}
  .mo-next-ring,.mo-next-ring svg{width:52px;height:52px}
  .mo-next-act{grid-column:1/-1;justify-content:stretch}
  .mo-next-act .btn{flex:1;justify-content:center}
}
html.mo .mo-next.mo-wait{opacity:0;transform:translateY(16px)}
html.mo .mo-next.is-in{animation:mo-rise .6s var(--mo-ease) both}

/* ---------- 4. highlight and share ---------- */
.mo-share{position:fixed;left:0;top:0;z-index:85;will-change:transform}
.mo-share[hidden]{display:none}
.mo-share-b{font-family:var(--ui);font-size:.8rem;letter-spacing:.04em;font-weight:500;white-space:nowrap;color:var(--vellum);background:var(--ink);border:1px solid var(--rubric);border-radius:999px;padding:8px 15px 8px 13px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35);display:inline-flex;align-items:center;gap:8px}
.mo-share-b::before{content:"";width:8px;height:13px;flex:none;background:var(--rubric-hi);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.mo-share-b:hover{background:var(--rubric);border-color:var(--rubric)}
html.mo .mo-share.pop .mo-share-b{animation:mo-pop .28s var(--mo-ease) both}
@keyframes mo-pop{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}
::highlight(bb-verse){background-color:rgba(228,192,120,.55)}

/* ---------- 5. poster lift ---------- */
/* rails scroll sideways, so they clip vertically: give the lift room (net layout change zero) */
html.mo .rail-row{padding-top:14px;margin-top:-8px}
html.mo .pcard,html.mo .hero-poster{transition:transform .35s var(--mo-ease),box-shadow .35s var(--mo-ease),border-color .35s var(--mo-ease),filter .35s var(--mo-ease)}
html.mo .pcard:hover,html.mo .pcard:focus-visible,html.mo .posterwall .pcard:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 28px 60px rgba(0,0,0,.6);border-color:var(--gold-dim)}
html.mo .hero-poster:hover{transform:rotate(0deg) translateY(-8px) scale(1.03);filter:drop-shadow(0 40px 70px rgba(0,0,0,.7))}
html.mo .wide.mo-peek,html.mo .pcard.mo-peek{animation:mo-peek 1.2s var(--mo-ease) both}
@keyframes mo-peek{0%{transform:none}35%{transform:translateY(-10px) rotate(-1.2deg)}65%{transform:translateY(-4px) rotate(.6deg)}100%{transform:none}}

/* ---------- 6a. streak pill ---------- */
.mo-streak{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--line-strong);border-radius:999px;padding:5px 13px 5px 11px;background:var(--surface);white-space:nowrap}
.mo-dots{display:inline-flex;gap:4px}
.mo-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--rubric);display:block}
.mo-dots i.on{background:var(--rubric-hi);border-color:var(--rubric-hi)}
html.mo .mo-dots i.on{animation:mo-dot .35s var(--mo-ease) both;animation-delay:calc(var(--i,0) * 90ms + .3s)}
@keyframes mo-dot{from{transform:scale(0);background:transparent}60%{transform:scale(1.4)}to{transform:scale(1)}}
.rail-head.mo-has-streak{flex-wrap:wrap;row-gap:8px}

/* ---------- 6b. bookmark ribbon ---------- */
.mo-ribbon{position:absolute;width:10px;height:17px;z-index:5;pointer-events:none}
.mo-ribbon path{fill:var(--rubric)}
html.mo .mo-ribbon{animation:mo-ribbon 2.8s var(--mo-ease) both;transform-origin:top center}
@keyframes mo-ribbon{0%{opacity:0;transform:translateY(-14px) scaleY(.3)}18%{opacity:1;transform:translateY(2px) scaleY(1.08)}28%{transform:translateY(-1px) scaleY(.97)}36%{transform:none}82%{opacity:1}100%{opacity:0}}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .thread,.mo-draw .mo-stroke,.mo-draw .mo-rise-svg,.mo-rise,.lpanel-body.mo-pull,.mo-next,.mo-share .mo-share-b,
  .wide.mo-peek,.pcard.mo-peek,.mo-dots i,.mo-ribbon{animation:none!important}
  .mo-draw .mo-stroke{stroke-dashoffset:0!important}
  .mo-next.mo-wait,.mo-draw .mo-rise-svg{opacity:1!important;transform:none!important}
  .pcard:hover,.pcard:focus-visible,.hero-poster:hover{transition:none}
}