/* assets/site.css — shared by every public page (linked from includes/head.php).
   The menu bar (includes/nav.php), the live-network background (assets/site.js) and the
   interactive helpers. Everything is prefixed zn- / z- so it can't clash with the older
   styles inline in head.php. */

/* ── Top strip ── */
.zn-strip{position:relative;z-index:201;font-size:.72rem;color:var(--muted2);border-bottom:1px solid var(--border);background:rgba(9,17,28,.72)}
.zn-wrap{max-width:1240px;margin:0 auto;padding:0 2rem;display:flex;align-items:center}
.zn-strip .zn-wrap{gap:1.4rem;height:34px}
.zn-strip a{color:var(--muted2);text-decoration:none;transition:color .2s}
.zn-strip a:hover{color:#fff}
.zn-live{display:flex;align-items:center;gap:.45rem;margin-right:auto}
.zn-live i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.zn-live.up i{background:var(--green);animation:znPing 2.4s infinite}
.zn-live.degraded i{background:var(--amber)}
.zn-live.down i{background:var(--red)}
@keyframes znPing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ── Menu bar ── */
.zn-bar{position:sticky;top:0;z-index:200;border-bottom:1px solid transparent;background:rgba(13,27,42,.55);transition:background .3s,box-shadow .3s,border-color .3s}
.zn-bar.solid{background:rgba(11,22,35,.88);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.zn-bar .zn-wrap{gap:1rem;height:74px;transition:height .3s}
.zn-bar.solid .zn-wrap{height:62px}
.zn-logo{display:block;flex-shrink:0}
.zn-logo img{height:34px;width:auto;display:block;transition:height .3s}
.zn-bar.solid .zn-logo img{height:30px}
.zn-bar nav{flex:1;min-width:0}   /* the menu takes the free space, so the buttons sit at the right edge */
.zn-menu{display:flex;list-style:none;margin:0 0 0 1.6rem;padding:0;position:relative;flex:1}
.zn-menu>li{position:relative}
.zn-menu>li>a,.zn-menu>li>button{display:flex;align-items:center;gap:.35rem;background:none;border:none;font:inherit;color:var(--muted2);font-size:.86rem;font-weight:500;padding:.6rem .9rem;cursor:pointer;text-decoration:none;transition:color .2s}
.zn-menu>li>a:hover,.zn-menu>li>button:hover,.zn-menu>li.open>button,.zn-menu>li>.on{color:#fff}
.zn-menu svg{transition:transform .25s}
.zn-menu>li.open svg{transform:rotate(180deg)}
.zn-menu>li.zn-uline{position:absolute;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),#a078ff);transition:left .3s cubic-bezier(.3,.7,.3,1),width .3s cubic-bezier(.3,.7,.3,1),opacity .2s;opacity:0;pointer-events:none}
.zn-drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;background:rgba(14,25,40,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.5);padding:.6rem;z-index:5}
.zn-drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.zn-menu>li.open .zn-drop,.zn-menu>li:focus-within .zn-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.zn-drop.zn-mega{left:-.6rem;transform:translate(0,8px);width:min(760px,92vw);display:grid;grid-template-columns:1fr 1fr 230px;gap:.2rem}
.zn-menu>li.open .zn-drop.zn-mega,.zn-menu>li:focus-within .zn-drop.zn-mega{transform:translate(0,0)}
.zn-small{width:300px}
.zn-it{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .8rem;border-radius:11px;color:#fff;text-decoration:none;transition:background .15s}
.zn-it:hover,.zn-it:focus-visible{background:rgba(0,194,255,.07);outline:none}
.zn-ic{width:34px;height:34px;border-radius:9px;background:rgba(0,194,255,.08);border:1px solid rgba(0,194,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.zn-it b{display:block;font-size:.84rem;font-weight:600;margin-bottom:.1rem}
.zn-it small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}
.zn-from{color:var(--cyan)!important;font-size:.7rem!important;font-weight:600;margin-top:.2rem}
.zn-feat{grid-row:span 4;border-radius:13px;padding:1.2rem;background:linear-gradient(160deg,rgba(0,194,255,.12),rgba(123,47,190,.18)),#15233a;border:1px solid rgba(0,194,255,.18);display:flex;flex-direction:column}
.zn-feat b{font-family:"Syne",sans-serif;font-size:1rem;margin-bottom:.4rem}
.zn-feat p{color:var(--muted2);font-size:.78rem;line-height:1.55;flex:1;margin:0 0 1rem}
.zn-feat .zn-go{display:block;text-align:center;background:linear-gradient(135deg,var(--cyan),#009ed4);color:var(--navy);padding:.6rem 1rem;border-radius:9px;font-weight:700;font-size:.78rem;text-decoration:none}
.zn-feat .zn-all{display:block;text-align:center;margin-top:.6rem;font-size:.75rem;color:var(--muted2);text-decoration:none}
.zn-feat .zn-all:hover{color:#fff}
.zn-acts{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-shrink:0}
.zn-portal{display:flex;align-items:center;gap:.45rem;color:var(--muted2);border:1px solid rgba(255,255,255,.12);padding:.5rem .95rem;border-radius:9px;font-weight:600;font-size:.8rem;text-decoration:none;transition:all .2s}
.zn-portal:hover{color:#fff;border-color:rgba(192,132,252,.5);background:rgba(123,47,190,.12)}
.zn-cta{display:inline-block;background:linear-gradient(135deg,var(--cyan),#009ed4);color:var(--navy);padding:.55rem 1.15rem;border-radius:9px;font-weight:700;font-size:.8rem;text-decoration:none;box-shadow:0 0 18px rgba(0,194,255,.25);transition:transform .2s,box-shadow .2s}
.zn-cta:hover{box-shadow:0 4px 22px rgba(0,194,255,.45)}
.zn-ham{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:none;cursor:pointer;position:relative;flex-shrink:0}
.zn-ham i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,opacity .2s,top .3s}
.zn-ham i:nth-child(1){top:14px}.zn-ham i:nth-child(2){top:20px}.zn-ham i:nth-child(3){top:26px}
body.zn-open .zn-ham i:nth-child(1){top:20px;transform:rotate(45deg)}
body.zn-open .zn-ham i:nth-child(2){opacity:0}
body.zn-open .zn-ham i:nth-child(3){top:20px;transform:rotate(-45deg)}
/* Phone menu */
.zn-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:199;background:rgba(10,19,31,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:1px solid var(--border);transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.3,.7,.3,1),visibility .35s;padding:116px 1.2rem 1.2rem;display:flex;flex-direction:column;overflow:auto}
body.zn-open .zn-panel{transform:none;visibility:visible}
.zn-shade{position:fixed;inset:0;z-index:198;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
body.zn-open .zn-shade{opacity:1;visibility:visible}
.zn-grp{border-bottom:1px solid var(--border)}
.zn-grp>button,.zn-grp>a{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:#fff;font:inherit;font-size:1rem;font-weight:500;padding:1rem .2rem;cursor:pointer;text-align:left;text-decoration:none}
.zn-grp svg{transition:transform .25s}
.zn-sub{display:none;padding:0 0 .8rem}
.zn-grp.open .zn-sub{display:block}
.zn-grp.open svg{transform:rotate(180deg)}
.zn-sub a{display:flex;gap:.7rem;align-items:center;padding:.55rem .4rem;color:var(--muted2);font-size:.9rem;border-radius:8px;text-decoration:none}
.zn-sub a:hover{color:#fff;background:rgba(255,255,255,.03)}
.zn-btns{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;padding-top:1.4rem}
.zn-btns a{text-align:center;padding:.85rem;border-radius:10px;font-weight:600;justify-content:center}
@media(max-width:980px){
  .zn-menu,.zn-acts .zn-portal,.zn-acts .zn-cta{display:none}
  .zn-ham{display:block}
  .zn-acts{margin-left:auto}
}
@media(max-width:560px){
  .zn-wrap{padding:0 1rem}
  .zn-strip .zn-hide-s{display:none}
}

/* ── Live-network background (assets/site.js draws on #bg-canvas) ── */
#bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
/* Calm behind the text: the network is at full strength in the side strips (the margins either
   side of the content), then fades behind the central column where the text sits. Phones (text is full width) get it fainter all over. */
#bg-canvas{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 11%,rgba(0,0,0,.45) 20%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.45) 80%,#000 89%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#000 11%,rgba(0,0,0,.45) 20%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.45) 80%,#000 89%,#000 100%)}
@media(max-width:980px){#bg-canvas{-webkit-mask-image:none;mask-image:none;opacity:.4}}
/* A soft dark halo behind headings and text, so nothing passing behind them gets in the way */
.h-h1,.h-h2,.h-eye,.h-sub,.h-lead,.h-pill,.stl,.eye,.ssb,.hero h1,.hsub{text-shadow:0 0 18px rgba(13,27,42,.95),0 0 6px rgba(13,27,42,.9)}
.h-grad,.grad{text-shadow:none;filter:drop-shadow(0 0 14px rgba(13,27,42,.9))}

/* ── Interactive helpers ── */
/* Rise in as it scrolls into view (assets/site.js adds .in) */
/* (only with scripts running: head.php marks <html class="zjs">, so nothing stays hidden without them) */
.zjs .z-rv{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.zjs .z-rv.in{opacity:1;transform:none}
/* A glow that follows the pointer, and an optional slight 3D tilt */
.z-glow{position:relative;overflow:hidden}
.z-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,194,255,.13),rgba(123,47,190,.06) 35%,transparent 60%)}
.z-glow:hover::after{opacity:1}
.z-glow.z-tilting{transition:transform .08s linear,border-color .25s}
.z-glow.z-settle{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .25s,opacity .75s ease}
/* Buttons that lean towards the pointer */
.z-mag{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
@media(prefers-reduced-motion:reduce){
  .zjs .z-rv{opacity:1;transform:none;transition:none}
  .zn-live.up i{animation:none}
}

/* ── Page changes: a quick cross-fade between pages while the menu bar stays put (Chrome, Edge,
   Safari 18.2+; other browsers change pages as before). Both pages must opt in: the recycling page
   opts out ($page_no_fade, includes/head.php) because it plays its own transformation (html.rc-vt). ── */
@view-transition{navigation:auto}
.zn-bar{view-transition-name:zn-bar}
html:not(.rc-vt)::view-transition-old(root){animation:zvt-out .18s ease both}
html:not(.rc-vt)::view-transition-new(root){animation:zvt-in .32s ease both}
html:not(.rc-vt)::view-transition-group(zn-bar){animation-duration:.25s}
@keyframes zvt-out{to{opacity:0}}
@keyframes zvt-in{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ── Footer: the live status pill (assets/site.js fills it from status-check.php) ── */
.f-status{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .85rem .38rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--muted2);font-size:.72rem;text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.f-status:hover{color:#fff;border-color:rgba(0,194,255,.45);background:rgba(0,194,255,.07)}
.f-status i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.f-status.up{border-color:rgba(74,222,128,.28)}
.f-status.up i{animation:zf-pulse 2.5s ease-in-out infinite}
.f-status.degraded{border-color:rgba(251,191,36,.4)}
.f-status.down{border-color:rgba(248,113,113,.45)}
@keyframes zf-pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.f-status.up i{animation:none}}