/* ══ Zelencio header + menu refresh, homepage motion ═════════════════════ */
:root{--zm-cy:#00D4FF;--zm-ease:cubic-bezier(.22,.8,.24,1)}

/* ── Header: glass everywhere, fully see-through over the home film ───── */
.site-header{transition:background .45s var(--zm-ease),border-color .45s,box-shadow .45s,backdrop-filter .45s;background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line-soft) 70%,transparent)}
.site-header.zx-scrolled{box-shadow:0 10px 30px -18px rgba(6,14,26,.35)}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--zm-cy),transparent);opacity:0;transform:scaleX(.2);transition:opacity .6s,transform .9s var(--zm-ease);pointer-events:none}
.site-header.zx-scrolled:after{opacity:.55;transform:scaleX(1)}

body.zm-home .zf{margin-top:calc(-1 * var(--zm-hh,62px))}
body.zm-home .zf__stage{top:0;height:100vh;height:100svh}
body.zm-home .zf__skip{top:calc(var(--zm-hh,62px) + 14px)}
body.zm-home .zf__corner{top:calc(var(--zm-hh,62px) + 60px)}
body.zm-home .zf__px{top:calc(var(--zm-hh,62px) + clamp(16px,4vh,40px))}
html.zm-over .site-header{background:linear-gradient(180deg,rgba(2,6,15,.55),rgba(2,6,15,0));border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.zm-over .site-header:after{opacity:0}
html.zm-over .site-header .logo-dark{display:block!important}
html.zm-over .site-header .logo-light{display:none!important}
html.zm-over .site-header .nav__link,html.zm-over .site-header .icon-btn{color:rgba(235,245,255,.86)}
html.zm-over .site-header .nav__link:hover,html.zm-over .site-header .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
html.zm-over .site-header .btn--ghost{--btn-fg:#fff;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
html.zm-over .site-header .avatar{box-shadow:0 0 0 2px rgba(0,212,255,.55)}

/* header pieces */
.site-header .btn:not(.btn--ghost){box-shadow:0 6px 22px -8px rgba(0,212,255,.7);transition:transform .2s var(--zm-ease),box-shadow .3s}
.site-header .btn:not(.btn--ghost):hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(0,212,255,.9)}
.site-header .logo{transition:transform .35s var(--zm-ease)}.site-header .logo:hover{transform:scale(1.03)}
.menu-btn{position:relative;width:40px;height:40px;border-radius:12px!important;clip-path:none!important;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:background .2s,border-color .2s,transform .2s}
html.zm-over .menu-btn{border-color:rgba(255,255,255,.18)}
.menu-btn:active{transform:scale(.94)}
.menu-btn svg path{transition:transform .3s var(--zm-ease)}
.menu-btn:hover svg{animation:zmWig .5s var(--zm-ease)}
@keyframes zmWig{40%{transform:scaleX(.8)}100%{transform:none}}

/* ── Slide-out menu ─────────────────────────────────────────────────── */
.menu-scrim{background:radial-gradient(120% 80% at 100% 0,rgba(0,212,255,.18),rgba(2,8,18,.62) 60%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.menu-panel{width:min(400px,92vw);border-left:0;border-radius:24px 0 0 24px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-raised) 92%,var(--zm-cy) 8%) 0,var(--bg-raised) 220px);
  box-shadow:none;visibility:hidden;transition:transform .5s var(--zm-ease),box-shadow .5s,visibility 0s .5s}
.menu-panel.is-open{visibility:visible;box-shadow:-30px 0 80px rgba(2,8,18,.35);transition:transform .5s var(--zm-ease),box-shadow .5s,visibility 0s}
.menu-panel:before{content:"";position:absolute;top:-120px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.28),transparent 65%);pointer-events:none;animation:zmGlow 7s ease-in-out infinite}
@keyframes zmGlow{50%{transform:translate(-30px,40px) scale(1.15)}}
.menu-panel__head{position:relative;border-bottom:0;padding:18px 20px 10px}
.menu-panel__head .icon-btn{width:40px;height:40px;border-radius:12px;clip-path:none;background:color-mix(in srgb,var(--ink) 6%,transparent);transition:transform .35s var(--zm-ease),background .2s}
.menu-panel__head .icon-btn:hover{transform:rotate(90deg);background:color-mix(in srgb,var(--zm-cy) 18%,transparent)}
.menu-panel__body{position:relative;padding:8px 16px 40px}

/* staggered entrance */
.menu-panel .zm-in{opacity:0;transform:translateX(26px)}
.menu-panel.is-open .zm-in{opacity:1;transform:none;transition:opacity .5s var(--zm-ease),transform .6s var(--zm-ease);transition-delay:calc(var(--i,0) * 38ms + 120ms)}

/* account card */
.zm-me{display:flex;align-items:center;gap:12px;padding:14px;margin:4px 0 12px;border-radius:18px;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--zm-cy) 18%,transparent),color-mix(in srgb,#8b5cf6 12%,transparent));border:1px solid color-mix(in srgb,var(--zm-cy) 28%,transparent)}
.zm-me .avatar{width:44px;height:44px;flex-shrink:0;box-shadow:0 0 0 2px var(--zm-cy)}
.zm-me__id{display:flex;flex-direction:column;min-width:0;flex:1}
.zm-me__id b{font-size:.98rem}.zm-me__id small{color:var(--ink-3,var(--ink-2));font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zm-me__go{font-size:1.4rem;opacity:.5}

/* quick tiles */
.zm-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 16px}
.zm-quick a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border-radius:16px;font-size:.76rem;font-weight:600;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);transition:transform .25s var(--zm-ease),background .2s,border-color .2s}
.zm-quick a:hover,.zm-quick a:active{transform:translateY(-3px);border-color:color-mix(in srgb,var(--zm-cy) 55%,transparent);background:color-mix(in srgb,var(--zm-cy) 10%,transparent)}
.zm-q__i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#001018;background:linear-gradient(135deg,#00D4FF,#7af0ff);box-shadow:0 8px 18px -8px rgba(0,212,255,.9)}
.zm-quick a:nth-child(2) .zm-q__i{background:linear-gradient(135deg,#8b5cf6,#c4b5fd);color:#fff}
.zm-quick a:nth-child(3) .zm-q__i{background:linear-gradient(135deg,#16c784,#7ee8b8)}
.zm-quick a:nth-child(4) .zm-q__i{background:linear-gradient(135deg,#f59e0b,#fcd34d)}

.zm-sec{font:700 .68rem/1 var(--font-display,inherit);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3,var(--ink-2));padding:8px 6px 8px;opacity:.8}

/* rows */
.menu-panel .menu-link,.menu-panel .menu-group__head{clip-path:none;border-radius:14px}
.zm-row,.menu-group__head{display:flex!important;align-items:center;gap:12px;padding:10px 10px!important;font-weight:600}
.zm-row .zm-t{flex:1}
.zm-go{opacity:.35;font-size:1.2rem;transition:transform .25s var(--zm-ease),opacity .2s}
.zm-row:hover .zm-go{transform:translateX(3px);opacity:.8}
.zm-gh{display:flex;align-items:center;gap:12px}
.zm-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:var(--zm-cy);
  background:color-mix(in srgb,var(--zm-cy) 12%,transparent);border:1px solid color-mix(in srgb,var(--zm-cy) 22%,transparent);transition:transform .3s var(--zm-ease),background .2s,color .2s}
[data-theme="light"] .zm-ic{color:#0090b3}
.zm-row:hover .zm-ic,.menu-group__head:hover .zm-ic,.menu-group.is-open .zm-ic{transform:scale(1.08) rotate(-6deg);background:linear-gradient(135deg,#00D4FF,#7af0ff);color:#001018;border-color:transparent}
.menu-panel .menu-group{border-bottom:0;margin:2px 0;border-radius:16px;transition:background .25s}
.menu-panel .menu-group.is-open{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.menu-panel .menu-group__head{width:100%;justify-content:space-between}
.menu-panel .menu-group__body{padding:0 6px}
.menu-panel .menu-group.is-open .menu-group__body{padding-bottom:8px}
.zm-sub{display:flex!important;align-items:center;gap:10px;padding:9px 10px 9px 14px!important;margin-left:22px;border-left:1px dashed color-mix(in srgb,var(--line) 90%,transparent);border-radius:0 12px 12px 0!important;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .35s var(--zm-ease),background .15s,color .15s}
.menu-group.is-open .zm-sub{opacity:1;transform:none}
.menu-group.is-open .zm-sub:nth-child(2){transition-delay:30ms}.menu-group.is-open .zm-sub:nth-child(3){transition-delay:60ms}.menu-group.is-open .zm-sub:nth-child(4){transition-delay:90ms}.menu-group.is-open .zm-sub:nth-child(5){transition-delay:120ms}.menu-group.is-open .zm-sub:nth-child(n+6){transition-delay:150ms}
.zm-si{display:grid;place-items:center;color:var(--ink-3,var(--ink-2));opacity:.8}
.zm-sub:hover .zm-si{color:var(--zm-cy);opacity:1}
.zm-out{display:flex!important;align-items:center;gap:12px;margin-top:10px;color:var(--down)!important;font-weight:600}
.zm-out .zm-ic{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent);border-color:color-mix(in srgb,var(--down) 25%,transparent)}
.menu-panel .menu-settings{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:16px 6px 0}
.menu-panel .menu-auth{grid-template-columns:1fr 1fr;margin:4px 0 14px}
.menu-panel .menu-auth .btn{border-radius:14px;clip-path:none}

/* ── Homepage motion (after the film) ───────────────────────────────── */
.zm-rv{opacity:0;transition:opacity .9s var(--zm-ease),transform 1s var(--zm-ease),filter .9s var(--zm-ease);transition-delay:var(--zd,0ms);will-change:opacity,transform}
.zm-rv.zm-up{transform:translateY(38px);filter:blur(6px)}
.zm-rv.zm-pop{transform:translateY(46px) scale(.92) perspective(900px) rotateX(10deg);transform-origin:50% 100%}
.zm-rv.zm-l{transform:translateX(-40px)}
.zm-rv.zm-r{transform:translateX(40px)}
.zm-rv.zm-on{opacity:1;transform:none;filter:none}
.zm-glint{position:relative;overflow:hidden}
.zm-glint.zm-on:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:zmGlint 1.3s var(--zm-ease) calc(var(--zd,0ms) + 350ms) 1 both;pointer-events:none;border-radius:inherit}
[data-theme="dark"] .zm-glint.zm-on:after{background:linear-gradient(110deg,transparent 30%,rgba(0,212,255,.18) 50%,transparent 70%)}
@keyframes zmGlint{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.zm-rv{opacity:1!important;transform:none!important;filter:none!important}.menu-panel .zm-in,.zm-sub{opacity:1;transform:none}}