/* ==========================================================================
   Nexus landing v5: the top bar.
   Mark on the left; Apps, Create, Effects, Pricing; Open editor
   on the right. Create and Apps open ONE full-width panel in the page's own
   dark (no second tone). A 1px cyan line glides under the open trigger.
   House motion only: easing cubic-bezier(0.16, 1, 0.3, 1), short linear
   fades, an 8px rise. No caps, radius 0.
   ========================================================================== */

.nv, .nv-sheet {
  --nv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nv-cyan: #7df9ff;
  --nv-glide: 340ms;
  --nv-pad: 8px;      /* panel inset */
  --nv-row-x: 14px;   /* row text inset */
}
.nv.nv-open {
  background: #050505; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.nv-row { position: relative; display: flex; align-items: center; gap: 28px; width: 100%; }

/* ---- the mark --------------------------------------------------------------- */
.nv-mark { display: inline-flex; align-items: center; color: #fff; text-decoration: none; padding: 6px; margin-left: -6px; }
.nv-mark svg { width: 20px; height: 20px; display: block; transition: opacity 0.15s; }
.nv-mark:hover svg { opacity: 0.8; }
.nv-mark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the links -------------------------------------------------------------- */
.nv-links { position: relative; }
.nv-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nv-top {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0;
  font: inherit; font-size: 13.5px; letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  color: var(--x-fg-2); background: none; border: 0; border-radius: 0; text-decoration: none; cursor: pointer;
  transition: color 0.15s linear;
}
.nv-top:hover, .nv-top.is-on { color: #fff; }
.nv-top:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.nv-chev { width: 10px; height: 10px; display: block; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 300ms var(--nv-ease); }
.nv-trig[aria-expanded="true"] .nv-chev { transform: rotate(180deg); }

/* the open trigger's line: glides from Create to Apps */
.nv-hl {
  position: absolute; left: 0; top: 50%; z-index: 0; height: 1px; width: var(--w, 0px); margin-top: 13px;
  transform: translateX(var(--x, 0px)); opacity: 0; pointer-events: none;
  background: var(--nv-cyan);
  transition: transform var(--nv-glide) var(--nv-ease), width var(--nv-glide) var(--nv-ease), opacity 160ms linear;
}
.nv-hl.on { opacity: 1; }
.nv-hl.snap { transition: none; }

/* ---- right side ------------------------------------------------------------- */
.nv-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ---- the panel ------------------------------------------------------------------
   Full width, the page's own dark: when it opens the bar goes solid #050505 and
   the panel hangs under it in the same tone, one hairline at the bottom, and the
   page behind dims. Its height follows the open menu. Opening unfolds on the
   house ease; closing folds on a slower, even curve so it never snaps shut.
   The pieces inside rise in one after another and drift out together. */
.nv { --nv-fold: cubic-bezier(0.45, 0, 0.2, 1); --nv-close: 460ms; }
.nv-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
  background: #050505; box-shadow: inset 0 -1px 0 transparent;
  transition: height var(--nv-close) var(--nv-fold), box-shadow 200ms linear, visibility 0s linear var(--nv-close);
}
.nv-panel.open {
  height: var(--h, 0px); visibility: visible; pointer-events: auto;
  box-shadow: inset 0 -1px 0 var(--x-line);
  transition: height 420ms var(--nv-ease), box-shadow 200ms linear, visibility 0s;
}
.nv-panel.snap, .nv-panel.snap .nv-menu, .nv-panel.snap .nv-in, .nv-menu.snap, .nv-menu.snap .nv-in { transition: none; }
.nv-menus { position: relative; max-width: var(--x-max); margin: 0 auto; }
.nv-menu {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 400px minmax(0, 560px); align-items: start; column-gap: clamp(32px, 4vw, 64px);
  padding: 28px var(--x-pad) 36px;
  visibility: hidden; pointer-events: none;
  transition: transform 420ms var(--nv-ease), visibility 0s linear 260ms;
}
.nv-menu.active { visibility: visible; pointer-events: auto; transition: transform 420ms var(--nv-ease), visibility 0s; }

/* each piece: rises in on a short stagger, drifts out all at once */
.nv-in {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 220ms linear, transform 320ms var(--nv-fold);
}
.nv-menu.active .nv-in {
  opacity: 1; transform: none;
  transition: opacity 260ms linear calc(60ms + var(--i, 0) * 45ms), transform 560ms var(--nv-ease) calc(60ms + var(--i, 0) * 45ms);
}
.nv-menu.entering .nv-in { transform: translateY(10px); transition: none; }

/* image cards: the picture is the box, no frame */
.nv-card { display: flex; flex-direction: column; color: var(--x-fg); text-decoration: none; }
.nv-shot { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0d0d0d; }
.nv-card-wide .nv-shot { aspect-ratio: 1000 / 573; }
.nv-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--nv-ease); }
.nv-card:hover .nv-shot img, .nv-card:focus-visible .nv-shot img { transform: scale(1.035); }
/* three looks side by side for the general Create card */
.nv-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.nv-trio img { min-width: 0; }
.nv-card:hover .nv-trio img:nth-child(2) { transition-delay: 40ms; }
.nv-card:hover .nv-trio img:nth-child(3) { transition-delay: 80ms; }
.nv-name { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--x-fg); }
.nv-desc { margin-top: 4px; padding-left: 24px; font-size: 13px; color: var(--x-fg-3); letter-spacing: -0.005em; transition: color 0.15s linear; }
.nv-card:hover .nv-desc, .nv-card:focus-visible .nv-desc { color: var(--x-fg-2); }
.nv-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* house icons: 16 units, 1px line, the line stays 1px at any size */
.nv-ico { width: 16px; height: 16px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; transition: color 0.15s linear; }
.nv-ico * { vector-effect: non-scaling-stroke; }
.nv-ico .f, .nv-ico .f * { fill: currentColor; stroke: none; }
.nv-card:hover .nv-ico { color: var(--nv-cyan); }

/* the right-hand column: a quiet heading over its items */
.nv-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.nv-head { margin: 0 0 12px; font-size: 12.5px; color: var(--x-fg-3); letter-spacing: -0.005em; }
.nv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 32px); }

/* the plugins: real app marks, Adobe in the first column, Figma and Affinity in the second */
.nv-apps { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; }
.nv-app {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 10px 0; color: var(--x-fg); text-decoration: none;
}
.nv-app img { grid-row: 1 / 3; width: 32px; height: 32px; display: block; object-fit: contain; transition: transform 420ms var(--nv-ease); }
.nv-app img.nv-bare { height: 34px; margin: -1px 0; }
.nv-app b { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; align-self: end; }
.nv-app span { font-size: 13px; color: var(--x-fg-3); letter-spacing: -0.005em; align-self: start; margin-top: 2px; transition: color 0.15s linear; }
.nv-app:hover span, .nv-app:focus-visible span { color: var(--x-fg-2); }
.nv-app:hover img { transform: translateY(-2px); }
.nv-app:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the page behind dims while a menu is open */
.nv-scrim {
  position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--nv-close, 460ms) linear, visibility 0s linear 460ms;
}
.nv-scrim.on { opacity: 1; visibility: visible; transition: opacity 260ms linear, visibility 0s; }

@media (max-width: 1180px) {
  .nv-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}

/* ---- phones and small tablets: a menu button and a full sheet ------------------- */
.nv-burger {
  display: none; position: relative; width: 40px; height: 40px; margin: 0 -8px 0 4px; padding: 0;
  background: none; border: 0; border-radius: 0; cursor: pointer; color: #fff;
}
.nv-burger i { position: absolute; left: 11px; width: 18px; height: 1.5px; background: currentColor; transition: transform 300ms var(--nv-ease); }
.nv-burger i:first-child { top: 15px; }
.nv-burger i:last-child { top: 23px; }
.nv-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.nv-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.nv-burger:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* The sheet lives OUTSIDE the nav: the nav's backdrop-filter would make it
   the containing block of anything fixed inside it. */
.nv-sheet {
  position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 59;
  display: flex; flex-direction: column; overflow: hidden auto;
  padding: 8px var(--x-pad) calc(16px + env(safe-area-inset-bottom));
  background: #050505; opacity: 0; visibility: hidden;
  transition: opacity 160ms linear, visibility 0s linear 160ms;
}
.nv-sheet.open { opacity: 1; visibility: visible; transition: opacity 200ms linear, visibility 0s; }
.nv-sheet-list { margin: 0; padding: 0; list-style: none; }
.nv-sheet-list > li { opacity: 0; transform: translateY(8px); transition: opacity 200ms linear, transform 420ms var(--nv-ease); transition-delay: calc(var(--i, 0) * 40ms); }
.nv-sheet.open .nv-sheet-list > li { opacity: 1; transform: none; }
.nv-sheet-top { display: flex; align-items: center; height: 52px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.nv-sheet-group { padding: 6px 0 10px; }
.nv-sheet-head { display: flex; align-items: center; height: 44px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.nv-sheet-item { display: flex; align-items: baseline; gap: 12px; min-height: 40px; padding: 8px 0 8px 14px; color: var(--x-fg); text-decoration: none; }
.nv-sheet-item b { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.nv-sheet-item span { font-size: 14px; color: var(--x-fg-3); }
.nv-sheet-app { align-items: center; }
.nv-sheet-app img { width: 24px; height: 24px; display: block; flex: none; }
.nv-sheet-sub { padding: 10px 0 2px 14px; font-size: 13px; color: var(--x-fg-3); }
.nv-sheet-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.nv-sheet-foot .x-btn { height: 48px; font-size: 15px; }
html.nv-lock, html.nv-lock body { overflow: hidden; }

@media (max-width: 900px) {
  .nv-links, .nv-panel, .nv-scrim { display: none; }
  .nv-burger { display: inline-block; }
}
@media (max-width: 700px) {
  .nv-sheet { top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-hl, .nv-panel, .nv-panel.open, .nv-menu, .nv-menu.active, .nv-in, .nv-menu.active .nv-in, .nv-scrim, .nv-scrim.on, .nv-shot img, .nv-app img, .nv-chev, .nv-burger i, .nv-sheet, .nv-sheet.open, .nv-sheet-list > li { transition: none; }
}