/* ============================================
   DudeSoft - The Software Abides
   Retro bowling alley meets hacker terminal
   ============================================ */

/* --- Self-hosted Fonts --- */
@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/righteous-400.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600.woff2) format('woff2');
}

/* --- Custom Properties --- */
:root {
  --bg-deep: #1a1410;
  --bg-surface: #2a2118;
  --brand-tan: #c4a265;
  --brand-light: #d4b87a;
  --brown-mid: #6b5234;
  --brown-dim: #3d2e1e;
  --circuit-green: #4ade80;
  --circuit-glow: rgba(74, 222, 128, 0.2);
  --circuit-glow-strong: rgba(74, 222, 128, 0.35);
  --text-cream: #f5e6c8;
  --text-bright: #faf3e6;
  --strike-red: #ef4444;
  --font-display: 'Righteous', cursive;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Base --- */
body {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--text-cream);
  background-color: var(--bg-deep);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  color: var(--circuit-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

em {
  font-style: italic;
  color: var(--brand-light);
}

/* --- Site Header --- */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--brown-dim);
  background:
    radial-gradient(ellipse at 30% 50%, var(--circuit-glow) 0%, transparent 50%),
    var(--bg-deep);
  animation: header-fade-in 0.6s ease-out both;
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='100' fill='none' stroke='%234ade80' stroke-width='1.5'%3E%3Cpath d='M0 50h40l10-10h30l10 10h20v-20h15l10 10h25l5-5h40'/%3E%3Cpath d='M0 30h20l5 5h35l10-10h50l5 5h30'/%3E%3Cpath d='M0 70h60l10 10h20l10-10h40l5 5h60'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%234ade80'/%3E%3Ccircle cx='130' cy='30' r='2.5' fill='%234ade80'/%3E%3Ccircle cx='95' cy='70' r='2' fill='%234ade80'/%3E%3Ccircle cx='210' cy='50' r='3' fill='%234ade80'/%3E%3Ccircle cx='180' cy='30' r='2' fill='%234ade80'/%3E%3Ccircle cx='260' cy='70' r='2.5' fill='%234ade80'/%3E%3Cpath d='M200 20h30l10 10h25l5-5h40l10 10h30'/%3E%3Cpath d='M220 80h40l5-5h30l10 10h50'/%3E%3Ccircle cx='330' cy='20' r='2' fill='%234ade80'/%3E%3Ccircle cx='370' cy='80' r='3' fill='%234ade80'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 400px 100%;
  pointer-events: none;
}

.logo-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 15px var(--circuit-glow),
    0 0 40px var(--circuit-glow);
  animation: glow-pulse 3s ease-in-out infinite;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--brand-tan);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  color: var(--circuit-green);
  font-weight: 500;
}

.tagline::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: var(--circuit-green);
  margin-left: 2px;
}

/* --- Section Titles --- */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--brand-tan);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brown-mid), transparent);
  margin: 0.75rem auto 0;
}

/* --- Projects Section --- */
.projects {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* --- Platform Filter --- */
.filter-radio {
  display: none;
}

.filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-tab {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  border: 1px solid var(--brown-mid);
  color: var(--brown-mid);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.filter-tab:hover {
  color: var(--brand-light);
  border-color: var(--brand-light);
}

/* Active tab highlighting */
#filter-all:checked ~ .filter-bar [for="filter-all"],
#filter-ios:checked ~ .filter-bar [for="filter-ios"],
#filter-android:checked ~ .filter-bar [for="filter-android"],
#filter-web:checked ~ .filter-bar [for="filter-web"],
#filter-cli:checked ~ .filter-bar [for="filter-cli"] {
  color: var(--circuit-green);
  border-color: var(--circuit-green);
  box-shadow: 0 0 8px var(--circuit-glow);
}

/* Hidden card state */
#filter-ios:checked ~ .projects-grid .project-card,
#filter-android:checked ~ .projects-grid .project-card,
#filter-web:checked ~ .projects-grid .project-card,
#filter-cli:checked ~ .projects-grid .project-card {
  display: none;
}

/* Visible card state */
#filter-ios:checked ~ .projects-grid .card-ios,
#filter-android:checked ~ .projects-grid .card-android,
#filter-web:checked ~ .projects-grid .card-web,
#filter-cli:checked ~ .projects-grid .card-cli {
  display: block;
  animation: card-fade-in 0.4s ease-out both;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
}

/* --- Project Cards --- */
.project-card {
  background: var(--bg-surface);
  border: 1px solid var(--brown-dim);
  border-top: 3px solid var(--circuit-green);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.project-card:hover {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--circuit-glow);
  border-color: var(--brown-mid);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.card-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.card-icon-text {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--circuit-green);
  background: var(--bg-deep);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  border: 1px solid var(--brown-dim);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--brand-light);
  line-height: 1.2;
}

.card-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  border: 1px solid;
  line-height: 1.4;
}

.badge-ios {
  color: var(--brand-light);
  border-color: var(--brand-light);
}

.badge-web {
  color: var(--circuit-green);
  border-color: var(--circuit-green);
}

.badge-cli {
  color: var(--circuit-green);
  border-color: var(--circuit-green);
}

.badge-inactive {
  color: var(--strike-red);
  border-color: var(--strike-red);
}

.badge-prototype {
  color: var(--brand-tan);
  border-color: var(--brand-tan);
}

.card-description {
  font-size: 0.9rem;
  color: var(--text-cream);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* --- Quote Cycling --- */
.quote-cycle {
  position: relative;
  min-height: 3em;
  margin: 0 0 1rem;
}

.quote-cycle .card-quote {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  animation: quote-fade 24s infinite;
}

.quote-cycle .card-quote:nth-child(1) { animation-delay: 0s; }
.quote-cycle .card-quote:nth-child(2) { animation-delay: 8s; }
.quote-cycle .card-quote:nth-child(3) { animation-delay: 16s; }

.card-quote {
  font-size: 0.85rem;
  color: var(--brand-tan);
  font-style: italic;
  border-left: 2px solid var(--brown-mid);
  padding-left: 0.75rem;
  margin: 0;
  line-height: 1.5;
}

.card-quote cite {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--brown-mid);
}

.card-links {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.card-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--circuit-green);
  display: inline-block;
  margin-top: auto;
  transition: color 0.2s ease, transform 0.2s ease;
}

.card-link:hover {
  color: var(--brand-light);
  transform: translateX(3px);
}

/* --- About Section --- */
.about {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  border-top: 1px solid var(--brown-dim);
}

.about-content {
  border-left: 2px solid var(--circuit-green);
  padding-left: 1.5rem;
  box-shadow: -4px 0 15px -5px var(--circuit-glow);
}

.about-content p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-content p:last-child {
  margin-bottom: 0;
  color: var(--brand-tan);
  font-weight: 500;
}

.badge-android {
  color: var(--brand-light);
  border-color: var(--brand-light);
}

.card-android {
  grid-column: 1 / -1;
}

/* Hide Android card on All tab */
#filter-all:checked ~ .projects-grid .card-android {
  display: none;
}

/* --- Title Link (about page header) --- */
.title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.title-link:hover {
  color: var(--brand-light);
}

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--brown-dim);
}

.footer p {
  font-size: 0.85rem;
  color: var(--brown-mid);
  line-height: 1.6;
}

.footer-link {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--brand-tan);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--circuit-green);
}

.copyright {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* --- Animations --- */
@keyframes header-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* 3 quotes, 24s total cycle, 8s per quote.
   Each quote: fade in ~1s, hold ~5.5s, fade out ~1s = 8s window.
   Percentages: 8s/24s = 33.3% per quote slot. */
@keyframes quote-fade {
  0%, 3%   { opacity: 0; }
  6%, 28%  { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px var(--circuit-glow),
      0 0 40px var(--circuit-glow);
  }
  50% {
    box-shadow:
      0 0 25px var(--circuit-glow-strong),
      0 0 60px var(--circuit-glow);
  }
}

/* --- Responsive --- */
@media (max-width: 740px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .site-header {
    padding: 1rem 1rem;
  }

  .logo-img {
    width: 48px;
    height: 48px;
  }

  .projects {
    padding: 2rem 1rem;
  }

  .about {
    padding: 2rem 1rem 3rem;
  }

  .about-content {
    padding-left: 1rem;
  }
}

@media (min-width: 741px) and (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .logo-img {
    box-shadow:
      0 0 15px var(--circuit-glow),
      0 0 40px var(--circuit-glow);
  }
}