/* Remove imported fonts to restore the original UI font stack */


/* ====== Base ====== */
/*
 * Override the default colour palette with values inspired by the Portfolio‑Website.
 * These variables control background, surface, text and accent colours used
 * throughout the Anubhav site.  By remapping them here, the existing
 * component styles (cards, sections, buttons, etc.) automatically adopt
 * the new look and feel without rewriting all rules.
 */
:root{
  /* Adopt a pure black backdrop throughout the site.  Switching the
     background variables to #000 removes the residual deep‑blue
     tint from earlier versions and more closely matches the
     reference screenshot provided by the user.  Other surface colours
     are darkened slightly to sit comfortably against the black
     background. */
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #050505;
  --text: #e6e9f2;
  --muted: #b4bdd6;
  --accent: #7c5cff;
  --accent-2: #37c9e1;
  --success: #27d980;
  --danger: #ff6b6b;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --container: 1100px;
  /* Restore the original header height so the navigation sits in its
     previous centred position. */
  --header-h: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  /* Revert to the system UI font stack used in the original Anubhav design.  We
     intentionally avoid importing external fonts here so that the site keeps
     its lightweight, performant feel and retains the familiar look of the
     previous deep‑blue version. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background: var(--bg);
}

.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

h1,h2,h3{
  line-height:1.2;
  margin:0 0 .6rem;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
/*
 * Increase the base size of all h2 headings.  Clamping between
 * 2rem and 2.8rem with a responsive interpolation based on the
 * viewport width ensures the headings remain prominent on both
 * mobile and desktop screens.  The margin below is reduced here
 * because spacing is handled by the section-specific rule below.
 */
h2{ font-size: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: 0.5rem; }
h3{ font-size: 1.125rem; }

/*
 * Centre section headings
 *
 * Each primary section heading is an <h2> element placed directly inside
 * the section’s .container wrapper.  To improve visual hierarchy and
 * emulate the reference portfolio, we centre the headings and draw a
 * short accent bar beneath each one.  The margins are auto on left
 * and right to ensure the heading itself remains centred within the
 * container regardless of its width.  The ::after pseudo‑element
 * provides the coloured underline and is centred via auto margin.
 */
.section .container > h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  /* Increase the spacing below the heading to clearly separate it from
     the section body content.  This larger margin creates breathing
     room and echoes the generous vertical rhythm of the reference design. */
  margin-bottom:2.5rem;
  position:relative;
}
.section .container > h2::after{
  content:"";
  display:block;
  /* Enlarge the underline so that it scales proportionally with the
     enlarged heading.  The width and height provide a bold but
     unobtrusive accent below each heading. */
  width:80px;
  height:4px;
  background:var(--accent-2);
  /* Increase the vertical gap between the heading text and the accent bar.
     A larger top margin pushes the underline further away from the text
     and creates a more balanced visual separation. */
  margin:1rem auto 0;
  border-radius:3px;
}

/* Center headings within each section
   Align all level‑two section headings to the centre of their container. */
.section > .container > h2{
  text-align: center;
}

p{ margin: 0 0 1rem; }
.muted{ color: var(--muted); }
.small{ font-size:.9rem; }
.accent{ color: var(--accent); }

.section{
  padding: clamp(64px, 10vw, 112px) 0;
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.section.alt{
  background: transparent;
}

.btn{
  display:inline-block;
  padding:.8rem 1.1rem;
  border-radius: 999px;
  text-decoration:none;
  color: var(--text);
  border:1px dashed transparent;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.chip{
  display:inline-block;
  padding:.4rem .8rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  margin-right:.4rem;
  font-size:.9rem;
}

/* ====== Header (inline until small; clean drawer at <=780px) ====== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1300;
  height: var(--header-h);
  display: flex;
  /* Align the contents vertically centered so the navigation sits
     comfortably within the header, matching the previous design. */
  align-items: center;
  /* centre the entire header contents horizontally.  On larger screens the
     navigation will sit in the middle of the viewport. */
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  /* Remove the additional top padding so the header height is evenly
     distributed above and below the navigation links. */
  padding-top: 0;
}

.header-inner{
  display: flex;
  align-items: center;
  /* centre the navigation links horizontally now that the brand and socials
     have been removed from the header */
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;    /* keep everything on one line */
  /* Stretch the inner container across the full width so the nav can be
     perfectly centered.  We also set position:relative so the mobile
     toggle button can be absolutely positioned on the right. */
  width: 100%;
  position: relative;
}

.brand{
  font-weight: 800; letter-spacing:.3px; text-decoration:none; color: var(--text);
  font-size: 1.25rem; white-space: nowrap; flex: 0 0 auto; min-width: 0;
}
.brand span{ color: var(--accent-2); }

/* nav grows, never wraps */
.site-nav{
  /* Allow the nav to size itself to its contents so that margins can
     centre it within the header.  We override the flex rules here to
     prevent it from stretching across all available space. */
  flex: 0 1 auto;
  min-width: 0;
  /* Centre the navigation horizontally by auto margins */
  margin-left: auto;
  margin-right: auto;
}
.site-nav ul{
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  /* centre the navigation links across the header */
  justify-content: center;
}
.site-nav a{
  color: var(--muted);
  text-decoration: none;
  padding: .5rem .6rem;
  border-radius: 10px;
  position: relative;
}

/* Draw an underline on hover/active similar to the reference design.  The
   pseudo‑element starts with width 0 and animates to full width when the
   link is hovered or active. */
.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-2);
  transition: width 0.3s ease;
}
.site-nav a.active::after,
.site-nav a:hover::after {
  width: 100%;
}

.site-nav a.active,
.site-nav a:hover {
  color: var(--accent-2);
}

/* socials at far right */
.socials{ display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.socials a{
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  text-decoration: none;
}

/* hamburger hidden on desktop */
/* The hamburger button used on small screens.  Hidden by default on
   larger viewports via media queries. */
.nav-toggle{ display: none; background: transparent; border: 0; padding: .5rem; border-radius: 10px; }
.nav-toggle span{ display:block; width:24px; height:2px; margin:5px 0; background:#d6daf1; transition:.2s; }

/* Position the hamburger/toggle button on the far right of the header and
   vertically centre it relative to the header’s height.  This allows the
   navigation links to sit perfectly centred even when the toggle is present. */
.nav-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Animate the toggle lines into a cross when the menu is active.  The
   middle bar fades out and the top/bottom bars rotate into an X. */
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Animate the hamburger into a cross when active */
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* progressively tighten to keep inline */
@media (max-width: 1200px){
  .brand{ font-size: 1.15rem; }
  .site-nav ul{ gap: .9rem; }
  .site-nav a{ padding: .45rem .55rem; }
  .socials a{ width: 34px; height: 34px; }
}
@media (max-width: 1024px){
  .brand{ font-size: 1.06rem; }
  .site-nav ul{ gap: .7rem; }
  .site-nav a{ padding: .4rem .5rem; font-size: .96rem; }
  .socials a{ width: 32px; height: 32px; }
}

/* switch to drawer ONLY at small widths */
@media (max-width: 780px){
  /* On small screens hide the navigation completely.  The header remains
     empty to avoid visual clutter and there is no hamburger toggle. */
  .nav-toggle{ display: none; }
  .site-nav{ display: none !important; }
  .site-header{
    height: var(--header-h);
    /* Keep the header sticky but otherwise empty */
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .header-inner{
    width: 100%;
    justify-content: center;
  }
}

/* ====== Hero ====== */
.hero-buttons {
  margin-bottom: 2rem;
}
.hero{ padding-top: 120px; }
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:center; }
.hero-text .lead{ color: var(--muted); font-size: clamp(1rem, 2vw, 1.1rem); }
.hero-socials{ margin-top:.5rem; }

.avatar{
  width:220px; height:220px; border-radius:50%;
  display:grid; place-items:center;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2));
  filter: saturate(.9);
  box-shadow: var(--shadow);
  margin-inline:auto;
}
.avatar span{ font-weight:800; font-size:2.2rem; color:#0a0f20; }

/* Blinking cursor */
.cursor{ display:inline-block; margin-left:.15rem; width:1ch; animation: blink .9s steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }

/* ====== Timeline ====== */
.timeline{ list-style:none; padding:0; margin:1rem 0 0; border-left:2px dashed rgba(255,255,255,.15); }
.timeline-item{ position:relative; padding-left:1rem; margin-bottom:1.2rem; }
.timeline-dot{
  position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.timeline-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 1rem 1rem;
}

/* ====== Cards & Grid ====== */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }
.card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 1rem 1rem;
  box-shadow: var(--shadow);
}
.grid{ display:grid; gap: 1rem; }
.projects-grid{
  /* Use responsive auto-fit to create slim, long cards similar to the reference site.
     Each card will be at least 280px wide and stretch to fill available space. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/*
 * Custom hero styles
 *
 * The original hero section in this template used a two‑column grid with an
 * avatar graphic.  To align more closely with the reference Portfolio‑Website
 * design supplied by the user, the hero is now a vertically and horizontally
 * centred stack of text and links.  The styles below override the default
 * `.hero` rules and introduce new helper classes used in index.html.  They
 * leverage existing CSS variables for colours and spacing so the changes
 * blend seamlessly with the rest of the site.
 */

.hero {
  /* Fill the viewport minus the header height.  Align content towards the top
     rather than dead‑centre so the title sits a little higher on the page. */
  padding-top: calc(var(--header-h) + 40px);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* Container to constrain hero content width */
.hero-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Large hero heading */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

/* Gradient highlight on the name */
.highlight {
  background: linear-gradient(45deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle below the name */
.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--muted);
  margin-bottom: 2rem;
}

/* Container for the action links */
.hero-links {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Style individual chips/buttons */
.hero-links .chip {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hover state for chips */
.hero-links .chip:hover {
  background: linear-gradient(45deg, var(--accent), var(--accent-2));
  color: #0a0f20;
}

/* Network background canvas.  This sits behind all other content and draws
   a particle network using JavaScript. */
#networkCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

/* Call‑to‑action buttons below the hero subtitle */
.cta-buttons {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.cta-button {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #0a0f20;
  background: linear-gradient(45deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
}

/* Social icons under the CTA buttons */
.hero-icons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.hero-icons a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-icons a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
}
 .project{
  /* Base card styles borrowed from the other portfolio.  A translucent surface,
     subtle border and generous rounding create a clean glass effect. */
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  /* Smooth transitions for elevation and motion */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  /* A gentle drop shadow separates the card from the dark backdrop */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  /* Interior padding ensures breathing space around the content */
  padding: 1.25rem;
  /* Keep a minimum height so cards feel balanced */
  min-height: 460px;
}
.project img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: #0b0f20;
  /* Soften the edges of the preview like the reference site */
  border-radius: 0.5rem;
  /* Separate the image from the body content */
  margin-bottom: 1rem;
}
.project-body{
  /* Card padding now handles horizontal margins; we only need to reset
     internal padding to zero so the text aligns with the card’s content area. */
  padding: 0;
}
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  /* Tighter margins around tags, similar to the reference work cards */
  margin: 0.2rem 0 0.15rem;
}
.tags span{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.25rem .5rem; border-radius:999px; font-size:.85rem; }
.project-links{ display:flex; gap:.6rem; }
.project-links a{ color:var(--text); text-decoration:none; }

/* Elevation and motion on hover.  When hovering over a project card, lift it slightly
   and increase the drop shadow to create depth, similar to the reference site’s
   recent works section. */
.project:hover{
  transform: translateY(-0.5rem);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Project overlay */
.project-overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: rgba(11,16,32,.65);
  opacity:0; transition: opacity .2s ease;
  border-radius: var(--radius);
}
.project:hover .project-overlay{ opacity:1; }
.overlay-inner{ display:flex; gap:.8rem; }
.overlay-github{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  text-decoration:none;
}
.overlay-github img{ width:22px; height:22px; filter: invert(100%); }

/* ====== Skill list ====== */
.skill-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.skill-list li{ padding:.5rem .8rem; border-radius:10px; border:1px dashed rgba(255,255,255,.2); background: rgba(255,255,255,.03); }

/* ====== Footer ====== */
.site-footer{ padding: 2rem 0; border-top:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.footer-inner{ display:grid; gap:.6rem; justify-items:center; text-align:center; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.6rem; }
.footer-nav a{ color:var(--muted); text-decoration:none; padding:.3rem .5rem; border-radius:10px; }
.footer-nav a:hover{ color: var(--accent-2); }
.footer-socials a{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.15); margin:.1rem; }

/* ====== Project actions (Demo and code links) ====== */
.project-actions{
  display: flex;
  gap: 1.2rem;
  margin-top: 1rem;
}
.project-action{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s ease;
}
/* Demo link uses the secondary accent color */
.project-action.demo-link{
  color: var(--accent-2);
  /* On demo links, reverse the flex order so text appears before the icon (to match reference design) */
  flex-direction: row-reverse;
  /* Hide demo links entirely; only the code link should be visible */
  display: none;
}
/* Code link uses the primary accent color */
.project-action.code-link{
  /* Use the secondary accent (teal) for code links to match the
     GitHub link styling shown in the reference. */
  color: var(--accent-2);
  /* For code links, preserve the natural flex order so the icon appears
     before the text, just like in the reference design. */
  flex-direction: row;
}
.project-action svg{
  /* Slightly larger icons for actions */
  width: 22px;
  height: 22px;
  /* Inherit color from the parent to match the link color */
  display: block;
}

/* Style the GitHub icon within the code link to appear inside a circular badge */
.project-action.code-link svg{
  /* Remove the circular badge so the GitHub icon stands on its own. */
  padding: 0;
  border-radius: 0;
  border: none;
  background: none;
}
.project-action span{
  line-height: 1;
}
.project-action:hover{
  text-decoration: underline;
}


/* ====== Utilities ====== */
.back-to-top{
  position: fixed; right: 16px; bottom: 18px; z-index: 1000;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(12,18,40,.7); color: var(--text);
  display:grid; place-items:center; opacity:0; pointer-events:none; transition:.2s; box-shadow: var(--shadow);
}
.back-to-top.show{ opacity:1; pointer-events:auto; }

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .projects-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px){
  /* Override the default mobile nav behaviour: completely hide the navigation
     and the hamburger toggle on small screens.  This keeps the top of the
     viewport clean when viewed on mobile devices. */
  .site-nav{ display: none !important; }
  .nav-toggle{ display: none !important; }
}
@media (max-width: 640px){
  .projects-grid{ grid-template-columns: 1fr; }
}

/* Social icon color hover */
.socials a, .footer-socials a { color: #e6e9f2; transition: color .15s ease; }
.socials a:hover, .footer-socials a:hover { color: var(--accent-2); }
.socials a svg, .footer-socials a svg { display:block; }