/* NeuralChainX — behaviour the design source does not express itself.
   Loaded after styles.css and the page's own inline <style>. */

/* =========================================================================
   Hero background — scrim strength
   =========================================================================
   The design source baked this into an inline style at .62 / .78 / .90, which
   buried the photo. Measured against the actual plate, that was far heavier
   than legibility needs: the photo behind the copy runs 0.03–0.05 average
   relative luminance and peaks at 0.23, so white text clears 4.5:1 with a much
   lighter scrim. Lightened to .30 / .44 / .72 — the foot stays heavy because
   the product emblems and the Anneal Stack label sit down there and need to
   separate from the plate.

   build.js rewrites the inline declaration to read this token, so the balance
   between scrim and drift is tunable from one place. */

:root {
  --ncx-hero-scrim: linear-gradient(
    180deg,
    rgba(10, 20, 37, 0.30) 0%,
    rgba(10, 20, 37, 0.44) 44%,
    rgba(10, 20, 37, 0.72) 100%
  );
}

/* =========================================================================
   Hero background — continuous drift
   =========================================================================
   A static plate reads as flat behind a scrim, so the photo holds a ping-pong
   zoom + pan fast enough to register as motion: even movement rather than a
   loop that visibly restarts.

   Geometry: the transform list applies scale before translate, so the
   effective offset is scale x translate. To never expose a section edge,
   |translate| must stay under 0.5 - 0.5/scale — 3.7% at scale 1.08 and 8.3%
   at 1.20. The 2%/1.5% used below sits inside both bounds.

   <image-slot> already sets :host{display:block;position:relative}, so the
   host element is directly transformable; the hero section clips it with its
   own overflow:hidden. */

@keyframes ncxHeroDrift {
  0%   { transform: scale(1.08) translate3d(-2%, -1.4%, 0); }
  50%  { transform: scale(1.20) translate3d( 2%,  1.5%, 0); }
  100% { transform: scale(1.08) translate3d(-2%, -1.4%, 0); }
}

#ncx-hero-bg {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: ncxHeroDrift 14s ease-in-out infinite;
}

/* The design system already blanket-disables animation under reduced motion,
   but state it here too so this file is correct on its own. */
@media (prefers-reduced-motion: reduce) {
  #ncx-hero-bg { animation: none; transform: none; will-change: auto; }
}

/* =========================================================================
   Header nav — hover dropdowns
   =========================================================================
   The design source ships a flat nav that mostly points at homepage anchors,
   so the header never exposed the other nine pages. build.js wraps each
   labelled link in a panel listing its real destinations.

   Pure CSS, no JS: the panel is a child of the nav item, so :hover on the
   item keeps it open while the pointer is anywhere inside — including over
   the panel itself. Its padding-top bridges the gap between label and panel
   so the pointer can cross without the menu collapsing. :focus-within gives
   the same behaviour to keyboard tabbing. */

.ncx-nav { position: relative; display: inline-flex; flex: none; }

.ncx-nav > .ncx-menu {
  position: absolute;
  top: 100%;
  left: -6px;
  padding-top: 12px;            /* the bridge — hoverable, invisible */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
  z-index: 70;
}
.ncx-nav.is-right > .ncx-menu { left: auto; right: -6px; }

.ncx-nav:hover > .ncx-menu,
.ncx-nav:focus-within > .ncx-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s;
}

/* The panel read flat and muddy: a neutral grey hairline, a grey shadow, and
   title and subtitle sharing one ink weight. Crisped up by tinting the
   hairline and shadow toward the brand blue, and by moving the subtitle onto
   --accent-ink so the two lines separate by hue rather than by going grey —
   the project forbids grey text. Both lines clear 7.5:1 on white. */
.ncx-menu-panel {
  display: block;
  min-width: 252px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .04), 0 16px 40px -14px rgba(27, 79, 217, .30);
}

.ncx-menu-panel > a {
  display: block;
  padding: 10px 13px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.ncx-menu-panel > a:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.ncx-menu-panel .t {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.ncx-menu-panel > a:hover .t { color: var(--accent-3); }

.ncx-menu-panel .d {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.5;
  color: var(--accent-ink);
}
.ncx-menu-panel > a:hover .d { color: var(--accent-2); }

/* Narrow viewports wrap the nav; a floating panel would then sit over the
   following row. Below the wrap point the panels are suppressed and the nav
   label alone carries the link. */
@media (max-width: 900px) {
  .ncx-nav > .ncx-menu { display: none; }
}

/* The Company panel sits at the right end of the nav, so its items align to
   that edge — the text then runs flush with the label above it. */
.ncx-nav.is-right .ncx-menu-panel > a { text-align: right; }

/* =========================================================================
   Headline wrapping
   =========================================================================
   The design source places <br> at breaks chosen for Korean, where
   word-break:keep-all already holds phrases together. Every other language
   inherits those breaks and then wraps the remainder on its own, which is
   where the ragged edges appear. Balancing the lines costs nothing in Korean
   and stops English headlines ending on a one-word orphan line. */
h1, h2, h3 { text-wrap: balance; }

/* Below the mobile breakpoint the headline column is far too narrow to hold
   each half of a two-line headline on one line, so the authored break stacks
   on top of the natural wrap and the headline frays. Dropping the break hands
   the whole string to text-wrap:balance, which divides it evenly for whatever
   language is on the page. The build leaves a space beside each <br> so the
   two halves stay separate words once the break stops rendering. */
@media (max-width: 719px) {
  h1 br.hb, h2 br.hb, h3 br.hb { display: none; }
}