/*
 * Blog Pro - what every layout shares: the listing's frame and toolbar, chips,
 * post typography, contents list, sharing, comments and the right-click menu.
 * Each layout's own look lives in its block (content/blocks/blog-*.css), so a
 * site restyles a layout in the Blocks tool without touching this file.
 */

.blog-page { padding-top: 2rem; padding-bottom: 3rem; }

/*
 * The site theme colours and underlines every link in .page-body, with
 * !important and a selector as specific as (0,8,4) (public/css/site.css). A
 * blog's links are its interface - titles, chips, the display switcher - so they
 * opt out here, by id to outrank it. Links written in a post keep the theme's
 * look. A block's CSS sets link colour on the link's parent (it inherits).
 * The reset sits in :where() so it weighs only its id (1,0,0) - still above the
 * theme, and below every exception here. Without it, `:not(.blog-content a)`
 * lifted the reset over the exceptions and the active display button went
 * dark-on-dark.
 */
#dm-blog :where(a[href]:not(.blog-content a)) { color: inherit !important; text-decoration: none !important; }
#dm-blog :where(a[href]:not(.blog-content a)):hover { color: var(--dm-primary, #3b82f6) !important; }
#dm-blog a.blog-chip { color: var(--dm-primary, #3b82f6) !important; }
#dm-blog .blog-displays-menu a[aria-current="true"] { color: var(--bp-on-accent, #fff) !important; }
/* A whole card that is one link keeps its own colours (overlay text stays white). */
#dm-blog a.bp-plain, #dm-blog a.bp-plain:hover { color: inherit !important; }
#dm-blog a.blog-tag, #dm-blog .blog-toc a { color: var(--dm-text-muted) !important; }
#dm-blog a.blog-tag:hover, #dm-blog .blog-toc a:hover { color: var(--dm-text) !important; }
#dm-blog .blog-toc a.is-active { color: var(--dm-primary, #3b82f6) !important; }

/* ── Listing ──────────────────────────────────────────────────────────── */
.blog-archive-head { margin-bottom: 1.25rem; }
.blog-archive-head h1 { margin: 0 0 .35rem; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.015em; }
.blog-archive-intro { margin: 0; color: var(--dm-text-muted); font-size: 1.1rem; max-width: 42rem; }

.blog-archive-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.blog-archive-bar:empty { display: none; }

.blog-search { position: relative; flex: 1 1 16rem; max-width: 24rem; }
.blog-search .blog-search-input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border-radius: 999px;
  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: var(--dm-surface, transparent); color: inherit; font: inherit; }
.blog-search .blog-search-input:focus { outline: 2px solid color-mix(in srgb, var(--dm-primary, #3b82f6) 45%, transparent); outline-offset: 1px; }
.blog-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }

.blog-sort { padding: .45rem .6rem; border-radius: 999px; border: 1px solid var(--dm-border, rgba(127,127,127,.3));
  background: var(--dm-surface, transparent); color: inherit; font: inherit; font-size: .9rem; }

.blog-displays { position: relative; margin-left: auto; }
.blog-displays-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: var(--dm-surface, transparent); color: inherit; font: inherit; font-size: .88rem; }
.blog-displays-toggle:hover { border-color: var(--dm-primary, #3b82f6); }
.blog-displays-toggle::before { content: "Display"; color: var(--dm-text-muted); font-size: .8rem; }
.blog-displays-menu { display: none; position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 15rem; padding: .35rem;
  grid-template-columns: 1fr 1fr; gap: .15rem; background: var(--dm-surface, #fff); border: 1px solid var(--dm-border, rgba(127,127,127,.3));
  border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.18); }
.blog-displays:not(.is-js):focus-within .blog-displays-menu, .blog-displays.is-open .blog-displays-menu { display: grid; }
.blog-displays-menu a { padding: .4rem .65rem; border-radius: 8px; font-size: .86rem; text-decoration: none; color: var(--dm-text); white-space: nowrap; }
.blog-displays-menu a:hover { background: color-mix(in srgb, var(--dm-primary, #3b82f6) 12%, transparent); }
.blog-displays-menu a[aria-current="true"] { background: var(--dm-primary, #3b82f6); color: var(--bp-on-accent, #fff); }

.blog-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.blog-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: none; color: inherit; font: inherit; font-size: .88rem; }
.blog-pill:hover { border-color: var(--dm-primary, #3b82f6); }
.blog-pill.is-active { background: var(--dm-primary, #3b82f6); border-color: var(--dm-primary, #3b82f6); color: #fff; }
.blog-pill .n { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }
.blog-pill[disabled] { opacity: .4; cursor: default; }

.blog-active { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.25rem 0 1rem; font-size: .88rem; color: var(--dm-text-muted); }
.blog-active:empty { display: none; }
.blog-active .blog-filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--dm-primary, #3b82f6) 14%, transparent); color: var(--dm-text); }
.blog-active .blog-filter-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; border-radius: 50%; }
.blog-active .blog-filter-chip button:hover { background: rgba(127,127,127,.2); }
.blog-active .blog-clear { border: 0; background: none; color: var(--dm-primary); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

.blog-items { counter-reset: bp-rank; }
.blog-items--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.blog-items--stack { display: flex; flex-direction: column; }
/* Masonry: columns at natural heights. */
.blog-items--masonry { columns: 3 17rem; column-gap: 1.5rem; }
.blog-items--masonry > .blog-item { break-inside: avoid; margin-bottom: 1.5rem; display: flex; }
/* Bento: a rhythm of big and small tiles. */
.blog-items--bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13rem; grid-auto-flow: dense; gap: 1rem; }
.blog-items--bento > .blog-item { min-height: 0 !important; }
.blog-items--bento > .blog-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.blog-items--bento > .blog-item:nth-child(6n+4) { grid-column: span 2; }
.blog-items--bento > .blog-item:nth-child(6n+5) { grid-row: span 2; }
@media (max-width: 900px) { .blog-items--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .blog-items--bento { grid-template-columns: 1fr; grid-auto-rows: 15rem; } .blog-items--bento > .blog-item { grid-column: auto !important; grid-row: auto !important; } }
/* Carousel: one row that swipes. */
.blog-items--carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 21rem); gap: 1.25rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 0 1rem; padding-bottom: 1rem; overscroll-behavior-x: contain; scrollbar-width: thin; }
.blog-items--carousel > .blog-item { scroll-snap-align: start; }
.bp-carousel-nav { display: flex; justify-content: flex-end; gap: .4rem; margin: -.5rem 0 .75rem; }
.bp-carousel-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: var(--dm-surface, transparent);
  color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bp-carousel-btn:hover:not(:disabled) { border-color: var(--dm-primary); color: var(--dm-primary); }
.bp-carousel-btn:disabled { opacity: .35; cursor: default; }
/* Tiles: square pictures edge to edge. */
.blog-items--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(50%, 15rem), 1fr)); gap: 3px; }
/* Columns: two columns of text-led cards. */
.blog-items--columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 2.5rem; }
.blog-items .blog-item[hidden] { display: none !important; }
.blog-items.is-swapping { opacity: .35; transition: opacity .15s; }

.blog-empty { padding: 3rem 1rem; text-align: center; color: var(--dm-text-muted); }
.blog-more { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2rem; }
.blog-more-count { font-size: .85rem; color: var(--dm-text-muted); }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.blog-page-of { font-size: .9rem; color: var(--dm-text-muted); }

/* Right-click affordance on a listing that answers it. */
.blog-archive.is-live .blog-item { cursor: context-menu; }
.blog-archive.is-live .blog-item a { cursor: pointer; }
.blog-item.is-flash { animation: blog-flash .9s ease; }
@keyframes blog-flash { 0% { box-shadow: 0 0 0 3px var(--dm-primary, #3b82f6); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ── Chips and tags ───────────────────────────────────────────────────── */
.blog-chip { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  color: var(--dm-primary, #3b82f6); background: color-mix(in srgb, var(--dm-primary, #3b82f6) 12%, transparent);
  border: 1px solid transparent; }
.blog-chip:hover { border-color: currentColor; }
.blog-tag { font-size: .85rem; color: var(--dm-text-muted); text-decoration: none; }
.blog-tag:hover { color: var(--dm-primary); }

/* ── A post ───────────────────────────────────────────────────────────── */
.blog-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.blog-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--dm-primary, #3b82f6); transition: transform .08s linear; }

.blog-content { font-size: 1.075rem; line-height: 1.75; }
.blog-content > * + * { margin-top: 1.1em; }
.blog-content h2 { font-size: 1.6rem; margin-top: 2em; line-height: 1.25; scroll-margin-top: calc(var(--dm-navbar-height, 64px) + 1rem); }
.blog-content h3 { font-size: 1.25rem; margin-top: 1.6em; scroll-margin-top: calc(var(--dm-navbar-height, 64px) + 1rem); }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--dm-radius-md, 8px); }
.blog-content blockquote { margin: 1.75em 0; padding: .25em 0 .25em 1.25em; border-left: 3px solid var(--dm-primary, #3b82f6);
  font-size: 1.2em; font-style: italic; color: var(--dm-text-muted); }
.blog-content pre { padding: 1rem; border-radius: var(--dm-radius-md, 8px); overflow-x: auto; background: rgba(127,127,127,.1); font-size: .9em; }
.blog-content :not(pre) > code { padding: .1em .35em; border-radius: 4px; background: rgba(127,127,127,.14); font-size: .9em; }

.blog-toc { font-size: .9rem; }
.blog-toc-title { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-text-muted); }
.blog-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--dm-border, rgba(127,127,127,.25)); }
.blog-toc li a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--dm-text-muted); text-decoration: none; line-height: 1.35; }
.blog-toc li.blog-toc-l3 a { padding-left: 1.7rem; font-size: .85rem; }
.blog-toc li a:hover { color: var(--dm-text); }
.blog-toc li a.is-active { color: var(--dm-primary, #3b82f6); border-left-color: var(--dm-primary, #3b82f6); font-weight: 600; }

.blog-share { display: flex; gap: .4rem; flex-wrap: wrap; }
.blog-share-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: none; color: inherit; font: inherit; font-size: .85rem; text-decoration: none; }
.blog-share-btn:hover { border-color: var(--dm-primary, #3b82f6); color: var(--dm-primary, #3b82f6); }

.blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.5rem 0 0; }
.blog-prevnext a { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border-radius: var(--dm-radius-lg, 12px);
  border: 1px solid var(--dm-border, rgba(127,127,127,.25)); text-decoration: none; color: inherit; }
.blog-prevnext a:hover { border-color: var(--dm-primary, #3b82f6); }
.blog-prevnext a span { font-size: .78rem; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.blog-prevnext .is-newer { text-align: right; grid-column: 2; }
@media (max-width: 600px) { .blog-prevnext { grid-template-columns: 1fr; } .blog-prevnext .is-newer { grid-column: 1; } }

.blog-section-title { font-size: 1.35rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .5rem; }
.blog-related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
.blog-count { font-size: .8rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(127,127,127,.16); font-weight: 600; }

/* ── Comments ─────────────────────────────────────────────────────────── */
.blog-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
.blog-comment-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.blog-comment-list:empty { display: none; }
.blog-comment { padding: .9rem 1rem; border-radius: var(--dm-radius-md, 8px); background: rgba(127,127,127,.07); }
.blog-comment.is-new { outline: 2px solid color-mix(in srgb, var(--dm-success, #16a34a) 55%, transparent); }
.blog-comment-head { margin: 0 0 .35rem; font-size: .9rem; }
.blog-comment-head time { color: var(--dm-text-muted); font-size: .82rem; margin-left: .35rem; }
.blog-comment-body { margin: 0; white-space: pre-line; }
.blog-comment-form { display: flex; flex-direction: column; gap: .8rem; }
.blog-comment-form h3 { margin: 0; font-size: 1.1rem; }
.blog-comment-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
.blog-comment-form label small { font-weight: 400; color: var(--dm-text-muted); }
.blog-comment-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 600px) { .blog-comment-row { grid-template-columns: 1fr; } }
.blog-comment-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.blog-comment-status { font-size: .9rem; }
.blog-comment-status.is-ok { color: var(--dm-success, #16a34a); }
.blog-comment-status.is-error { color: var(--dm-danger, #dc2626); }
.blog-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── The right-click menu ─────────────────────────────────────────────── */
.blog-menu { position: fixed; z-index: 10000; min-width: 220px; max-width: 300px; padding: .3rem;
  background: var(--dm-surface, #fff); color: var(--dm-text, #111); border: 1px solid var(--dm-border, rgba(127,127,127,.3));
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); font-size: .88rem; }
.blog-menu[hidden] { display: none; }
.blog-menu-head { padding: .45rem .65rem .35rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .65rem; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.blog-menu button:hover, .blog-menu button:focus-visible { background: color-mix(in srgb, var(--dm-primary, #3b82f6) 12%, transparent); outline: none; }
.blog-menu button .k { margin-left: auto; font-size: .78rem; color: var(--dm-text-muted); }
.blog-menu hr { border: 0; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); margin: .3rem .2rem; }
.blog-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 10001; padding: .55rem 1rem;
  border-radius: 999px; background: var(--dm-text, #111); color: var(--dm-background, #fff); font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) {
  .blog-item, .blog-item * { transition: none !important; animation: none !important; }
}

/* A full-bleed header starts where the theme's content does - no page padding
   above it. (It cannot reach the navbar: the theme's wrapper clips overflow.) */
.blog-page:has(.pf-hero, .pcn-hero, .pph-cover.has-image, .pov-media, .pst.has-image, .plt, .bp-hero .hb) { padding-top: 0; }
.blog-page:has(.pst.has-image) { overflow-x: clip; }

/* ── Blog Pro: people ─────────────────────────────────────────────────── */
.bp-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.bp-avatar--initials { color: #fff; background: linear-gradient(135deg, hsl(var(--bp-hue, 210) 55% 52%), hsl(calc(var(--bp-hue, 210) + 40) 60% 38%)); }
.bp-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.3rem; }
.bp-avatar--xl { width: 7rem; height: 7rem; font-size: 2rem; }

.bp-author-box { display: flex; gap: 1.25rem; align-items: flex-start; margin: 2.5rem 0 0; padding: 1.5rem; border-radius: var(--dm-radius-lg, 14px);
  background: color-mix(in srgb, var(--dm-primary, #3b82f6) 6%, var(--dm-surface, transparent)); border: 1px solid var(--dm-border, rgba(127,127,127,.2)); }
.bp-author-box-text { min-width: 0; }
.bp-author-box p { margin: 0; }
.bp-author-box-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-text-muted); }
.bp-author-box-name { font-size: 1.2rem; font-weight: 700; margin-top: .15rem !important; }
.bp-author-box-title { font-size: .9rem; color: var(--dm-text-muted); }
.bp-author-box-bio { margin-top: .6rem !important; line-height: 1.6; white-space: pre-line; }
.bp-author-links { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem !important; }
.bp-author-links a, .bp-author-link { display: inline-flex; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); text-decoration: none; }
#dm-blog .bp-author-links a:hover, #dm-blog a.bp-author-link:hover { border-color: var(--dm-primary); }
@media (max-width: 560px) { .bp-author-box { flex-direction: column; } }

.bp-authors--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; }
.bp-authors--stack { display: flex; flex-direction: column; }

.bp-crumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; font-size: .8rem; color: var(--dm-text-muted); }
.bp-crumbs a { font-weight: 600; }
.bp-crumbs span { opacity: .5; }

/* ── Blog Pro: hover, per blog ────────────────────────────────────────── */
#dm-blog[data-bp-hover="none"] .blog-item, #dm-blog[data-bp-hover="none"] .blog-item:hover { transform: none !important; box-shadow: none; }
#dm-blog[data-bp-hover="none"] .blog-item:hover img { transform: none !important; }
#dm-blog[data-bp-hover="lift"] .blog-item { transition: transform .25s ease, box-shadow .25s ease; }
#dm-blog[data-bp-hover="lift"] .blog-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
#dm-blog[data-bp-hover="zoom"] .blog-item:hover { transform: none !important; }
#dm-blog[data-bp-hover="zoom"] .blog-item img { transition: transform .8s cubic-bezier(.2,.7,.2,1) !important; }
#dm-blog[data-bp-hover="zoom"] .blog-item:hover img { transform: scale(1.09) !important; }
#dm-blog[data-bp-hover="glow"] .blog-item { transition: box-shadow .25s ease; border-radius: var(--dm-radius-lg, 12px); }
#dm-blog[data-bp-hover="glow"] .blog-item:hover { transform: none !important;
  box-shadow: 0 0 0 2px var(--dm-primary, #3b82f6), 0 10px 40px color-mix(in srgb, var(--dm-primary, #3b82f6) 35%, transparent); }
#dm-blog[data-bp-hover="tilt"] .blog-items { perspective: 900px; }
#dm-blog[data-bp-hover="tilt"] .blog-item { transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
#dm-blog[data-bp-hover="tilt"] .blog-item.is-tilting { transform: rotateX(var(--bp-rx, 0)) rotateY(var(--bp-ry, 0)) translateZ(10px);
  transition: transform .08s linear, box-shadow .3s; box-shadow: 0 18px 40px rgba(0,0,0,.18); }

/* ── Blog Pro: reveal on scroll (only once the script says so) ───────── */
#dm-blog.bp-reveal-on :is(.blog-item, .bp-authorcard):not(.is-in) { opacity: 0; }
#dm-blog.bp-reveal-on :is(.blog-item, .bp-authorcard).is-in { animation: var(--bp-reveal-anim) both; animation-delay: var(--bp-delay, 0ms); }
#dm-blog[data-bp-reveal="fade-up"] { --bp-reveal-anim: bp-reveal-up .7s cubic-bezier(.2,.7,.2,1); }
#dm-blog[data-bp-reveal="fade"]    { --bp-reveal-anim: bp-reveal-fade .8s ease; }
#dm-blog[data-bp-reveal="zoom"]    { --bp-reveal-anim: bp-reveal-zoom .6s cubic-bezier(.2,.7,.2,1); }
#dm-blog[data-bp-reveal="slide"]   { --bp-reveal-anim: bp-reveal-slide .7s cubic-bezier(.2,.7,.2,1); }
#dm-blog[data-bp-reveal="stagger"] { --bp-reveal-anim: bp-reveal-up .55s cubic-bezier(.2,.7,.2,1); }
#dm-blog[data-bp-reveal="stagger"] .blog-item.is-in { animation-delay: calc(var(--bp-delay, 0ms) * 1.8); }
@keyframes bp-reveal-up { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes bp-reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-reveal-zoom { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes bp-reveal-slide { from { opacity: 0; translate: -36px 0; } to { opacity: 1; translate: 0 0; } }

/* ── Blog Pro: page transitions (View Transitions API; chosen per blog) ─ */
@keyframes bp-vt-fade-out { to { opacity: 0; } }
@keyframes bp-vt-fade-in { from { opacity: 0; } }
@keyframes bp-vt-slide-out { to { opacity: 0; transform: translateX(-6%); } }
@keyframes bp-vt-slide-in { from { opacity: 0; transform: translateX(8%); } }
@keyframes bp-vt-rise-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes bp-vt-zoom-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes bp-vt-zoom-in { from { opacity: 0; transform: scale(.94); } }
@keyframes bp-vt-blur-out { to { opacity: 0; filter: blur(12px); } }
@keyframes bp-vt-blur-in { from { opacity: 0; filter: blur(12px); } }
@keyframes bp-vt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  #dm-blog.bp-reveal-on :is(.blog-item, .bp-authorcard) { opacity: 1 !important; animation: none !important; }
  #dm-blog[data-bp-hover="tilt"] .blog-item.is-tilting { transform: none; }
}