/* ============================================================
   Nova FX · blogfx.css — "Learn" blog-index pack (.bl-*)
   Dark navy #04091a · accents #38bdf8 / #2f6bff / #7c8cff
   All selectors namespaced .bl-*. Motion = transform/opacity
   only. prefers-reduced-motion → static end states.
   Mount: load AFTER b-learn.css (nova.css base + shared packs).
   Runtime: blogfx.js (vanilla IIFE, exposes window.BL).

   Anatomy:
     .bl-hero        compact page head (min-height:0, left-aligned)
     .bl-bar         sticky filter row (chips + guide count)
     .bl-chips       pill container; .bl-chip-ink = sliding
                     transform-based underline under .bl-chip.on
     .bl-feat        featured horizontal card (sheen sweep when .in)
     .bl-grid        post grid; .bl-post[data-cat] cards
     .bl-art         CSS-only cover: category gradient + dot grid
                     + watermark glyph + glowing .bl-art-chip
     .bl-cat         category badge · .bl-meta row · .bl-lvl level
     .bl-typed       h1 accent word with terminal caret
     .bl-cta         closing band
   Category colour lives in --blc, set once per [data-cat] and
   inherited by art, badge, glyph and hover glow.
   ============================================================ */

/* ---------- category colour map (inherited --blc) ---------- */
[data-cat="security"]{--blc:#38bdf8}
[data-cat="custody"]{--blc:#7c8cff}
[data-cat="attacks"]{--blc:#ffc94d}
[data-cat="fees"]{--blc:#35d08a}

/* ============================================================
   1 · Hero — compact, left-aligned, faint blueprint grid + glow
   ============================================================ */
.bl-hero{min-height:0;padding:118px 0 34px;text-align:left;display:block}
.bl-hero .container{position:relative;z-index:2}
.bl-hero .lead{margin:20px 0 0;max-width:640px}
.bl-hero h1{max-width:16ch}
.bl-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;
 background:
  radial-gradient(55% 95% at 16% 0%,rgba(47,107,255,.16),transparent 62%),
  radial-gradient(42% 80% at 88% 16%,rgba(56,189,248,.09),transparent 62%)}
.bl-hero-bg::before{content:'';position:absolute;inset:0;
 background-image:linear-gradient(rgba(148,178,255,.05) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(148,178,255,.05) 1px,transparent 1px);
 background-size:44px 44px;
 -webkit-mask-image:radial-gradient(75% 95% at 38% 0%,#000 25%,transparent 78%);
 mask-image:radial-gradient(75% 95% at 38% 0%,#000 25%,transparent 78%)}
.bl-facts{margin-top:20px;font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--dim)}
.bl-facts b{color:#aebfe8}
.bl-facts i{font-style:normal;color:#33497b;padding:0 9px}

/* ---------- h1 typewriter caret ---------- */
.bl-typed{position:relative}
.bl-typed::after{content:'';display:inline-block;width:3px;height:.8em;
 margin-left:5px;vertical-align:-.07em;border-radius:1.5px;
 background:#38bdf8;box-shadow:0 0 12px rgba(56,189,248,.75);
 animation:bl-blink 1.05s steps(1) infinite}
.bl-typed.bl-done::after{animation:bl-blink 1.05s steps(1) 4 forwards}
@keyframes bl-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ============================================================
   2 · Filter bar — sticky under the nav (66px), frosted.
   .bl-chips scrolls horizontally on narrow screens (no wrap, so
   the ink's translateX always tracks a single-row chip).
   .bl-chip-ink: 1px-wide bar; JS drives --x (px) + --w (scaleX).
   ============================================================ */
.bl-region{padding:4px 0 14px}
.bl-bar{position:sticky;top:76px;z-index:60;
 display:flex;align-items:center;gap:18px;
 margin:0 -24px;padding:12px 24px;
 background:linear-gradient(180deg,rgba(4,9,26,.92),rgba(4,9,26,.82));
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bl-chips{position:relative;display:flex;align-items:center;gap:4px;
 flex-wrap:nowrap;overflow-x:auto;max-width:100%;
 padding:5px 6px 9px;border:1px solid var(--line);border-radius:999px;
 background:rgba(255,255,255,.028);
 scrollbar-width:none}
.bl-chips::-webkit-scrollbar{display:none}
.bl-chip{position:relative;flex:none;appearance:none;border:0;background:none;
 cursor:pointer;padding:9px 17px;border-radius:999px;
 font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;
 letter-spacing:.02em;color:var(--mut);white-space:nowrap;
 transition:color .18s ease}
.bl-chip::before{content:'';position:absolute;inset:0;border-radius:999px;
 background:linear-gradient(135deg,rgba(47,107,255,.46),rgba(56,189,248,.22));
 border:1px solid rgba(126,172,255,.42);
 box-shadow:0 6px 18px rgba(47,107,255,.22),inset 0 1px 0 rgba(255,255,255,.12);
 opacity:0;transform:scale(.86);
 transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.3,1.15)}
.bl-chip:hover{color:#dfeaff}
.bl-chip.on{color:#fff}
.bl-chip.on::before{opacity:1;transform:scale(1)}
.bl-chip:focus-visible{outline:2px solid rgba(56,189,248,.65);outline-offset:2px}
.bl-chip-ink{position:absolute;left:0;bottom:4px;height:2px;width:1px;
 border-radius:2px;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,#2f6bff,#38bdf8);
 box-shadow:0 0 8px rgba(56,189,248,.55);
 transform:translate3d(var(--x,10px),0,0) scaleX(var(--w,30));
 transform-origin:left center}
.bl-chips.bl-ready .bl-chip-ink{opacity:1;
 transition:transform .34s cubic-bezier(.25,.8,.25,1),opacity .35s ease}
.bl-count{margin-left:auto;flex:none;font-size:12.5px;color:var(--dim);
 font-weight:500;white-space:nowrap}
.bl-count b{color:#c7d6f5;font-weight:700}

/* ============================================================
   3 · Featured card — horizontal, CSS cover art + slow sheen.
   Sheen runs only while the card carries .in (IO-gated via the
   shared reveal script) — transform/opacity only.
   ============================================================ */
.bl-feat{display:grid;grid-template-columns:300px minmax(0,1fr);
 padding:0;margin:24px 0 30px}
.bl-feat-art{position:relative;min-height:236px;overflow:hidden;
 display:flex;align-items:center;justify-content:center;
 border-right:1px solid var(--line);
 background:
  repeating-radial-gradient(circle at 50% 58%,transparent 0 34px,color-mix(in srgb,var(--blc) 11%,transparent) 34px 35px),
  radial-gradient(120% 120% at 50% 112%,color-mix(in srgb,var(--blc) 30%,transparent),transparent 62%),
  linear-gradient(165deg,#0d1e3f,#081228)}
.bl-feat-body{position:relative;padding:30px 30px 26px;z-index:1}
.bl-feat-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bl-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;
 letter-spacing:.09em;text-transform:uppercase;color:#b9c4ff;
 padding:4.5px 10px;border-radius:999px;
 background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.34)}
.bl-feat h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;
 letter-spacing:-.6px;line-height:1.18;margin:14px 0 10px;transition:color .2s}
.bl-feat:hover h3{color:#cfe4ff}
.bl-feat p{font-size:14px;line-height:1.7;max-width:56ch}
.bl-feat .bl-meta{margin-top:18px;padding-top:0}
.bl-read{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
 font-size:13.5px;font-weight:700;color:#8fc3ff}
.bl-read svg{width:15px;height:15px;transition:transform .22s ease}
.bl-feat:hover .bl-read svg{transform:translateX(4px)}
/* slow sheen sweep (transform only, gated on .in) */
.bl-feat::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;
 width:36%;pointer-events:none;opacity:0;
 background:linear-gradient(100deg,transparent,rgba(178,216,255,.075),transparent);
 transform:translateX(-160%) skewX(-16deg)}
.bl-feat.in::after{opacity:1;
 animation:bl-sheen 7.4s cubic-bezier(.4,.05,.3,1) 1.4s infinite}
@keyframes bl-sheen{
 0%{transform:translateX(-160%) skewX(-16deg)}
 55%,100%{transform:translateX(340%) skewX(-16deg)}}

/* ============================================================
   4 · Post grid + cards
   ============================================================ */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px;padding-bottom:10px}
.bl-post{display:flex;flex-direction:column;--blc:#7fb0ff;
 transition:transform .2s ease,border-color .25s ease,box-shadow .35s ease}
/* border-glow hover: hairline light + category-tinted aura */
.bl-post::before{content:'';position:absolute;top:0;left:12%;right:12%;
 height:1px;z-index:2;opacity:0;transition:opacity .3s ease;
 background:linear-gradient(90deg,transparent,
   color-mix(in srgb,var(--blc) 72%,transparent),transparent)}
.bl-post:hover,.bl-post:focus-visible{
 border-color:color-mix(in srgb,var(--blc) 46%,transparent);
 box-shadow:0 20px 50px rgba(2,8,25,.62),
            0 0 28px color-mix(in srgb,var(--blc) 15%,transparent)}
.bl-post:hover::before,.bl-post:focus-visible::before{opacity:1}
.bl-post:focus-visible{outline:none}
.bl-post h3{font-size:16.5px;line-height:1.35;letter-spacing:-.2px;margin:0 0 8px;transition:color .2s}
.bl-post:hover h3{color:#d6e7ff}
.bl-post p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden}

/* ---------- CSS-only cover art ---------- */
.bl-art{position:relative;height:112px;margin:-28px -26px 20px;
 display:flex;align-items:center;justify-content:center;overflow:hidden;
 border-bottom:1px solid var(--line);
 background:
  radial-gradient(120% 170% at 50% 118%,color-mix(in srgb,var(--blc) 24%,transparent),transparent 62%),
  linear-gradient(165deg,#0c1c3a,#081228)}
.bl-art::before{content:'';position:absolute;inset:0;opacity:.55;
 background-image:radial-gradient(rgba(148,178,255,.16) 1px,transparent 1.4px);
 background-size:16px 16px;
 -webkit-mask-image:linear-gradient(#000,transparent 88%);
 mask-image:linear-gradient(#000,transparent 88%)}
.bl-art::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(190,215,255,.05),transparent 42%)}
.bl-art-bg{position:absolute;right:-16px;bottom:-26px;width:132px;height:132px;
 color:var(--blc);opacity:.08;transform:rotate(-8deg);
 transition:transform .4s ease}
.bl-post:hover .bl-art-bg{transform:rotate(-8deg) scale(1.07)}
.bl-art-chip{position:relative;width:44px;height:44px;border-radius:13px;
 display:flex;align-items:center;justify-content:center;color:var(--blc);
 background:linear-gradient(135deg,
   color-mix(in srgb,var(--blc) 24%,transparent),
   color-mix(in srgb,var(--blc) 7%,transparent));
 border:1px solid color-mix(in srgb,var(--blc) 42%,transparent);
 box-shadow:0 8px 24px rgba(2,8,25,.45),
            0 0 22px color-mix(in srgb,var(--blc) 22%,transparent),
            inset 0 1px 0 rgba(255,255,255,.1);
 transition:transform .28s cubic-bezier(.2,.8,.3,1.2)}
.bl-art-chip svg{width:22px;height:22px}
.bl-art-chip-lg{width:64px;height:64px;border-radius:18px}
.bl-art-chip-lg svg{width:30px;height:30px}
.bl-feat:hover .bl-art-chip,.bl-post:hover .bl-art-chip{
 transform:translateY(-3px) rotate(-4deg)}

/* ---------- badges / meta ---------- */
.bl-cat{align-self:flex-start;font-size:10.5px;font-weight:800;
 letter-spacing:.09em;text-transform:uppercase;color:var(--blc);
 padding:4.5px 10px;border-radius:999px;margin-bottom:12px;
 background:color-mix(in srgb,var(--blc) 13%,transparent);
 border:1px solid color-mix(in srgb,var(--blc) 34%,transparent)}
.bl-feat .bl-cat{margin-bottom:0}
.bl-meta{margin-top:auto;padding-top:18px;display:flex;align-items:center;
 flex-wrap:wrap;font-size:12px;font-weight:500;color:var(--dim)}
.bl-meta>span+span::before{content:'·';margin:0 8px;color:#3a548a}
.bl-lvl{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;padding:4px 9px;border-radius:999px;
 color:var(--blv,#8ea3cc);
 background:color-mix(in srgb,var(--blv,#8ea3cc) 12%,transparent);
 border:1px solid color-mix(in srgb,var(--blv,#8ea3cc) 30%,transparent)}
.bl-lvl::before{content:none!important}
.bl-lvl-beg{--blv:#35d08a}
.bl-lvl-int{--blv:#ffc94d}
.bl-lvl-adv{--blv:#ff8296}

/* ---------- filter states ---------- */
.bl-off{display:none!important}
.bl-post.bl-pop{animation:bl-pop .5s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes bl-pop{
 from{opacity:0;transform:translateY(16px) scale(.985)}
 to{opacity:1;transform:none}}

/* ============================================================
   5 · Closing CTA band
   ============================================================ */
.bl-cta-sec{padding:40px 0 96px}
.bl-cta{max-width:840px;margin:0 auto;text-align:center;padding:54px 34px;
 background:linear-gradient(170deg,#0c1c3c,#071228)}
.bl-cta::before{content:'';position:absolute;top:-1px;left:14%;right:14%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(150,195,255,.55),transparent)}
.bl-cta::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(110% 300px at 50% -60px,rgba(56,140,255,.12),transparent 65%)}
.bl-cta>*{position:relative;z-index:1}
.bl-cta h2{margin-top:16px}
.bl-cta .sect-lead{margin-left:auto;margin-right:auto}
.bl-cta .cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ============================================================
   6 · Responsive + reduced motion
   ============================================================ */
@media (max-width:960px){
 .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bl-feat{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:680px){
 .bl-hero{padding-top:104px}
 .bl-grid{grid-template-columns:1fr}
 .bl-feat{grid-template-columns:1fr}
 .bl-feat-art{min-height:132px;border-right:0;border-bottom:1px solid var(--line)}
 .bl-count{display:none}
 .bl-bar{top:70px;margin:0 -18px;padding:10px 18px}
 .bl-cta{padding:42px 22px}
}
@media (prefers-reduced-motion:reduce){
 .bl-typed::after{animation:none;opacity:.7}
 .bl-typed.bl-done::after{animation:none;opacity:.7}
 .bl-feat.in::after{animation:none;opacity:0}
 .bl-post.bl-pop{animation:none}
 .bl-chip,.bl-chip::before,.bl-art-chip,.bl-art-bg,.bl-read svg,.bl-post h3{transition:none}
 .bl-chips.bl-ready .bl-chip-ink{transition:opacity .3s ease}
}