/* =============================================================
   Careers — hero background wash composed on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .cr-
   ============================================================= */

/* .page-hero is shared by many pages and stays untouched; this class only
   adds the positioning/clipping the glow needs, layered on top of it.
   overflow: clip (both axes, not overflow-x only) keeps the wash from
   bleeding a hard edge into the header above or the section below. The
   420px margin matches the other single-color-pair pages (devstudio.css,
   coherence.css): the corner-seam accent's 74vw box needs that much room
   past the padding box before its already-transparent falloff is safe to
   hard-clip. */
.cr-hero {
  position: relative;
  /* X-only: clipping both axes let the 420px margin leak into the page's
     real horizontal scroll width on narrow viewports. */
  overflow-x: clip;
  overflow-clip-margin: 420px;
}

/* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
   --lime / --violet), per the "Background glow gradient" rule in
   ux-ui-rules.md — position, size, timing, keyframe percentage steps,
   hue-drift deltas, alphas and stop percentages are all identical to
   home's; only the two hues (158deg green, 337deg pink, from
   docs/_as/colors.html) and the pastel oklch register (L 0.9, C ~0.1-0.12,
   not this page's actual accent lightness) are page-specific — see
   css/resources.css for the confirmed-working reference. */
.cr-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -24%; right: -42%; width: 100vw; height: 100vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 158deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 337deg) / 0.4) 46%,
    transparent 72%
  );
  animation:
    cr-glow-morph 11s ease-in-out infinite,
    cr-glow-float 17s ease-in-out infinite;
}
@keyframes cr-glow-morph {
  0%, 100% { --g-h1: 158deg; --g-h2: 337deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 194deg; --g-h2: 359deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 132deg; --g-h2: 311deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
@keyframes cr-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
}

/* Bottom-left blob: green on its own, home's lime formula and delta shape. */
.cr-hero__glow--b {
  position: absolute; z-index: 0; pointer-events: none;
  top: auto; right: auto;
  bottom: -20%; left: -22%; width: 60vw; height: 60vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 158deg) / 0.4),
    transparent 66%
  );
  animation:
    cr-glow-morph-b 14s ease-in-out -5s infinite,
    cr-glow-float-b 21s ease-in-out -9s infinite;
}
@keyframes cr-glow-morph-b {
  0%, 100% { --g-h1: 158deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 190deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 136deg; --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes cr-glow-float-b {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
}

/* Top-centre blob: pink on its own, home's violet slot (position + timing)
   carrying a single-hue fade instead of a blend. */
.cr-hero__glow--c {
  position: absolute; z-index: 0; pointer-events: none;
  top: -26%; left: 52%; right: auto; bottom: auto;
  width: 44vw; height: 44vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.1 var(--g-h1, 337deg) / 0.28),
    transparent 64%
  );
  animation:
    cr-glow-morph-c 18s ease-in-out -7s infinite,
    cr-glow-float-c 26s ease-in-out -13s infinite;
}
@keyframes cr-glow-morph-c {
  0%, 100% { --g-h1: 337deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: 313deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 357deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes cr-glow-float-c {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}

/* Mandatory corner-seam accent: centred exactly where the hero's bottom
   edge meets the next section (bottom-right), a quiet echo of the green
   wash. */
.cr-hero__glow--corner {
  position: absolute; z-index: 0; pointer-events: none;
  top: auto; left: auto;
  bottom: -37vw; right: -37vw; width: 74vw; height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 158deg) / 0.15),
    transparent 60%
  );
  animation:
    cr-glow-morph-corner 8s ease-in-out -4s infinite,
    cr-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes cr-glow-morph-corner {
  0%, 100% { --g-h1: 158deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 180deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes cr-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}

.cr-hero .page-hero__title,
.cr-hero .page-hero__lead,
.cr-hero .kicker { position: relative; z-index: 1; }

/* Mandatory mobile override: desktop's percentage-based blob positions
   clip away on a narrow screen — static fallback wash plus a full
   repositioning of all three blobs, home's own numbers with this page's
   hue substituted in. */
@media (max-width: 900px) {
  .cr-hero {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.12 158 / 0.28), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 337 / 0.19), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.12 158 / 0.08), transparent 55%),
      var(--color-paper);
  }
  .cr-hero__glow {
    top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 158deg) / 0.45),
      oklch(0.9 0.1 var(--g-h2, 337deg) / 0.22) 42%,
      transparent 70%
    );
  }
  .cr-hero__glow--b {
    top: auto; right: auto;
    bottom: 18%; left: -35%; width: 85vh; height: 85vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 158deg) / 0.28),
      transparent 68%
    );
  }
  .cr-hero__glow--c {
    top: 4%; left: 42%; width: 65vh; height: 65vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.1 var(--g-h1, 337deg) / 0.16),
      transparent 66%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero__glow,
  .cr-hero__glow--b,
  .cr-hero__glow--c,
  .cr-hero__glow--corner { animation: none; }
}

/* ---------- Vision panel (dark inset card after the hero) ----------
   The hero's glow blobs deliberately bleed past its bottom edge, so the
   whole section is lifted above them; lifting only the card left the
   wash painting over it. The hero already carries --space-6 of bottom
   padding, so this section's top padding stays small. */
.cr-vision {
  position: relative;
  z-index: 1;
  padding-top: var(--space-4);
}
.cr-vision .kicker { position: relative; margin-bottom: var(--space-3); }
.cr-vision .section__title,
.cr-vision .careers-intro__lead { position: relative; }

/* Quiet two-hue wash inside the card, the same hues as the hero. */
.cr-vision__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 80% at 100% 0%, oklch(0.72 0.14 337 / 0.22), transparent 70%),
    radial-gradient(50% 75% at 0% 100%, oklch(0.78 0.14 158 / 0.18), transparent 70%);
}

/* Lifecycle row: the steps the system automates, idea to deployment. */
.cr-flow {
  position: relative;
  list-style: none;
  margin: var(--space-6) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.cr-flow__step {
  padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-on-dark) 6%, transparent);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-on-dark);
}
.cr-flow__sep { display: flex; color: var(--color-active); }
.cr-flow__arrow { width: 16px; height: 16px; }

/* Tighter rhythm between the stacked sections on this page. */
@media (min-width: 641px) {
  body[data-page="careers"] .section:not(.cr-vision) { padding-top: var(--space-7); }
}

@media (max-width: 640px) {
  .cr-flow { gap: var(--space-1); }
  .cr-flow__step { padding: 8px 14px; }
  .cr-flow__sep { display: none; }
}