/* =========================================================
   About Me ("A Little Bit About Me")
   ========================================================= */

.about {
  position: relative;
  padding-block: var(--section-space);
  background: var(--color-black);
  overflow: clip; /* keeps the decorative circles from causing sideways scroll */
}

/* Subtle rose circles peeking in at the left and right edges, as in the reference */
.about::before,
.about::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.about::before {
  left: -9rem;
  bottom: -2rem;
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle at 70% 35%, rgba(160, 82, 89, 0.38), rgba(160, 82, 89, 0.08) 70%);
}

.about::after {
  right: -7rem;
  top: 38%;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 137, 141, 0.16);
  background: radial-gradient(circle at 30% 40%, rgba(160, 82, 89, 0.22), transparent 70%);
}

.about .container {
  position: relative;
  z-index: 1;
}

/* ---------- Heading & intro ---------- */
.about__header {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.about__lead {
  max-width: 62rem; /* spans the content width, about two lines on desktop */
}

.about__more {
  margin-top: 1rem;
  margin-left: -0.25rem; /* line the text up with the paragraph above */
  min-height: 44px;     /* easy to tap */
}

/* ---------- Cards ---------- */
.about__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.info-card {
  --icon-w: 24px;
  --icon-gap: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  min-height: 150px;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(255, 137, 141, 0.42);
  border-radius: 16px;
  background: var(--color-black);
  transition: border-color 0.25s ease;
}

.info-card:hover {
  border-color: rgba(255, 137, 141, 0.7);
}

/* icon + label on one line */
.info-card__top {
  display: flex;
  align-items: center;
  gap: var(--icon-gap);
}

.info-card__icon {
  flex-shrink: 0;
  width: var(--icon-w);
  height: auto;
}

.info-card__label {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

/* number and tech icons line up with the label text, not the icon */
.info-card__value,
.tech-ticker {
  margin-left: calc(var(--icon-w) + var(--icon-gap));
}

.info-card__value {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(2.75rem, 2.1rem + 2vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-rose);
}

.info-card--stack {
  min-width: 0; /* lets the ticker shrink inside the grid cell */
  gap: 0.9rem;
}

/* small pause / play button sits at the end of the label row */
.info-card__top .ticker-pause {
  margin-left: auto;
}

/* ---------- Tech stack ticker (moves right to left) ---------- */
.tech-ticker {
  --ticker-gap: 1.75rem;
  overflow: hidden;
  /* icons fade in and out at the card edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tech-ticker__track {
  display: flex;
  width: max-content;
  animation: tech-ticker 40s linear infinite; /* raise the seconds to slow it down */
}

/* hovering over the icons, or the pause button, stops it */
.tech-ticker:hover .tech-ticker__track,
.tech-ticker.is-paused .tech-ticker__track {
  animation-play-state: paused;
}

@keyframes tech-ticker {
  to { transform: translateX(-50%); } /* exactly one list width, so the loop is seamless */
}

.tech-list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--ticker-gap);
  margin: 0;
  padding: 0.25rem var(--ticker-gap) 0.25rem 0; /* trailing gap keeps spacing even at the loop point */
  list-style: none;
}

.tech-list img {
  display: block;
  width: auto;
  height: 44px;
}

/* "Reduce motion": no movement, just a wrapped row of icons */
@media (prefers-reduced-motion: reduce) {
  .tech-ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tech-ticker__track {
    width: auto;
    animation: none;
  }

  .tech-list {
    flex-wrap: wrap;
    flex-shrink: 1;
    gap: 1rem 1.25rem;
    padding-right: 0;
  }

  .tech-list--copy,
  .ticker-pause {
    display: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .about__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tech Stack spans the full row under the two stat cards */
  .info-card--stack {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .about__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .info-card {
    min-height: 0;
  }

  .about::after {
    display: none; /* keep the narrow layout clean */
  }
}