/* keep JS-controlled smoothness */
html { scroll-behavior: auto; }

/* hide horizontal scrollbar for chip row */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Active chip: use vars to avoid duplicate rules + !important */
:root {
  --chip-active-bg: #171717;
  --chip-active-fg: #fff;
}
.dark {
  --chip-active-bg: #fff;
  --chip-active-fg: #171717;
}
#catBar .chip.active {
  background-color: var(--chip-active-bg);
  color: var(--chip-active-fg);
  border-color: var(--chip-active-bg);
}
#catBar .chip.active:hover { /* hover keeps same contrast */
  background-color: var(--chip-active-bg);
  color: var(--chip-active-fg);
  border-color: var(--chip-active-bg);
}

/* Hamburger animation */
.hamburger span { transition: transform .3s ease, opacity .3s ease; }
.hamburger.active [data-line="1"] { transform: translateY(7px) rotate(45deg); }
.hamburger.active [data-line="2"] { opacity: 0; }
.hamburger.active [data-line="3"] { transform: translateY(-7px) rotate(-45deg); }

/* Theme icons
   Better: inline SVG with fill="currentColor". If you must use <img>, keep this. */
[data-theme-icon] { filter: none; }
.dark [data-theme-icon] { filter: invert(1); }

/* Defer layout/paint of off-screen sections */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 900px; }
@media (min-width:1024px){ .cv-auto { contain-intrinsic-size: 1100px; } }

/* --- Card skeletons (lightweight) --- */
/* Only animate when visible to avoid CPU burn */
@keyframes sb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card-loading .real { visibility: hidden; }
.card-loading .skeleton {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 25%,
    rgba(0,0,0,.09) 37%,
    rgba(0,0,0,.06) 63%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.1s linear infinite;
  will-change: background-position; /* compositor hint */
}
.dark .card-loading .skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.10) 37%,
    rgba(255,255,255,.06) 63%);
}
.card-loaded .skeleton { display: none; }
.card-loaded .real { visibility: visible; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hamburger span { transition: none; }
  .card-loading .skeleton { animation: none; }
}




 @media (min-width:1024px){
    .hdr-nav a,
    .hdr-nav .hdr-dd-btn{
      font-weight: 550;
      font-size: .975rem;
      color: rgba(81,79,79,.90);
      transition: color .15s ease;
    }
    .hdr-nav a:hover,
    .hdr-nav .hdr-dd-btn:hover{
      color: rgba(81,79,79,1);
    }

    /* Dark mode */
    html.dark .hdr-nav a,
    html.dark .hdr-nav .hdr-dd-btn{
      color: rgba(244,244,245,.90);
    }
    html.dark .hdr-nav a:hover,
    html.dark .hdr-nav .hdr-dd-btn:hover{
      color:#fff;
    }
  }