/* ==========================================================================
   components.css — nav bar, hero, bento grid, widgets, music player
   ========================================================================== */

/* --- Site navigation: full top bar now, not the first line of a card --- */
.site-nav{
  width:auto;
  max-width: var(--content-width);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.4rem;
  margin: 0 auto 2.5rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.site-nav a{ color:var(--text-dim); display:inline-block; transition: color .15s ease, transform .1s ease; }
.site-nav a:hover{ color:var(--link); text-decoration:none; transform: translateY(-1px); }
.site-nav a.active{ color:var(--heading); }
.site-nav a:active{ transform: scale(.94); filter: drop-shadow(0 0 5px var(--link)); }
.site-nav a:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Page content wrapper (this is what assets/js/router.js swaps) --- */
#page-content{
  width: var(--content-width);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* --- Hero --- */
.hero{
  width:100%;
  text-align:center;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.avatar{
  width: clamp(84px, 10vw, 128px);
  height: clamp(84px, 10vw, 128px);
  border-radius:50%;
  border:1px solid var(--border);
  object-fit:cover;
  margin-bottom:1.2rem;
}
.hero h1{
  font-size: clamp(2.1rem, 4.2vw + 1rem, 3.6rem);
  margin-bottom:.6rem;
  line-height:1.1;
}
.hero-subtitle{
  color:var(--text-dim);
  font-size: clamp(.95rem, .6vw + .8rem, 1.15rem);
  max-width:38rem;
  margin: 0 0 1.6rem;
}
.hero-cta{
  position:relative;
  display:inline-block;
  overflow:hidden;
  padding:.75rem 1.8rem;
  border-radius:999px;
  border:1px solid var(--link);
  color:var(--heading);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: color .15s ease, transform .1s ease, box-shadow .25s ease, background .25s ease;
}
.hero-cta:hover{
  text-decoration:none;
  background: color-mix(in srgb, var(--link) 16%, transparent);
  box-shadow: 0 0 26px -4px var(--link);
}
/* Shimmer: a soft diagonal light band that sweeps across on hover —
   plays once per hover via CSS transition on background-position,
   nothing looping/auto-playing. */
.hero-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 150% 0;
  transition: background-position .7s ease;
  pointer-events:none;
}
.hero-cta:hover::after{ background-position: -50% 0; }
@media (prefers-reduced-motion: reduce){
  .hero-cta::after{ transition:none; }
}

/* --- Simple page header, for subpages that aren't the bento homepage --- */
.page-header{
  width:100%;
  text-align:center;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.5rem, 4vw, 3rem);
  margin-bottom:1.5rem;
}
.page-header h1{ font-size: clamp(1.8rem, 2.6vw + 1rem, 2.6rem); margin-bottom:.4rem; }
.page-header .hero-subtitle{ margin:0 auto; }

/* --- Name: animated RGB / rainbow effect (homepage hero only) --- */
.name-rgb{
  background: linear-gradient(90deg,
    #ff3b3b, #ff9d3b, #f4ff3b, #3bff6a, #3bd4ff, #7a3bff, #ff3bd4, #ff3b3b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rgb-shift 8s linear infinite;
}
@keyframes rgb-shift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 300% 50%; }
}

/* --- Bento grid (homepage only) --- */
.bento-grid{
  width:100%;
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "skills   connect"
    "activity projects";
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.bento-skills{ grid-area: skills; }
.bento-connect{ grid-area: connect; }
.bento-activity{ grid-area: activity; }
.bento-projects{ grid-area: projects; display:flex; flex-direction:column; justify-content:center; }

@media (max-width: 760px){
  .bento-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "skills"
      "connect"
      "activity"
      "projects";
  }
}

/* --- Generic content card, for subpages (About prose, empty states) --- */
.content-card{
  width:100%;
}

/* --- Skills --- */
.skills-list{
  list-style:none;
  padding-left:0;
}
.skills-list li{ margin-bottom:.85rem; }
.skills-list li:last-child{ margin-bottom:0; }
.skills-list b{
  display:block;
  color:var(--heading);
  font-size:.95rem;
  margin-bottom:.15rem;
}
.skills-list span{
  color:var(--text);
  font-size:.9rem;
}

/* --- Projects teaser (bento card + subpage empty state) --- */
.projects-teaser-body p{ margin:0; }

/* --- Recent Activity: GitHub commits (assets/js/github-activity.js) --- */
.commit-list{
  list-style:none;
  padding-left:0;
}
.commit-list li{
  padding:.6rem 0;
  border-bottom:1px solid var(--border);
}
.commit-list li:last-child{ border-bottom:none; padding-bottom:0; }
.commit-message{
  display:block;
  font-size:.9rem;
  margin-bottom:.2rem;
}
.commit-meta{
  display:block;
  font-size:.78rem;
  color:var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Connect / social links --- */
.social-links{
  list-style:none;
  padding-left:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.social-links li{ margin:0; }
.social-links a{
  display:inline-block;
  padding:.35rem .85rem;
  border:1px solid var(--border);
  border-radius:20px;
  font-size:.88rem;
  transition: color .15s ease, transform .1s ease, border-color .2s ease;
}
.social-links a:hover{
  border-color:var(--link);
  text-decoration:none;
  transform: translateY(-2px);
}
.social-links a:active{
  transform: scale(.94);
  border-color: var(--link);
  filter: drop-shadow(0 0 6px var(--link));
}
.social-links a:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* --- Entry screen --- */
.enter-text{
  font-family:var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.88rem;
  color: var(--text-dim);
  animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

/* --- Floating music player --- */
.music-widget, .mute-btn{
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  color: var(--text);
  user-select:none;
  padding:0;
  transition: color .15s ease, transform .1s ease;
}
.music-widget:hover, .mute-btn:hover{ color: var(--link); }
.music-widget:active, .mute-btn:active{ transform: scale(.85); filter: drop-shadow(0 0 5px var(--link)); }
.music-widget:focus-visible, .mute-btn:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.music-widget.playing{ animation: pulse-music 1.6s ease-in-out infinite; }
@keyframes pulse-music{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

.volume-slider{
  width: clamp(56px, 14vw, 80px);
  accent-color: var(--link);
  cursor:pointer;
}

/* --- Accessibility: respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce){
  .enter-text{ animation:none; }
  .music-widget.playing{ animation:none; }
  .name-rgb{
    animation:none;
    background-position: 0% 50%;
  }
}