/* ============================================================
   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:0;border-radius:var(--r-lg,26px);padding:20px 24px;background:var(--book);color:var(--on-book);box-shadow:var(--shadow-sm)}
.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:color-mix(in srgb,var(--on-book) 25%,transparent);stroke-width:4}
.mo-next-ring .run{fill:none;stroke:var(--on-book);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1.01;stroke-dashoffset:1.01}
.mo-next-ring path{fill:var(--on-book)}
.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:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-book);font-weight:800}
.mo-next-t{margin:4px 0 2px;font-family:var(--disp);font-weight:800;letter-spacing:-.025em;font-size:1.45rem;line-height:1.15;color:var(--on-book);overflow-wrap:anywhere}
.mo-next-sub{margin:0;font-family:var(--ui);font-size:.86rem;font-weight:600;color:var(--on-book);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:.92rem}
.mo-next .btn-play{background:var(--on-book);color:var(--book);box-shadow:none}
.mo-next .btn-play:hover{background:var(--card);color:var(--text)}
.mo-next .btn-ghost{border-color:var(--on-book);color:var(--on-book)}
.mo-next .btn-ghost:hover{background:var(--on-book);color:var(--book)}
.mo-next-streak{grid-column:1/-1;border-top:1px solid color-mix(in srgb,var(--on-book) 25%,transparent);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:.86rem;font-weight:700;white-space:nowrap;color:var(--btn-fg);background:var(--btn-bg);border:2px solid var(--btn-bg);border-radius:999px;padding:8px 15px 8px 13px;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px}
.mo-share-b::before{content:"";width:8px;height:13px;flex:none;background:var(--book);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.mo-share-b:hover{background:var(--book);border-color:var(--book);color:var(--on-book)}
.mo-share-b:hover::before{background:var(--on-book)}
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:var(--hl)}

/* ---------- 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:var(--shadow)}
html.mo .hero-poster:hover{transform:rotate(0deg) translateY(-8px) scale(1.03)}
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:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-strong);border-radius:999px;padding:5px 13px 5px 11px;background:var(--card);white-space:nowrap}
.mo-dots{display:inline-flex;gap:4px}
.mo-dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--brand);display:block}
.mo-dots i.on{background:var(--brand);border-color:var(--brand)}
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(--brand)}
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}
}
/* touch screens: the share chip docks bottom-center, clear of the phone's own selection handles and menu */
.mo-share.mo-share--dock{left:0;right:0;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none!important;display:flex;justify-content:center;pointer-events:none}
.mo-share.mo-share--dock[hidden]{display:none}
.mo-share--dock .mo-share-b{pointer-events:auto;min-height:48px;font-size:1rem;padding:12px 22px 12px 18px;touch-action:manipulation}