/* =============================================================
   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;
  overflow: clip;
  overflow-clip-margin: 420px;
}

/* Same drawing language as the homepage hero glow (styles.css) and the
   Build & Integrate hero (build-integrate.css): two accent families for
   this page — green and magenta, pulled from the site's secondary palette
   — carried by three morphing blobs, all driven by the
   --g-h1/--g-h2/--g-w/--g-h/--g-x/--g-y custom properties registered once
   in styles.css. Sized in vw and mostly off-canvas so only the soft fade
   tail ever shows — never the saturated core. */
/* Box and offset share the same vw value (half the box, negative, on both
   axes) so the gradient's own centre lands exactly on the hero's top-right
   corner. */
.cr-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -36vw; right: -36vw; width: 72vw; height: 72vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.8 0.19 var(--g-h1, 158deg) / 0.31),
    oklch(0.86 0.17 var(--g-h1, 158deg) / 0.14) 44%,
    transparent 70%
  );
  animation:
    cr-glow-morph 6s ease-in-out infinite,
    cr-glow-float 9s ease-in-out infinite;
}
/* Stays inside the green family as it morphs (142-165deg) so it always reads
   as green, never drifts into the page's pink half. */
@keyframes cr-glow-morph {
  0%, 100% { --g-h1: 145deg; --g-w: 46%; --g-h: 54%; --g-x: 48%; --g-y: 52%; }
  50%      { --g-h1: 168deg; --g-w: 60%; --g-h: 40%; --g-x: 60%; --g-y: 40%; }
}
@keyframes cr-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: saturate(1); }
  50%      { transform: scale(1.2)  translate3d(-9%, 8%, 0);  filter: saturate(1.1); }
}

/* Bottom-left echo (magenta), single hue, swapping the opposite way to the
   top-right blob so the two never read as one shape sliding around. Box and
   offset share the same vw value so the gradient's own centre lands exactly
   on the hero's bottom-left corner. */
.cr-hero__glow--b {
  position: absolute; z-index: 0; pointer-events: none;
  top: auto; right: auto;
  bottom: -26.4vw; left: -26.4vw; width: 52.8vw; height: 52.8vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.72 0.2 var(--g-h1, 337deg) / 0.26),
    transparent 62%
  );
  animation:
    cr-glow-morph-b 7s ease-in-out -4s infinite,
    cr-glow-float-b 11s ease-in-out -6s infinite;
}
@keyframes cr-glow-morph-b {
  0%, 100% { --g-h1: 322deg; --g-w: 44%; --g-h: 44%; --g-x: 54%; --g-y: 46%; }
  50%      { --g-h1: 346deg; --g-w: 54%; --g-h: 34%; --g-x: 42%; --g-y: 58%; }
}
@keyframes cr-glow-float-b {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0);      filter: saturate(1); }
  50%      { transform: scale(0.86) translate3d(12%, -9%, 0);  filter: saturate(1.12); }
}

/* Mandatory corner-seam accent: centred exactly where the hero's bottom
   edge meets the next section. Box width/height and the offset share the
   same vw value (half the box, negative) so the gradient's own centre —
   not its edge — lands on that seam point. A quiet echo of the green wash,
   distinct from the --b blob above in size, timing and drift direction. */
.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.72 0.2 var(--g-h1, 337deg) / 0.15),
    transparent 60%
  );
  animation:
    cr-glow-morph-corner 8s ease-in-out -3s infinite,
    cr-glow-float-corner 12s ease-in-out -7s infinite;
}
@keyframes cr-glow-morph-corner {
  0%, 100% { --g-h1: 326deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 342deg; --g-w: 56%; --g-h: 36%; --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.16) translate3d(8%, -6%, 0); filter: saturate(1.05); }
}

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

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