/* ================================================================
   Career Timeline — Cyberspace / Hacker Terminal Theme
   ================================================================ */

/* -- Custom Properties -- */
.tl {
  --tl-void: #0a0a0f;
  --tl-card-bg: rgba(10, 15, 20, 0.85);
  --tl-card-border: rgba(0, 255, 156, 0.15);
  --tl-card-hover: rgba(0, 255, 156, 0.4);
  --tl-titlebar-bg: rgba(0, 255, 156, 0.04);
  --tl-text: #c0fce8;
  --tl-text-dim: #7dccaa;
  --tl-text-muted: #3d7a60;
  --tl-spine: rgba(0, 255, 156, 0.12);
  --tl-connector: rgba(0, 255, 156, 0.2);
  --tl-dot: #00ff9c;
  --tl-accent-work: #00ff9c;
  --tl-accent-edu: #ff6b35;
  --tl-node-work: rgba(0, 255, 156, 0.08);
  --tl-node-edu: rgba(255, 107, 53, 0.08);
  --tl-ms-bg: #00ff9c;
  --tl-ms-glow: rgba(0, 255, 156, 0.5);
  --tl-year: rgba(0, 255, 156, 0.3);
  --tl-logo-bg: rgba(0, 255, 156, 0.06);
  --tl-glow: 0 0 15px rgba(0, 255, 156, 0.15), 0 0 30px rgba(0, 255, 156, 0.05);
  --tl-glow-strong: 0 0 20px rgba(0, 255, 156, 0.3), 0 0 40px rgba(0, 255, 156, 0.1);
  --tl-font: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
}

/* -- Container -- */
.tl {
  position: relative;
  width: 100%;
  margin: 2rem 0 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: var(--tl-font);
  background: transparent;
  overflow: hidden;
}

.tl.tl-ready {
  opacity: 1;
}

/* -- Starfield Canvas -- */
.tl-starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* -- Spine Canvas (wavy path + data stream) -- */
.tl-spine-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* -- CRT Scanlines Overlay -- */
.tl-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  mix-blend-mode: multiply;
}

/* Subtle CRT flicker */
.tl-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 255, 156, 0.01);
  animation: crt-flicker 0.15s infinite alternate;
  pointer-events: none;
}

@keyframes crt-flicker {
  0% { opacity: 0.97; }
  100% { opacity: 1; }
}

/* -- Spine div (hidden — now drawn on canvas) -- */
.tl-spine {
  display: none;
}

/* -- Legend -- */
.tl-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 0.5rem;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
}

.tl-legend-item {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-legend-work {
  color: #00ff9c;
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.4);
}

.tl-legend-edu {
  color: #ff6b35;
  text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

.tl-legend-glyph {
  font-size: 0.65rem;
  opacity: 0.6;
}

.tl-legend-item::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.tl-legend-work::before {
  background: #00ff9c;
  box-shadow: 0 0 6px rgba(0, 255, 156, 0.6);
}

.tl-legend-edu::before {
  background: #ff6b35;
  box-shadow: 0 0 6px rgba(255, 107, 53, 0.6);
}

/* -- Entries -- */
.tl-entry {
  position: absolute;
  z-index: 3;
  width: 100px;
  opacity: 0;
  transition: opacity 0.5s ease, width 0.3s ease;
}

/* Initial offsets — JS will override left/right with explicit positioning */
.tl-work {
  transform: translateX(-20px);
}

.tl-edu {
  transform: translateX(20px);
}

.tl-entry.tl-revealed {
  opacity: 1;
  transform: translateX(0);
}

.tl-entry.tl-open {
  width: min(260px, calc(50% - 24px));
  z-index: 5;
}

/* -- Card -- */
.tl-card {
  background: var(--tl-card-bg);
  border: 1px solid var(--tl-card-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tl-card:hover {
  border-color: var(--tl-card-hover);
  box-shadow: var(--tl-glow);
}

/* Accent edge facing spine */
.tl-work .tl-card {
  border-right: 2px solid rgba(0, 255, 156, 0.4);
}

.tl-edu .tl-card {
  border-left: 2px solid rgba(255, 107, 53, 0.4);
}

.tl-work .tl-card:hover {
  border-right-color: #00ff9c;
  box-shadow: 0 0 20px rgba(0, 255, 156, 0.2), 0 0 40px rgba(0, 255, 156, 0.05);
}

.tl-edu .tl-card:hover {
  border-left-color: #ff6b35;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.2), 0 0 40px rgba(255, 107, 53, 0.05);
}

/* Glitch effect on hover */
@keyframes glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, 0); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

.tl-card:hover .tl-org {
  animation: glitch 0.3s ease-in-out;
}

/* -- Titlebar (terminal style) -- */
.tl-titlebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 6px;
  background: var(--tl-titlebar-bg);
  user-select: none;
  position: relative;
}

/* Terminal prompt */
.tl-prompt {
  font-size: 0.55rem;
  color: var(--tl-accent-work);
  opacity: 0.5;
  font-family: var(--tl-font);
}

.tl-edu .tl-prompt {
  color: var(--tl-accent-edu);
}

.tl-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--tl-logo-bg);
  padding: 2px;
  border: 1px solid rgba(0, 255, 156, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tl-card:hover .tl-logo {
  border-color: rgba(0, 255, 156, 0.3);
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.15);
}

.tl-edu .tl-card:hover .tl-logo {
  border-color: rgba(255, 107, 53, 0.3);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.15);
}

.tl-org {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tl-text);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 255, 156, 0.2);
}

.tl-dates-brief {
  font-size: 0.58rem;
  color: var(--tl-text-muted);
  letter-spacing: 0.05em;
}

/* Blinking cursor after card title */
.tl-cursor {
  display: inline-block;
  width: 5px;
  height: 8px;
  background: var(--tl-accent-work);
  opacity: 0;
  animation: blink-cursor 1s step-end infinite;
}

.tl-edu .tl-cursor {
  background: var(--tl-accent-edu);
}

.tl-card:hover .tl-cursor {
  opacity: 1;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* -- Card Content (collapsed by default) -- */
.tl-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 8px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  border-top: 0 solid rgba(0, 255, 156, 0.1);
}

.tl-open .tl-content {
  max-height: 300px;
  padding: 8px;
  border-top-width: 1px;
}

.tl-role {
  margin-bottom: 5px;
}

.tl-role:last-child {
  margin-bottom: 0;
}

.tl-role-name {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--tl-text-dim);
  line-height: 1.3;
  font-family: var(--tl-font);
}

.tl-role-dates {
  display: block;
  font-size: 0.66rem;
  color: var(--tl-text-muted);
  margin-top: 1px;
  font-family: var(--tl-font);
}

/* -- Connectors (created by JS, positioned dynamically) -- */
.tl-connector {
  position: absolute;
  height: 1px;
  z-index: 2;
  overflow: visible;
}

.tl-connector-work {
  width: 20px;
  background: linear-gradient(90deg, transparent, var(--tl-accent-work));
}

.tl-connector-edu {
  width: 20px;
  background: linear-gradient(270deg, transparent, var(--tl-accent-edu));
}

/* Glowing dot at spine junction */
.tl-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.tl-connector-work::after {
  right: -2px;
  background: var(--tl-accent-work);
  box-shadow: 0 0 8px var(--tl-accent-work), 0 0 16px rgba(0, 255, 156, 0.3);
}

.tl-connector-edu::after {
  left: -2px;
  background: var(--tl-accent-edu);
  box-shadow: 0 0 8px var(--tl-accent-edu), 0 0 16px rgba(255, 107, 53, 0.3);
}

/* Animated data pulse along connector */
.tl-connector::before {
  content: '';
  position: absolute;
  top: -1px;
  width: 6px;
  height: 3px;
  border-radius: 1px;
  animation: data-pulse 2s ease-in-out infinite;
}

.tl-connector-work::before {
  right: 0;
  background: var(--tl-accent-work);
  box-shadow: 0 0 4px var(--tl-accent-work);
  animation-direction: reverse;
}

.tl-connector-edu::before {
  left: 0;
  background: var(--tl-accent-edu);
  box-shadow: 0 0 4px var(--tl-accent-edu);
}

@keyframes data-pulse {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-14px); opacity: 0; }
}

.tl-connector-edu::before {
  animation-name: data-pulse-right;
}

@keyframes data-pulse-right {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(14px); opacity: 0; }
}

/* -- Duration Nodes (created by JS, positioned dynamically) -- */
.tl-node {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.tl-node-work {
  background: var(--tl-node-work);
  box-shadow: 0 0 6px rgba(0, 255, 156, 0.05);
}

.tl-node-edu {
  background: var(--tl-node-edu);
  box-shadow: 0 0 6px rgba(255, 107, 53, 0.05);
}

/* -- Milestones -- */
.tl-milestone {
  position: absolute;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tl-milestone.tl-revealed {
  opacity: 1;
}

.tl-ms-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--tl-ms-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px var(--tl-ms-glow), 0 0 32px rgba(0, 255, 156, 0.2);
  color: var(--tl-ms-bg);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: ms-pulse 3s ease-in-out infinite;
}

@keyframes ms-pulse {
  0%, 100% { box-shadow: 0 0 16px var(--tl-ms-glow), 0 0 32px rgba(0, 255, 156, 0.2); }
  50% { box-shadow: 0 0 24px var(--tl-ms-glow), 0 0 48px rgba(0, 255, 156, 0.3); }
}

.tl-ms-icon:hover {
  transform: scale(1.2);
  box-shadow: 0 0 30px var(--tl-ms-glow), 0 0 60px rgba(0, 255, 156, 0.3);
}

.tl-ms-icon svg {
  width: 13px;
  height: 13px;
}

.tl-ms-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tl-accent-work);
  white-space: nowrap;
  background: rgba(10, 10, 15, 0.9);
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(0, 255, 156, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
  font-family: var(--tl-font);
  text-shadow: 0 0 6px rgba(0, 255, 156, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tl-milestone:hover .tl-ms-label,
.tl-milestone.tl-ms-active .tl-ms-label {
  opacity: 1;
  pointer-events: auto;
}

/* -- Year Markers (created by JS, positioned dynamically) -- */
.tl-year {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--tl-year);
  letter-spacing: 0.08em;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--tl-font);
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.15);
}

.tl-year-now {
  font-style: italic;
  font-weight: 600;
  color: var(--tl-accent-work);
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.4);
}

/* -- Decryption text animation class -- */
.tl-decrypting {
  color: var(--tl-accent-work) !important;
  text-shadow: 0 0 6px rgba(0, 255, 156, 0.5);
}

/* ================================================================
   Light mode overrides
   ================================================================ */
[data-theme="light"] .tl {
  --tl-void: #f4f7f5;
  --tl-card-bg: rgba(255, 255, 255, 0.7);
  --tl-card-border: rgba(13, 150, 104, 0.15);
  --tl-card-hover: rgba(13, 150, 104, 0.35);
  --tl-titlebar-bg: rgba(13, 150, 104, 0.04);
  --tl-text: #0f3d2b;
  --tl-text-dim: #1a5a3e;
  --tl-text-muted: #6a9a82;
  --tl-spine: rgba(13, 150, 104, 0.15);
  --tl-connector: rgba(13, 150, 104, 0.2);
  --tl-dot: #0d9668;
  --tl-accent-work: #0d9668;
  --tl-accent-edu: #c85a20;
  --tl-node-work: rgba(13, 150, 104, 0.1);
  --tl-node-edu: rgba(200, 90, 32, 0.1);
  --tl-ms-bg: #0d9668;
  --tl-ms-glow: rgba(13, 150, 104, 0.3);
  --tl-year: rgba(13, 150, 104, 0.35);
  --tl-logo-bg: rgba(13, 150, 104, 0.06);
  --tl-glow: 0 0 12px rgba(13, 150, 104, 0.1), 0 0 24px rgba(13, 150, 104, 0.05);
  --tl-glow-strong: 0 0 16px rgba(13, 150, 104, 0.2), 0 0 32px rgba(13, 150, 104, 0.08);
}

[data-theme="light"] .tl-org {
  text-shadow: none;
}

[data-theme="light"] .tl-ms-label {
  background: rgba(244, 247, 245, 0.9);
  color: #0d9668;
  border-color: rgba(13, 150, 104, 0.15);
  text-shadow: none;
}

[data-theme="light"] .tl-decrypting {
  color: #0d9668 !important;
  text-shadow: none;
}

[data-theme="light"] .tl-year {
  text-shadow: none;
}

[data-theme="light"] .tl-year-now {
  color: #0d9668;
  text-shadow: none;
}

[data-theme="light"] .tl-scanlines {
  display: none;
}

[data-theme="light"] .tl-content {
  border-top-color: rgba(13, 150, 104, 0.1);
}

[data-theme="light"] .tl-connector-work::after {
  box-shadow: 0 0 6px rgba(13, 150, 104, 0.3);
}

[data-theme="light"] .tl-connector-edu::after {
  box-shadow: 0 0 6px rgba(200, 90, 32, 0.3);
}

[data-theme="light"] .tl-logo {
  border-color: rgba(13, 150, 104, 0.1);
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 400px) {
  .tl-connector { display: none; }
}