/* ── Base ─────────────────────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif; cursor: none; overflow-x: hidden; }
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .022; pointer-events: none; z-index: 0;
}

/* ── Custom cursor ────────────────────────────────────────────────── */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: #F97316; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid #F97316; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  opacity: .5; transition: width .25s, height .25s, opacity .25s;
}
.cursor-ring.hovering { width: 54px; height: 54px; opacity: .2; }
.cursor.hovering      { width: 6px;  height: 6px; }

/* ── Nav ──────────────────────────────────────────────────────────── */
nav { transform: translateY(-100%); animation: navIn .8s .2s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes navIn { to { transform: translateY(0); } }

/* ── Hero reveal ──────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); animation: revealUp .7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* ── Scroll fade-up ───────────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.fade-up.show { opacity: 1; transform: none; }

/* ── Ticker ───────────────────────────────────────────────────────── */
.ticker-track { display: flex; white-space: nowrap; animation: tickScroll 28s linear infinite; }
@keyframes tickScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Badge spin ───────────────────────────────────────────────────── */
.badge-spin { animation: badgeSpin 20s linear infinite; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }

/* ── Skill bar ────────────────────────────────────────────────────── */
.sbar-inner { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.22,1,.36,1); }

/* ── Photo pill shape ─────────────────────────────────────────────── */
.photo-pill { border-radius: 180px 180px 20px 20px; }

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-thumb { background: #F97316; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Scroll progress bar ──────────────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: #F97316; z-index: 9999; width: 0%;
  transition: width .08s linear;
}

/* ── Active nav link (scroll spy) ────────────────────────────────── */
.nav-link { transition: color .2s; }
.nav-link.active { color: #F97316 !important; }

/* ── Fix 17: Keyboard focus styles ───────────────────────────────── */
/* cursor:none hides the caret so we restore outlines for keyboard nav */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: 3px;
  border-radius: 4px;
}
/* hide custom cursor on touch/keyboard-only devices */
@media (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
  body { cursor: auto; }
}

/* ── Back to top button ───────────────────────────────────────────── */
#backToTop {
  position: fixed; bottom: 28px; right: 28px;
  width: 44px; height: 44px; background: #F97316;
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; cursor: none; z-index: 9990;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s, transform .35s, background .2s;
  pointer-events: none; border: none;
}
#backToTop.show  { opacity: 1; transform: none; pointer-events: auto; }
#backToTop:hover { background: #FB923C; }

/* ── Availability pulse dot ───────────────────────────────────────── */
@keyframes availPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0; }
}
.avail-ring { animation: availPulse 2s ease-in-out infinite; }

/* ── Contact form ─────────────────────────────────────────────────── */
.cf-input {
  width: 100%; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 12px 14px; color: rgba(255,255,255,.85);
  font-family: 'Inter', sans-serif; font-size: 13px;
  outline: none; transition: border-color .2s;
}
.cf-input::placeholder { color: rgba(255,255,255,.3); }
.cf-input:focus         { border-color: #F97316; }

#formSuccess {
  display: none; padding: 12px 16px; border-radius: 8px;
  background: rgba(26,84,56,.35); border: 1px solid rgba(26,84,56,.6);
  color: #6ee7b7; font-size: 13px; font-family: 'Space Mono', monospace;
}

/* ── Fix 13: Page loader ──────────────────────────────────────────── */
#pageLoader {
  position: fixed; inset: 0; z-index: 99999;
  background: #FAF8F3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  transition: opacity .5s ease, visibility .5s ease;
}
html.dark #pageLoader { background: #0C0C0C; }
#pageLoader.done { opacity: 0; visibility: hidden; }
#loaderBar {
  width: 0%; height: 2px; background: #F97316;
  border-radius: 2px; transition: width .1s linear;
}

/* ── Tech chip (skills logo grid) ────────────────────────────────── */
.tech-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.09);
  background: #fff;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  color: #3A3830;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  cursor: default;
}
.dark .tech-chip {
  background: #1C1C1C; border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
}
.tech-chip:hover {
  transform: translateY(-2px);
  border-color: #F97316;
  box-shadow: 0 4px 16px rgba(249,115,22,.12);
}
.tech-chip img { width: 18px; height: 18px; object-fit: contain; }

/* ── Org logo card (certifications) ──────────────────────────────── */
.org-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px 20px; border-radius: 20px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  text-align: center;
}
.dark .org-card { background: #1C1C1C; border-color: rgba(255,255,255,.07); }
.org-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); border-color: #F97316; }
.dark .org-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.org-logo-wrap {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -.03em; flex-shrink: 0;
}
.org-logo-wrap img { width: 42px; height: 42px; object-fit: contain; }

/* ── Fix 10: Quote carousel ───────────────────────────────────────── */
.quote-slide { display: none; }
.quote-slide.active {
  display: block;
  animation: qFadeIn .5s ease forwards;
}
@keyframes qFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }