/* Additions to the AISS website kit, kept out of assets/kit.css so that file
   stays a verbatim extraction. Loaded by the home page and the product pages. */

/* ---- 1. the nav wordmark, larger and heavier ------------------------------
   Requested: more prominent without becoming oversized. 1.03rem/600 was
   quieter than the nav links around it. */
.brand .wm b { font-size: 1.24rem; font-weight: 700; letter-spacing: -.036em; }
.brand .wm span { font-size: .55rem; }

/* ---- 2. the hero badge clearing the fixed bar on small screens ------------
   .nav is position:fixed, but .hero-body is a centred flex child with no top
   offset for it. On a short viewport the hero content is taller than the
   space available, so the first element (the badge) rides up underneath the
   bar. Reserving the bar's height fixes it at the cause. */
@media (max-width: 900px) {
  /* padding alone is not enough: .hero-body centres with justify-content and
     its content is taller than the viewport on a phone, and a centred flex
     child overflows PAST its own padding edge. Starting from the top and
     reserving the bar's height is what actually clears it. */
  .hero-body {
    justify-content: flex-start;
    padding-top: calc(var(--nav-h) + 24px);
  }
}

/* Below 900px the kit hides that description entirely; here it stays and
   stacks under the title. */
@media (max-width: 900px) {
  .p-caps .ind { flex-wrap: wrap; align-items: flex-start; }
  .p-caps .ind .d {
    display: block; margin-left: 0; text-align: left;
    width: 100%; margin-top: 8px;
  }
}

/* ---- 3. readability over the particle scenes ------------------------------
   The kit dims whatever is not active and runs bright scenes behind the same
   text. The two themes fail in opposite directions, so they are treated
   separately:

     dark  - vivid particles over pale text, so the scene comes DOWN
     light - pale particles on white read washed out and olive, which is the
             exact failure the spec's QA list warns about, so the scene comes
             UP and gets its saturation back

   The canvas is a plain element, so both are done in CSS without touching the
   renderer. */
[data-theme="dark"]  .scn.on { opacity: .58; }
[data-theme="light"] .scn.on { opacity: 1; filter: saturate(1.45) contrast(1.08); }

/* Chain steps: inactive cards were at half opacity. */
#chainSteps .cstep { opacity: .96; }
#chainSteps .cstep p { color: var(--ink-2); }

/* Row lists, home industries and product capabilities alike. Hovering one row
   dropped the others to 32%, and a description sat at 62% of --ink-3. */
.inds:hover .ind { opacity: .9; }
.inds .ind:hover { opacity: 1; }
.ind .d { color: var(--ink); opacity: 1; }
/* The row title carries no colour of its own in the kit and was resolving
   lighter than the body text in the light theme. Set it explicitly, and pin
   the fill so the gradient-clip used on hover cannot leak into the rest state. */
.ind .t { color: var(--ink); -webkit-text-fill-color: currentColor; }
.ind:hover .t { -webkit-text-fill-color: transparent; }

/* A hovered title is painted through background-clip:text, so its glyphs are
   transparent and a text-shadow renders as a dark ghost BEHIND them: the
   hovered row ended up harder to read than the ones around it. drop-shadow
   follows the painted pixels instead of the text box, so the gradient keeps
   its halo without the smear. */
[data-theme="dark"] .ind:hover .t {
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(5, 6, 11, .95))
          drop-shadow(0 2px 8px rgba(5, 6, 11, .8));
}
[data-theme="light"] .ind:hover .t { text-shadow: none; }
.ind .n { color: var(--ink-2); }
.p-caps .ind .d { font-size: .95rem; }

/* Halos so light text holds up wherever a scene passes behind it.
   DARK THEME ONLY. A halo works by putting the page colour behind the glyph;
   in the light theme that colour is white, and a white glow around dark text
   eats into the thin strokes of the display face and makes it LESS readable,
   which is exactly what happened on the first attempt. The light theme does
   not need one: dark text on white already has the contrast. */
[data-theme="dark"] :is(.ind .t, .ind .d, .finale h2, .finale .lead,
  .stage-card h2, .stage-card .lead, .stage-card .eyebrow, .sec-head h2) {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 96%, transparent),
               0 2px 10px color-mix(in srgb, var(--bg) 94%, transparent),
               0 4px 34px color-mix(in srgb, var(--bg) 90%, transparent);
}

/* ---- 4. horizontal overflow on phones ------------------------------------
   Present in the kit as shipped, not introduced here: .aurora is inset -10%
   on each side, so it is 120% of the viewport wide, and the .sec it sits in
   does not clip. At 390px that pushed the document 39px wider than the
   screen, which reads as the whole page shifted left with a black band down
   the right edge.

   Fixed at the cause by pulling the glow back inside its section.

   DO NOT add `overflow-x: clip` (or hidden) on html/body as a guard. It was
   tried and it BREAKS SCROLLING ENTIRELY, at every width: with one axis
   clipped the other stops scrolling the viewport, so scrollY never moves, no
   IntersectionObserver ever fires, and every reveal, scene and transition on
   the site dies silently. The page still looks right in a screenshot, which
   is what made it easy to miss. Fix overflow at the element that causes it. */
.aurora { left: 0; right: 0; }