/* Home page: projects, experience and about. */

/* Projects */

.project + .project {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.project h3 {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Demo links next to the GitOps title. They wrap as a group, so on a phone the
   second link never starts with the indent of the first. */
.demo-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.demo-link {
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* Block-level on a phone, so the links always start on their own line. */
  .demo-links {
    display: flex;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.pipeline li {
  position: relative;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.pipeline li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.3rem;
  transform: translateY(-50%);
  color: var(--muted);
}

/* reveal.js hides the steps until the pipeline scrolls into view, then they
   appear one by one, each arrow after its box. Without JS it is static. */
.pipeline.is-waiting li,
.pipeline.is-waiting li::after {
  opacity: 0;
}

.pipeline.is-in li {
  animation: step-in 0.35s ease-out calc(var(--i) * 0.3s) both;
}

.pipeline.is-in li::after {
  animation: fade-in 0.2s ease-out calc(var(--i) * 0.3s + 0.2s) both;
}

@keyframes step-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline.is-in li,
  .pipeline.is-in li::after {
    animation: none;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.repos {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.repos a,
.repos .repo-private {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--fg);
}

.repos span {
  color: var(--muted);
}

/* Experience */

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline > li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.timeline .when {
  padding-top: 0.2rem;
}

.contributions {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.contributions li + li {
  margin-top: 0.35rem;
}

.timeline .tags {
  margin-top: 0.85rem;
}

/* About */

.bio {
  max-width: 40rem;
  margin: 0;
  font-size: 1.1rem;
}

.credentials {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 40rem) {
  .timeline > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  /* Stacked, so the arrows never point at the end of a wrapped line. */
  .pipeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .pipeline li:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: auto;
    bottom: -1.45rem;
    left: 1rem;
    transform: none;
  }
}