/* One block of rules per page section. */

/* Hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}

.hero__traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Keeps the traces quiet behind the text and fades them out at the bottom. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.62) 38%, transparent 72%),
    linear-gradient(0deg, #000 0, transparent 20%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  width: 100%;
  padding: 7rem var(--gutter) 5rem var(--content-x);
}

.hero__name {
  --node-top: 0.5em;
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-name);
  font-weight: 400;
  line-height: 1.04;
}

.hero__name-line {
  display: block;
}

/* A band of blue light crosses the name every few seconds: the text is filled
   with a gradient three times its width, and the gradient slides past. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__name-line {
    background: linear-gradient(
        105deg,
        #fff 45%,
        #a9ccff 48%,
        var(--arc) 50%,
        #a9ccff 52%,
        #fff 55%
      )
      100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sweep 5.5s 2.6s ease-in-out infinite both;
  }

  .hero__name-line + .hero__name-line {
    animation-delay: 2.8s;
  }
}

@keyframes sweep {
  0% {
    background-position: 100% 0;
  }

  34%,
  100% {
    background-position: 0 0;
  }
}

.hero__role {
  margin-top: 1.5rem;
  color: var(--arc);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
}

.hero__tagline {
  max-width: 34ch;
  margin-top: 1rem;
  font-size: var(--text-lead);
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Spec sheet: the person described the way a system would be. */
.spec {
  display: grid;
  gap: 1.125rem;
  padding: 1.25rem;
}

/* Round photo in its natural colours, inside a ring with two arcs of light
   turning slowly around it. */
.spec__photo {
  position: relative;
  width: 8rem;
  height: 8rem;
  margin: 0.375rem;
}

.spec__photo::before {
  content: "";
  position: absolute;
  inset: -0.375rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--arc),
    transparent 28%,
    transparent 50%,
    var(--signal) 78%,
    transparent 78%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: turn 9s linear infinite;
}

.spec__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

.spec__rows {
  display: grid;
  gap: 0.625rem;
}

.spec__row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
}

.spec__row dt {
  color: var(--muted);
  font-size: var(--text-small);
}

.spec__row dd {
  font-size: 0.9375rem;
  line-height: 1.4;
}

@media (max-width: 60rem) {
  .hero::after {
    background: linear-gradient(0deg, #000 0, rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.7));
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 6rem;
  }

  .spec {
    max-width: 26rem;
  }
}

/* Sobre */
.about {
  display: grid;
  gap: 1.125rem;
  max-width: var(--measure);
}

.about p:first-child {
  color: #fff;
  font-size: var(--text-lead);
  line-height: 1.5;
}

/* Experiência: each job is a component tapped off the bus. */
.jobs {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.25rem);
}

.job {
  --node-top: 0.75rem;
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  max-width: 64rem;
}

.job__period {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.job__duration {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: var(--text-small);
}

.job .logo {
  margin-top: 0.875rem;
}

.job--current .job__duration::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--arc);
  box-shadow: 0 0 8px var(--arc);
  animation: live 2s ease-in-out infinite;
}

.job__role {
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
}

.job__company {
  margin-top: 0.25rem;
  color: var(--arc);
}

.job__place {
  color: var(--muted);
  font-size: var(--text-small);
}

.job__summary {
  max-width: var(--measure);
  margin-top: 0.875rem;
}

.job__highlights {
  display: grid;
  gap: 0.375rem;
  max-width: var(--measure);
  margin-top: 0.75rem;
}

.job__highlights li {
  position: relative;
  padding-left: 1.125rem;
}

.job__highlights li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--signal);
}

.job .tokens {
  margin-top: 1rem;
}

@media (max-width: 48rem) {
  .job {
    grid-template-columns: minmax(0, 1fr);
  }

  .job__when {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.875rem;
    align-items: baseline;
    margin-bottom: 0.625rem;
  }
}

/* Habilidades */
.skills {
  max-width: 64rem;
}

.skills__row {
  --node-top: 1.875rem;
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.skills__row:last-child {
  border-bottom: 1px solid var(--line);
}

.skills__group {
  color: #fff;
  font-weight: 500;
}

@media (max-width: 48rem) {
  .skills__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Entries: short items tapped off the bus one by one (AI tools, work projects). */
.entries {
  display: grid;
  gap: 2.25rem;
  max-width: 64rem;
}

.entries--spaced {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.entry {
  --node-top: 0.8rem;
  position: relative;
}

.entry__title {
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.entry__context {
  margin-top: 0.125rem;
  color: var(--arc);
  font-size: var(--text-small);
}

.entry__text {
  max-width: var(--measure);
  margin-top: 0.5rem;
}

.entry .tokens {
  margin-top: 0.75rem;
}

.entry--with-logo {
  --node-top: 1.625rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.entry__logo .logo {
  width: 3.25rem;
  padding: 0.625rem;
}

/* Projetos */
.repos-group {
  --node-top: 0.8rem;
  position: relative;
}

.repos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
  max-width: 72rem;
}

.repo {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  padding: 1.25rem;
  background-image: radial-gradient(
    14rem circle at var(--glow-x, 50%) var(--glow-y, -60%),
    rgba(45, 123, 255, 0.24),
    transparent 70%
  );
  color: var(--text);
  text-decoration: none;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.25s ease-out,
    border-color 0.2s;
}

.repo:hover,
.repo:focus-visible {
  border-color: var(--signal);
  color: var(--text);
}

.repo:focus-visible {
  outline-offset: -5px;
}

.repo__name {
  color: var(--arc);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.repo__text {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Formação */
.education {
  display: grid;
  gap: 1.5rem;
}

.education__course {
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.education__where {
  margin-top: 0.25rem;
  color: var(--muted);
}

/* Contato */
.contact {
  max-width: var(--measure);
}

.contact__lead {
  color: #fff;
  font-size: var(--text-lead);
  line-height: 1.5;
}

.channels {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.channels a {
  display: inline-block;
  padding: 0.375rem 0;
  overflow-wrap: anywhere;
}

/* Página não encontrada (404.html): fora do esquemático, sem barra nem bus. */
.notfound {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 1rem;
  min-height: 100svh;
  padding: 2rem var(--gutter);
}

.notfound__code {
  color: var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--text-name);
  line-height: 1;
}

.notfound__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
}

.notfound__lead {
  max-width: 40ch;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.notfound .button {
  margin-top: 1rem;
}

/* Rodapé */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding: 2rem var(--gutter) 2.5rem var(--content-x);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-small);
}