/*
  careers.css
  Careers page: hero layout, the abstract "idea to product" technical
  visual, and the small shared bits multiple Careers sections reuse
  (a compact card modifier, a small icon badge size). Section-specific
  styles below the hero live in careers-sections.css; breakpoints live
  in careers-responsive.css.
*/

/* ---- Shared across several Careers sections ---- */

/* Same .comrade-about-card shape as About/Products, just tighter
   padding for the denser Careers grids (Why, Focus, Selection). */
.comrade-about-card--compact {
  padding: var(--comrade-space-md);
}

.comrade-icon-badge--sm {
  width: 40px;
  height: 40px;
}

.comrade-icon-badge--sm svg {
  width: 18px;
  height: 18px;
}

/* ---- Hero ---- */
.comrade-careers-hero {
  position: relative;
  padding-top: var(--comrade-space-md);
  overflow: hidden;
}

.comrade-careers-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--comrade-space-xl);
}

.comrade-careers-hero__content {
  max-width: 560px;
}

.comrade-careers-hero__headline {
  margin-top: var(--comrade-space-sm);
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--comrade-text);
}

.comrade-careers-hero__highlight {
  color: var(--comrade-primary);
}

.comrade-careers-hero__description {
  margin-top: var(--comrade-space-md);
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--comrade-text-muted);
}

.comrade-careers-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--comrade-space-sm);
  margin-top: var(--comrade-space-lg);
}

/* ---- Technical visual: nodes chained Idea → Engineer → Prototype →
   Product over a faint prototype grid, with two static orbital arcs
   behind for the same "orbital path" language the homepage hero uses.
   Entirely static SVG/CSS, no JS geometry — the product itself is
   never named, only the four stages of building it. ---- */
.comrade-careers-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comrade-careers-visual {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.comrade-careers-visual__grid-dot {
  fill: var(--comrade-border-strong);
  opacity: 0.55;
}

.comrade-careers-visual__orbit {
  fill: none;
  stroke: var(--comrade-border-strong);
  stroke-width: 1;
  opacity: 0.55;
}

.comrade-careers-visual__trace {
  fill: none;
  stroke: var(--comrade-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

.comrade-careers-visual__node circle {
  fill: var(--comrade-surface-soft);
  stroke: var(--comrade-primary);
  stroke-width: 1.6;
}

.comrade-careers-visual__node text {
  font-family: var(--comrade-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--comrade-text-muted);
}

.comrade-careers-visual__node--accent circle {
  fill: var(--comrade-primary);
  stroke: none;
  filter: drop-shadow(0 2px 8px var(--comrade-shadow));
}

.comrade-careers-visual__node--accent text {
  fill: var(--comrade-primary);
  font-weight: 800;
}

/* One travelling signal — a halo (very subtle) around a small solid
   core — following the exact Idea → Engineer → Prototype → Product
   trace above. Position comes from native SVG <animateMotion> in
   careers-hero.html (see the comment there for why: it sidesteps a
   real cross-browser inconsistency in how CSS offset-path anchors an
   SVG shape that this used to rely on). This file only owns the fade
   and the halo's own decoupled pulse — never the position.

   Starts invisible (opacity: 0) so there's no flash of a fully-opaque
   dot sitting at Idea before careers-interactions.js has had a chance
   to start the motion; .is-active (added by that same script, and only
   once it has confirmed motion is allowed) is what turns the fade on. */
.comrade-careers-visual__signal {
  opacity: 0;
}

.comrade-careers-visual__signal.is-active {
  animation: comradeCareersSignalFade 9s linear infinite;
}

.comrade-careers-visual__signal-halo {
  fill: var(--comrade-primary);
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: center;
  animation: comradeCareersSignalPulse 2.4s ease-in-out infinite;
}

.comrade-careers-visual__signal-core {
  fill: var(--comrade-primary);
}

/* Matches <animateMotion>'s own 9s dur exactly, so the fade and the
   motion stay in lockstep (both start together, from
   careers-interactions.js, and share the same duration) — fading out
   just before Product and back in at Idea, so the loop restart always
   happens while fully transparent and never reads as a jump. */
@keyframes comradeCareersSignalFade {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* A small breathing halo, entirely decoupled from the position and
   fade animations above — it never touches offset-distance or
   opacity's own timing, so it can't drift or desync the signal. */
@keyframes comradeCareersSignalPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.12;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.22;
  }
}

/* Reduced-motion fallback: hidden by default (it's only ever shown
   under the media query below), a plain static dot at Idea with no
   motion path or animation involved at all. */
.comrade-careers-visual__signal-static {
  display: none;
  fill: var(--comrade-primary);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .comrade-careers-visual__signal {
    display: none;
  }

  .comrade-careers-visual__signal-static {
    display: block;
  }
}