/* MahodBillz motion layer (2026-11, v2). Loaded after brand.css.
   One signature surface (the aurora "instrument" that carries the period
   cost), pointer-lit cards, a gliding navigation highlight, a navigation
   progress line, busy submit buttons, ripples and reveal-on-scroll.
   Everything JS-driven is added by app.js only when it runs, so without
   scripting the page is complete and static. CSP-safe: no inline styles;
   positions are written through the CSSOM. */

@property --mb-sheen{syntax:'<percentage>';inherits:false;initial-value:120%}

/* ---------- Dashboard: aurora instrument ---------- */
.hero-card{padding:8px;gap:8px 30px;border-radius:18px;background:var(--surface)}
.hero-card.card-lift:hover{transform:none}
.hero-figure{position:relative;isolation:isolate;overflow:hidden;flex:1 1 300px;max-width:440px;padding:24px 26px 20px;border-radius:13px;color:#E6EFEB;
  background:linear-gradient(165deg,#0F2620 0%,#0A1915 55%,#07120F 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.06),0 24px 44px -26px rgba(7,18,15,.9)}
/* Drifting light: three soft fields rotating slowly behind the figure. */
.hero-figure::before{content:"";position:absolute;inset:-45%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(32% 28% at 28% 32%,rgba(19,151,109,.62),transparent 70%),
    radial-gradient(30% 26% at 74% 68%,rgba(110,224,178,.34),transparent 70%),
    radial-gradient(26% 24% at 62% 18%,rgba(64,140,200,.30),transparent 70%);
  filter:blur(18px);animation:mb-aurora 22s ease-in-out infinite alternate}
/* Engineering grid that fades out from the corner, plus a one-time sheen. */
.hero-figure::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(105deg,transparent calc(var(--mb-sheen) - 14%),rgba(255,255,255,.07) var(--mb-sheen),transparent calc(var(--mb-sheen) + 14%)),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(130% 100% at 100% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(130% 100% at 100% 0%,#000 25%,transparent 80%);
  animation:mb-sheen 1.8s var(--ease-out) .5s both}
.hero-figure .hero-label{color:rgba(230,239,235,.66);display:inline-flex;align-items:center;gap:8px}
.hero-figure .hero-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(110,224,178,.6);animation:mb-live 2.4s ease-out infinite}
.hero-figure .hero-amount{color:#fff;font-weight:600;letter-spacing:-.045em;text-shadow:0 0 42px rgba(110,224,178,.22);font-variant-numeric:tabular-nums;transition:color .25s,text-shadow .35s}
.hero-figure .hero-amount:hover{color:var(--mint);text-shadow:0 0 52px rgba(110,224,178,.45)}
.hero-figure .hero-meta{color:rgba(230,239,235,.68)}
.hero-figure .delta-chip{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero-figure .delta-chip.is-up{background:rgba(232,120,54,.18);color:#FFC59C}
.hero-figure .delta-chip.is-down{background:rgba(110,224,178,.14);color:var(--mint)}
.hero-figure .open-period-label{background:rgba(255,196,84,.13);color:#FFD68F;box-shadow:inset 0 0 0 1px rgba(255,196,84,.22)}
.hero-figure .hero-split{grid-template-columns:1fr;gap:0;padding-top:6px;border-top-color:rgba(255,255,255,.09)}
.hero-figure .hero-split div,.hero-figure .hero-split div:first-child{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border:0}
.hero-figure .hero-split div+div{border-top:1px solid rgba(255,255,255,.07)}
.hero-figure .hero-split dt{color:rgba(230,239,235,.6);font-size:13px}
.hero-figure .hero-split dd{color:#fff;font-size:15px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-figure .hero-other{color:rgba(230,239,235,.6)}
.hero-figure .cost-detail-link{display:inline-flex;align-items:center;gap:6px;color:var(--mint);font-weight:500;text-decoration:none}
.hero-figure .cost-detail-link span{transition:translate .3s var(--ease-out)}
.hero-figure .cost-detail-link:hover{color:#fff}
.hero-figure .cost-detail-link:hover span{translate:-4px 0}
.hero-figure a:focus-visible{outline-color:var(--mint)}
.hero-chart{padding:16px 14px 10px 18px}
.chart-total-line{filter:drop-shadow(0 6px 10px rgba(11,20,17,.18))}
.chart-series-line{filter:drop-shadow(0 4px 8px rgba(12,122,88,.16))}

@keyframes mb-aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(7%,-5%,0) rotate(28deg) scale(1.12)}
  100%{transform:translate3d(-6%,6%,0) rotate(-18deg) scale(1.04)}}
@keyframes mb-sheen{from{--mb-sheen:120%}to{--mb-sheen:-30%}}
@keyframes mb-live{0%{box-shadow:0 0 0 0 rgba(110,224,178,.55)}70%,100%{box-shadow:0 0 0 8px rgba(110,224,178,0)}}

/* API overview: the dark summary card shares the same living light. */
.api-overview-summary article.primary{isolation:isolate}
.api-overview-summary article.primary::after{content:"";position:absolute;inset:-50%;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 26% at 30% 70%,rgba(19,151,109,.4),transparent 70%),radial-gradient(26% 22% at 72% 30%,rgba(110,224,178,.22),transparent 70%);
  filter:blur(16px);animation:mb-aurora 24s ease-in-out infinite alternate}

/* ---------- KPI cards ---------- */
.kpi-icon{transition:transform .45s var(--spring),background-color .25s,color .25s,box-shadow .25s}
.kpi-strip article:hover .kpi-icon{transform:translateY(-2px) rotate(-8deg) scale(1.06);background:var(--accent);color:#fff;box-shadow:0 8px 16px -8px rgba(12,122,88,.7)}
.kpi-strip article.is-warning .kpi-icon{background:var(--amber-bg);color:var(--amber-ink)}
.kpi-strip article.is-warning:hover .kpi-icon{background:#D4912A;color:#fff;box-shadow:0 8px 16px -8px rgba(212,145,42,.7)}
.kpi-strip strong{font-variant-numeric:tabular-nums}

/* ---------- Pointer-lit surfaces ---------- */
.mb-spot{position:relative}
.mb-glow{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(19,151,109,.06),transparent 45%)}
.mb-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(19,151,109,.55),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mb-spot:hover>.mb-glow{opacity:1}
.hero-figure>.mb-glow{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(110,224,178,.12),transparent 50%)}
.hero-figure>.mb-glow::before{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(110,224,178,.7),transparent 60%)}
.alerts-critical .alert-card>.mb-glow::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(209,59,46,.5),transparent 55%)}
.alerts-critical .alert-card>.mb-glow{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(209,59,46,.045),transparent 45%)}

/* ---------- Navigation ---------- */
.nav-list{position:relative}
.nav-list a{z-index:1}
.nav-glide{position:absolute;top:0;inset-inline:0;z-index:0;height:40px;border-radius:9px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.075));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .32s var(--ease-out),height .32s var(--ease-out),opacity .25s}
.nav-glide.is-snap{transition:none}
.nav-list.is-gliding .nav-glide{opacity:1}
.nav-list.has-glide a:hover{background:transparent}
.nav-list a .icon{transition:transform .35s var(--spring),color .2s}
.nav-list a:hover .icon{transform:translateX(-2px)}
.brand-mark circle{fill:var(--mint);animation:mb-blink 4s ease-in-out infinite}
.brand-mark{transition:transform .5s var(--spring)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
@keyframes mb-blink{0%,100%{opacity:1}50%{opacity:.45}}

/* Counters pop in once instead of appearing. */
.nav-count,.alert-bell-count{animation:mb-pop .55s var(--spring) .35s backwards}
@keyframes mb-pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}

/* Active month and active tab slide between pages (same-document names). */
.month-chip[aria-current=page]{view-transition-name:month-active}
.workspace-tabs a[aria-current=page]{view-transition-name:tab-active}
::view-transition-group(month-active),::view-transition-group(tab-active){animation-duration:.4s;animation-timing-function:var(--ease-out)}

/* ---------- Navigation progress ---------- */
.mb-progress{position:fixed;top:0;inset-inline:0;z-index:1000;height:2px;pointer-events:none;opacity:0;transform:scaleX(0);transform-origin:right;
  background:linear-gradient(270deg,var(--mint),var(--accent-bright) 60%,var(--accent));box-shadow:0 0 10px rgba(110,224,178,.7)}
.mb-progress.is-active{opacity:1;animation:mb-progress 6s cubic-bezier(.08,.82,.17,1) forwards}
.mb-progress.is-done{transform:scaleX(1);opacity:0;animation:none;transition:transform .2s,opacity .35s .15s}
@keyframes mb-progress{from{transform:scaleX(0)}10%{transform:scaleX(.35)}to{transform:scaleX(.92)}}

/* ---------- Buttons ---------- */
.mb-ripple{position:absolute;z-index:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;animation:mb-ripple .6s var(--ease-out) forwards}
.button.primary .mb-ripple,.button.dark .mb-ripple,.button.danger .mb-ripple{background:#fff;opacity:.35}
@keyframes mb-ripple{to{transform:scale(28);opacity:0}}
.button>*{position:relative;z-index:1}
.button.is-busy{pointer-events:none;color:transparent!important;text-shadow:none}
.button.is-busy>*{opacity:0}
.button.is-busy::before{content:"";position:absolute;top:50%;left:50%;z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mb-spin .7s linear infinite}
.button.is-busy:not(.primary):not(.dark):not(.danger)::before{border-color:rgba(11,20,17,.15);border-top-color:var(--accent)}
@keyframes mb-spin{to{rotate:360deg}}

/* ---------- Reveal on scroll ---------- */
.mb-reveal{opacity:0;translate:0 18px;animation:none!important;transition:opacity .6s var(--ease-out),translate .75s var(--ease-out)}
.mb-reveal.is-in{opacity:1;translate:none}

/* ---------- Tables and lists ---------- */
table tbody tr:nth-child(-n+14){animation:mb-in .42s var(--ease-out) backwards}
table tbody tr:nth-child(2){animation-delay:.03s}table tbody tr:nth-child(3){animation-delay:.06s}
table tbody tr:nth-child(4){animation-delay:.09s}table tbody tr:nth-child(5){animation-delay:.12s}
table tbody tr:nth-child(6){animation-delay:.15s}table tbody tr:nth-child(7){animation-delay:.18s}
table tbody tr:nth-child(n+8):nth-child(-n+14){animation-delay:.21s}
.ledger-list>a{transition:background-color .2s,translate .3s var(--ease-out)}
.ledger-list>a:hover{translate:-3px 0}
.ledger-list>a .row-go{transition:translate .3s var(--ease-out),opacity .2s}
.ledger-list>a:hover .row-go{translate:-3px 0}

/* ---------- Alerts ---------- */
.alerts-critical .alert-card:not(.is-seen){animation:mb-in .4s var(--ease-out) backwards,mb-attention 1.6s ease-out .5s 2}
@keyframes mb-attention{0%{box-shadow:var(--shadow-xs),0 0 0 0 rgba(209,59,46,.28)}70%,100%{box-shadow:var(--shadow-xs),0 0 0 10px rgba(209,59,46,0)}}

/* ---------- Sign-in ---------- */
.login-intro{isolation:isolate}
.login-intro::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(28% 24% at 25% 70%,rgba(19,151,109,.55),transparent 70%),
    radial-gradient(26% 22% at 75% 30%,rgba(110,224,178,.25),transparent 70%),
    radial-gradient(24% 20% at 55% 85%,rgba(64,140,200,.22),transparent 70%);
  filter:blur(24px);animation:mb-aurora 26s ease-in-out infinite alternate}
.login-intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 40%,#000,transparent 85%);mask-image:radial-gradient(90% 80% at 50% 40%,#000,transparent 85%)}
.login-float{background:rgba(17,36,31,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-color:rgba(255,255,255,.1)}
.login-copy h1{font-weight:600;letter-spacing:-.035em;background:linear-gradient(180deg,#fff 30%,#A6EFD0);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-line{filter:drop-shadow(0 0 8px rgba(110,224,178,.6))}
.login-form>*{animation:mb-in .5s var(--ease-out) backwards}
.login-form>*:nth-child(2){animation-delay:.06s}.login-form>*:nth-child(3){animation-delay:.12s}
.login-form>*:nth-child(4){animation-delay:.18s}.login-form>*:nth-child(5){animation-delay:.24s}
.login-form>*:nth-child(n+6){animation-delay:.3s}
.login-submit .login-arrow{transition:translate .3s var(--ease-out)}
.login-submit:hover .login-arrow{translate:-4px 0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero-figure{max-width:none}
}
@media (max-width:760px){
  .hero-card{padding:6px;gap:6px}
  .hero-figure{padding:20px 18px 18px}
  .hero-chart{padding:12px 10px 8px}
}

/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-figure::before,.hero-figure::after,.api-overview-summary article.primary::after,.login-intro::before,
  .hero-figure .hero-label::before,.brand-mark circle,.nav-count,.alert-bell-count,
  table tbody tr,.alerts-critical .alert-card,.login-form>*{animation:none!important}
  .mb-reveal{opacity:1;translate:none;transition:none}
  .mb-progress,.mb-ripple{display:none}
  .nav-glide,.kpi-icon,.ledger-list>a{transition:none}
}
@media print{
  .mb-reveal{opacity:1!important;translate:none!important}
  .mb-progress,.mb-glow,.nav-glide{display:none!important}
  .hero-figure{color:#000;background:#fff;box-shadow:none}
  .hero-figure::before,.hero-figure::after{display:none}
  .hero-figure .hero-amount,.hero-figure .hero-split dd{color:#000;text-shadow:none}
}