/* ==========================================================================
   Omit Hasan — Portfolio
   Bootstrap 5.3 theme layer. Loaded AFTER bootstrap.min.css.
   Strategy: map the original design tokens onto Bootstrap's CSS variables so
   native components (navbar, buttons, cards, badges) inherit the theme, then
   add a thin layer of custom utilities for the parts Bootstrap has no primitive
   for (grid backdrop, terminal, timeline, scroll reveal).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --bg: #05070c;
  --bg2: #080c14;
  --surf: rgba(255, 255, 255, .035);
  --surf2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .17);
  --fg: #eef2f8;
  --fg2: #9aa6b8;
  --fg3: #5e6a7c;
  --acc: oklch(74% .13 195);
  --acc2: oklch(64% .13 208);
  --accsoft: oklch(74% .13 195 / .13);
  --on-acc: #04070c;
  --shadow: 0 24px 60px -26px rgba(0, 0, 0, .85);
}

[data-bs-theme="light"] {
  --bg: #f6f7f9;
  --bg2: #eceff4;
  --surf: rgba(10, 20, 35, .025);
  --surf2: rgba(10, 20, 35, .05);
  --line: rgba(10, 20, 35, .1);
  --line2: rgba(10, 20, 35, .2);
  --fg: #0a0f18;
  --fg2: #4b5666;
  --fg3: #818b9b;
  --acc: oklch(53% .12 200);
  --acc2: oklch(46% .12 210);
  --accsoft: oklch(53% .12 200 / .09);
  --on-acc: #ffffff;
  --shadow: 0 20px 50px -26px rgba(10, 20, 35, .2);
}

/* Bootstrap variable bridge — everything Bootstrap draws now uses our palette */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-emphasis-color: var(--fg);
  --bs-secondary-color: var(--fg2);
  --bs-tertiary-color: var(--fg3);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-primary: var(--acc);
  --bs-link-color: var(--acc);
  --bs-link-hover-color: var(--fg);
  --bs-body-font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-heading-color: var(--fg);
  --bs-border-radius: .6875rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

::selection {
  background: var(--accsoft);
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Type utilities
   -------------------------------------------------------------------------- */
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.text-fg    { color: var(--fg) !important; }
.text-fg-2  { color: var(--fg2) !important; }
.text-fg-3  { color: var(--fg3) !important; }
.text-acc   { color: var(--acc) !important; }

.bg-surface   { background: var(--bg2) !important; }
.bg-surface-2 { background: var(--surf) !important; }

.border-line  { border-color: var(--line) !important; }
.border-line-2{ border-color: var(--line2) !important; }

/* Eyebrow label above every section heading */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .719rem;
  letter-spacing: .18em;
  color: var(--acc);
  text-transform: uppercase;
}

.eyebrow-muted {
  color: var(--fg3);
}

/* Fluid display type — clamp() replaces Bootstrap's fixed display sizes */
.h-display {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
}

.h-page {
  font-size: clamp(2rem, 4.4vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 600;
}

.h-section {
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 600;
}

.lead-2 {
  font-size: clamp(1rem, 1.3vw, 1.156rem);
  line-height: 1.7;
  color: var(--fg2);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container-oh {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .container-oh { padding-inline: 2rem; }
}

.section {
  padding-block: clamp(4.5rem, 8vw, 7.25rem);
}

.section-sm {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.section-bordered {
  border-bottom: 1px solid var(--line);
}

/* Decorative backdrops — pointer-events off so they never eat clicks */
.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 480px at 78% 8%, var(--accsoft), transparent 70%);
}

.glow-start  { background: radial-gradient(800px 400px at 15% 0%, var(--accsoft), transparent 70%); }
.glow-end    { background: radial-gradient(760px 380px at 80% 0%, var(--accsoft), transparent 70%); }
.glow-bottom { background: radial-gradient(800px 420px at 50% 120%, var(--accsoft), transparent 70%); }
.glow-corner { background: radial-gradient(700px 400px at 20% 100%, var(--accsoft), transparent 70%); }

.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar-oh {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  --bs-navbar-padding-y: 0;
  --bs-navbar-toggler-border-color: var(--line);
  --bs-navbar-toggler-focus-width: .15rem;
}

.navbar-oh > .container-oh {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: 7px;
  background: var(--accsoft);
  color: var(--acc);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .688rem;
  font-weight: 500;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--fg);
  font-size: .906rem;
  font-weight: 600;
  letter-spacing: .14em;
  margin-right: 0;
}

.navbar-brand:hover { color: var(--fg); }

.navbar-oh .nav-link {
  --bs-nav-link-color: var(--fg2);
  --bs-nav-link-hover-color: var(--fg);
  font-size: .875rem;
  padding: .563rem .813rem;
  border-radius: 9px;
  transition: color .2s, background-color .2s;
}

.navbar-oh .nav-link:hover,
.navbar-oh .nav-link:focus-visible {
  background: var(--surf);
}

.navbar-oh .nav-link.active {
  color: var(--fg);
  font-weight: 500;
}

.navbar-toggler {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surf);
  color: var(--fg);
  font-size: .938rem;
  line-height: 1;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surf);
  color: var(--fg2);
  cursor: pointer;
  font-size: .938rem;
  transition: color .2s, border-color .2s;
}

.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--line2);
}

/* Icon swap driven purely by the theme attribute — no JS class juggling */
[data-bs-theme="dark"]  .theme-toggle .icon-moon,
[data-bs-theme="light"] .theme-toggle .icon-sun { display: none; }

@media (max-width: 991.98px) {
  .navbar-oh .navbar-collapse {
    border-top: 1px solid var(--line);
    background: var(--bg);
    margin-inline: -1.5rem;
    padding: .875rem 1.5rem 1.375rem;
  }
  .navbar-oh .nav-link { font-size: 1rem; padding: .813rem .5rem; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .906rem;
  --bs-btn-padding-y: .875rem;
  --bs-btn-padding-x: 1.375rem;
  --bs-btn-border-radius: .6875rem;
  transition: filter .2s, color .2s, border-color .2s, background-color .2s, transform .2s;
}

.btn-acc {
  --bs-btn-color: var(--on-acc);
  --bs-btn-bg: var(--acc);
  --bs-btn-border-color: var(--acc);
  --bs-btn-hover-color: var(--on-acc);
  --bs-btn-hover-bg: var(--acc);
  --bs-btn-hover-border-color: var(--acc);
  --bs-btn-active-bg: var(--acc2);
  --bs-btn-active-border-color: var(--acc2);
  --bs-btn-active-color: var(--on-acc);
}

.btn-acc:hover { filter: brightness(1.12); }

.btn-ghost {
  --bs-btn-color: var(--fg);
  --bs-btn-bg: var(--surf);
  --bs-btn-border-color: var(--line2);
  --bs-btn-hover-color: var(--acc);
  --bs-btn-hover-bg: var(--surf);
  --bs-btn-hover-border-color: var(--acc);
  --bs-btn-active-color: var(--acc);
  --bs-btn-active-bg: var(--surf2);
  --bs-btn-active-border-color: var(--acc);
}

/* Inverted CTA used in the navbar */
.btn-contrast {
  --bs-btn-color: var(--bg);
  --bs-btn-bg: var(--fg);
  --bs-btn-border-color: var(--fg);
  --bs-btn-hover-color: var(--on-acc);
  --bs-btn-hover-bg: var(--acc);
  --bs-btn-hover-border-color: var(--acc);
  --bs-btn-active-color: var(--on-acc);
  --bs-btn-active-bg: var(--acc2);
  --bs-btn-active-border-color: var(--acc2);
  --bs-btn-font-size: .844rem;
  --bs-btn-padding-y: .688rem;
  --bs-btn-padding-x: 1.063rem;
  --bs-btn-border-radius: .625rem;
  white-space: nowrap;
}

.btn-link-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .875rem;
  color: var(--fg2);
  padding: .875rem .375rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-link-mono:hover { color: var(--fg); }

/* Filter pills on the projects page */
.btn-filter {
  --bs-btn-font-size: .813rem;
  --bs-btn-padding-y: .563rem;
  --bs-btn-padding-x: .875rem;
  --bs-btn-border-radius: .5625rem;
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--fg2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--acc);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
}

.btn-filter.is-active {
  --bs-btn-color: var(--acc);
  --bs-btn-bg: var(--accsoft);
  --bs-btn-border-color: var(--acc);
  color: var(--acc);
  background: var(--accsoft);
  border-color: var(--acc);
}

/* --------------------------------------------------------------------------
   7. Surfaces & cards
   -------------------------------------------------------------------------- */
.card-oh {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg2);
  height: 100%;
  transition: border-color .25s, transform .25s;
}

.card-lift:hover {
  border-color: var(--acc);
  transform: translateY(-4px);
}

.panel {
  border: 1px solid var(--line2);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--bg2) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .563rem;
  border: 1px solid var(--line2);
  background: var(--surf);
  border-radius: 999px;
  padding: .438rem .875rem;
  font-size: .781rem;
  color: var(--fg2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
}

/* Chip / tag */
.chip {
  display: inline-block;
  font-size: .844rem;
  color: var(--fg2);
  border: 1px solid var(--line);
  background: var(--surf);
  padding: .438rem .75rem;
  border-radius: .5rem;
  transition: color .2s, border-color .2s;
}

.chip:hover {
  color: var(--acc);
  border-color: var(--acc);
}

.chip-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .719rem;
  padding: .375rem .688rem;
  border-radius: .4375rem;
}

.chip-static:hover {
  color: var(--fg2);
  border-color: var(--line);
}

/* Service grid — 1px gaps painted by the parent background */
.grid-hairline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
}

.grid-hairline > * {
  background: var(--bg);
  transition: background-color .25s;
}

.grid-hairline > *:hover { background: var(--bg2); }

.icon-tile {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--accsoft);
  color: var(--acc);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .875rem;
}

/* Stat strip */
.stat-cell {
  padding: 2.375rem .5rem 2.5rem;
  border-right: 1px solid var(--line);
}

.stat-cell:last-child { border-right: 0; }

@media (max-width: 767.98px) {
  .stat-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-cell:last-child { border-bottom: 0; }
}

.stat-value {
  display: block;
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--fg);
}

.stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .719rem;
  letter-spacing: .15em;
  color: var(--fg3);
}

/* Project thumbnail placeholder */
.thumb {
  position: relative;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px);
}

.thumb-16x10 { aspect-ratio: 16 / 10; }
.thumb-16x9  { aspect-ratio: 16 / 9; }

.thumb-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .719rem;
  letter-spacing: .13em;
  color: var(--fg3);
}

.thumb-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .688rem;
  letter-spacing: .14em;
  color: var(--acc);
  background: var(--accsoft);
  border: 1px solid var(--line2);
  padding: .375rem .688rem;
  border-radius: .4375rem;
}

/* AI tool rows */
.row-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: .8125rem;
  padding: 1rem 1.125rem;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, transform .25s;
}

.row-item:hover {
  border-color: var(--acc);
  transform: translateX(4px);
}

.pull-quote {
  font-size: 1.188rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg);
  border-left: 2px solid var(--acc);
  padding-left: 1.125rem;
}

/* Numbered approach steps */
.step {
  position: relative;
  padding-top: 1.625rem;
  border-top: 1px solid var(--line2);
}

.step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc);
}

/* Experience timeline */
.timeline {
  border-left: 1px solid var(--line);
}

.timeline-item {
  position: relative;
  padding: 0 0 2.625rem 2.125rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -5.5px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg3);
  border: 2px solid var(--bg);
}

.timeline-item.is-current::before { background: var(--acc); }

/* Key/value rows in the profile card */
.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .813rem 0;
  border-top: 1px solid var(--line);
}

.kv-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .688rem;
  letter-spacing: .13em;
  color: var(--fg3);
}

.kv-val {
  font-size: .875rem;
  color: var(--fg);
  text-align: right;
}

/* Contact channel cards */
.channel {
  display: block;
  color: var(--fg);
  padding: 1.5rem 1.625rem;
  transition: border-color .25s, transform .25s;
}

.channel:hover {
  color: var(--fg);
  border-color: var(--acc);
  transform: translateY(-3px);
}

.channel-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .656rem;
  letter-spacing: .16em;
  color: var(--fg3);
  margin-bottom: .438rem;
}

.channel-value {
  display: block;
  font-size: 1.188rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: .438rem;
}

.rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   8. Terminal / code window
   -------------------------------------------------------------------------- */
.window {
  border: 1px solid var(--line2);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--bg2) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem .938rem;
  border-bottom: 1px solid var(--line);
}

.window-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line2);
}

.window-file {
  margin-left: .5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .719rem;
  color: var(--fg3);
}

.window-code {
  margin: 0;
  padding: 1.25rem 1.125rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .781rem;
  line-height: 1.85;
  color: var(--fg2);
  overflow-x: auto;
}

.window-code .tok-kw { color: var(--fg3); }
.window-code .tok-fn { color: var(--acc); }

.terminal {
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  padding: .875rem 1.125rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .75rem;
  min-height: 78px;
}

.terminal-line {
  line-height: 1.8;
  white-space: pre-wrap;
}

.caret {
  animation: ohblink 1s step-end infinite;
}

/* Floating badges around the hero window */
.float-card {
  position: absolute;
  border: 1px solid var(--line2);
  border-radius: .875rem;
  background: color-mix(in oklab, var(--bg2) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: .875rem 1.125rem;
  animation: ohfloat 7s ease-in-out infinite;
}

.float-card--br { right: -14px; top: 100%; margin-top: 14px; }
.float-card--tl { left: -22px; bottom: 100%; margin-bottom: 14px; animation-duration: 8s; animation-delay: .8s; }

.float-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .656rem;
  letter-spacing: .14em;
  color: var(--fg3);
}

.float-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
}

@media (max-width: 575.98px) {
  .float-card { position: static; margin: .75rem 0 0; animation: none; }
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */
@keyframes ohblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ohrise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ohfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

[data-rise] { opacity: 0; }
[data-rise].is-visible { animation: ohrise .7s cubic-bezier(.2, .7, .2, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise] { opacity: 1; animation: none; }
  .float-card, .caret { animation: none; }
  .card-lift:hover, .channel:hover, .row-item:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.footer-oh {
  border-top: 1px solid var(--line);
  background: var(--bg2);
  padding: 4.375rem 0 2.5rem;
}

.footer-heading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .688rem;
  letter-spacing: .16em;
  color: var(--fg3);
}

.footer-link {
  font-size: .906rem;
  color: var(--fg2);
}

.footer-link:hover { color: var(--fg); }

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}