/* ==========================================================================
   SOMOS.tech — Career Journey
   Design tokens + base + shared components
   ========================================================================== */

:root {
  /* Surface */
  --bg: #0A1E33;
  --bg-deep: #071422;
  --card: #12293F;
  --card-2: #16324C;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Brand */
  --teal: #22E2A0;
  --teal-dark: #12B87D;
  --teal-wash: rgba(34, 226, 160, 0.12);
  --teal-glow: rgba(34, 226, 160, 0.45);
  --gold: #F0A947;
  --gold-wash: rgba(240, 169, 71, 0.12);

  /* Text */
  --text: #F3F7F9;
  --text-2: #A8BBC8;
  --text-3: #889CAD; /* AA on bg/card/card-2 (was #718496, 3.4:1 on card-2) */
  --text-4: #889CAD; /* alias of text-3 so no text falls below AA */

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;

  /* Layout */
  --nav-h: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container: 560px;
  --container-wide: 900px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(34, 226, 160, 0.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 30%, rgba(240, 169, 71, 0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(10, 30, 51, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1px;
}

.brand svg { flex-shrink: 0; }

.nav-links {
  display: none;
  gap: 28px;
  font-size: 14px;
  color: var(--text-2);
}

.nav-links a { transition: color var(--dur-fast) var(--ease-out); }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--teal); font-weight: 600; }

@media (min-width: 860px) {
  .nav-links { display: flex; }
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.concept-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid rgba(240, 169, 71, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Screen switcher */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px clamp(16px, 4vw, 40px) 0;
}

.switcher a,
.switcher span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}

.switcher a[aria-current="page"] {
  background: var(--teal-wash);
  color: var(--teal);
  border-color: var(--teal);
}

.switcher a:not([aria-current="page"]):hover {
  border-color: var(--text-3);
  color: var(--text);
}

.switcher span.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: clamp(40px, 8vw, 72px) clamp(16px, 4vw, 40px) clamp(16px, 3vw, 24px);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid rgba(240, 169, 71, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.12;
}

.hero h1 .accent {
  color: var(--teal);
}

.hero p {
  margin: 0 auto;
  max-width: 480px;
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  color: var(--text-2);
  line-height: 1.6;
}

.hero-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--text-3);
}

.hero-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.legend-dot--done { background: var(--teal); }
.legend-dot--now {
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash);
}
.legend-dot--upcoming {
  border: 1.5px dashed var(--text-4);
}

.scroll-cue {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}

.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }

.scroll-cue svg { animation: bob 1.8s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* ==========================================================================
   Path / map
   ========================================================================== */

.map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 40px) clamp(60px, 10vw, 100px);
  max-width: var(--container-wide);
  margin: 0 auto;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.stage-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.stage-label.is-current { color: var(--teal); }

/* Overall path progress — a standalone trailhead marker, deliberately
   NOT attached to any single stage card, so it can never be misread
   as "My Career Journey"'s own number. */
.path-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: var(--container);
  background: var(--card-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin: 22px auto 20px;
}

.path-summary-ring { flex-shrink: 0; }
.path-summary-ring circle[data-ring-fill] {
  transition: stroke-dashoffset 1s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .path-summary-ring circle[data-ring-fill] { transition: none; }
}

.path-summary-text { min-width: 0; text-align: left; }

.path-summary-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1.1;
}

.path-summary-label {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.path-summary-caption {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.4;
}

/* connector — the "drawing" line between nodes. A small light pulse
   travels down it continuously (staggered per connector so the whole
   path feels alive, not synchronized); hover brightens the line and
   speeds the pulse up. A wider invisible hit zone (::before) makes
   hover easy to trigger even though the visible line is only 3px. */
.connector {
  position: relative;
  width: 3px;
  height: 30px;
  margin: 9px 0;
  border-radius: 2px;
  flex-shrink: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: filter 200ms var(--ease-out);
  cursor: default;
}

.connector::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  right: -10px;
}

.connector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--teal);
  box-shadow: 0 0 3px 0px var(--teal-glow);
  opacity: 0;
  animation: connector-travel 2s linear infinite;
  animation-delay: var(--travel-delay, 0s);
}

/* hover only brightens the glow — it never changes the pulse speed,
   so every connector keeps the same 2s timing whether you're
   interacting with it or not */
.connector:hover::after {
  transform: translate(-50%, -50%) scale(1.35);
}

.connector--solid { background: linear-gradient(var(--teal), var(--teal-dark)); }
.connector--solid:hover { filter: brightness(1.35) drop-shadow(0 0 6px var(--teal-glow)); }

.connector--dashed {
  background-image: linear-gradient(var(--border-strong) 55%, transparent 0%);
  background-size: 3px 10px;
  background-repeat: repeat-y;
}
.connector--dashed::after { background: var(--text-2); box-shadow: 0 0 3px 0px rgba(168, 187, 200, 0.5); }
.connector--dashed:hover { filter: brightness(1.6); }

/* shared timing for every traveling pulse on the page — the plain
   connectors above AND the fork/merge path dots below use this same
   0/30/70/100 shape and the same 2s duration, so the whole path moves
   at one consistent speed instead of several different ones. The dot
   only reaches full opacity well past each end (not just past 15%)
   so its glow can't reach the card above/below even at this more
   compact spacing. */
@keyframes connector-travel {
  0%   { top: 0%;   opacity: 0; }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.85; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .connector::after { animation: none; opacity: 0; }
}

/* mobile-only connectors that stand in for the desktop SVG fork/merge
   bars, so the Learn/Build/Connect stack still reads as one path */
.fork-mobile-connector { display: none; }
@media (max-width: 767px) {
  .fork-mobile-connector { display: block; }
}

/* node card (rendered as a <button> — not a real link yet) */
.node {
  display: block;
  width: 100%;
  max-width: var(--container);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), scale 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}

.node:hover, .node:focus-visible {
  transform: translateY(-9px) scale(1.035);
  z-index: 1;
}

.node-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.node-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.node-title {
  font-size: 14.5px;
  font-weight: 600;
  flex: 1;
}

.node-meta {
  font-size: 11.5px;
  color: var(--text-3);
  flex-shrink: 0;
}

.node-desc {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 5px;
  margin-left: 41px;
  line-height: 1.55;
}

/* per-node progress readout — reused on every trackable stage */
.pct-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-3);
  flex-shrink: 0;
}

.pct-track {
  height: 5px;
  background: var(--card-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 0 41px;
}

.pct-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
  border-radius: 999px;
  width: 0;
  transition: width 900ms var(--ease-out);
}

/* completed */
.node--done {
  border-color: rgba(34, 226, 160, 0.55);
  background: var(--teal-wash);
}
.node--done .node-icon { background: rgba(34, 226, 160, 0.18); color: var(--teal); }
.node--done .pct-label { color: var(--teal); }
.node--done:hover, .node--done:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash), 0 26px 54px -18px rgba(34, 226, 160, 0.65);
}

/* current */
.node--current {
  position: relative;
  max-width: 560px;
  padding: 20px 24px;
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 6px var(--teal-wash), 0 20px 40px -20px rgba(34, 226, 160, 0.3);
}

.node--current:hover, .node--current:focus-visible {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 0 0 10px var(--teal-wash), 0 32px 60px -18px rgba(34, 226, 160, 0.6);
}

.node--current .node-title { font-size: 16.5px; font-weight: 700; }

.here-tag {
  position: absolute;
  top: -12px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--teal);
  color: #06251C;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
}

.here-tag .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #06251C;
  position: relative;
}

.here-tag .pulse-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid #06251C;
  animation: ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}

@keyframes ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* pulsing glow ring behind the current node */
.pulse-ring {
  position: absolute;
  inset: -14px;
  border-radius: calc(var(--radius-md) + 14px);
  border: 1.5px solid var(--teal-glow);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.pulse-ring.is-animating {
  animation: ring-pulse 2.6s ease-out infinite;
}

@keyframes ring-pulse {
  0%   { transform: scale(0.92); opacity: 0.55; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-ring.is-animating { animation: none; opacity: 0.3; }
  .here-tag .pulse-dot::before { animation: none; }
}

/* upcoming — not started yet, but never gated. Anyone can open these anytime. */
.node--upcoming {
  border: 1.5px dashed var(--border-strong);
  opacity: 0.9;
}
.node--upcoming .node-icon { background: var(--card-2); color: var(--text-3); }
.node--upcoming .node-title { color: var(--text-2); }
.node--upcoming:hover, .node--upcoming:focus-visible {
  opacity: 1;
  border-color: var(--text-2);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 26px 50px -18px rgba(255, 255, 255, 0.2);
}

.not-started-icon { color: var(--text-3); flex-shrink: 0; }

/* reward / land the role */
.node--reward {
  max-width: var(--container);
  text-align: center;
  padding: 22px 24px;
  border: 1.5px dashed rgba(240, 169, 71, 0.5);
  background: var(--gold-wash);
  opacity: 0.88;
}
.node--reward .node-row { justify-content: center; }
.node--reward .node-icon { background: rgba(240, 169, 71, 0.16); color: var(--gold); }
.node--reward .node-title { flex: none; color: var(--gold); font-weight: 700; font-size: 15px; }
.node--reward .node-desc { margin-left: 0; margin-top: 6px; }
.node--reward:hover, .node--reward:focus-visible {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash), 0 28px 56px -16px rgba(240, 169, 71, 0.6);
}

/* ==========================================================================
   Fork (Learn / Build / Connect)
   ========================================================================== */

.fork-wrap {
  width: 100%;
  max-width: var(--container-wide);
  margin: 22px auto 0;
}

/* desktop branch connector bar */
.fork-bar {
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 8px;
  display: none;
}

.fork-bar svg { width: 100%; height: 100%; overflow: visible; }

.fork-bar path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

@media (min-width: 768px) {
  .fork-bar { display: block; }
}

/* traveling pulse for the fork/merge branch paths — a small dot
   riding CSS offset-path along the exact same "d" as the structural
   path, using offset-distance (0%-100%) instead of stroke-dasharray.
   Percentage-based means one timing works regardless of whether the
   path is the ~40-unit trunk or the ~330-unit branch, and reusing
   connector-travel's own 0/15/85/100 opacity shape at the same 2s
   duration is what keeps it moving at the same speed and "feel" as
   the plain vertical connectors instead of a separate, slower system. */
.fork-wrap circle.path-dot {
  fill: var(--teal);
  filter: drop-shadow(0 0 3px var(--teal-glow));
  offset-distance: 0%;
  animation: connector-travel-path 2s linear infinite;
  animation-delay: var(--pulse-delay, 0s);
}

.fork-wrap circle.path-dot--muted {
  fill: var(--text-2);
  filter: drop-shadow(0 0 2px rgba(168, 187, 200, 0.5));
}

@keyframes connector-travel-path {
  0%   { offset-distance: 0%;   opacity: 0; }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.85; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fork-wrap circle.path-dot { animation: none; opacity: 0; }
}

.fork-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .fork-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.fork-card {
  display: block;
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.fork-card:hover, .fork-card:focus-visible {
  transform: translateY(-9px) scale(1.035);
  box-shadow: 0 0 0 3px var(--teal-wash), 0 28px 56px -16px rgba(34, 226, 160, 0.6);
  z-index: 1;
}

.fork-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fork-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--teal-wash);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fork-card-title {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
}

.fork-card .pct-track { margin-left: 0; margin-top: 0; margin-bottom: 12px; }

.fork-card-items {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 10px;
}

.fork-card-note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.map-footer {
  text-align: center;
  padding: 28px 20px 40px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

/* ==========================================================================
   Feedback button
   ========================================================================== */

.feedback-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card-2);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.feedback-btn:hover { border-color: var(--gold); color: var(--text); transform: translateY(-1px); }

/* ==========================================================================
   Toast (reused later for milestone celebrations)
   ========================================================================== */

.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  font-size: 13px;
}

.toast strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.toast p { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.5; }

.toast-icon {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.toast-close {
  margin-left: auto;
  background: none; border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
}
.toast-close:hover { color: var(--text); }