/* ============================================================
   MATINSHAPE — Careers page (scoped extras)
   Reuses shared tokens/components from styles.css + enhance.css.
   Only genuinely new pieces live here.
   ============================================================ */

/* ---- hero floating role-node visual ---- */
.careers-hero .page-hero-inner { max-width: 760px; }
.careers-hero .hero-ctas { margin-top: 40px; }
.cr-visual {
  width: min(720px, 100%);
  margin: clamp(46px, 6vw, 72px) auto 0;
  position: relative;
}
.cr-visual svg { width: 100%; height: auto; display: block; }
.cr-wire {
  fill: none;
  stroke: rgba(161,98,7,.4);
  stroke-width: 1.2;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.4s var(--ease-luxe);
}
.cr-visual.in .cr-wire-1 { stroke-dashoffset: 0; transition-delay: .3s; }
.cr-visual.in .cr-wire-2 { stroke-dashoffset: 0; transition-delay: .45s; }
.cr-visual.in .cr-wire-3 { stroke-dashoffset: 0; transition-delay: .6s; }
.cr-chip-g {
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  transition: opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe);
}
.cr-visual.in .cr-chip-g { opacity: 1; transform: translateY(0); }
.cr-visual.in .cr-chip-1 { transition-delay: .55s; }
.cr-visual.in .cr-chip-2 { transition-delay: .7s; }
.cr-visual.in .cr-chip-3 { transition-delay: .85s; }
.cr-chip rect {
  fill: #fff;
  stroke: rgba(28,25,23,.12);
  stroke-width: 1;
}
.cr-chip text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .12em;
  fill: #44403C;
}
.cr-chip .led { fill: #10B981; }
.cr-core rect { fill: #1C1917; }
.cr-core path { stroke: url(#msGold); }
.cr-core-glow { animation: cr-pulse 4.5s ease-in-out infinite; }
@keyframes cr-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.cr-float-1 { animation: cr-float 7s ease-in-out 1.4s infinite alternate; }
.cr-float-2 { animation: cr-float 8s ease-in-out 1.9s infinite alternate; }
.cr-float-3 { animation: cr-float 7.5s ease-in-out 2.3s infinite alternate; }
@keyframes cr-float { to { transform: translateY(-7px); } }

/* ---- role cards ---- */
.roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 56px;
}
.role-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 3.5vw, 44px);
  transition: transform .55s var(--ease-luxe), box-shadow .55s, border-color .45s;
}
.role-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(198,161,91,.4);
}
.role-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.role-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.005em;
}
.role-type {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
  color: #047857;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(16,185,129,.3);
  background: rgba(16,185,129,.06);
  white-space: nowrap;
}
.role-type i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 7px rgba(16,185,129,.6);
}
.role-summary {
  font-size: 15px; line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 62ch;
}
.role-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.role-col h4 {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.role-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role-col li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
}
.role-col li::before {
  content: '';
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A16207' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.role-tools {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px;
}
.role-tools span {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .04em;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  color: var(--ink-mute);
  background: var(--bg-warm);
}
.role-foot { margin-top: 28px; }

/* ---- future roles ---- */
.future-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.future-card {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #fff, var(--bg-warm));
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  padding: 24px 26px;
}
.future-card .fc-badge {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: #fff;
  white-space: nowrap;
}
.future-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
}
.future-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-mute);
  max-width: 60ch;
}

/* ---- "don't see your role" card ---- */
.nocard {
  margin-top: 24px;
  background: linear-gradient(165deg, #fff, var(--gold-pale) 220%);
  border: 1px solid rgba(198,161,91,.35);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.nocard h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
}
.nocard p {
  font-size: 15px; line-height: 1.75;
  color: var(--ink-mute);
  max-width: 54ch;
  margin: 14px 0 26px;
}

/* ---- application form: reuse .contact-form; add role focus hint ---- */
#apply { scroll-margin-top: calc(var(--nav-h) + 20px); }
.apply-hint {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 14px;
  text-align: center;
}

/* ---- 5-step "how we work" map ---- */
.process-track.five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  position: relative;
  margin-top: 56px;
}
.process-track.five .step p { font-size: 13px; }

/* ---- "what we look for" 3-col grid ---- */
.lookfor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .process-track.five { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .process-track.five .process-line { display: none; }
  .lookfor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .role-cols { grid-template-columns: 1fr; gap: 22px; }
  .future-grid { grid-template-columns: 1fr; }
  .role-head { flex-direction: column; }
  .process-track.five { grid-template-columns: 1fr; }
  .lookfor-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Role visuals — one signature animation per role.
   Continuous CSS animations, paused off-screen for performance
   (careers.js toggles .viz-on when a card enters the viewport).
   ============================================================ */
.role-viz {
  height: 124px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(320px 120px at 50% 0%, rgba(198,161,91,.09), transparent 72%),
    linear-gradient(180deg, var(--bg-warm), #fff);
  overflow: hidden;
  margin-bottom: 26px;
  position: relative;
}
.role-viz svg { width: 100%; height: 100%; display: block; }

/* default: paused until the card is in view */
.role-viz [class^="rv"] { animation-play-state: paused; }
.role-card.viz-on .role-viz [class^="rv"] { animation-play-state: running; }

/* -- 1. Pipeline (Automation Systems Builder) -- */
.rvp-track { stroke: rgba(198,161,91,.4); stroke-width: 2; stroke-dasharray: 4 5; }
.rvp-node rect { fill: #fff; stroke: rgba(28,25,23,.14); stroke-width: 1; }
.rvp-node text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; fill: #57534E; text-anchor: middle; }
.rvp-node.n2 rect { animation: rvp-pulse 2.8s ease-in-out infinite; }
@keyframes rvp-pulse { 0%,42%,100% { stroke: rgba(28,25,23,.14); } 56% { stroke: var(--gold-bright); } }
.rvp-packet {
  fill: var(--gold);
  filter: drop-shadow(0 0 4px rgba(198,161,91,.75));
  offset-path: path('M66 62 H394');
  offset-distance: 0%;
  animation: rvp-go 2.8s var(--ease-luxe) infinite;
}
@keyframes rvp-go {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  44% { offset-distance: 50%; }
  56% { offset-distance: 50%; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* -- 2. Agent (AI Agent Builder) -- */
.rva-core { fill: #1C1917; }
.rva-glyph { stroke: var(--gold-bright); stroke-width: 2; fill: none; stroke-linecap: round; }
.rva-ring { fill: none; stroke: rgba(198,161,91,.5); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: rva-ring 2.6s ease-out infinite; }
.rva-ring.r2 { animation-delay: 1.3s; }
@keyframes rva-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.rva-bubble rect { fill: #fff; stroke: rgba(28,25,23,.12); }
.rva-bubble .ln { fill: rgba(28,25,23,.14); }
.rva-bubble { opacity: 0; transform: translateX(8px); transform-box: fill-box; animation: rva-bub 4.4s ease-in-out infinite; }
.rva-bubble.bb2 { animation-delay: 1.1s; }
@keyframes rva-bub { 0%,6% { opacity: 0; transform: translateX(8px); } 16%,74% { opacity: 1; transform: translateX(0); } 84%,100% { opacity: 0; transform: translateX(8px); } }
.rva-typing circle { fill: var(--gold); animation: rva-type 1.1s ease-in-out infinite; }
.rva-typing circle:nth-child(2) { animation-delay: .18s; }
.rva-typing circle:nth-child(3) { animation-delay: .36s; }
@keyframes rva-type { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* -- 3. UI assembling (Creative Frontend Developer) -- */
.rvu-frame { fill: #fff; stroke: rgba(28,25,23,.14); stroke-width: 1; }
.rvu-dot { fill: rgba(28,25,23,.22); }
.rvu-bar { stroke: rgba(28,25,23,.1); stroke-width: 1; }
.rvu-block { fill: rgba(198,161,91,.35); transform-box: fill-box; transform-origin: left center; opacity: 0; transform: translateY(6px); animation: rvu-in 4s var(--ease-luxe) infinite; }
.rvu-block.k1 { animation-delay: .1s; }
.rvu-block.k2 { animation-delay: .5s; fill: rgba(28,25,23,.12); }
.rvu-block.k3 { animation-delay: .9s; fill: rgba(28,25,23,.12); }
@keyframes rvu-in { 0%,4% { opacity: 0; transform: translateY(6px); } 22%,82% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(6px); } }
.rvu-cursor { fill: #1C1917; animation: rvu-cur 4s var(--ease-luxe) infinite; }
@keyframes rvu-cur { 0% { transform: translate(206px,26px); } 30% { transform: translate(178px,40px); } 60% { transform: translate(250px,54px); } 100% { transform: translate(206px,26px); } }

/* -- 4. Voice waveform (Voice AI Conversation Designer) -- */
.rvv-bar { fill: var(--gold-bright); transform-box: fill-box; transform-origin: center; animation: rvv-eq 1.2s ease-in-out infinite; }
@keyframes rvv-eq { 0%,100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }
.rvv-arc { fill: none; stroke: rgba(198,161,91,.45); stroke-width: 2; stroke-linecap: round; animation: rvv-arc 2.2s ease-in-out infinite; }
@keyframes rvv-arc { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* -- 5. Scan & verify (Automation QA & Reliability Engineer) -- */
.rvq-row .ln { fill: rgba(28,25,23,.09); }
.rvq-box { fill: #fff; stroke: rgba(28,25,23,.18); stroke-width: 1.4; }
.rvq-check { stroke: #10B981; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: rvq-check 3.6s ease-in-out infinite; }
.rvq-check.c2 { animation-delay: .5s; }
.rvq-check.c3 { animation-delay: 1s; }
@keyframes rvq-check { 0%,10% { stroke-dashoffset: 16; } 26%,88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }
.rvq-scan { fill: rgba(16,185,129,.5); animation: rvq-scan 3.6s var(--ease-luxe) infinite; }
@keyframes rvq-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 60% { transform: translateY(56px); opacity: 1; } 72%,100% { transform: translateY(56px); opacity: 0; } }

/* -- 6. Funnel (Growth & Funnel Automation Specialist) -- */
.rvf-funnel { fill: none; stroke: rgba(28,25,23,.22); stroke-width: 1.6; stroke-linejoin: round; }
.rvf-drop { fill: rgba(28,25,23,.3); transform-box: fill-box; animation: rvf-drop 3s var(--ease-luxe) infinite; }
.rvf-drop.d2 { animation-delay: .7s; }
.rvf-drop.d3 { animation-delay: 1.4s; }
.rvf-drop.d4 { animation-delay: 2.1s; }
@keyframes rvf-drop {
  0% { transform: translate(0,-16px); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(var(--dx,0),34px); opacity: 1; }
  100% { transform: translate(0,52px); opacity: 0; }
}
.rvf-win { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(198,161,91,.7)); transform-box: fill-box; transform-origin: center; animation: rvf-win 3s ease-in-out infinite; }
@keyframes rvf-win { 0%,55% { transform: scale(.6); opacity: .3; } 72% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(.9); opacity: .8; } }
.rvf-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; fill: var(--gold); text-anchor: middle; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cr-wire { stroke-dashoffset: 0 !important; }
  .cr-chip-g { opacity: 1 !important; transform: none !important; }
  .cr-core-glow, .cr-float-1, .cr-float-2, .cr-float-3 { animation: none !important; }
  /* role visuals: hold a calm static frame */
  .role-viz [class^="rv"] { animation: none !important; }
  .rvp-packet, .rva-ring, .rvq-scan, .rvf-drop { opacity: 0 !important; }
  .rva-bubble, .rvu-block { opacity: 1 !important; transform: none !important; }
  .rvv-bar { transform: scaleY(.6); }
  .rvq-check { stroke-dashoffset: 0 !important; }
  .rvf-win { transform: scale(1); opacity: 1 !important; }
}