/* ==================================================================
   Custom CSS — everything else in the site is plain Tailwind
   utility classes written directly in the HTML. This file only
   holds the handful of things Tailwind can't express on its own.
================================================================== */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .radar-3d-stage { transform: none !important; }
}

body { font-family: 'Source Serif 4', serif; overflow-x: hidden; }

::selection { background: #33E6C9; color: #0B0D10; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0B0D10; }
::-webkit-scrollbar-thumb { background: #33E6C9; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #F2A65A; }

/* ---------- nav bar: cinematic entrance on load ---------- */
#siteNav { animation: navDropIn .7s cubic-bezier(.16,1,.3,1) both; }
#siteNav nav > a { animation: navFadeUp .6s cubic-bezier(.16,1,.3,1) .1s both; }
#siteNav nav > ul > li { animation: navFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
#siteNav nav > ul > li:nth-child(1) { animation-delay: .15s; }
#siteNav nav > ul > li:nth-child(2) { animation-delay: .19s; }
#siteNav nav > ul > li:nth-child(3) { animation-delay: .23s; }
#siteNav nav > ul > li:nth-child(4) { animation-delay: .27s; }
#siteNav nav > ul > li:nth-child(5) { animation-delay: .31s; }
#siteNav nav > div.hidden.md\:flex { animation: navFadeUp .6s cubic-bezier(.16,1,.3,1) .38s both; }
@keyframes navDropIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes navFadeUp { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #siteNav, #siteNav nav > a, #siteNav nav > ul > li, #siteNav nav > div.hidden.md\:flex { animation: none !important; }
}

/* ---------- nav links: underline grows in on hover, stays for active page ---------- */
.nav-link { position: relative; padding-bottom: 4px; transition: color .25s ease; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: #33E6C9;
  transition: width .3s cubic-bezier(.19,1,.22,1);
}
.nav-link:hover { color: #F3F1EA; }
html[data-theme="light"] .nav-link:hover { color: #12151A; }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #33E6C9; }
.nav-link.active::after { width: 100%; }

/* ---------- decorative blurred blob shapes used behind hero content ---------- */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.25;
  animation: floatSlow 8s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- faint background grid on hero sections ---------- */
.grid-field {
  background-image:
    linear-gradient(rgba(243,241,234,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,241,234,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
html[data-theme="light"] .grid-field {
  background-image:
    linear-gradient(rgba(18,21,26,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,21,26,0.04) 1px, transparent 1px);
}

/* ---------- scroll reveal: fade + rise into place ----------
   IMPORTANT: content must NEVER get stuck invisible — see the
   safety-net logic in js/main.js (IntersectionObserver fallback +
   a hard timeout that reveals everything regardless). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in { transition-delay: .1s; }
.reveal-delay-2.in { transition-delay: .2s; }
.reveal-delay-3.in { transition-delay: .3s; }
noscript ~ .reveal, .no-js .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- info cards (contact details, toolkit icons) ---------- */
.info-card { transition: transform .35s cubic-bezier(.19,1,.22,1), border-color .3s ease, background-color .3s ease; }
.info-card:hover { transform: translateY(-4px); border-color: #33E6C9; }

/* ---------- experience timeline rows ---------- */
.timeline-row { transition: background-color .3s ease, padding-left .3s ease; border-radius: 12px; }
.timeline-row:hover { background-color: rgba(51,230,201,0.05); padding-left: 12px; }

/* ---------- skill progress bars: start at 0 width, JS animates to data-fill ---------- */
.assay-fill { width: 0%; transition: width 1.4s cubic-bezier(.19,1,.22,1); }

/* ---------- buttons ---------- */
.btn-prime { transition: transform .35s cubic-bezier(.19,1,.22,1), background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.btn-prime:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(51,230,201,0.35); }

/* icon circles used throughout (socials, contact info) */
.icon-badge { transition: transform .3s cubic-bezier(.19,1,.22,1), background-color .3s ease, color .3s ease; }
.icon-badge:hover { transform: translateY(-3px) scale(1.05); }

/* mobile menu overlay rules live further down (full-screen version) */

/* ---------- skill preview cards (home page) — each gets its own hover accent
   via inline utility classes in the HTML, this just adds the lift + card feel ---------- */
.skill-card { transition: transform .35s cubic-bezier(.19,1,.22,1), border-color .3s ease, background-color .3s ease; cursor: pointer; }
.skill-card:hover { transform: translateY(-6px); }

/* ---------- testimonial cards ---------- */
.testimonial-card { transition: transform .35s cubic-bezier(.19,1,.22,1), border-color .3s ease; }
.testimonial-card:hover { transform: translateY(-4px); border-color: #33E6C9; }

/* ---------- photo frame (hero / about) ---------- */
.photo-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #12151A;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder {
  aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(243,241,234,0.35);
  background:
    repeating-linear-gradient(135deg, rgba(51,230,201,0.04) 0 2px, transparent 2px 24px),
    #12151A;
}

/* ---------- terminal / code block (home hero) ---------- */
.terminal { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .6s cubic-bezier(.19,1,.22,1); }
.terminal:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(0deg); }
.cursor-blink { animation: blink 1s step-end infinite; color: #33E6C9; }

/* ambient cursor glow, desktop only */
#cursorGlow { will-change: transform; }

/* ==================================================================
   V4 ADDITIONS — modern interaction layer
================================================================== */

/* page load fade-in, applies site-wide automatically */
body { animation: pageFadeIn .6s ease both; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.page-exit { animation: pageFadeOut .32s cubic-bezier(.4,0,1,1) both; }
@keyframes pageFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.99); } }
@media (prefers-reduced-motion: reduce) { body.page-exit { animation: none !important; } }

/* scroll progress bar at the very top of the viewport */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #33E6C9, #F2A65A);
  z-index: 70; transition: width .1s ease-out;
}

/* custom cursor: a small dot plus a lagging ring, desktop only */
#cursorDot, #cursorRing { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
#cursorDot { width: 6px; height: 6px; border-radius: 50%; background: #33E6C9; transform: translate(-50%,-50%); }
#cursorRing {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(51,230,201,0.5);
  transform: translate(-50%,-50%); transition: transform .15s ease-out, width .2s ease, height .2s ease, border-color .2s ease;
}
#cursorRing.grow { width: 54px; height: 54px; border-color: rgba(242,166,90,0.7); }
@media (pointer: coarse) { #cursorDot, #cursorRing { display: none; } }

/* tilt-on-hover, applied via JS to cards without needing a special class */
.tilt { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }

/* magnetic buttons — JS nudges these toward the cursor on hover */
.btn-prime { will-change: transform; }

/* back-to-top button */
#backToTop {
  position: fixed; bottom: 24px; right: 24px; z-index: 45;
  width: 48px; height: 48px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #33E6C9; color: #0B0D10; font-size: 1.1rem;
  box-shadow: 0 10px 30px -8px rgba(51,230,201,0.5);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
#backToTop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#backToTop:hover { transform: translateY(-4px); }

/* floating whatsapp button, always visible, bottom-left so it never collides with back-to-top */
.whatsapp-float {
  position: fixed; bottom: 24px; left: 24px; z-index: 45;
  width: 52px; height: 52px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #ffffff; font-size: 1.35rem;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.whatsapp-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: #25D366; opacity: .55;
  animation: wa-pulse 2.4s ease-out infinite;
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 34px -6px rgba(37,211,102,0.75); }
.whatsapp-float.is-hidden { opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; }
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float::before { animation: none; display: none; } }
@media (max-width: 480px) {
  .whatsapp-float { bottom: 16px; left: 16px; width: 48px; height: 48px; font-size: 1.2rem; }
  #backToTop { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

/* ---------- footer whatsapp CTA banner: animated gradient glow border ---------- */
.footer-cta {
  position: relative;
  background: linear-gradient(135deg, rgba(51,230,201,0.10), rgba(242,166,90,0.08));
  overflow: hidden;
}
.footer-cta::before {
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(120deg, #33E6C9, #F2A65A, #33E6C9);
  background-size: 200% 200%;
  opacity: 0.35;
  z-index: 0;
  animation: gradientShift 6s ease infinite;
  filter: blur(18px);
}
.footer-cta > * { position: relative; z-index: 1; }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}
.footer-cta .btn-prime { animation: ctaGlow 2.6s ease-out infinite; }

/* ---------- footer available-for-work badge ---------- */
.footer-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #33E6C9; display: inline-block; animation: statPulse 2.2s ease-in-out infinite; }

/* ---------- animated accent bar under page hero headings ---------- */
.accent-bar {
  width: 64px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #33E6C9, #F2A65A);
  margin-top: 16px; transform-origin: left;
  animation: barGrow 1s cubic-bezier(.16,1,.3,1) .15s both;
}
@keyframes barGrow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .accent-bar { animation: none; } }

/* ---------- fluid hero-scale headline (the one or two big statements per page) ---------- */
.hero-scale { font-size: clamp(2.75rem, 6.5vw, 6rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero-scale-sm { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; }

/* ---------- final CTA orb: continuous pulsing rings + animated icon ---------- */
.cta-orb { box-shadow: 0 10px 40px -10px rgba(51,230,201,0.55); overflow: visible; }
.cta-orb-ring {
  position: absolute; inset: 0; border-radius: 9999px;
  border: 1.5px solid rgba(51,230,201,0.65);
  animation: ctaOrbPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events: none;
}
.cta-orb-ring-2 { animation-delay: .9s; border-color: rgba(242,166,90,0.5); }
.cta-orb-ring-3 { animation-delay: 1.8s; }
@keyframes ctaOrbPulse {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.1); opacity: 0; }
}
.cta-orb-icon { animation: ctaIconFloat 2.2s ease-in-out infinite; }
@keyframes ctaIconFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}
.cta-orb-wrap:hover .cta-orb-icon { animation: ctaIconDart .5s ease-in-out; }
@keyframes ctaIconDart {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(9px, -9px); opacity: 0; }
  55% { transform: translate(-9px, 9px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-orb-ring { animation: none; display: none; }
  .cta-orb-icon { animation: none; }
}

/* mobile menu: staggered item entrance while open */
#mobileMenu ul li { opacity: 0; transform: translateX(-10px); transition: opacity .35s ease, transform .35s ease; }
#mobileMenu.open ul li { opacity: 1; transform: translateX(0); }
#mobileMenu.open ul li:nth-child(1) { transition-delay: .05s; }
#mobileMenu.open ul li:nth-child(2) { transition-delay: .1s; }
#mobileMenu.open ul li:nth-child(3) { transition-delay: .15s; }
#mobileMenu.open ul li:nth-child(4) { transition-delay: .2s; }
#mobileMenu.open ul li:nth-child(5) { transition-delay: .25s; }
#mobileMenu.open ul li:nth-child(6) { transition-delay: .3s; }
#mobileMenu.open ul li:nth-child(7) { transition-delay: .35s; }
#mobileMenu.open ul li:nth-child(8) { transition-delay: .4s; }
#mobileMenu.open ul li:nth-child(9) { transition-delay: .45s; }
#mobileMenu.open ul li:nth-child(10) { transition-delay: .5s; }

/* icon "pop" on hover, used on toolkit/skill icons */
.icon-pop { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }

/* ---------- nav icon micro-interaction: subtle wiggle + lift on hover ---------- */
.nav-link i { display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.nav-link:hover i { transform: translateY(-2px) rotate(-8deg); }

/* ---------- footer social icons: gentle continuous bob, staggered ---------- */
footer .icon-pop { animation: footerIconBob 3.4s ease-in-out infinite; }
footer .icon-pop:nth-child(2) { animation-delay: .2s; }
footer .icon-pop:nth-child(3) { animation-delay: .4s; }
footer .icon-pop:nth-child(4) { animation-delay: .6s; }
footer .icon-pop:nth-child(5) { animation-delay: .8s; }
footer .icon-pop:nth-child(6) { animation-delay: 1s; }
@keyframes footerIconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
footer .icon-pop:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { footer .icon-pop, .nav-link i { animation: none !important; } }
.icon-pop:hover { transform: scale(1.15) rotate(-4deg); }

/* animated gradient text for hero-style headline accents */
.gradient-text {
  background: linear-gradient(100deg, #33E6C9, #F2A65A, #33E6C9);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 6s linear infinite;
}
@keyframes gradientShift { to { background-position: 200% center; } }

/* marquee ticker (tech stack strip) */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marqueeMove 26s linear infinite; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* stat counters: soft pulsing ring behind the number while counting */
/* soft glow behind the whole stat block (kept separate from .stat-ring so it can't misalign with the SVG ring) */
.stat-glow { position: relative; display: inline-flex; }
.stat-glow::before {
  content: ''; position: absolute; inset: -10px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(51,230,201,0.10), transparent 70%);
  animation: statPulse 2.4s ease-in-out infinite; z-index: -1;
}
@keyframes statPulse { 0%,100% { transform: scale(0.9); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }

/* project media: real screenshot (if present) layered over a gradient
   fallback, so a missing image file never breaks the layout */
.project-media {
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

/* "more on GitHub" card: dashed border to read as "not deployed yet" */
.card-pending { border-style: dashed; }

/* timeline connecting line (experience page) */
.timeline-wrap { position: relative; }
.timeline-wrap::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, #33E6C9, #F2A65A, transparent);
}

/* form inputs: nicer focus glow for the contact form */
.form-input:focus { box-shadow: 0 0 0 3px rgba(51,230,201,0.15); }

/* small helper for form status messages */
.form-status { display: none; }
.form-status.show { display: block; animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ==================================================================
   V5 ADDITIONS — premium layer
================================================================== */

/* ---------- skip-to-content link ---------- */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: #33E6C9; color: #0B0D10; font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; font-weight: 600; padding: 12px 20px; border-radius: 8px;
  transition: top .25s ease;
}
.skip-link:focus { top: 16px; }

/* ---------- refined focus-visible everywhere ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #33E6C9; outline-offset: 3px; border-radius: 4px;
}

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 300; background: #0B0D10;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader .preloader-mark {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 2rem; color: #F3F1EA;
  display: flex; align-items: center; gap: 4px;
  animation: preloaderPulse 1s ease-in-out infinite;
}
#preloader .preloader-mark .dot { color: #33E6C9; }
@keyframes preloaderPulse { 0%,100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
#preloader .preloader-bar {
  position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%);
  width: 140px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
}
#preloader .preloader-bar span {
  display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #33E6C9, #F2A65A);
  animation: preloaderBar 1.1s ease-in-out infinite;
}
@keyframes preloaderBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- spotlight cards (radial glow following cursor) ---------- */
.skill-card, .info-card, .testimonial-card { position: relative; overflow: hidden; }
.skill-card::before, .info-card::before, .testimonial-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--x,50%) var(--y,50%), rgba(51,230,201,0.14), transparent 60%);
  transition: opacity .35s ease; z-index: 0;
}
.skill-card:hover::before, .info-card:hover::before, .testimonial-card:hover::before { opacity: 1; }
.skill-card > *, .info-card > *, .testimonial-card > * { position: relative; z-index: 1; }

/* ---------- bento grid (skills preview, home page) ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 20px;
}
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
@media (max-width: 1024px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-wide { grid-column: span 2; } }
@media (max-width: 640px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento-wide, .bento-tall { grid-column: span 1; grid-row: span 1; } }

/* ---------- command palette ---------- */
#cmdkOverlay {
  position: fixed; inset: 0; z-index: 250; background: rgba(11,13,16,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#cmdkOverlay.open { opacity: 1; pointer-events: auto; }
#cmdkBox {
  width: 92%; max-width: 560px; background: #12151A; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  transform: translateY(-10px); transition: transform .25s ease; overflow: hidden;
}
#cmdkOverlay.open #cmdkBox { transform: translateY(0); }
#cmdkInput {
  width: 100%; background: transparent; border: none; outline: none; color: #F3F1EA;
  font-family: 'Source Serif 4', serif; font-size: 1.05rem; padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#cmdkInput::placeholder { color: rgba(243,241,234,0.35); }
#cmdkList { max-height: 320px; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  cursor: pointer; color: rgba(243,241,234,0.8); font-size: 0.92rem;
}
.cmdk-item i { width: 18px; color: #33E6C9; }
.cmdk-item.active, .cmdk-item:hover { background: rgba(51,230,201,0.1); color: #F3F1EA; }
.cmdk-hint {
  display: none; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: rgba(243,241,234,0.4); border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: border-color .25s ease, color .25s ease;
}
.cmdk-hint:hover { border-color: #33E6C9; color: #33E6C9; }
@media (min-width: 1280px) { .cmdk-hint { display: flex; } }
html[data-theme="light"] .cmdk-hint { color: rgba(18,21,26,0.45); border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .cmdk-hint:hover { border-color: #1B5E42; color: #1B5E42; }

/* ---------- live local time ---------- */
#localTime {
  display: none;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: rgba(243,241,234,0.45);
  align-items: center; gap: 6px; white-space: nowrap;
}
@media (min-width: 1280px) { #localTime { display: flex; } }
#localTime .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #33E6C9; animation: statPulse 2.4s ease-in-out infinite; }
html[data-theme="light"] #localTime { color: rgba(18,21,26,0.5); }

/* ---------- stat ring (SVG progress ring behind counters, about page) ---------- */
.stat-ring {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.stat-ring-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.stat-ring-svg circle { fill: none; stroke-width: 3; }
.stat-ring-track { stroke: rgba(255,255,255,0.08); }
.stat-ring-fill { stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.19,1,.22,1); }
html[data-theme="light"] .stat-ring-track { stroke: rgba(0,0,0,0.08); }

/* ---------- radar chart (skills page) — cinematic 3D version ---------- */
.radar-3d-frame {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(ellipse at 50% 0%, rgba(51,230,201,0.07), transparent 60%), #12151A;
  padding: 2.5rem 1.5rem 2rem;
  overflow: hidden;
}
html[data-theme="light"] .radar-3d-frame {
  background: radial-gradient(ellipse at 50% 0%, rgba(51,230,201,0.10), transparent 60%), #ffffff;
  border-color: rgba(0,0,0,0.08);
}
.radar-3d-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
}
.radar-3d-wrap { perspective: 900px; }
.radar-3d-stage {
  transform-style: preserve-3d;
  transform: rotateX(26deg) rotateZ(-6deg);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.radar-3d-wrap:hover .radar-3d-stage { transform: rotateX(20deg) rotateZ(-3deg) scale(1.02); }

.radar-chart { display: block; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); max-width: 100%; height: auto; }
.radar-chart .radar-grid { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.radar-chart .radar-axis { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.radar-chart text { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: rgba(243,241,234,0.55); }
html[data-theme="light"] .radar-chart .radar-grid { stroke: rgba(0,0,0,0.08); }
html[data-theme="light"] .radar-chart .radar-axis { stroke: rgba(0,0,0,0.08); }
html[data-theme="light"] .radar-chart text { fill: rgba(18,21,26,0.55); }

/* the faint background grid drifts very slowly, like radar sweep geometry idling */
.radar-grid-group { transform-origin: 110px 110px; animation: radarDrift 50s linear infinite; }
@keyframes radarDrift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* the data polygon draws itself in on scroll, then settles with a soft glow pulse */
.radar-chart polygon.radar-fill {
  stroke-dasharray: 640; stroke-dashoffset: 640;
  transform-origin: 110px 110px; transform: scale(.85);
  opacity: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1), opacity .6s ease, transform 1.4s cubic-bezier(.34,1.56,.64,1);
}
.reveal.in .radar-chart polygon.radar-fill {
  stroke-dashoffset: 0; opacity: 1; transform: scale(1);
}
.reveal.in .radar-chart polygon.radar-fill.fill-spectro { animation: radarPulseTeal 3.2s ease-in-out 1.6s infinite; }
.reveal.in .radar-chart polygon.radar-fill.fill-assay { animation: radarPulseAmber 3.2s ease-in-out 1.6s infinite; }
@keyframes radarPulseTeal {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(51,230,201,0.35)); }
  50% { filter: drop-shadow(0 0 16px rgba(51,230,201,0.65)); }
}
@keyframes radarPulseAmber {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(242,166,90,0.35)); }
  50% { filter: drop-shadow(0 0 16px rgba(242,166,90,0.65)); }
}

/* glowing vertex nodes, each pinging outward on a slight stagger */
.radar-node { transform-origin: center; }
.radar-node-core { filter: drop-shadow(0 0 4px currentColor); }
.radar-node-ping { animation: radarPing 2.6s cubic-bezier(0,0,.2,1) infinite; transform-origin: center; opacity: 0; }
.reveal.in .radar-node-ping { opacity: 1; }
@keyframes radarPing {
  0% { transform: scale(.6); opacity: .55; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

.radar-value-label {
  opacity: 0; transform: translateY(4px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in .radar-value-label { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }


/* ---------- full-screen mobile menu ---------- */
#mobileMenu {
  position: fixed; inset: 0; z-index: 90; background: #0B0D10;
  max-height: none; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateX(100%);
  transition: opacity .4s cubic-bezier(.19,1,.22,1), transform .4s cubic-bezier(.19,1,.22,1), visibility .4s;
}
html[data-theme="light"] #mobileMenu { background: #F3F1EA; }
html[data-theme="light"] #mobileMenu ul li a { border-bottom-color: rgba(0,0,0,0.06) !important; }
#mobileMenu.open { opacity: 1; visibility: visible; transform: translateX(0); }
#mobileMenu ul { padding: 0 10%; gap: 2px; }
#mobileMenu ul li a {
  font-size: 1.15rem !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06);
}
#mobileMenuClose {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
  color: #F3F1EA; font-size: 1.2rem;
}
html[data-theme="light"] #mobileMenuClose { border-color: rgba(0,0,0,0.15); color: #12151A; }

/* ---------- confetti canvas ---------- */
#confettiCanvas { position: fixed; inset: 0; z-index: 260; pointer-events: none; }

/* ==================================================================
   V6 ADDITIONS — page transitions, theme toggle
================================================================== */

/* ---------- native cross-document page transitions ----------
   Chrome/Edge 126+ will crossfade between full page navigations
   automatically. Every other browser just ignores this and does
   a normal navigation, so it's a free upgrade with zero downside. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) { animation-duration: 0.35s; }
::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- light theme overrides ----------
   Default is dark. Adding data-theme="light" to <html> flips these.
   Special case: .bg-paper sections were designed as light "contrast
   bands" against a dark site, so in light mode they invert to become
   dark bands instead, preserving the same contrast purpose. */
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] body { background: #F3F1EA; }
html[data-theme="light"] .bg-ink { background-color: #F3F1EA !important; }
html[data-theme="light"] .bg-inkraise { background-color: #E9E6DC !important; }

html[data-theme="light"] .text-paper { color: #12151A !important; }
html[data-theme="light"] .text-paper\/25 { color: rgba(18,21,26,0.3) !important; }
html[data-theme="light"] .text-paper\/35 { color: rgba(18,21,26,0.4) !important; }
html[data-theme="light"] .text-paper\/40 { color: rgba(18,21,26,0.4) !important; }
html[data-theme="light"] .text-paper\/50 { color: rgba(18,21,26,0.5) !important; }
html[data-theme="light"] .text-paper\/55 { color: rgba(18,21,26,0.55) !important; }
html[data-theme="light"] .text-paper\/60 { color: rgba(18,21,26,0.6) !important; }
html[data-theme="light"] .text-paper\/70 { color: rgba(18,21,26,0.7) !important; }
html[data-theme="light"] .text-paper\/80 { color: rgba(18,21,26,0.8) !important; }
html[data-theme="light"] .text-paper\/90 { color: rgba(18,21,26,0.9) !important; }

html[data-theme="light"] .border-white\/0 { border-color: rgba(0,0,0,0) !important; }
html[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
html[data-theme="light"] .border-white\/15 { border-color: rgba(0,0,0,0.14) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(0,0,0,0.18) !important; }

html[data-theme="light"] .bg-black\/30 { background-color: rgba(255,255,255,0.55) !important; }
html[data-theme="light"] .bg-black\/40 { background-color: rgba(255,255,255,0.65) !important; }
html[data-theme="light"] .bg-black\/50 { background-color: rgba(255,255,255,0.7) !important; }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/20 { background-color: rgba(0,0,0,0.12) !important; }

/* the intentional light "contrast bands" flip to dark in light mode */
html[data-theme="light"] .bg-paper { background-color: #12151A !important; color: #F3F1EA !important; }
html[data-theme="light"] .bg-paper.text-ink { color: #F3F1EA !important; }
html[data-theme="light"] .bg-paper .text-ink\/40 { color: rgba(243,241,234,0.4) !important; }

/* nav / preloader / cursor bits that use raw hex rather than utility classes */
html[data-theme="light"] #preloader { background: #F3F1EA; }
html[data-theme="light"] #preloader .preloader-mark { color: #12151A; }
html[data-theme="light"] .grain { opacity: 0.02; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #F3F1EA; }

/* form inputs on the contact page use bg-black/30 already covered above,
   plus explicit text color for readability */
html[data-theme="light"] .form-input { color: #12151A !important; }

/* ---------- phone field: country-code selector + number input ---------- */
.phone-input-group { transition: border-color .25s ease, box-shadow .25s ease; }
.phone-input-group:focus-within { border-color: #33E6C9 !important; }

.country-code-trigger {
  background: transparent; border: none; cursor: pointer; color: #F3F1EA;
  transition: background .2s ease, color .2s ease;
}
.country-code-trigger:hover { background: rgba(255,255,255,0.04); color: #33E6C9; }
html[data-theme="light"] .country-code-trigger { color: #12151A; }
html[data-theme="light"] .country-code-trigger:hover { color: #0D6E63; }

.country-code-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 18px; padding: 0 5px; border-radius: 4px;
  background: rgba(51,230,201,0.14); color: #33E6C9;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
html[data-theme="light"] .country-code-badge { background: rgba(13,110,99,0.12); color: #0D6E63; }
.country-option .country-code-badge { flex-shrink: 0; }

.country-code-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  width: 280px; max-width: calc(100vw - 3rem); max-height: 320px; overflow-y: auto; padding: 8px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,21,26,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top left;
  transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.country-code-select.is-open .country-code-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
html[data-theme="light"] .country-code-panel {
  background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.08);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02);
}

.country-code-panel-search {
  width: 100%; margin-bottom: 6px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: #F3F1EA; font-family: 'Space Grotesk', sans-serif; font-size: 13px; outline: none;
}
.country-code-panel-search:focus { border-color: #33E6C9; }
html[data-theme="light"] .country-code-panel-search { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #12151A; }

.country-option {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; border: none; background: transparent; cursor: pointer;
  color: rgba(243,241,234,0.8); text-align: left; font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.country-option:hover { background: rgba(255,255,255,0.06); color: #F3F1EA; }
.country-option .flag { font-size: 15px; }
.country-option .dial { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: .55; margin-left: auto; }
.country-option.is-active { color: #33E6C9; }
html[data-theme="light"] .country-option { color: rgba(18,21,26,0.75); }
html[data-theme="light"] .country-option:hover { background: rgba(0,0,0,0.05); color: #12151A; }
html[data-theme="light"] .country-option.is-active { color: #0D6E63; }

@media (prefers-reduced-motion: reduce) {
  .country-code-panel { transition: none !important; }
}

/* ---------- project category filter buttons: explicit rules so the active
   state never depends on Tailwind's runtime class generation catching up
   with classes toggled by JS after page load ---------- */
.filter-btn {
  background: transparent; color: rgba(243,241,234,0.7); border-color: rgba(255,255,255,0.15);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover { border-color: #33E6C9; color: #33E6C9; }
.filter-btn.is-active { background: #33E6C9; color: #0B0D10; border-color: #33E6C9; }
.filter-btn.is-active:hover { color: #0B0D10; }
html[data-theme="light"] .filter-btn { color: rgba(18,21,26,0.7); border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .filter-btn:hover { border-color: #0D6E63; color: #0D6E63; }
html[data-theme="light"] .filter-btn.is-active { background: #0D6E63; color: #F3F1EA; border-color: #0D6E63; }
html[data-theme="light"] .filter-btn.is-active:hover { color: #F3F1EA; }


.theme-switcher { position: relative; }

.theme-trigger {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: #F3F1EA; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .2s ease;
}
.theme-trigger i { font-size: 12px; }
.theme-trigger-label { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1279px) {
  .theme-switcher:not(.theme-switcher-mobile) .theme-trigger-label { display: none; }
  .theme-switcher:not(.theme-switcher-mobile) .theme-trigger { padding: 0 10px; }
}
.theme-trigger:hover { border-color: #33E6C9; color: #33E6C9; }
.theme-switcher.is-open .theme-trigger { border-color: #33E6C9; color: #33E6C9; background: rgba(51,230,201,0.08); }
html[data-theme="light"] .theme-trigger { border-color: rgba(0,0,0,0.15); color: #12151A; }
html[data-theme="light"] .theme-trigger:hover,
html[data-theme="light"] .theme-switcher.is-open .theme-trigger { border-color: #0D6E63; color: #0D6E63; background: rgba(13,110,99,0.08); }

.theme-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 220px; padding: 8px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18,21,26,0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top right;
  transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
}
.theme-switcher.is-open .theme-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
html[data-theme="light"] .theme-panel {
  background: rgba(255,255,255,0.94); border-color: rgba(0,0,0,0.08);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.02);
}

.theme-option {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: none; background: transparent; cursor: pointer;
  color: rgba(243,241,234,0.75); text-align: left;
  transition: background .18s ease, color .18s ease;
}
.theme-option:hover { background: rgba(255,255,255,0.06); color: #F3F1EA; }
.theme-option + .theme-option { margin-top: 2px; }
.theme-option-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: rgba(255,255,255,0.06); color: rgba(243,241,234,0.7);
  transition: background .18s ease, color .18s ease;
}
.theme-option-label { flex: 1; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; }
.theme-option-check { width: 16px; font-size: 11px; opacity: 0; color: #33E6C9; transition: opacity .18s ease; }
.theme-option.is-active .theme-option-check { opacity: 1; }
.theme-option.is-active { color: #F3F1EA; }
.theme-option.is-active .theme-option-icon { background: rgba(51,230,201,0.16); color: #33E6C9; }

html[data-theme="light"] .theme-option { color: rgba(18,21,26,0.7); }
html[data-theme="light"] .theme-option:hover { background: rgba(0,0,0,0.045); color: #12151A; }
html[data-theme="light"] .theme-option-icon { background: rgba(0,0,0,0.05); color: rgba(18,21,26,0.6); }
html[data-theme="light"] .theme-option.is-active { color: #12151A; }
html[data-theme="light"] .theme-option.is-active .theme-option-icon { background: rgba(13,110,99,0.14); color: #0D6E63; }
html[data-theme="light"] .theme-option.is-active .theme-option-check { color: #0D6E63; }

/* mobile menu variant: full-width trigger, panel opens downward inline rather than floating */
.theme-switcher-mobile { width: 100%; }
.theme-switcher-mobile .theme-trigger {
  width: 100%; justify-content: space-between; height: 44px; padding: 0 16px;
}
.theme-switcher-mobile .theme-trigger::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin-left: auto; opacity: .6; }
.theme-switcher-mobile .theme-panel {
  position: static; width: 100%; margin-top: 8px;
  opacity: 1; visibility: visible; transform: none; max-height: 0; padding: 0 8px; overflow: hidden;
  border: none; box-shadow: none; background: rgba(255,255,255,0.03);
  transition: max-height .28s cubic-bezier(.16,1,.3,1), padding .28s ease;
}
.theme-switcher-mobile.is-open .theme-panel { max-height: 240px; padding: 8px; }
html[data-theme="light"] .theme-switcher-mobile .theme-panel { background: rgba(0,0,0,0.03); }

@media (prefers-reduced-motion: reduce) {
  .theme-panel, .theme-trigger, .theme-option { transition: none !important; }
}


/* ---------- light mode: darken the bright accent colors for real contrast ----------
   text-spectro (teal) and text-assay (amber) are tuned bright for a near-black
   background; on the cream light background those same colors read washed out,
   so light mode gets its own darker, bolder versions of both. ---------- */
html[data-theme="light"] .text-spectro { color: #0D6E63 !important; font-weight: 600; }
html[data-theme="light"] .text-assay { color: #A85A17 !important; font-weight: 600; }
html[data-theme="light"] .gradient-text {
  background-image: linear-gradient(90deg, #0D6E63, #A85A17, #0D6E63) !important;
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .border-spectro { border-color: #0D6E63 !important; }
html[data-theme="light"] .border-assay { border-color: #A85A17 !important; }
html[data-theme="light"] .border-spectro\/30 { border-color: rgba(13,110,99,0.4) !important; }
html[data-theme="light"] .bg-spectro\/10 { background-color: rgba(13,110,99,0.09) !important; }
html[data-theme="light"] .bg-assay\/10 { background-color: rgba(168,90,23,0.09) !important; }
html[data-theme="light"] .footer-status-dot { background: #0D6E63; }
/* nav links, icons, and small mono labels that rely on spectro for emphasis */
html[data-theme="light"] .nav-link.active,
html[data-theme="light"] .nav-link[aria-current="page"] { color: #0D6E63 !important; }
html[data-theme="light"] a:hover.hover\:text-spectro,
html[data-theme="light"] .hover\:text-spectro:hover { color: #0D6E63 !important; }