/* ============================================================
   Ishrafil Khan — Black & White theme (Tailwind + custom layer)
   Only rules that Tailwind utilities can't easily express live here.
   ============================================================ */

html { scroll-behavior: smooth; }
/* Prevent sideways scroll without breaking position:sticky (clip != scroll container). */
html, body { max-width: 100%; overflow-x: clip; }
img, iframe, video, canvas, pre, table { max-width: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #ffffff;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }

/* Monochrome imagery — keeps the whole site strictly black & white.
   Project & profile images are desaturated; on hover they lift slightly. */
.bw-img { filter: grayscale(100%) contrast(1.02); transition: filter .4s ease, transform .4s ease; }
.group:hover .bw-img { filter: grayscale(100%) contrast(1.08) brightness(1.03); }

/* Hero: cursor-following monochrome glow + subtle dotted texture. */
#hero-glow {
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 32%),
              rgba(10, 10, 10, 0.07), transparent 60%);
  transition: background 0.12s ease-out;
  z-index: 0;
}

/* Infinite marquee track (duplicate the content inside for a seamless loop). */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Animated underline that loops on the hero keyword. */
@keyframes drawline { 0%,100% { transform: scaleX(0); } 45%,75% { transform: scaleX(1); } }
.loop-underline { position: relative; }
.loop-underline::after {
  content: ""; position: absolute; left: 0; bottom: -.08em; height: .09em; width: 100%;
  background: #0a0a0a; transform-origin: left; transform: scaleX(0);
  animation: drawline 6s ease-in-out infinite;
}

/* Looping scroll-cue dot. */
@keyframes scrolldot { 0% { top: 6px; opacity: 0; } 40% { opacity: 1; } 80% { top: 22px; opacity: 0; } 100% { opacity: 0; } }
.scroll-cue { position: relative; width: 22px; height: 36px; border: 2px solid #0a0a0a; border-radius: 12px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 50%; background: #0a0a0a; animation: scrolldot 1.8s ease-in-out infinite; }

/* Reduced-motion: respect user preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Code Playground — category filter buttons. */
.cat-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  white-space: nowrap; padding: .5rem .85rem; border-radius: 10px; border: 1px solid #e6eaf2;
  background: #fff; color: #5b6779; font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s; }
.cat-btn:hover { border-color: #0a0a0a; color: #0a0a0a; }
.cat-btn .n { font-size: .72rem; color: #9aa6c4; }
.cat-active { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.cat-active:hover { color: #fff; }
.cat-active .n { color: rgba(255,255,255,.65); }
@media (min-width: 1024px) { .cat-btn { width: 100%; } }

/* Code Playground — code block + copy button feedback. */
.code-pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre; tab-size: 2; max-height: 460px; }
.code-pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; }
.copy-btn.copied { background: #16a34a; border-color: #16a34a; color: #fff; }

/* Skill proficiency bars — fill animates when scrolled into view (.in added by JS). */
.skillbar { height: 8px; border-radius: 999px; background: #e4e4e7; overflow: hidden; }
.skillbar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: #0a0a0a;
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.skillbar.in > i { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .skillbar > i { transition: none; width: var(--w); } }

/* Blog article typography (the post body is trusted HTML). */
.post-body { color: #3f3f46; font-size: 1.075rem; line-height: 1.8; }
.post-body > p { margin: 0 0 1.25rem; }
.post-body h2 { font-family: 'Poppins', sans-serif; color: #0a0a0a; font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 2.25rem 0 .9rem; }
.post-body h3 { font-family: 'Poppins', sans-serif; color: #0a0a0a; font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.post-body ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.post-body ol { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: decimal; }
.post-body li { margin: 0 0 .5rem; }
.post-body li::marker { color: #0a0a0a; }
.post-body strong { color: #0a0a0a; font-weight: 600; }
.post-body a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid #0a0a0a; color: #52525b; font-style: italic; }
.post-body code { background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 6px; padding: .1rem .4rem; font-size: .9em; }

/* Minimal monochrome scrollbar. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f4f4f5; }
::-webkit-scrollbar-thumb { background: #c4c4c8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #0a0a0a; }
::selection { background: #0a0a0a; color: #fff; }