/* Shared interaction layer for meshayla.com. Progressive enhancement:
   everything is visible and usable without JavaScript. */

/* Offset anchor jumps for the fixed nav */
section[id],header[id]{scroll-margin-top:76px;}

/* Nav: gains depth once the page scrolls */
nav{transition:box-shadow .25s ease,background .25s ease;}
nav.scrolled{box-shadow:0 6px 24px rgba(28,26,23,.10);background:rgba(253,250,246,.98);}
.nav-links a[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--green2);}

/* Scroll reveal */
.js-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s);}
.js-reveal.in{opacity:1;transform:none;}

/* Back to top */
.to-top{position:fixed;right:20px;bottom:20px;z-index:900;border:0;cursor:pointer;background:var(--ink);color:var(--cream);font:700 13px 'Nunito',sans-serif;padding:11px 16px;border-radius:50px;box-shadow:0 8px 24px rgba(28,26,23,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s;}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--charcoal,#3B3530);}

/* Impact stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem;}
.stat{background:rgba(255,255,255,.75);border:1px solid var(--border);border-radius:18px;padding:1.1rem 1.2rem;}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:clamp(28px,3.2vw,40px);line-height:1.1;color:var(--ink);}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:.35rem;line-height:1.5;}

/* Build filter */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;align-items:center;}
.fbtn{font:700 12.5px 'Nunito',sans-serif;background:var(--white);color:var(--ink);border:1.5px solid var(--border);border-radius:50px;padding:7px 16px;cursor:pointer;transition:border-color .2s,background .2s;}
.fbtn:hover{border-color:var(--green2);}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.fcount{font-size:12.5px;color:var(--muted);margin-left:.4rem;}
.proj[hidden]{display:none;}

/* Clickable diagram nodes */
.node{cursor:pointer;outline:none;}
.node rect{transition:stroke-width .15s,filter .15s;}
.node:hover rect{stroke-width:2.6;}
.node:focus-visible rect{stroke:var(--green2);stroke-width:3.4;}
.node.active rect{stroke-width:3;filter:drop-shadow(0 3px 6px rgba(28,26,23,.2));}
.dinfo{margin-top:.8rem;font-size:13.5px;color:var(--charcoal,#3B3530);background:var(--cream);border:1px dashed var(--border);border-radius:12px;padding:10px 14px;min-height:3.1em;}
.dinfo strong{color:var(--ink);}

@media(max-width:960px){.stats{grid-template-columns:1fr 1fr;}.to-top{right:14px;bottom:14px;}}

@media(prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none;transition:none;}
  nav,.to-top,.node rect{transition:none;}
}