/* SilverCox global visual tuning — intentionally narrow in scope.
   Keeps the approved layouts intact while improving display typography
   and the live Creative Jobs radar motion. */

/* Display typography: open the largest headlines slightly without touching the SILVERCOX wordmark. */
body main h1 {
  letter-spacing: -0.028em !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* Large display H2s used by the Creative Jobs experience. Smaller card/job headings are untouched. */
.jobsHub .postPanelIntro h2,
.jobsHub .explainIntro h2,
.jobsHub .signalSection h2,
.jobsHub .monetizationSection h2,
.jobsHub .emptyState h2 {
  letter-spacing: -0.032em !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

/* Creative Jobs radar: preserve the artwork, make it feel continuously alive. */
.jobsHub .radarSvg {
  transform: translateZ(0);
}

.jobsHub .glowBlue {
  animation: scRadarBlueGlow 7.6s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.jobsHub .glowCoral {
  animation: scRadarCoralGlow 8.8s cubic-bezier(.45,.05,.55,.95) infinite alternate !important;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.jobsHub .contours {
  animation: scRadarBreathe 8.4s ease-in-out infinite alternate !important;
  transform-origin: 50% 50%;
}

/* Almost-continuous contour lines with moving gaps — movement is visible but not noisy. */
.jobsHub .contours path {
  stroke-dasharray: 260 12 118 9 !important;
  animation: scRadarContourFlow 7.2s linear infinite !important;
  will-change: stroke-dashoffset, opacity;
}
.jobsHub .contours path:nth-child(2) { animation-delay: -1.15s !important; }
.jobsHub .contours path:nth-child(3) { animation-delay: -2.30s !important; }
.jobsHub .contours path:nth-child(4) { animation-delay: -3.45s !important; }
.jobsHub .contours path:nth-child(5) { animation-delay: -4.60s !important; }
.jobsHub .contours path:nth-child(6) { animation-delay: -5.75s !important; }

/* Orbit geometry remains physically fixed so runtime nodes can sit exactly on it.
   The line still feels alive through continuously moving dash offsets. */
.jobsHub .orbitPath {
  animation: none !important;
  transform: none !important;
  opacity: .94;
}
.jobsHub .orbitPath path {
  stroke-dasharray: 3 8 !important;
  animation: scRadarOrbitDash 3.3s linear infinite !important;
  will-change: stroke-dashoffset;
}
.jobsHub .orbitPath path:nth-child(2) { animation-direction: reverse !important; }

/* Node positions are driven by sc-radar-runtime.js from getPointAtLength()
   on the exact visible SVG paths. No duplicate CSS path geometry. */
.jobsHub .nodes .node {
  offset-path: none !important;
  animation: none !important;
  filter: drop-shadow(0 4px 8px rgba(21,87,255,.18));
  will-change: transform, opacity;
}

.jobsHub .scanLabel span {
  animation: scRadarSignal 1.8s ease-out infinite !important;
}

@keyframes scRadarBlueGlow {
  0%   { transform: translate(-24px, 8px) scale(.96) rotate(-3deg); opacity: .88; }
  48%  { transform: translate(10px, -5px) scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: translate(31px, -13px) scale(1.12) rotate(5deg); opacity: .91; }
}

@keyframes scRadarCoralGlow {
  0%   { transform: translate(18px, 15px) scale(.91) rotate(2deg); opacity: .84; }
  52%  { transform: translate(-5px, 3px) scale(1.05) rotate(-2deg); opacity: .98; }
  100% { transform: translate(-27px, -16px) scale(1.15) rotate(-5deg); opacity: .90; }
}

@keyframes scRadarBreathe {
  0%   { transform: scale(.988) translate(-2px, 3px); opacity: .83; }
  50%  { opacity: 1; }
  100% { transform: scale(1.026) translate(4px, -5px); opacity: .91; }
}

@keyframes scRadarContourFlow {
  0%   { stroke-dashoffset: 0; opacity: .72; }
  45%  { opacity: .98; }
  100% { stroke-dashoffset: -399; opacity: .78; }
}

@keyframes scRadarOrbitDash {
  to { stroke-dashoffset: -88; }
}

@keyframes scRadarSignal {
  0%   { box-shadow: 0 0 0 0 rgba(21,87,255,.28); transform: scale(.92); }
  55%  { box-shadow: 0 0 0 7px rgba(21,87,255,0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(21,87,255,0); transform: scale(.92); }
}

/* First-viewport discipline: the market must start visibly without adding anything above it.
   Tall desktop layouts stay unchanged; shorter screens only reduce vertical whitespace. */
@media (min-width: 981px) and (max-height: 920px) {
  .jobsHub .heroInner {
    min-height: clamp(370px, 44vh, 430px) !important;
    padding-top: 26px !important;
    padding-bottom: 14px !important;
  }
  .jobsHub .heroVisual { min-height: clamp(320px, 38vh, 370px) !important; }
  .jobsHub .prototypePill { margin-bottom: 18px !important; }
  .jobsHub .heroLead { margin-top: 14px !important; }
  .jobsHub .stats { margin-bottom: 10px !important; }
  .jobsHub .marketDock { padding-bottom: 18px !important; }
  .jobsHub .searchSide,
  .jobsHub .postSide { min-height: 126px !important; }
  .jobsHub .searchSide { padding-top: 14px !important; padding-bottom: 12px !important; }
  .jobsHub .searchBox { height: 52px !important; margin-top: 9px !important; }
  .jobsHub .postSide strong { margin-top: 16px !important; }
  .jobsHub .categoryScroll button { height: 54px !important; }
  .jobsHub .compensationLaneRow { min-height: 32px !important; padding-bottom: 5px !important; }
  .jobsHub .feedSection { padding-top: 10px !important; }
  .jobsHub .feedMeta { padding-top: 6px !important; padding-bottom: 12px !important; }
}

/* On mobile the radar still exists and moves; it simply consumes less vertical space.
   The large blue posting card is a duplicate of the persistent header CTA, so hiding that
   duplicate preserves functionality while allowing the first job signal to enter the viewport. */
@media (max-width: 980px) {
  .jobsHub .heroInner { padding-top: 26px !important; padding-bottom: 8px !important; }
  .jobsHub .prototypePill { margin-bottom: 14px !important; }
  .jobsHub .heroLead { margin-top: 12px !important; }
  .jobsHub .heroVisual { min-height: 210px !important; margin-top: -28px !important; }
  .jobsHub .radar { inset: -28px -70px 52px -60px !important; }
  .jobsHub .stats { margin-bottom: 5px !important; }
  .jobsHub .stats strong { font-size: 34px !important; }
  .jobsHub .stats span { font-size: 10px !important; }
  .jobsHub .demoNote { font-size: 8px !important; }
  .jobsHub .marketDock { padding-bottom: 12px !important; }
  .jobsHub .postSide { display: none !important; }
  .jobsHub .searchSide { min-height: 104px !important; padding: 12px !important; }
  .jobsHub .searchBox { height: 48px !important; margin-top: 8px !important; }
  .jobsHub .popular { margin-top: 7px !important; }
  .jobsHub .categoryScroll button { height: 50px !important; }
  .jobsHub .compensationLaneRow { min-height: 30px !important; padding-bottom: 4px !important; }
  .jobsHub .feedSection { padding-top: 8px !important; }
  .jobsHub .feedMeta { padding-top: 4px !important; padding-bottom: 10px !important; }
}

@media (max-width: 720px) {
  body main h1 { letter-spacing: -0.024em !important; }
  .jobsHub .postPanelIntro h2,
  .jobsHub .explainIntro h2,
  .jobsHub .signalSection h2,
  .jobsHub .monetizationSection h2,
  .jobsHub .emptyState h2 { letter-spacing: -0.028em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jobsHub .glowBlue,
  .jobsHub .glowCoral,
  .jobsHub .contours,
  .jobsHub .contours path,
  .jobsHub .orbitPath path,
  .jobsHub .scanLabel span {
    animation: none !important;
  }
  .jobsHub .nodes .node {
    transform: none !important;
    opacity: 1 !important;
  }
}