/* ==========================================================================
   mohsenfathipour.com: shared styles for every page

   1. Theme
   2. Base
   3. Navigation and footer
   4. Shared components (terminal cards, buttons, page headers)
   5. Home page (intro and AI agents animation)
   6. Experience
   7. Contact
   8. Blog posts
   9. Reduced motion
   ========================================================================== */


/* 1. Theme
   ========================================================================== */

:root {
  --bg-color: #0d1117;
  --card-bg: #161b22;
  --border-color: #30363d;
  --text-blue: #58a6ff;
  --neon-green: #00ff66;
  --text-muted: #8b949e;
  --text-light: #c9d1d9;
}


/* 2. Base
   ========================================================================== */

body {
  font-family: "Nunito", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-blue);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

::selection {
  background: rgba(0, 255, 102, 0.25);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--neon-green);
  outline-offset: 3px;
}

.code-font {
  font-family: "Fira Code", monospace;
}

.main-wrapper {
  max-width: 1100px;
  width: 100%;
}

.text-neon {
  color: var(--neon-green);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

.text-muted-custom {
  color: var(--text-muted);
}

a.text-neon:hover {
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.6);
}


/* 3. Navigation and footer
   ========================================================================== */

.nav-link {
  color: var(--text-muted) !important;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--neon-green) !important;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.site-footer {
  border-top: 1px solid var(--border-color);
}

/* Line icons (inline SVG, colored by the surrounding text) */
.nav-icon {
  margin-right: 0.4rem;
  vertical-align: -2px;
}

.card-icon {
  flex-shrink: 0;
  color: var(--text-blue);
  opacity: 0.8;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.terminal-card:hover .card-icon {
  color: var(--neon-green);
  opacity: 1;
}

.row-icon {
  margin-right: 0.45rem;
  vertical-align: -3px;
}


/* 4. Shared components
   ========================================================================== */

/* Page header: a command line, the title, and a small animated icon */
.page-icon-pulse {
  animation: icon-pulse 3s infinite ease-in-out;
}

@keyframes icon-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.9;
  }
}

.page-icon-flow {
  stroke-dasharray: 4, 4;
  animation: icon-flow 4s linear infinite;
}

@keyframes icon-flow {
  to {
    stroke-dashoffset: -40;
  }
}

/* Terminal cards */
.terminal-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition:
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.terminal-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}

/* Cards that fade in one after another */
.reveal {
  opacity: 0;
  transform: scale(0.98);
  animation: reveal 0.4s ease-out forwards;
}

.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.24s; }
.reveal:nth-child(5) { animation-delay: 0.32s; }
.reveal:nth-child(6) { animation-delay: 0.4s; }
.reveal:nth-child(7) { animation-delay: 0.48s; }
.reveal:nth-child(8) { animation-delay: 0.56s; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.skill-list strong {
  color: #ffffff;
}

.card-label {
  color: var(--neon-green);
  font-family: "Fira Code", monospace;
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: "Fira Code", monospace;
  font-size: 0.75rem;
}

/* Buttons */
.btn-geek {
  font-family: "Fira Code", monospace;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  background: transparent;
  transition: all 0.3s ease;
}

.btn-geek:hover,
.btn-geek:focus-visible {
  background: var(--neon-green);
  color: var(--bg-color);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
}

.btn-ghost {
  font-family: "Fira Code", monospace;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  background: transparent;
  transition: all 0.3s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--text-blue);
  color: var(--text-blue);
}

/* "> proceed to ./next_page" links */
.proceed-link {
  color: var(--neon-green);
  text-decoration: none;
}

.proceed-link:hover {
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
}


/* 5. Home page
   ========================================================================== */

/* Typed title */
.typing-effect {
  font-family: "Fira Code", monospace;
  border-right: 2px solid var(--neon-green);
  white-space: nowrap;
  animation:
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
  overflow: hidden;
  display: inline-block;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--neon-green);
  }
}

/* Keep the typed title on one line on small screens */
@media (max-width: 575.98px) {
  .typing-effect {
    font-size: min(1.25rem, 4.1vw);
  }
}

/* AI agents animation. The scenario itself (moving dots, highlights, log)
   is SVG animation; main.js pauses it on hover and for reduced motion. */
.ag-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ag-map text {
  font-family: "Fira Code", monospace;
}

/* Wide layout on laptops and up, tall layout on tablets and phones */
.ag-map--tall {
  display: none;
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  .ag-map--wide {
    display: none;
  }

  .ag-map--tall {
    display: block;
  }
}

.ag-blink {
  animation: ag-blink 1.2s ease-in-out infinite alternate;
}

@keyframes ag-blink {
  to {
    opacity: 0.25;
  }
}

.ag-meter {
  transform-box: fill-box;
  transform-origin: left center;
  animation: ag-meter 2.4s ease-in-out infinite alternate;
}

.ag-meter-2 {
  animation-duration: 3.1s;
  animation-delay: -1s;
}

.ag-meter-3 {
  animation-duration: 1.9s;
  animation-delay: -0.5s;
}

@keyframes ag-meter {
  from {
    transform: scaleX(0.35);
  }
  to {
    transform: scaleX(0.95);
  }
}


/* 6. Experience
   ========================================================================== */

.experience-timeline {
  border-left: 2px solid var(--border-color);
  padding-left: 24px;
}

.timeline-item {
  position: relative;
  opacity: 0;
  transform: translateY(15px);
  animation: fade-in-up 0.5s ease-out forwards;
}

.timeline-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: -31px;
  top: 7px;
  background-color: var(--border-color);
}

.timeline-item.active-job .timeline-dot {
  background-color: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
}

.timeline-item:nth-child(2) { animation-delay: 0.05s; }
.timeline-item:nth-child(3) { animation-delay: 0.1s; }
.timeline-item:nth-child(4) { animation-delay: 0.15s; }
.timeline-item:nth-child(5) { animation-delay: 0.2s; }
.timeline-item:nth-child(6) { animation-delay: 0.25s; }
.timeline-item:nth-child(7) { animation-delay: 0.3s; }
.timeline-item:nth-child(8) { animation-delay: 0.35s; }
.timeline-item:nth-child(9) { animation-delay: 0.4s; }
.timeline-item:nth-child(10) { animation-delay: 0.45s; }
.timeline-item:nth-child(11) { animation-delay: 0.5s; }
.timeline-item:nth-child(12) { animation-delay: 0.55s; }

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 576px) {
  .experience-timeline {
    padding-left: 16px;
    margin-left: 8px !important;
  }

  .timeline-dot {
    left: -23px;
  }
}


/* 7. Contact
   ========================================================================== */

.terminal-card--pulse {
  animation: pulse-border 2s infinite alternate;
}

@keyframes pulse-border {
  from {
    border-color: var(--border-color);
    box-shadow: 0 0 0 transparent;
  }
  to {
    border-color: rgba(0, 255, 102, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.05);
  }
}

.signal-ring {
  transform-origin: center;
  animation: ripple 2.5s infinite linear;
}

.signal-ring--late {
  animation-delay: 1.25s;
}

@keyframes ripple {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.contact-intro {
  max-width: 580px;
}


/* 8. Blog posts
   ========================================================================== */

.prose {
  max-width: 720px;
  color: var(--text-light);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prose h2,
.prose h3 {
  margin-top: 2.25rem;
  color: #ffffff;
  font-weight: 700;
}

.prose a {
  color: var(--neon-green);
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--neon-green);
  font-family: "Fira Code", monospace;
  font-size: 0.9em;
}

.prose pre {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
}

.prose pre code {
  padding: 0;
  background: none;
  color: var(--text-light);
}

.prose blockquote {
  padding-left: 1rem;
  border-left: 2px solid var(--neon-green);
  color: var(--text-muted);
}


/* 9. Reduced motion: show everything still
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .typing-effect {
    width: auto;
    animation: none;
    border-right-color: transparent;
  }

  .reveal,
  .timeline-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .page-icon-pulse,
  .page-icon-flow,
  .terminal-card--pulse,
  .signal-ring,
  .ag-blink,
  .ag-meter {
    animation: none;
  }
}