/* ═══════════════════════════════════════════════════════════════════════════
   mobile-nav.css — full-screen phone navigation.

   Loaded AFTER ls-system.css. The neubrutalist skin dresses this sheet as a
   floating card (white panel, black border, hard offset shadow, dimmed
   backdrop, rounded corners) — none of that belongs here, so the overrides
   below strip it back to a plain full-bleed screen: flat pastel blocks with
   no outline, plain rows with no dividers, one solid pill at the bottom.

   Structure, top to bottom:
     1. tile grid — 6 flat pastel service blocks, round white plate + animated
                    inline SVG (the site's ni-* motion vocabulary)
     2. pill      — all services
     3. rows      — plain links, round chevron on the right
     4. theme     — existing segmented control
     5. CTA       — solid pill

   Entrance motion staggers in on open; pure CSS, so it runs on phones with no
   GSAP involved, and drops entirely under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── full-screen shell: no card, no backdrop shade, no radius ──────────── */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu {
  padding: 0 !important;
  background: #fff;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* the dimmed/blurred backdrop only makes sense behind a floating card */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__backdrop {
  display: none !important;
}

:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__panel {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh;
  /* as a flex item it defaults to shrink:1 and was being squeezed shorter than
     its own content — the bottom of the sheet then rendered outside the panel */
  flex: 0 0 auto;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* No navbar clearance needed: the sheet (z-index 500) paints OVER the navbar
     (z-index 300), so reserving room for it just left a dead white band at the
     top. The close button lands where the hamburger was instead. */
  padding: 1.1rem 1.15rem 2.5rem !important;
  text-align: left !important;
}

/* close: plain round button in its own right-aligned row (absolute
   positioning put it straight on top of the second tile) */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__close {
  position: static !important;
  margin: 0 0 .9rem auto !important;
  display: flex !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background: #f2f4f2 !important;
  color: #090a0a !important;
  border: 0 !important;
  box-shadow: none !important;
}
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__close:hover {
  background: #090a0a !important;
  color: #fff !important;
}

/* ── 1. service tiles — flat pastel blocks, no outline ────────────────── */
.mm-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}

.mm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  min-height: 9.5rem;
  padding: 1.3rem .7rem;
  border: 0;
  border-radius: 1.15rem;
  box-shadow: none;
  background: #d5f7d5;
  color: #090a0a;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.25,.46,.45,.94), filter .18s;
}
.mm-tile:nth-child(2) { background: #ffdcc9; }
.mm-tile:nth-child(3) { background: #fdf0bd; }
.mm-tile:nth-child(4) { background: #cfe4fb; }
.mm-tile:nth-child(5) { background: #eed5ff; }
.mm-tile:nth-child(6) { background: #eed5ff; }

.mm-tile:hover,
.mm-tile:active { transform: scale(.975); filter: brightness(.97); }

.mm-tile__art {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #090a0a;
  display: grid;
  place-items: center;
}
.mm-tile__art svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: block;
  overflow: visible;
}

.mm-tile__name {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.28;
  text-align: center;
  color: #090a0a;
}

/* ── the ni-* motion vocabulary, restated for the sheet's tiles ───────── */
.mm-tile svg .ni-blink  { animation: ni-blink 2.4s ease-in-out infinite; }
.mm-tile svg .ni-blink2 { animation: ni-blink 2.4s ease-in-out .3s infinite; }
.mm-tile svg .ni-pulse  { transform-box: fill-box; transform-origin: center;
                          animation: ni-pulse 2.1s ease-in-out infinite; }
.mm-tile svg .ni-bob    { transform-box: fill-box; transform-origin: center;
                          animation: ni-bob 2.2s ease-in-out infinite; }
.mm-tile svg .ni-grow,
.mm-tile svg .ni-grow2,
.mm-tile svg .ni-grow3  { transform-box: fill-box; transform-origin: center bottom;
                          animation: ni-grow 1.8s ease-in-out infinite; }
.mm-tile svg .ni-grow2  { animation-delay: .3s; }
.mm-tile svg .ni-grow3  { animation-delay: .6s; }
.mm-tile svg .ni-flow   { stroke-dasharray: 4 4; animation: ni-flow 1.1s linear infinite; }
.mm-tile svg .ni-scan   { transform-box: fill-box; animation: ni-scan 2.6s ease-in-out infinite; }
.mm-tile svg .ni-d2     { animation-delay: .4s; }

/* ── 2. all-services pill ─────────────────────────────────────────────── */
.mm-allbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .7rem;
  padding: 1.15rem 1rem;
  border: 0;
  border-radius: 1.15rem;
  box-shadow: none;
  background: #eed5ff;
  color: #090a0a;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.25,.46,.45,.94), filter .18s;
}
.mm-allbtn:hover,
.mm-allbtn:active { transform: scale(.985); filter: brightness(.97); }
.mm-allbtn svg { width: 1.05em !important; height: 1.05em !important; flex: 0 0 auto; }

/* ── 3. link rows — plain, no dividers ────────────────────────────────── */
.mm-links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.mm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .82rem .2rem;
  color: #090a0a;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.mm-link__go {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #cdf0cd;
  border: 0;
  display: grid;
  place-items: center;
  color: #1a7a3c;
  transition: transform .18s cubic-bezier(.25,.46,.45,.94), background-color .18s, color .18s;
}
.mm-link__go svg { width: 1rem !important; height: 1rem !important; }
.mm-link:hover .mm-link__go,
.mm-link:active .mm-link__go { transform: translateX(3px); background: #090a0a; color: #fff; }

/* ── 4. theme row — drop the dashed rule + sticker chrome ─────────────── */
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) .mobile-menu__theme {
  margin-top: 1.6rem;
  padding-top: 0;
  border-top: 0;
}
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) #theme-switcher-mobile {
  background: #f2f4f2 !important;
  border: 0 !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  padding: 4px !important;
}
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) #theme-switcher-mobile .navbar__theme-btn {
  border-radius: 99px !important;
}
:root:not([data-theme="_x1"]):not([data-theme="_x2"]) #theme-switcher-mobile .navbar__theme-btn.active {
  background: #cdf0cd !important;
}

/* ── 5. CTA ───────────────────────────────────────────────────────────── */
.mm-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 1.9rem auto .5rem !important;
  padding: 1.05rem 2.6rem;
  border: 0;
  border-radius: 99px;
  box-shadow: none;
  background: #090a0a;
  color: #fff;
  font-size: 1.06rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.25,.46,.45,.94);
}
.mm-cta:hover,
.mm-cta:active { transform: scale(.97); }

/* ── entrance choreography ────────────────────────────────────────────── */
@keyframes mm-rise {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.mobile-menu:not([hidden]) .mm-tile,
.mobile-menu:not([hidden]) .mm-allbtn,
.mobile-menu:not([hidden]) .mm-links li,
.mobile-menu:not([hidden]) .mm-cta {
  animation: mm-rise .44s cubic-bezier(.25,.46,.45,.94) backwards;
}
.mobile-menu:not([hidden]) .mm-tile:nth-child(1) { animation-delay: .05s; }
.mobile-menu:not([hidden]) .mm-tile:nth-child(2) { animation-delay: .10s; }
.mobile-menu:not([hidden]) .mm-tile:nth-child(3) { animation-delay: .15s; }
.mobile-menu:not([hidden]) .mm-tile:nth-child(4) { animation-delay: .20s; }
.mobile-menu:not([hidden]) .mm-tile:nth-child(5) { animation-delay: .25s; }
.mobile-menu:not([hidden]) .mm-tile:nth-child(6) { animation-delay: .30s; }
.mobile-menu:not([hidden]) .mm-allbtn             { animation-delay: .35s; }
.mobile-menu:not([hidden]) .mm-links li:nth-child(1) { animation-delay: .40s; }
.mobile-menu:not([hidden]) .mm-links li:nth-child(2) { animation-delay: .45s; }
.mobile-menu:not([hidden]) .mm-links li:nth-child(3) { animation-delay: .50s; }
.mobile-menu:not([hidden]) .mm-links li:nth-child(4) { animation-delay: .55s; }
.mobile-menu:not([hidden]) .mm-links li:nth-child(5) { animation-delay: .60s; }
.mobile-menu:not([hidden]) .mm-cta                   { animation-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) .mm-tile,
  .mobile-menu:not([hidden]) .mm-allbtn,
  .mobile-menu:not([hidden]) .mm-links li,
  .mobile-menu:not([hidden]) .mm-cta { animation: none; }
  .mm-tile svg * { animation: none !important; }
}

/* ── dark + hacker themes ─────────────────────────────────────────────── */
[data-theme="dark"] .mobile-menu,
[data-theme="hacker"] .mobile-menu { background: #0F1117; }
[data-theme="hacker"] .mobile-menu { background: #0C140C; }

[data-theme="dark"] .mobile-menu__close,
[data-theme="hacker"] .mobile-menu__close {
  background: #1B1D26 !important; color: #E8EAED !important;
}

[data-theme="dark"] .mm-tile,
[data-theme="hacker"] .mm-tile { background: #1B1D26; color: #E8EAED; }
[data-theme="dark"] .mm-tile:nth-child(2n),
[data-theme="hacker"] .mm-tile:nth-child(2n) { background: #232631; }
[data-theme="dark"] .mm-tile__name,
[data-theme="hacker"] .mm-tile__name { color: #E8EAED; }
[data-theme="dark"] .mm-tile__art,
[data-theme="hacker"] .mm-tile__art { background: #0F1117; border-color: rgba(255,255,255,.12); }

[data-theme="dark"] .mm-allbtn,
[data-theme="hacker"] .mm-allbtn { background: #232631; color: #E8EAED; }

[data-theme="dark"] .mm-link,
[data-theme="hacker"] .mm-link { color: #E8EAED; }
[data-theme="dark"] .mm-link__go,
[data-theme="hacker"] .mm-link__go { background: #232631; color: #E8EAED; }

[data-theme="dark"] .mm-cta { background: #E8EAED; color: #0F1117; }
[data-theme="hacker"] .mm-cta { background: #00FF41; color: #0C140C; }
[data-theme="hacker"] .mm-tile__art { border-color: rgba(0,255,65,.25); }
[data-theme="hacker"] .mm-link__go { background: #0F2A12; color: #00FF41; }