/* =========================
   ABOUT
========================= */

.about {
  position: relative;
  overflow: hidden;

  padding-block: var(--section-y);
}

/* decorative glows */
.glowA,
.glowB {
  position: absolute;

  border-radius: 50%;

  filter: blur(96px);

  pointer-events: none;
}

.glowA {
  top: 18%;
  left: -180px;

  width: 420px;
  height: 420px;

  background: rgba(255, 255, 255, 0.05);
}

.glowB {
  right: -220px;
  bottom: 8%;

  width: 520px;
  height: 520px;

  background: rgba(255, 255, 255, 0.04);
}

/* big decorative ghost number behind the section */
.ghost {
  position: absolute;
  top: 40px;
  right: 4vw;

  z-index: 0;

  font-size: clamp(160px, 24vw, 460px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);

  pointer-events: none;

  user-select: none;
}

/* =========================
   CONTENT
========================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);

  color: var(--color-muted);

  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.rule {
  width: var(--space-lg);
  height: 1px;

  background: var(--color-muted);
}

.title {
  margin-top: var(--space-md);

  max-width: 24em;

  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.titleAccent {
  color: var(--color-faint);
}

.text {
  margin-top: var(--space-md);

  max-width: var(--text-measure);

  color: var(--color-muted);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* =========================
   STATS
========================= */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);

  margin-block: var(--space-xl) 0;
  padding-top: var(--space-md);

  border-top: 1px solid var(--color-line);
}

.statLabel {
  color: var(--color-faint);

  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.statValue {
  margin-top: var(--space-xs);

  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1;
}

.statValueAccent {
  color: var(--color-faint);
}

/* =========================
   SKILLS
========================= */

.skills {
  margin-top: var(--space-2xl);
}

.skillsTitle {
  color: var(--color-faint);

  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.skillList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);

  margin: 0;
  padding: var(--space-md) 0 0;

  list-style: none;
}

.skillName {
  color: var(--color-text);

  font-size: var(--fs-body);
  font-weight: 600;
}

.skillBar {
  height: 3px;

  margin-top: var(--space-xs);

  border-radius: 100px;

  background: var(--color-line);

  overflow: hidden;
}

.skillFill {
  display: block;

  height: 100%;

  border-radius: 100px;

  background: var(--color-text);

  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .ghost {
    top: 24px;
    right: -30px;
  }
}

@media (max-width: 640px) {
  .skillList {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .stats {
    gap: var(--space-lg);
  }
}