/*
 * Blog motion (round 75) - loaded ONLY by the blog templates
 * (blog.html, blog_post.html and the admin live preview), together with
 * static/js/blog_motion.js. Decorative only: everything that moves is
 * inside `prefers-reduced-motion: no-preference`, and content is never
 * hidden unless blog_motion.js has run (it adds `bm-ready` to <html>).
 *
 * RULE: never put a transform / filter / perspective / animation with a
 * fill-mode on <body> or on any ancestor of a modal - that turns it into
 * the containing block of every position:fixed popup and they open in the
 * wrong place. Everything below targets leaf elements (cards, headings,
 * images) or is itself the fixed bar.
 */

/* ---- reading-progress bar (post page) -------------------------------- */
.bm-progress { display: none; }
.bm-has-progress .bm-progress {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9998;
  pointer-events: none; background: transparent;
}
.bm-progress-bar {
  display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent, #2e5bff), var(--violet, #7c4dff) 60%, #ff7a45);
  border-radius: 0 3px 3px 0; will-change: transform;
}
[dir="rtl"] .bm-progress-bar { transform-origin: 100% 50%; border-radius: 3px 0 0 3px; }
/* The site-wide scroll bar (motion.css) would be a second bar on top of
   this one - the article-specific one replaces it on post pages. */
.bm-has-progress .mv-progress { display: none !important; }

/* ---- card hover: lift + image zoom (works with or without motion) ---- */
.bp-card { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; }
.bp-card:hover, .bp-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--tint-border, var(--border)); }
.bp-card img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 50%; }
.bp-card:hover img, .bp-card:focus-visible img { transform: scale(1.07); }
.bp-card h2, .bp-card h3 { transition: color .25s ease; }
.bp-card:hover h2, .bp-card:hover h3 { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* hero fades down on load (leaf element, `backwards` so nothing is kept after it ends) */
  .bm-hero { animation: bm-hero .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  @keyframes bm-hero { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

  /* staggered reveal: JS (blog_motion.js) adds .bm-in as each item scrolls in
     and sets --bm-d so a batch of cards cascades instead of popping together */
  .bm-ready .bm-item { opacity: 0; transform: translateY(22px); }
  .bm-ready .bm-item.bm-in {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--bm-d, 0ms);
  }

  /* post sections slide in from the side a little, headings from below */
  .bm-ready .blog-post-body > .bm-item { transform: translateY(18px); }
  .bm-ready .blog-post-body > figure.bm-item, .bm-ready .blog-post-body > .bp-note.bm-item { transform: translateY(18px) scale(.985); }

  /* cover image: gentle settle-in on first paint */
  .bm-cover { animation: bm-cover .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  @keyframes bm-cover { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

  /* TOC links and in-body links: soft underline slide */
  .bp-toc a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
  .bp-toc a:hover { background-size: 100% 1px; text-decoration: none; }
  [dir="rtl"] .bp-toc a { background-position: 100% 100%; }

  .bp-chips a { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
  .bp-chips a:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .bp-card, .bp-card img { transition: none; }
  .bp-card:hover, .bp-card:focus-visible { transform: none; }
  .bp-card:hover img, .bp-card:focus-visible img { transform: none; }
}