/* ==========================================================================
   NetrAI — About page layer
   Core values grid tweaks, the company-journey timeline, and the "How We
   Work" process strip's animated progress line. Sits on top of the base
   "Iris" design system in style.css. About page only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Core values — reuses .grid-3 / .card / .card-icon from style.css;
   this just tightens the layout for 6 items and adds a tablet step.
   -------------------------------------------------------------------- */
.core-values-grid .card { text-align: left; }
.core-values-grid .card p { max-width: 40ch; }

@media (min-width: 701px) and (max-width: 900px) {
  .core-values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------
   Company journey — vertical timeline. A track runs down the left edge;
   its fill grows top-to-bottom the moment the section scrolls into view.
   Each milestone reveals with the page-wide .reveal fade, auto-staggered.
   -------------------------------------------------------------------- */
.journey-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-left: 90px;
}
.journey-track {
  position: absolute;
  left: 32px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.journey-track-fill {
  position: absolute;
  inset: 0;
  background: var(--gradient-iris);
  border-radius: 999px;
  transform-origin: top;
}
/* Higher specificity than the generic .reveal rules, so this element
   fills top-to-bottom via transform:scaleY instead of fading+rising. */
.journey-track-fill.reveal { opacity: 1; transform: scaleY(0); transition: transform 1.3s cubic-bezier(0.28, 0.11, 0.32, 1); }
.journey-track-fill.reveal.in-view { transform: scaleY(1); }

.journey-item { position: relative; }
.journey-node {
  position: absolute;
  left: -90px;
  top: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mist);
  z-index: 1;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.journey-item.in-view .journey-node {
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 6px var(--accent-tint);
}
.journey-node-current {
  border-color: transparent;
  background: var(--gradient-iris);
  color: #fff;
}
.journey-node-current::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0.6;
  animation: journeyPulse 2.4s ease-out infinite;
}
@keyframes journeyPulse {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-track-fill.reveal { transition: none; }
  .journey-node-current::after { animation: none; opacity: 0.35; }
}

.journey-body { padding-top: 10px; }
.journey-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.journey-body p { color: var(--mist); font-size: 0.95rem; max-width: 58ch; }

@media (max-width: 640px) {
  .journey-timeline { padding-left: 60px; gap: 36px; }
  .journey-track { left: 22px; width: 3px; }
  .journey-node { width: 48px; height: 48px; left: -60px; font-size: 0.72rem; }
}

/* --------------------------------------------------------------------
   Process — animated progress line above the existing .process-strip /
   .process-step components (style.css). Fills left-to-right on reveal.
   -------------------------------------------------------------------- */
.process-progress-line {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2px;
}
/* Higher specificity than the generic .reveal rules — the track itself
   stays put; only the inner fill animates, left to right. */
.process-progress-line.reveal { opacity: 1; transform: none; transition: none; }
.process-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--gradient-iris);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.process-progress-line.in-view .process-progress-fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .process-progress-fill { transition: none; }
}

/* ==========================================================================
   Brand philosophy — one statement, set large
   --------------------------------------------------------------------------
   The company's positioning paragraph, given the weight of a pull quote
   rather than being buried in body copy. Serif, because everywhere else on
   the site the serif is reserved for the moments where NetrAI is speaking in
   its own voice rather than labelling something.
   ========================================================================== */
.philosophy-block {
  /* An explicit width, not a `ch` measure. Instrument Serif's `0` glyph is
     narrow, so 46ch resolved to roughly a 380px column and turned a
     four-line statement into an eight-line ribbon. */
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* A hairline above the statement, fading out at both ends — it separates the
   block from the section above without drawing a full rule across the page. */
.philosophy-block::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(220px, 40%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.philosophy-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}

/* The one phrase that carries the idea. Italic plus a gradient wash, which is
   the same treatment `.gradient-text` gets elsewhere — kept consistent so the
   emphasis reads as the site's, not as a one-off. */
.philosophy-statement em {
  font-style: italic;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ink);
  font-weight: var(--font-weight-light);
}

@media (max-width: 640px) {
  .philosophy-block { max-width: none; text-align: left; }
  .philosophy-block::before { left: 0; transform: none; top: -28px; width: 120px; }
  .philosophy-statement { font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.38; }
}

/* ==========================================================================
   Scroll Text Highlight (OriginKit) — the brand-philosophy statement

   SCALE IS PART OF THE EFFECT. The component sets 60px type, and that is not
   decoration: `top center → bottom center` only spans the paragraph's own
   height, so a small paragraph gives the ramp ~150px of runway and one wheel
   gesture finishes it. This statement is set larger and the trigger widened to
   `top bottom → bottom center` (both still inside the component's typed
   ScrollPosition union), which spends roughly a viewport travelling from the
   text entering the screen to it sitting centred — read at the pace you scroll,
   which is the entire point.

   The component ships a hardcoded white-on-dark ramp. Here the two ends are
   tokens so the effect works in both themes and survives a theme swap:
   js/effects/scroll-highlight.js reads these two properties and rebuilds on
   `themechange`.

   The dim end is the ink itself at low alpha rather than a separate grey —
   the words are not a different colour on the way in, they are the same words
   arriving. A grey-to-black ramp reads as two states; an alpha ramp reads as
   one thing resolving.
   ========================================================================== */
.philosophy-statement[data-scroll-highlight] {
  --sh-dim: rgba(29, 29, 31, 0.16);
  --sh-highlight: var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.28;
}
[data-theme="dark"] .philosophy-statement[data-scroll-highlight] {
  --sh-dim: rgba(245, 245, 247, 0.16);
}

/* Words are inline-block so GSAP can colour them individually; that turns
   each one into a box, so the line box needs its leading restated or the
   paragraph collapses to single spacing. */
.philosophy-statement[data-scroll-highlight] .word,
.philosophy-statement[data-scroll-highlight] .char {
  display: inline-block;
  will-change: color;
}

/* Before the script runs, the paragraph must be readable — if scroll-highlight.js
   fails to load or GSAP is blocked, this is the state it stays in. */
.philosophy-statement[data-scroll-highlight]:not(.is-split) { color: var(--ink); }

/* The emphasised phrase keeps its own weight change but inherits the ramp,
   so it lights up with the sentence instead of sitting outside it. */
.philosophy-statement[data-scroll-highlight] em { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .philosophy-statement[data-scroll-highlight] .word,
  .philosophy-statement[data-scroll-highlight] .char { color: var(--ink) !important; }
}