/* ZapGroup — mobile-menu motion (v269). Loaded by includes/menu-motion.php.
   State classes are set by assets/js/menu-motion.js:
     nav.zg-mm-in / nav.zg-mm-out   opening / closing (reverse) animation running
     body.zg-mm-x                   hamburger shows as X (keep-header mode)
     body.zg-mm-closing             reverse animation running (backdrop fades)
   Timings come from custom properties the JS writes on the nav. */

/* The legacy slide-in keyframes (style.css) are replaced by the module's. */
body.zg-mm-on .mobile-nav.open { animation: none; }

/* ── Panel-level animations (clip-path / transform / opacity) ─────────── */
body.zg-mm-on .mobile-nav.zg-mm-in,
body.zg-mm-on .mobile-nav.zg-mm-out {
  animation-duration: var(--zg-mm-bgd, 560ms);
  animation-timing-function: cubic-bezier(.77, 0, .18, 1);
  animation-fill-mode: both;
  will-change: clip-path, transform, opacity;
}
body.zg-mm-on .mobile-nav.zg-mm-out {
  animation-duration: var(--zg-mm-bgo, 450ms);
  animation-delay: var(--zg-mm-iout, 200ms);
  animation-direction: reverse;
}
/* clipwipe: drawer + full-screen right → left, dropdown top → bottom */
body.zg-mm-a-clipwipe .mobile-nav.zg-mm-in,
body.zg-mm-a-clipwipe .mobile-nav.zg-mm-out { animation-name: zgMmWipeR; }
body.zg-mm-a-clipwipe.zg-mnav-dropdown .mobile-nav.zg-mm-in,
body.zg-mm-a-clipwipe.zg-mnav-dropdown .mobile-nav.zg-mm-out { animation-name: zgMmWipeD; }
/* iris: circle grows from the hamburger (--zg-mm-x / --zg-mm-y / --zg-mm-r) */
body.zg-mm-a-iris .mobile-nav.zg-mm-in,
body.zg-mm-a-iris .mobile-nav.zg-mm-out { animation-name: zgMmIris; }
/* stagger: light panel move, the links carry the motion */
body.zg-mm-a-stagger .mobile-nav.zg-mm-in,
body.zg-mm-a-stagger .mobile-nav.zg-mm-out { animation-name: zgMmFade; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
body.zg-mm-a-stagger.zg-mnav-drawer .mobile-nav.zg-mm-in,
body.zg-mm-a-stagger.zg-mnav-drawer .mobile-nav.zg-mm-out { animation-name: zgMmFromR; }
body.zg-mm-a-stagger.zg-mnav-dropdown .mobile-nav.zg-mm-in,
body.zg-mm-a-stagger.zg-mnav-dropdown .mobile-nav.zg-mm-out { animation-name: zgMmFromT; }
/* v399 — wave: the panel pours down from the top with a rolling wavy edge
   (mask = a solid block + a wave strip under it; reversed on close). */
body.zg-mm-a-wave .mobile-nav.zg-mm-in,
body.zg-mm-a-wave .mobile-nav.zg-mm-out {
  animation-name: zgMmWave;
  animation-timing-function: cubic-bezier(.45, .05, .25, 1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V10Q105 20 90 10T60 10T30 10T0 10Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V10Q105 20 90 10T60 10T30 10T0 10Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 240px 56px, 100% 120vh; mask-size: 240px 56px, 100% 120vh;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  will-change: mask-position;
}
@keyframes zgMmWave {
  /* the wave strip always sits right under the solid block's edge (block 120vh tall) */
  from { -webkit-mask-position: 0 -56px, 0 calc(-120vh - 56px); mask-position: 0 -56px, 0 calc(-120vh - 56px); }
  to   { -webkit-mask-position: 360px 120vh, 0 0; mask-position: 360px 120vh, 0 0; }
}
/* fx-layer animations: the panel itself stays put, its background is drawn by
   the strips / cells of .zg-mm-fx (injected by the JS, coloured --zg-mm-bg). */
body.zg-mm-a-blinds .mobile-nav.zg-mm-in, body.zg-mm-a-blinds .mobile-nav.zg-mm-out,
body.zg-mm-a-shutter .mobile-nav.zg-mm-in, body.zg-mm-a-shutter .mobile-nav.zg-mm-out,
body.zg-mm-a-pixels .mobile-nav.zg-mm-in, body.zg-mm-a-pixels .mobile-nav.zg-mm-out {
  animation: none;
  background: transparent !important;
  box-shadow: none !important;
}
/* v445 — cross-fixes.css paints the panel with "body #mobile-nav.mobile-nav {background:… !important}"
   (id specificity) — that solid panel hid the cells, so pixels/blinds/shutter showed nothing. */
html body:is(.zg-mm-a-blinds,.zg-mm-a-shutter,.zg-mm-a-pixels) #mobile-nav.mobile-nav:is(.zg-mm-in,.zg-mm-out) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mobile-nav .zg-mm-fx { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mobile-nav.zg-mm-in .zg-mm-fx, .mobile-nav.zg-mm-out .zg-mm-fx { display: block; }
.mobile-nav .zg-mm-fx i {
  position: absolute;
  display: block;
  background: var(--zg-mm-bg, #1f2937);
  animation-name: var(--k, zgMmFade);
  animation-duration: var(--zg-mm-cd, 460ms);
  animation-timing-function: cubic-bezier(.77, 0, .18, 1);
  animation-fill-mode: both;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.mobile-nav.zg-mm-out .zg-mm-fx i {
  animation-duration: var(--zg-mm-co, 380ms);
  animation-direction: reverse;
  animation-delay: calc(var(--zg-mm-iout, 200ms) + var(--dr, 0ms));
}

/* ── Items (links, logo, close button) rise in staggered ──────────────── */
.mobile-nav.zg-mm-in .zg-mm-item {
  animation: zgMmRise var(--zg-mm-idur, 480ms) cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--zg-mm-i0, 200ms) + var(--i, 0) * var(--zg-mm-istep, 50ms));
}
.mobile-nav.zg-mm-out .zg-mm-item {
  animation: zgMmSink var(--zg-mm-iout, 200ms) ease-in both;
  animation-delay: calc(var(--zg-mm-rstep, 0ms) * var(--ri, 0));
}
/* The absolutely-positioned close button must keep its own position. */
.mobile-nav .mobile-nav-close.zg-mm-item { position: absolute; }

@keyframes zgMmWipeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes zgMmWipeD { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zgMmIris {
  from { clip-path: circle(0px at var(--zg-mm-x, 90%) var(--zg-mm-y, 32px)); }
  to   { clip-path: circle(var(--zg-mm-r, 150vmax) at var(--zg-mm-x, 90%) var(--zg-mm-y, 32px)); }
}
@keyframes zgMmFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes zgMmFromR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes zgMmFromT { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes zgMmFromB { from { transform: translateY(100%); } to { transform: none; } }
@keyframes zgMmSX    { from { transform: scaleX(0); } to { transform: none; } }
@keyframes zgMmSY    { from { transform: scaleY(0); } to { transform: none; } }
@keyframes zgMmPix   { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes zgMmRise  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes zgMmSink  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }

/* Backdrop fades with the reverse animation. */
body.zg-mm-closing .zg-mnav-backdrop { opacity: 0; transition: opacity var(--zg-mm-backdrop-out, 400ms) ease; }

/* ── Keep-header mode: header on top, menu opens BELOW it ─────────────── */
body.zg-mm-keep.menu-open #site-header {
  z-index: 99995 !important;
  background: var(--zg-mm-bg, #1f2937) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.zg-mm-keep #mobile-nav { top: var(--zg-mm-top, 64px); }
body.zg-mm-keep:not(.zg-mnav-drawer):not(.zg-mnav-dropdown) #mobile-nav { padding-top: 2.4rem; overflow-y: auto; }
body.zg-mm-keep.zg-mnav-drawer #mobile-nav,
body.zg-mm-keep.zg-mnav-dropdown #mobile-nav { padding-top: 1.4rem; }
body.zg-mm-keep.zg-mnav-dropdown #mobile-nav { max-height: calc(100vh - var(--zg-mm-top, 64px)); }
body.zg-mm-keep #mobile-nav .mobile-nav-close,
body.zg-mm-keep #mobile-nav .zg-mnav-logo { display: none !important; }

/* Hamburger ↔ X morph (the X closes the menu). */
body.zg-mm-keep .menu-toggle { position: relative; z-index: 2; }
body.zg-mm-keep .menu-toggle span { transition: transform .4s cubic-bezier(.77, 0, .18, 1), opacity .25s ease, background-color .3s ease; }
body.zg-mm-keep.zg-mm-x .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.zg-mm-keep.zg-mm-x .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.zg-mm-keep.zg-mm-x .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header colours follow the menu scheme while it is open. */
body.zg-mm-keep.menu-open #site-header .menu-toggle span { background: #fff !important; }
body.zg-mm-keep.menu-open #site-header .site-logo,
body.zg-mm-keep.menu-open #site-header .site-logo-name,
body.zg-mm-keep.menu-open #site-header .site-logo-mark { color: #fff !important; }
body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white) #site-header .site-logo img,
body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white) #site-header .site-logo svg { filter: brightness(0) invert(1) !important; }
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .site-logo img,
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .site-logo img,
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .site-logo svg,
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .site-logo svg { filter: none !important; }
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .menu-toggle span { background: var(--color-text) !important; }
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .menu-toggle span { background: #111 !important; }
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .site-logo,
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .site-logo-name,
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header .site-logo-mark { color: var(--color-text) !important; }
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .site-logo,
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .site-logo-name,
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header .site-logo-mark { color: #111 !important; }
/* v312 — the header logo must stay visible over the open menu in BOTH header
   states (before scroll = transparent, after scroll = .scrolled) and in every
   preset. Scrolled-state recolouring (light logo -> black silhouette, tint mask,
   white-logo-image swap, preset filters with 2-id specificity) used to win over
   the rules above, painting the logo the menu's own colour after scrolling.
   Four ids here outrank every preset; the logo is driven only by the MENU scheme:
     dark menu        -> white logo (the uploaded white logo image if any, else a
                         white silhouette of the normal logo)
     light/white menu -> the logo's own colours; a LIGHT logo becomes dark. */
/* Presets that float the header as a CARD / pill once scrolled (or always, e.g.
   Frost) painted a white card behind a white logo + X: while the menu is open the
   whole header strip takes the menu colour, so the inner card goes clear. */
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header :is(.container, .header-inner) { background: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .menu-toggle span { background: #fff !important; }
html body.zg-mm-keep.menu-open.zg-mnav-c-light:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .menu-toggle span { background: var(--color-text) !important; }
html body.zg-mm-keep.menu-open.zg-mnav-c-white:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .menu-toggle span { background: #111 !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header :is(.site-logo-name, .site-logo-mark) { color: #fff !important; }
html body.zg-mm-keep.menu-open.zg-mnav-c-light:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header :is(.site-logo-name, .site-logo-mark) { color: var(--color-text) !important; }
html body.zg-mm-keep.menu-open.zg-mnav-c-white:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header :is(.site-logo-name, .site-logo-mark) { color: #111 !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo { opacity: 1 !important; visibility: visible !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo-tint { display: none !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo-default { display: inline-block !important; opacity: 1 !important; visibility: visible !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo-img-white { display: none !important; }
html body.zg-mm-keep.menu-open:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo :is(img, svg, .site-logo-favicon) { opacity: 1 !important; visibility: visible !important; }
html body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo :is(img, svg, .site-logo-favicon) { filter: brightness(0) invert(1) !important; }
html body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-white-logo-img .site-logo-default { display: none !important; }
html body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-white-logo-img .site-logo-img-white { display: inline-block !important; filter: none !important; }
html body.zg-mm-keep.menu-open:is(.zg-mnav-c-light, .zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header .site-logo :is(img, svg, .site-logo-favicon) { filter: none !important; }
html body.zg-mm-keep.menu-open:is(.zg-mnav-c-light, .zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-light-logo .site-logo :is(img, svg, .site-logo-favicon) { filter: brightness(0) !important; }
/* A studio TINT replaces the plain silhouette in the recoloured state, as on the header. */
html body.zg-mm-keep.menu-open:is(.zg-mnav-c-light, .zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-light-logo .site-logo-tint,
html body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-white-logo .site-logo-tint { display: block !important; }
html body.zg-mm-keep.menu-open:is(.zg-mnav-c-light, .zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-light-logo .site-logo-default:has(.site-logo-tint) img.custom-logo,
html body.zg-mm-keep.menu-open:not(.zg-mnav-c-light):not(.zg-mnav-c-white):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3) #site-header.zg-white-logo .site-logo-default:has(.site-logo-tint) img.custom-logo { opacity: 0 !important; filter: none !important; }

/* v341 — presets whose logo never changes colour on scroll (silk, glowarc,
   institute, marcotte, studio): the open mobile menu shows the logo 1:1 as the
   scrolled header does — no tint, no invert, no white-image swap. */
html body.zg-mm-keep.menu-open:is(.zg-preset-silk, .zg-preset-glowarc, .zg-preset-institute, .zg-preset-marcotte, .zg-preset-studio):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header .site-logo-tint,
html body.zg-mm-keep.menu-open:is(.zg-preset-silk, .zg-preset-glowarc, .zg-preset-institute, .zg-preset-marcotte, .zg-preset-studio):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header .site-logo-img-white { display: none !important; }
html body.zg-mm-keep.menu-open:is(.zg-preset-silk, .zg-preset-glowarc, .zg-preset-institute, .zg-preset-marcotte, .zg-preset-studio):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header .site-logo-default { display: inline-block !important; }
html body.zg-mm-keep.menu-open:is(.zg-preset-silk, .zg-preset-glowarc, .zg-preset-institute, .zg-preset-marcotte, .zg-preset-studio):not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header .site-logo :is(img, svg, .site-logo-favicon) { filter: none !important; opacity: 1 !important; }
html body.zg-mm-keep.menu-open.zg-preset-silk:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header.zg-light-logo .site-logo :is(img, svg, .site-logo-favicon) { filter: var(--sk-logo-light) !important; }
html body.zg-mm-keep.menu-open.zg-preset-silk:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header.zg-white-logo .site-logo :is(img, svg, .site-logo-favicon) { filter: var(--sk-logo-dark) !important; }
html body.zg-mm-keep.menu-open.zg-preset-glowarc:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header.zg-light-logo .site-logo :is(img, svg, .site-logo-favicon) { filter: var(--ga-logo-light) !important; }
html body.zg-mm-keep.menu-open.zg-preset-glowarc:not(#zg-mk1):not(#zg-mk2):not(#zg-mk3):not(#zg-mk4) #site-header.zg-white-logo .site-logo :is(img, svg, .site-logo-favicon) { filter: var(--ga-logo-dark) !important; }

/* Light / white menus: a hairline separates the header from the panel. */
body.zg-mm-keep.menu-open.zg-mnav-c-light #site-header,
body.zg-mm-keep.menu-open.zg-mnav-c-white #site-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important; }

/* ── Reduced motion: no animation at all ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.zg-mm-on .mobile-nav.open,
  .mobile-nav.zg-mm-in, .mobile-nav.zg-mm-out,
  .mobile-nav .zg-mm-item, .mobile-nav .zg-mm-fx i { animation: none !important; }
  .mobile-nav .zg-mm-fx { display: none !important; }
  body.zg-mm-keep .menu-toggle span { transition: none; }
}