/* ============================================
   HOME — page-specific styles
   Loaded after responsive.css so these keep winning ties,
   exactly as they did when inlined in the page head.
   ============================================ */

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

.hero-content {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.hero-text {
  flex: 1;
}

.hero-greeting {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-accent);
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.hero-name {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Once JS splits the name into per-char spans, the gradient has to move onto
   the spans: `background` isn't inherited, so they'd otherwise render as
   transparent text with nothing to clip. Clipping on the now textless parent
   also leaks a stray block of gradient, so it's reset here. */
.hero-name.is-split {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.hero-name.is-split .split-char {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.hero-title .accent {
  color: var(--color-accent);
  -webkit-text-fill-color: var(--color-accent);
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 520px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Hero Visual */
.hero-visual {
  flex: 0 0 380px;
  display: flex;
  justify-content: center;
}

/* 320px plus the -28px outer ring is 376px wide, which overflowed a 320px
   phone by ~88px. body has overflow-x:hidden, so this showed up as a
   silently clipped ring rather than a scrollbar. The cap leaves room for
   the rings and the container padding. */
.hero-avatar-wrapper {
  position: relative;
  width: min(320px, calc(100vw - 104px));
  aspect-ratio: 1;
  height: auto;
}

.hero-avatar-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-dim);
  animation: float 6s ease-in-out infinite;
}

.hero-avatar-ring-2 {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid var(--color-accent-dim);
  animation: floatReverse 8s ease-in-out infinite;
}

.hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

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

/* — About Section — */
/* Columns and gap come from responsive.css, which steps this up to two
   columns at 1024px. Setting them here would override that at every width,
   since this block is parsed after the stylesheet links. */
.about-grid {
  display: grid;
}

.about-text h2 {
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 16px;
}

.skills-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 32px;
  margin-bottom: 16px;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tag {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid var(--color-accent-dim);
  border-radius: var(--radius-full);
  transition: all var(--transition);
}

.skill-tag:hover {
  background: var(--color-accent-glow);
  box-shadow: 0 0 16px var(--color-accent-dim);
  transform: translateY(-2px);
}

.about-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  transition: all var(--transition);
}

.stat-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 500;
}

.github-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 8px;
  transition: gap var(--transition);
}

.github-link:hover {
  gap: 12px;
  color: var(--color-accent);
}