/* 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: 196px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  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: 8px 12px;
  border-radius: 8px;
  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: 13.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: 2px;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.45;
  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; }

/* =========================================================================
   Header language switcher
   =========================================================================
   Four flags read as national badges rather than as a language control, and
   the Korean flag in particular went muddy at 26px — its trigrams collapse
   into specks. A globe carries the meaning without claiming a country, so the
   trigger is now a single globe and the four languages unfurl beneath it.

   Same mechanics as the nav dropdowns above: the panel is a child of the
   switcher, so :hover holds it open while the pointer is anywhere inside,
   padding-top bridges the gap the pointer has to cross, and :focus-within
   repeats the behaviour for the keyboard. The panel is absolutely positioned,
   so opening it never reflows the header row. The item background and border
   are inline — build.js writes the active state into them — so the hover
   background has to outrank them. */

.ncx-lang { position: relative; }

.ncx-lang-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ncx-lang-btn > svg { display: block; }
.ncx-lang:hover > .ncx-lang-btn,
.ncx-lang:focus-within > .ncx-lang-btn {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.ncx-lang > .ncx-lang-menu {
  position: absolute;
  top: 100%;
  right: -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-lang:hover > .ncx-lang-menu,
.ncx-lang:focus-within > .ncx-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s;
}

.ncx-lang-panel {
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .04), 0 16px 40px -14px rgba(27, 79, 217, .30);
}

.ncx-lang-panel > a,
.ncx-lang-panel > span {
  display: block;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 620;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.ncx-lang-panel > a:hover {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

/* =========================================================================
   Newsroom posts — measure
   =========================================================================
   The article grid was repeat(auto-fit, minmax(260px, 1fr)) with the body on
   span 2, which gave the date-and-source rail a full third of the row while
   its content is barely 20 characters wide. The rail is a fixed 236px now —
   three background columns minus the gap, so the article column starts on the
   grid — and the text keeps the rest.

   Measure is set per script, because ch and em measure different things. A
   Hangul syllable is one em, so Korean is capped in em and lands at roughly 46
   characters a line; Latin is capped in ch. Both sit inside the readable band,
   and the wider column takes roughly a fifth off the page's height. */

.ncx-post { grid-template-columns: 236px minmax(0, 1fr); gap: 20px 48px; }
.ncx-post-h2   { max-width: 44ch; }
.ncx-post-deck { max-width: 76ch; }
.ncx-post-body { max-width: 78ch; }

html[lang="ko"] .ncx-post-h2   { max-width: 24em; }
html[lang="ko"] .ncx-post-deck { max-width: 44em; }
html[lang="ko"] .ncx-post-body { max-width: 46em; }

/* Below the rail's useful width the two tracks stack. */
@media (max-width: 900px) {
  .ncx-post { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* =========================================================================
   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; }
}