/* Blog: colour, hover animation and small interactive extras. Loaded by every generated blog page (see BlogPublisher.cs). */
:root{--bfx-a:#7C4DFF;--bfx-b:#ec4899;--bfx-c:#0EA5E9;--bfx-d:#f59e0b}
#bfx-prog{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#f4a020,#ec4899,#7C4DFF,#0EA5E9);z-index:300;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(520px 420px at 6% 8%,rgba(244,160,32,.16),transparent 70%),radial-gradient(560px 460px at 94% 6%,rgba(124,77,255,.2),transparent 70%),radial-gradient(520px 480px at 50% 100%,rgba(14,165,233,.14),transparent 70%)}
main,header,footer{position:relative;z-index:1}

/* heading */
.blog-head .kicker{display:inline-block;padding:6px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(236,72,153,.16));border:1px solid rgba(124,77,255,.4);color:var(--bfx-a)}
.blog-head h1{background:linear-gradient(100deg,var(--text),var(--bfx-a) 55%,var(--bfx-b));-webkit-background-clip:text;background-clip:text;color:transparent}

/* tags: every tag gets its own colour (set from JS as --tg) */
.tag{background:hsl(var(--tg,262) 85% 60% / .16)!important;color:hsl(var(--tg,262) 80% 58%)!important;border:1px solid hsl(var(--tg,262) 85% 60% / .35);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html[data-theme="dark"] .tag,body .tag{color:hsl(var(--tg,262) 90% 72%)!important}
html[data-theme="light"] .tag{color:hsl(var(--tg,262) 70% 40%)!important}

/* cards */
.post-card,.blog-featured .feat-inner{position:relative;backdrop-filter:blur(8px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,opacity .7s}
.post-card::before,.blog-featured .feat-inner::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--x,50%) var(--y,0%),rgba(255,255,255,.1),transparent 45%);opacity:0;transition:opacity .3s;z-index:1}
.post-card:hover::before,.blog-featured:hover .feat-inner::before{opacity:1}
.post-thumb,.feat-img{position:relative;overflow:hidden}
.post-thumb img,.feat-img img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}
.post-thumb::after,.feat-img::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-130%) skewX(-20deg);pointer-events:none}
.post-card h2,.blog-featured h2{transition:color .3s}
.read-post-btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .3s}
.read-post-btn::after{content:" →";display:inline-block;transition:transform .3s}
/* featured post: a coloured edge that travels around it */
@property --bfx-r{syntax:"<angle>";initial-value:0deg;inherits:false}
.blog-featured .feat-inner{border-color:transparent}
.blog-featured .feat-inner::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--bfx-r),#f4a020,#ec4899,#7C4DFF,#0EA5E9,#f4a020);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bfxSpin 6s linear infinite;pointer-events:none}
@keyframes bfxSpin{to{--bfx-r:360deg}}
.feat-tag::before{content:"★ ";}
@keyframes bfxSweep{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(280%) skewX(-20deg)}}
@keyframes bfxWiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg) scale(1.08)}65%{transform:rotate(5deg) scale(1.08)}}
@media (hover:hover){
  .post-card:hover{transform:translateY(-10px) rotate(-.4deg);box-shadow:0 34px 60px -28px rgba(124,77,255,.6);border-color:var(--bfx-a)}
  .post-card:nth-child(3n+2):hover{transform:translateY(-10px) rotate(.4deg);box-shadow:0 34px 60px -28px rgba(236,72,153,.55);border-color:var(--bfx-b)}
  .post-card:nth-child(3n+3):hover{transform:translateY(-12px) scale(1.02);box-shadow:0 34px 60px -28px rgba(14,165,233,.55);border-color:var(--bfx-c)}
  .post-card:hover .post-thumb img,.blog-featured:hover .feat-img img{transform:scale(1.1)}
  .post-card:hover .post-thumb::after,.blog-featured:hover .feat-img::after{animation:bfxSweep 1.1s ease}
  .post-card:hover h2,.blog-featured:hover h2{color:var(--bfx-a)}
  .post-card:hover .tag,.blog-featured:hover .tag{animation:bfxWiggle .7s ease}
  .post-card:hover .read-post-btn,.blog-featured:hover .read-post-btn{transform:translateX(6px);box-shadow:0 12px 24px -12px rgba(124,77,255,.8)}
  .post-card:hover .read-post-btn::after,.blog-featured:hover .read-post-btn::after{transform:translateX(5px)}
  .blog-featured:hover .feat-inner{transform:translateY(-6px);box-shadow:0 40px 80px -34px rgba(124,77,255,.55)}
  .bfx-chip:hover{transform:translateY(-3px) scale(1.07)}
  .bfx-share a:hover,.bfx-share button:hover{transform:translateY(-4px) rotate(-3deg)}
  #bfx-top:hover{transform:translateY(-4px) scale(1.1)}
}

/* search + filter bar */
.bfx-tools{max-width:960px;margin:0 auto 26px;padding:0 20px;display:flex;flex-direction:column;gap:14px;align-items:center;position:relative;z-index:2}
.bfx-search{position:relative;width:min(520px,100%)}
.bfx-search input{width:100%;padding:13px 18px 13px 44px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.bfx-search input:focus{outline:none;border-color:var(--bfx-a);box-shadow:0 0 0 4px rgba(124,77,255,.2)}
.bfx-search::before{content:"🔎";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px}
.bfx-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bfx-chip{border:1px solid hsl(var(--tg,262) 85% 60% / .45);background:hsl(var(--tg,262) 85% 60% / .1);color:var(--text);padding:7px 15px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
.bfx-chip b{margin-left:6px;font-weight:800;opacity:.7}
.bfx-chip.on{background:linear-gradient(135deg,hsl(var(--tg,262) 85% 58%),hsl(calc(var(--tg,262) + 50) 85% 58%));border-color:transparent;color:#fff}
.bfx-empty{display:none;text-align:center;color:var(--muted);padding:30px 0;grid-column:1/-1}
.bfx-hide{display:none!important}

/* scroll-in */
.bfx-pre{opacity:0;transform:translateY(30px)}
.bfx-in{opacity:1;transform:none}

/* post pages: share row + back to top */
.bfx-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:30px 0 4px;padding-top:20px;border-top:1px dashed var(--border)}
.bfx-share span{font-weight:800;font-size:14px;margin-right:4px}
.bfx-share a,.bfx-share button{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:0;font:inherit;font-size:13.5px;font-weight:700;color:#fff;cursor:pointer;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.bfx-share .wa{background:linear-gradient(135deg,#25D366,#128C7E)}.bfx-share .fb{background:linear-gradient(135deg,#1877F2,#0a58ca)}.bfx-share .cp{background:linear-gradient(135deg,#7C4DFF,#ec4899)}
#bfx-top{position:fixed;right:22px;bottom:96px;z-index:150;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s}
#bfx-top.on{opacity:1;pointer-events:auto;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bfx-pre{opacity:1;transform:none}}