/* Blackmint v1.54 "bmz": extra detail + small animations for the default black & mint theme ONLY.
   Every rule is scoped to html[data-theme-id=dark]; decor nodes are display:none in every other theme (zero style diff there).
   Static detail (corner ticks, hairlines) shows for everyone; motion needs html[data-bmz] (set by app/bmz.js only when
   prefers-reduced-motion is off) AND the no-preference media query. Transform + opacity only; decor is pointer-events:none. */
.bmz-d,.bmz-amb,.bmz-hl,.bmz-pd{display:none;pointer-events:none!important}
html[data-theme-id=dark] .bmz-rel{position:relative;isolation:isolate}

/* ---------- ambient background: two soft mint glows drifting very slowly (behind everything) ---------- */
html[data-theme-id=dark] .bmz-amb{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict}
.bmz-amb i{position:absolute;display:block;width:70vmax;height:70vmax;border-radius:50%;
 background:radial-gradient(closest-side,rgba(61,220,151,.11),rgba(61,220,151,.035) 55%,transparent);will-change:transform}
.bmz-amb i:nth-child(1){left:-25vmax;top:-30vmax}
.bmz-amb i:nth-child(2){right:-30vmax;bottom:-35vmax;background:radial-gradient(closest-side,rgba(127,240,192,.06),rgba(61,220,151,.02) 55%,transparent)}

/* ---------- card decor: mint corner ticks + a top hairline + a light that runs along the top edge ---------- */
html[data-theme-id=dark] .bmz-d{display:block;position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;z-index:-1;
 --k:rgba(61,220,151,.62);
 background:
  linear-gradient(var(--k),var(--k)) left 5px top 5px/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) left 5px top 5px/1px 10px no-repeat,
  linear-gradient(var(--k),var(--k)) right 5px top 5px/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) right 5px top 5px/1px 10px no-repeat,
  linear-gradient(var(--k),var(--k)) left 5px bottom 5px/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) left 5px bottom 5px/1px 10px no-repeat,
  linear-gradient(var(--k),var(--k)) right 5px bottom 5px/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) right 5px bottom 5px/1px 10px no-repeat,
  linear-gradient(90deg,transparent,rgba(191,255,227,.35) 50%,transparent) 50% 0/70% 1px no-repeat,
  linear-gradient(180deg,rgba(61,220,151,.10),rgba(61,220,151,.02) 46px,transparent 90px) 0 0/100% 100% no-repeat,
  radial-gradient(rgba(61,220,151,.07) .6px,transparent .9px) 0 0/5px 5px}
/* rounded cards: corner ticks would sit outside the curve, so keep only the inner top glow + hairline there */
html[data-theme-id=dark] .bmz-d.r{background:linear-gradient(180deg,rgba(61,220,151,.06),transparent 40px) 0 0/100% 100% no-repeat}
.bmz-d b{position:absolute;display:block;left:0;top:0;width:34%;height:1px;opacity:0;
 background:linear-gradient(90deg,transparent,#3ddc97 35%,#d9fff0 50%,#3ddc97 65%,transparent);transform:translateX(-110%);will-change:transform,opacity}
.bmz-d b+b{top:auto;bottom:0;left:auto;right:0;transform:translateX(110%)}
/* small pulse dot (top-right of the four headline stat cards) */
html[data-theme-id=dark] .bmz-pd{display:block;position:absolute;top:9px;right:10px;width:6px;height:6px;border-radius:50%;background:#3ddc97;box-shadow:0 0 6px rgba(61,220,151,.8);z-index:2}
html[data-theme-id=dark] .bmz-pd i{position:absolute;inset:0;border-radius:50%;border:1px solid #3ddc97;opacity:0;display:block}
html[dir=rtl][data-theme-id=dark] .bmz-pd{right:auto;left:10px}
/* header divider: hairline gradient + a slow light sweep */
html[data-theme-id=dark] .bmz-hl{display:block;position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;
 background:linear-gradient(90deg,transparent,rgba(61,220,151,.35) 20%,rgba(61,220,151,.35) 80%,transparent)}
.bmz-hl i{position:absolute;display:block;top:0;left:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,#bfffe3,transparent);transform:translateX(-120%);will-change:transform}
/* section titles: mint hairline that fades out to the right (RTL: to the left) */
html[data-theme-id=dark] .glh,html[data-theme-id=dark] section.glass>.vh{background-image:linear-gradient(90deg,rgba(61,220,151,.55),rgba(61,220,151,.12) 40%,transparent 75%);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;padding-bottom:7px}
html[dir=rtl][data-theme-id=dark] .glh,html[dir=rtl][data-theme-id=dark] section.glass>.vh{background-image:linear-gradient(270deg,rgba(61,220,151,.55),rgba(61,220,151,.12) 40%,transparent 75%)}
/* active side/bottom tab: soft glow on its icon (static) */
html[data-theme-id=dark] nav.tabs button.on svg{filter:drop-shadow(0 0 4px rgba(61,220,151,.55))}

/* =================== motion (only with data-bmz and no reduced-motion) =================== */
@media (prefers-reduced-motion:no-preference){
html[data-theme-id=dark][data-bmz] .bmz-amb i:nth-child(1){animation:bmzDrift1 46s ease-in-out infinite alternate}
html[data-theme-id=dark][data-bmz] .bmz-amb i:nth-child(2){animation:bmzDrift2 58s ease-in-out infinite alternate}
@keyframes bmzDrift1{to{transform:translate(18vmax,14vmax)}}
@keyframes bmzDrift2{to{transform:translate(-16vmax,-12vmax)}}

/* edge light runs only while the card is on screen (.bmz-in), staggered by --dl */
html[data-theme-id=dark][data-bmz] .bmz-in>.bmz-d b{animation:bmzRunT 9s cubic-bezier(.45,0,.25,1) var(--dl,0s) infinite}
html[data-theme-id=dark][data-bmz] .bmz-in>.bmz-d b+b{animation-name:bmzRunB;animation-delay:calc(var(--dl,0s) + 4.5s)}
@keyframes bmzRunT{0%{transform:translateX(-110%);opacity:0}2%{opacity:1}20%{transform:translateX(310%);opacity:1}22%,100%{transform:translateX(310%);opacity:0}}
@keyframes bmzRunB{0%{transform:translateX(110%);opacity:0}2%{opacity:.7}20%{transform:translateX(-310%);opacity:.7}22%,100%{transform:translateX(-310%);opacity:0}}

html[data-theme-id=dark][data-bmz] .bmz-in>.bmz-pd i{animation:bmzRing 2.4s ease-out var(--dl,0s) infinite}
@keyframes bmzRing{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3.2);opacity:0}}
html[data-theme-id=dark][data-bmz] .bmz-hl i{animation:bmzSweep 7s cubic-bezier(.45,0,.25,1) 1.5s infinite}
@keyframes bmzSweep{0%{transform:translateX(-120%)}35%,100%{transform:translateX(560%)}}

/* wordmark: a mint glint ripples across B-L-A-C-K-M-I-N-T once per 15 s logo cycle (v1.56: starts ~0.9s after app/leaflogo.js
   switches the logo to bmf-done, so it replays with the intro every 15 s instead of drifting on its own 10 s timer) */
html[data-theme-id=dark][data-bmz] header .logo.bmf-done b i,html[data-theme-id=dark][data-bmz] header .logo.bmf-done b+span i{animation:bmzGlint 1.4s ease-in-out .9s 1 both}
@keyframes bmzGlint{0%,100%{text-shadow:none}28.6%{text-shadow:0 0 6px rgba(61,220,151,.95),0 0 14px rgba(61,220,151,.45)}}
html[data-theme-id=dark][data-bmz] header .logo.bmf-done b i:nth-child(2){animation-delay:.98s}html[data-theme-id=dark][data-bmz] header .logo.bmf-done b i:nth-child(3){animation-delay:1.06s}
html[data-theme-id=dark][data-bmz] header .logo.bmf-done b i:nth-child(4){animation-delay:1.14s}html[data-theme-id=dark][data-bmz] header .logo.bmf-done b i:nth-child(5){animation-delay:1.22s}
html[data-theme-id=dark][data-bmz] header .logo.bmf-done b+span i:nth-child(1){animation-delay:1.30s}html[data-theme-id=dark][data-bmz] header .logo.bmf-done b+span i:nth-child(2){animation-delay:1.38s}
html[data-theme-id=dark][data-bmz] header .logo.bmf-done b+span i:nth-child(3){animation-delay:1.46s}html[data-theme-id=dark][data-bmz] header .logo.bmf-done b+span i:nth-child(4){animation-delay:1.54s}
/* data-source health dot breathes */
html[data-theme-id=dark][data-bmz] #hl i.ok{animation:bmzBreath 2.8s ease-in-out infinite}
@keyframes bmzBreath{50%{box-shadow:0 0 0 3px rgba(61,220,151,.18),0 0 8px rgba(61,220,151,.6)}}

/* scroll reveal (JS adds .bmz-rv only to sections that start below the fold, then .bmz-on, then removes both) */
html[data-theme-id=dark][data-bmz] .bmz-rv{opacity:0;transform:translateY(14px)}
html[data-theme-id=dark][data-bmz] .bmz-rv.bmz-on{opacity:1;transform:none;transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.8,.2,1)}
html[data-theme-id=dark][data-bmz] .bmz-st{animation:bmzRow .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes bmzRow{from{opacity:0;transform:translateX(-10px)}}

/* stat value flash on change */
html[data-theme-id=dark][data-bmz] #stats .stat.bmz-up>div[id]{animation:bmzUp 1.3s ease-out}
html[data-theme-id=dark][data-bmz] #stats .stat.bmz-dn>div[id]{animation:bmzDn 1.3s ease-out}
@keyframes bmzUp{0%{color:#3ddc97;text-shadow:0 0 10px rgba(61,220,151,.7)}100%{text-shadow:none}}
@keyframes bmzDn{0%{color:#ff6b6b;text-shadow:0 0 10px rgba(255,92,92,.6)}100%{text-shadow:none}}

/* icon micro-animations */
html[data-theme-id=dark][data-bmz] nav.tabs button.on svg{animation:bmzBob 3.6s ease-in-out infinite}
@keyframes bmzBob{50%{transform:translateY(-1.5px)}}
}

/* hover: lift + mint glow (mouse/trackpad only) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
html[data-theme-id=dark][data-bmz] #stats .stat,html[data-theme-id=dark][data-bmz] .glass.mv,html[data-theme-id=dark][data-bmz] nav.tabs button svg,
html[data-theme-id=dark][data-bmz] header .lgb,html[data-theme-id=dark][data-bmz] header .albell{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
html[data-theme-id=dark][data-bmz] #stats .stat:hover,html[data-theme-id=dark][data-bmz] .glass.mv:hover{transform:translateY(-3px);border-color:rgba(61,220,151,.6)!important;box-shadow:0 8px 22px -10px rgba(61,220,151,.55),inset 0 1px 0 rgba(191,255,227,.12)!important}
html[data-theme-id=dark][data-bmz] nav.tabs button:hover svg{transform:translateY(-2px) scale(1.08)}
html[data-theme-id=dark][data-bmz] header .lgb:hover,html[data-theme-id=dark][data-bmz] header .albell:hover{transform:translateY(-1px);box-shadow:0 0 12px -2px rgba(61,220,151,.55)}
html[data-theme-id=dark][data-bmz] .glr{transition:background-color .2s}
html[data-theme-id=dark][data-bmz] .glr:hover{background-color:rgba(61,220,151,.06)}
}
/* paused while the tab is hidden */
html.bmz-hid .bmz-amb i,html.bmz-hid .bmz-d b,html.bmz-hid .bmz-pd i,html.bmz-hid .bmz-hl i,html.bmz-hid header .logo i,html.bmz-hid #hl i,html.bmz-hid nav.tabs svg{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.bmz-amb i,.bmz-d b,.bmz-pd i,.bmz-hl i{animation:none!important;opacity:0}.bmz-rv{opacity:1!important;transform:none!important}}
html[data-theme-id=dark] #glD .glh{background-image:linear-gradient(90deg,rgba(255,92,92,.55),rgba(255,92,92,.12) 40%,transparent 75%)}
html[dir=rtl][data-theme-id=dark] #glD .glh{background-image:linear-gradient(270deg,rgba(255,92,92,.55),rgba(255,92,92,.12) 40%,transparent 75%)}

/* v1.54b bottom bounce: .wrap only (no fixed/sticky descendants), transform only, no fill so .wrap returns to transform:none */
@keyframes bmzBnc{0%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.2,.7,.35,1)}
 30%{transform:translate3d(0,calc(var(--bmzb,10px)*-1),0);animation-timing-function:cubic-bezier(.3,.6,.4,1)}
 62%{transform:translate3d(0,calc(var(--bmzb,10px)*.16),0);animation-timing-function:ease-in-out}
 84%{transform:translate3d(0,calc(var(--bmzb,10px)*-.04),0)}100%{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:no-preference){html[data-bmz][data-theme-id=dark] .wrap.bmz-bnc{animation:bmzBnc .42s linear;will-change:transform}}