/* Site-wide custom CSS additions to complement Tailwind. */
:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01","cv11"; }

/* Selection */
::selection { background: #BAE6FD; color: #0C4A6E; }

/* Prose overrides for blog content */
.prose-brand {
  color: #334155;
  line-height: 1.75;
  font-size: 1.0625rem;
}
.prose-brand h1, .prose-brand h2, .prose-brand h3, .prose-brand h4 {
  color: #0F172A; font-weight: 700; letter-spacing: -0.01em; margin-top: 1.75em; margin-bottom: .6em;
}
.prose-brand h2 { font-size: 1.75rem; }
.prose-brand h3 { font-size: 1.375rem; }
.prose-brand p  { margin: 1em 0; }
.prose-brand a  { color: #0284C7; text-decoration: underline; text-underline-offset: 3px; }
.prose-brand a:hover { color: #0369A1; }
.prose-brand ul, .prose-brand ol { padding-left: 1.4em; margin: 1em 0; }
.prose-brand li { margin: .35em 0; }
.prose-brand blockquote {
  border-left: 3px solid #0EA5E9; padding: .25em 1em; color: #475569;
  background: #F0F9FF; border-radius: .5em; margin: 1.25em 0;
}
.prose-brand code {
  background: #F1F5F9; color: #0F172A; padding: .15em .4em; border-radius: .35em;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .92em;
}
.prose-brand pre {
  background: #0F172A; color: #E2E8F0; padding: 1em 1.25em; border-radius: .75em;
  overflow-x: auto; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .9em; line-height: 1.65;
}
.prose-brand img { border-radius: 1rem; margin: 1.5em 0; }

/* Fine grid + subtle background pattern (used on hero) */
.hero-grid {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(14,165,233,0.08), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(14,165,233,0.06), transparent 55%);
}
.dotted-bg {
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Card hover ring */
.card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(2,132,199,.25); border-color: #BAE6FD; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Marquee for skills */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }

/* Timeline */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, #E2E8F0, #BAE6FD, #E2E8F0);
}
.timeline-item { position: relative; padding-left: 48px; }
.timeline-dot {
  position: absolute; left: 8px; top: 8px; width: 16px; height: 16px;
  border-radius: 999px; background: #FFFFFF; border: 3px solid #0284C7;
  box-shadow: 0 0 0 4px #E0F2FE;
}

/* Accessible focus rings */
:focus-visible { outline: none; box-shadow: 0 0 0 3px #7DD3FC; border-radius: 6px; }

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }