/* ==========================================================================
   NetrAI — Refinement layer
   --------------------------------------------------------------------------
   Five corrections, kept in one file rather than edited into four others so
   they are easy to find, adjust and — if any of them turn out to be wrong —
   remove in one move.

     1. The client marquee reads as a highlight instead of a stray line
     2. Scroll motion stops announcing itself
     3. The drifting blobs behind "Industries We Serve" are gone
     4. So is the decorative dot above each Mission / Vision / Values card
     5. "How We Work" and "Industries We Serve" drop their grey tint band

   LOADING ORDER: after style.css, motion.css, story.css and industries.css,
   and before mobile.css / mobile-app.css / center.css so those still win.
   ========================================================================== */


/* ==========================================================================
   1. Client marquee
   --------------------------------------------------------------------------
   The problem was not the marquee, it was its setting: it sat 24px under the
   hero and 40px above the next chapter with no separation, so it read as a
   leftover line of small grey text rather than a band of client names.

   Three changes, no markup touched:

     · Real air above and below, so it is its own beat between two chapters
     · A black wash at both ends of that air, so the band emerges from the
       section above and dissolves into the one below rather than being a
       block that starts and stops
     · The names in capitals, brighter, and spaced out — the treatment a
       client wall gets, rather than body copy

   The existing horizontal mask (which fades the ends of the loop) is left
   alone; the new gradients run vertically and do not touch it.
   ========================================================================== */

/* In the Apple system a client wall is typography on the canvas. The black
   pool that used to carry these names was doing the work a surface change
   should do, so it is replaced by air above and below plus two hairlines —
   the band is now a beat in the page rather than a hole cut into it. */
.client-marquee {
  position: relative;
  padding: 40px 0;
  background: var(--surface-white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 0;
  z-index: 1;
}

.client-marquee-track span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--mist);
  transition: color var(--transition);
}
.client-marquee-track span:hover { color: var(--ink); }

.client-marquee + section { padding-top: clamp(64px, 8vw, 120px); }

@media (max-width: 860px) {
  .client-marquee { margin-top: 0; padding: 28px 0; }
  .client-marquee-track span { font-size: 11px; letter-spacing: 0.08em; }
}


/* ==========================================================================
   2. Scroll motion
   --------------------------------------------------------------------------
   Everything on the page entered by sliding 28px and settling over 0.8s, and
   several pieces overshot on a spring curve on the way in. Each one is fine
   on its own. Stacked down a long page they read as a site performing for
   you: by the third section you are waiting for the animation rather than
   reading the content, and anything that arrives with a bounce feels like it
   was added because it could be, not because it helps.

   The fix is not to delete the motion — content appearing from nothing is
   worse — it is to make it short, small, and linear-feeling. Roughly: half
   the distance, half the duration, no overshoot anywhere, no scaling.
   -------------------------------------------------------------------------- */

:root {
  /* The --ease-spring override that used to sit here is gone with the token
     itself. The judgement behind it stands and is worth keeping on the
     record: an overshoot on hover read as "forced" on this site, which is
     why nothing here bounces. §4's own rule agrees — reserve bounce for
     motion that carried real momentum, and a hover carries none. The
     declarations that referenced it now name --ease-out directly, which is
     the curve this override was pointing them at. */

  --dur-1: 200ms;
  --dur-2: 340ms;
  --dur-3: 520ms;
  --stagger: 45ms;
}

/* The site-wide reveal. 28px is a visible slide; 10px is a settle. */
.reveal {
  transform: translateY(10px);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { transform: none; }

/* Staggers existed so a row of cards arrived one after another. At 420ms a
   0.4s delay on the fourth card means it is still arriving long after you
   have started reading the first. Compressed, not removed. */
.reveal.delay-1 { transition-delay: 40ms; }
.reveal.delay-2 { transition-delay: 80ms; }
.reveal.delay-3 { transition-delay: 120ms; }
.reveal.delay-4 { transition-delay: 160ms; }

.grid-3 .reveal:nth-child(1) { transition-delay: 0s; }
.grid-3 .reveal:nth-child(2) { transition-delay: 45ms; }
.grid-3 .reveal:nth-child(3) { transition-delay: 90ms; }
.grid-3 .reveal:nth-child(4) { transition-delay: 135ms; }
.grid-3 .reveal:nth-child(5) { transition-delay: 180ms; }
.grid-3 .reveal:nth-child(6) { transition-delay: 225ms; }


/* ---- "How We Work" timeline ----------------------------------------------
   This section used to have a circular node that scaled up and filled blue as
   each step crossed the middle of the viewport. Both the scaling and the
   fill are gone (see center.css section 10): the step number is now the
   marker, and it simply resolves from Pebble to Carbon once its row lands.
   One property, one direction, never undone. */
.timeline-step .timeline-node { transform: none; }
.timeline-node {
  transition: color 600ms var(--ease-apple) 100ms;
}

/* Steps arrive with the same restraint as everything else. */
.timeline-step.reveal { transform: translateY(10px); }
.timeline-step.reveal.in-view { transform: none; }


/* ---- Values and process cards --------------------------------------------
   Both used a --lift custom property driven through a spring. With the spring
   neutralised above they already behave; these pin the entry distance so a
   card does not travel further than the paragraph next to it. */
[data-anim="values"] .mvv-card,
[data-anim="process"] .process-step {
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- The process stepper -------------------------------------------------
   Steps sat at 40% opacity until you scrolled level with them, then rose to
   100% and dimmed to 55% again as you passed. The same effect as the timeline
   nodes, applied to body copy: the paragraph you are trying to read is the
   one being animated, and the two either side are too faint to skim ahead or
   back. All four steps are now simply readable, and the current one is marked
   with the accent on its rule and its number instead of by hiding the rest. */
[data-anim="process"] .process-step.is-in,
[data-anim="process"] .process-step.is-past,
[data-anim="process"] .process-step.is-active { opacity: 1; }

/* The heading nudged 4px sideways when a step became active — a small thing
   that reads as the page twitching. */
[data-anim="process"] .process-step.is-active h3 { transform: none; }

/* Idle animation on decorative furniture. A page where nothing is ever still
   is tiring to read on. */
.industry-chip { animation: none; }
.industries-sphere-glow { animation-duration: 40s; }


/* ==========================================================================
   3. "Industries We Serve" — the drifting blobs
   --------------------------------------------------------------------------
   `.industry-bubbles` scatters blurred violet-blue circles behind the
   section and animates them upward forever. Behind a dark section they read
   as pale smudges — the "white spots" — and they compete with the sphere,
   which is the thing that is actually meant to be looked at.

   The element is left in the DOM: it is generated by js/pages/industries.js and
   removing it there would mean the script maintaining a special case.
   ========================================================================== */

.industry-bubbles { display: none !important; }

/* Without the bubble field the section needs a little atmosphere of its own,
   so it gets one wash instead of a dozen moving ones — static, wide, and
   behind everything. */
.industries-chapter::before { content: none; }


/* ==========================================================================
   4. Mission / Vision / Values — the dot
   --------------------------------------------------------------------------
   Each card had a cyan node floating 27px above it, and a connector line
   drawn between the three. The line was removed when the section was centred;
   the nodes were left behind, so all three now point at nothing.
   ========================================================================== */

[data-anim="values"] .mvv-card::before { content: none; }
.values-connector { display: none; }


/* ==========================================================================
   5. "How We Work" and "Industries We Serve" — no grey tint band
   --------------------------------------------------------------------------
   Both chapters carry .bg-tint, which paints them at the "elevated" surface
   level — a level-1 white card colour meant for panels sitting on the page,
   not for a full chapter. In light mode that is one faint step off-white; in
   dark mode --void-2 resolves to #1d1d1f against a #000 canvas, which reads
   as a plainly grey band.

   These two chapters go back to the plain page colour instead — opaque, the
   same way .bg-tint was opaque, so the ambient glow orbs/blooms/streaks
   behind the page (see css/effects/ambient.css) still don't show through here. The
   point is a flat dark chapter, not a window onto the ambient layer either.

   Scoped past .bg-tint's own specificity (0,1,0) with the id so this wins
   without having to touch the class on every other page that still uses it
   for its original panel purpose. */
#solution.bg-tint,
#industries.bg-tint {
  background: var(--surface-canvas);
}

/* ...and the same band, everywhere else, in dark only.

   The two chapters above were fixed on the homepage; the identical grey band
   was left standing on about.html (#values, #how-we-work), demos.html
   (#demos-notes) and work.html (#blog), which is the inconsistency that was
   reported as "the background isn't applied on every other page".

   Dark only, deliberately. In light mode .bg-tint resolves to #ffffff on a
   #f5f5f7 canvas — a clean, barely-there band that does its job of separating
   two sections. It is only in dark, where it becomes #1d1d1f against true
   black, that it reads as a grey slab. So the band survives where it works
   and is dropped where it does not. */
[data-theme="dark"] .bg-tint { background: var(--surface-canvas); }


/* ==========================================================================
   Reduced motion
   This file carries reveal timing overrides, so it has to opt out too — the
   base rules in motion.css were being re-enabled here.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view,
  [class*="delay-"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}