/* ========================================================= */
/*  GLOBAL PALETTE / RESET                                    */
/* ========================================================= */
:root{
  --bg:#0d1117;
  --fg:#e6edf3;
  --accent:#58a6ff;
  --card-bg:#161b22;
  --radius:12px;
  --max-width:1240px;
  font-family:"Inter",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.6;}
a{color:var(--accent);text-decoration:none;}
img{max-width:100%;display:block}

/* --------------------------------------------------------- */
/*  HEADER / FOOTER                                           */
/* --------------------------------------------------------- */
header,footer{background:var(--card-bg);border-bottom:1px solid #30363d;}
header{position:sticky;top:0;z-index:100;}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem 1.5rem;}

header .container{display:flex;justify-content:space-between;align-items:center;}
header nav a{margin-left:1rem;font-weight:500}
header nav a:hover{opacity:.85}

.btn{
  display:inline-block;background:var(--accent);color:#000;
  padding:.45rem 1rem;border-radius:6px;font-weight:600;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}

/* slim footer */
footer{
  padding:2rem 0;text-align:center;font-size:.85rem;
  color:#8b949e;background:transparent;border:none;
}

/* ========================================================= */
/*  HERO BANNER + TYPEWRITER                                  */
/* ========================================================= */
.hero{position:relative;padding:6rem 1.5rem;text-align:center;overflow:hidden}
.hero h2{font-size:2.8rem;margin-bottom:1rem}
.hero:before{
  content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;
  background:
    radial-gradient(at 15% 25%,var(--accent) 0%,transparent 60%),
    radial-gradient(at 85% 75%,#ff66d7 0%,transparent 60%);
  filter:blur(140px);animation:blobMove 18s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes blobMove{0%{transform:translate(0,0) scale(1);}100%{transform:translate(10%,5%) scale(1.1);}}

/* type-writer line */
.tagline{
  overflow:hidden;border-right:.15em solid var(--accent);
  white-space:nowrap;font-size:1.25rem;max-width:32ch;margin:0 auto; padding-right:.5em;
  animation:typing 4.5s steps(35,end) .6s both,blink .75s step-end infinite;
}
@keyframes typing{from{max-width:0}to{max-width:32ch}}
@keyframes blink{50%{border-color:transparent}}

/* ========================================================= */
/*  TAG PILLS                                                 */
/* ========================================================= */
.tags{display:flex;flex-wrap:wrap;gap:.4rem; margin:.6rem 0 1.2rem; font-size:.8rem}
.tags span{background:#30363d;padding:.25rem .6rem;border-radius:6px;letter-spacing:.15px}

/* ========================================================= */
/*  PROJECTS PAGE                                             */
/* ========================================================= */
.projects-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
}
@media(min-width:1024px){.projects-grid{grid-template-columns:repeat(3,1fr);}}

/* card (scoped) */
.projects-grid .card{
  background:#0e1117;border:1px solid #30363d;border-radius:10px;
  padding:1.4rem 1.2rem 4.6rem;          /* room for legend & button */
  display:flex;flex-direction:column;gap:.9rem;
  overflow:visible;transform-origin:center top;
  transition:transform .25s ease,box-shadow .25s ease;
}
.projects-grid .card:hover{
  transform:scale(1.08);box-shadow:0 0 14px var(--accent);z-index:5;
}

/* ---------- GitHub-style Language widget ----------------- */
.lang-widget {margin-top:1.6rem;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.lang-title  {font-weight:600;font-size:1rem;margin:0 0 .5rem}
.lang-bar    {position:relative;height:8px;width:100%;background:#2f363d;border-radius:6px;overflow:hidden}
.lang-slice  {position:absolute;top:0;height:100%}

.lang-legend{
  margin:.6rem 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,max-content)); /* wider cells */
  gap:.35rem 1.25rem;
  font-size:.87rem;
  line-height:1.35;

}
.lang-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:.35rem}


/* ========================================================= */
/*  HOME-PAGE “INFINITE” GALLERY                             */
/* ========================================================= */
/* --- Horizontal image gallery --- */
.gallery-row{
  display:flex;
  overflow-x:auto;
  gap:1rem;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
}
.gallery-row img{flex:0 0 auto;width:280px;height:180px;object-fit:cover;border-radius:12px;scroll-snap-align:center;transition:transform .3s ease-out;}
.gallery-row img:hover{
  transform:scale(1.05);
}

/* About photo */
.about-photo{width:260px;height:260px;object-fit:cover;flex-shrink:0;margin-bottom:1rem;box-shadow:0 0 0 4px #30363d;}

.gallery-row.auto-scroll{
  animation: scrollGallery 120s linear infinite;
}
@keyframes scrollGallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.gallery-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.scroll-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: scrollLoop 160s linear infinite;
}

.scroll-track img {
  width: 280px;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  scroll-snap-align: center;
  transition: transform .3s ease-out;
}

.scroll-track img:hover {
  transform: scale(1.05);
}

@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- gallery v12 start --- */
.gallery-wrapper{
  overflow:hidden;
  width:100%;
}
.scroll-track{
  display:flex;
  gap:0;
  animation:scrollLoop 80s linear infinite;
}
.scroll-track img{
  width:280px;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  flex-shrink:0;
  margin-right:1rem;
  transition:transform .3s ease-out;
}
.scroll-track img:last-child{margin-right:0;}
.scroll-track img:hover{transform:scale(1.05);}
@keyframes scrollLoop{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
/* --- gallery v12 end --- */

.about-item{margin-bottom:1rem;}
.about-item h3{font-size:1.1rem;margin:.4rem 0;color:var(--accent);}


/* ========================================================= */
/*  CONTACT PAGE                                              */
/* ========================================================= */
.contact-hero{text-align:center;margin:4rem auto 3rem}
.contact-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700}

.contact-form{max-width:700px;margin:0 auto 6rem;display:flex;flex-direction:column;gap:1.6rem}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-weight:500}
.contact-form input,.contact-form textarea{
  padding:.9rem 1rem;border:1px solid #30363d;border-radius:6px;
  background:#0e1117;color:#c9d1d9;font-size:1rem;resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent)}
.contact-form .btn{width:100%;text-align:center;font-size:1.05rem}

.projects-grid .card a.btn{
  margin-top:1.4rem;          /* or 2rem, tweak as you wish */
  align-self:flex-start;
}

@media (max-width: 920px) {
  .about-grid {
    /* keep it a single column, but reset explicit row defs */
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;       /* allow as many rows as you need */
    grid-auto-rows: auto;
  }

  /* force every child back into the single column flow */
  .about-grid > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch;
    align-self: stretch;
    margin-bottom: 1.5rem;          /* add some breathing room */
  }

  /* center & size the portrait nicely */
  .portrait-frame {
    width: 200px;
    height: 200px;
    margin: 0 auto 1.5rem !important;
  }
}