/* css/premium.css — premium overlays, progressive enhancement */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .stars,
  .star,
  #starfield-canvas,
  .cursor-particles,
  .custom-cursor {
    display: none !important;
  }
}

/* ---------- pointer gate: hide custom cursor on touch ---------- */
@media not all and (hover: hover) and (pointer: fine) {
  .custom-cursor,
  .cursor-particles {
    display: none !important;
  }
  body,
  a,
  button {
    cursor: auto !important;
  }
}

/* ---------- fluid typography ---------- */
:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --step-5: clamp(2.75rem, 1.8rem + 5vw, 6rem);
  --step-hero: clamp(3rem, 2rem + 8vw, 9rem);
}

body { font-size: var(--step-0); line-height: 1.65; }

h1, .hero h1 { font-size: var(--step-hero); line-height: 0.95; letter-spacing: -0.02em; }
.section-title, h2 { font-size: var(--step-5); line-height: 1; letter-spacing: -0.01em; }
h3 { font-size: var(--step-3); line-height: 1.15; }
.profile-section h2 { font-size: var(--step-3); }
.profile-section p { font-size: var(--step-1); }

/* ---------- canvas starfield ---------- */
.intro { position: relative; }
#starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.intro > :not(#starfield-canvas) { position: relative; z-index: 1; }

/* ---------- frosted-glass profile card ---------- */
.profile-section {
  background: var(--card-glass) !important;
  border: 1px solid var(--card-border) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 1px 0 var(--card-highlight) inset,
    0 30px 60px -20px var(--card-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile-section {
    background: rgba(20, 20, 28, 0.85) !important;
  }
}

/* ---------- atmospheric noise overlay ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../assets/noise.svg');
  background-size: 300px 300px;
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9997;
}
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0; }
}

/* ---------- scroll-reactive nav ---------- */
.nav {
  transform: translateY(0) !important; /* override main.css translateY(-100%) default */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              backdrop-filter 0.3s ease,
              opacity 0.35s ease;
  will-change: transform;
}
/* Hidden during intro (before user scrolls past hero) — slides up out of view
   so it visibly drops down when the user crosses the intro boundary. */
.nav.nav--intro-hidden {
  transform: translateY(-110%) !important;
  opacity: 0;
  pointer-events: none;
}
/* Hidden on scroll-down */
.nav.nav--hidden { transform: translateY(-110%) !important; }
.nav.nav--scrolled {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---------- split-text reveal ---------- */
[data-split] {
  overflow: hidden;
}
[data-split] .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
[data-split].is-ready .word {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s ease;
}
[data-split].is-ready .word:nth-child(1) { transition-delay: 0.05s; }
[data-split].is-ready .word:nth-child(2) { transition-delay: 0.12s; }
[data-split].is-ready .word:nth-child(3) { transition-delay: 0.19s; }
[data-split].is-ready .word:nth-child(4) { transition-delay: 0.26s; }
[data-split].is-ready .word:nth-child(5) { transition-delay: 0.33s; }
[data-split].is-ready .word:nth-child(6) { transition-delay: 0.40s; }
[data-split].is-ready .word:nth-child(7) { transition-delay: 0.47s; }
[data-split].is-ready .word:nth-child(n+8) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  [data-split] .word { transform: none !important; opacity: 1 !important; }
}

/* ---------- preloader ---------- */
html.is-loading { overflow: hidden; }
.preloader {
  position: fixed;
  inset: 0;
  background: var(--preloader-bg);
  z-index: 99999;
  display: grid;
  place-items: center;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s ease 0.9s;
}
.preloader__bar {
  width: min(280px, 60vw);
  height: 2px;
  background: rgba(255, 204, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.preloader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffcc00;
  transform: scaleX(0);
  transform-origin: left;
  animation: pl 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes pl { to { transform: scaleX(1); } }
.preloader.is-gone { transform: translateY(-100%); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 0.2s ease; }
  .preloader__bar::after { animation-duration: 0.2s; }
}

/* ---------- layout fix: remove dead gap below intro ---------- */
.main-content {
  margin-top: 0 !important;
}
.hero {
  padding-top: 2rem !important;
}

/* ---------- profile card buttons: allow wrapping ---------- */
.profile-buttons .cta-button,
.profile-buttons .contact-button {
  white-space: normal !important;
  line-height: 1.2;
  word-break: normal;
  hyphens: none;
}

/* ---------- push-to-9 polish ---------- */
:root {
  --accent-muted: #c9a84c;

  /* Theme-aware tokens — dark defaults */
  --bg-color: #0a0a0a;
  --text-color: #f8f8f8;
  --heading-color: #ffffff;
  --secondary-text: #e0e0e0;
  --muted-text: #cccccc;
  --link-color: #ffcc00;
  --card-bg: rgba(0, 0, 0, 0.2);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-glass: rgba(255, 255, 255, 0.04);
  --card-shadow: rgba(0, 0, 0, 0.6);
  --card-highlight: rgba(255, 255, 255, 0.06);
  --noise-opacity: 0.035;
  --hero-gradient-from: #000000;
  --hero-gradient-to: #1a1a2e;
  --section-gradient-from: rgba(10, 10, 10, 1);
  --section-gradient-to: rgba(20, 20, 40, 1);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.72);
  --preloader-bg: #0a0a0a;
  --selection-bg: #ffcc00;
  --selection-text: #000000;
}

/* ========== LIGHT THEME OVERRIDES ========== */
/* PROFESSIONAL MODE — clean corporate palette (cool off-white, charcoal text, blue accents) */
[data-theme="light"] {
  --primary-color: #2563EB;          /* corporate blue (Tailwind blue-600) */
  --primary-color-deep: #1D4ED8;     /* darker blue for hover */
  --accent-color: #3B82F6;           /* blue-500 */
  --accent-muted: #6b7280;           /* neutral slate for secondary accents */
  --bg-color: #F6F7F9;               /* cool off-white */
  --text-color: #1F2937;             /* deep slate text */
  --heading-color: #0F172A;          /* near-black for headings */
  --secondary-text: #374151;
  --muted-text: #6B7280;
  --link-color: #1F2937;
  --card-bg: #FFFFFF;
  --card-border: rgba(15, 23, 42, 0.08);
  --card-glass: rgba(255, 255, 255, 0.92);
  --card-shadow: rgba(15, 23, 42, 0.08);
  --card-highlight: rgba(255, 255, 255, 1);
  --noise-opacity: 0;                /* no grain in pro mode — clean surfaces */
  --hero-gradient-from: #F6F7F9;
  --hero-gradient-to: #EDEFF3;
  --section-gradient-from: #F6F7F9;
  --section-gradient-to: #EDEFF3;
  --nav-scrolled-bg: rgba(246, 247, 249, 0.92);
  --preloader-bg: #F6F7F9;
  --selection-bg: #2563EB;
  --selection-text: #FFFFFF;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* Playfair Display for editorial headings */
.section-title, h2:not(.profile-section h2) {
  font-family: 'Playfair Display', serif;
}

/* dvh hero with fallback */
.intro {
  height: 100vh;
  height: 100dvh;
}

/* balanced headings */
h1, h2, h3 { text-wrap: balance; }

/* focus-visible rings */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 0;
}

/* screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- skills filter pills ---------- */
.skills-filter {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.skills-pill {
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 0.45rem 1.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--step-0);
  color: var(--muted-text, #ccc);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.skills-pill:hover {
  border-color: rgba(255, 204, 0, 0.4);
  color: #fff;
  transform: translateY(-2px);
}
.skills-pill.active {
  border-color: var(--primary-color, #ffcc00);
  color: #fff;
  background: rgba(255, 204, 0, 0.12);
  box-shadow: 0 0 20px -4px rgba(255, 204, 0, 0.25);
}

/* center single visible card when filtering */
.skills-section:has(.skills-category.is-hidden) {
  justify-items: center;
}
.skills-category:not(.is-hidden):only-of-type,
.skills-section:has(.skills-category.is-hidden) .skills-category:not(.is-hidden) {
  grid-column: 1 / -1;
  max-width: 600px;
}

/* ---------- premium skills cards ---------- */
.skills-category {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.skills-category.is-hidden {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* ---------- skill chip stagger reveal ---------- */
.skill-item {
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.skills-category.chips-visible .skill-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.skills-category.chips-visible .skill-item:nth-child(1)  { transition-delay: 0.03s; }
.skills-category.chips-visible .skill-item:nth-child(2)  { transition-delay: 0.06s; }
.skills-category.chips-visible .skill-item:nth-child(3)  { transition-delay: 0.09s; }
.skills-category.chips-visible .skill-item:nth-child(4)  { transition-delay: 0.12s; }
.skills-category.chips-visible .skill-item:nth-child(5)  { transition-delay: 0.15s; }
.skills-category.chips-visible .skill-item:nth-child(6)  { transition-delay: 0.18s; }
.skills-category.chips-visible .skill-item:nth-child(7)  { transition-delay: 0.21s; }
.skills-category.chips-visible .skill-item:nth-child(8)  { transition-delay: 0.24s; }
.skills-category.chips-visible .skill-item:nth-child(9)  { transition-delay: 0.27s; }
.skills-category.chips-visible .skill-item:nth-child(10) { transition-delay: 0.30s; }
.skills-category.chips-visible .skill-item:nth-child(11) { transition-delay: 0.33s; }
.skills-category.chips-visible .skill-item:nth-child(12) { transition-delay: 0.36s; }
.skills-category.chips-visible .skill-item:nth-child(n+13) { transition-delay: 0.39s; }

@media (prefers-reduced-motion: reduce) {
  .skill-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .skills-category.is-hidden { opacity: 1 !important; transform: none !important; position: static !important; visibility: visible !important; }
}

/* ---------- lerp cursor override ---------- */
@media (hover: hover) and (pointer: fine) {
  .custom-cursor {
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease !important;
    /* transform handled by JS lerp — no CSS transition on transform */
  }
}

/* ---------- accent-muted usage ---------- */
.date { color: var(--accent-muted); }
.skill-item:hover { border-color: var(--accent-muted); }
.footer-links a { color: var(--accent-muted); }
.footer-links a:hover { color: var(--primary-color); }

/* ========== THEME TOGGLE BUTTON ========== */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary-color, #ffcc00);
  font-size: 0.9rem;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  margin-left: 1rem;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-color, #ffcc00);
  transform: scale(1.1);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary-color, #ffcc00);
  outline-offset: 3px;
}

[data-theme="light"] .theme-toggle {
  border-color: rgba(139, 115, 85, 0.25);
  color: var(--primary-color);
}

[data-theme="light"] .theme-toggle:hover {
  background: rgba(184, 134, 11, 0.08);
  border-color: var(--primary-color);
}

/* Light mode nav scrolled override */
[data-theme="light"] .nav--scrolled {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Light mode preloader */
[data-theme="light"] .preloader {
  background: var(--preloader-bg);
}

[data-theme="light"] .preloader__bar {
  background: rgba(184, 134, 11, 0.25);
}

[data-theme="light"] .preloader__bar::after {
  background: var(--primary-color);
}

/* Light mode selection */
[data-theme="light"] ::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* Light mode intro text + logo readability */
[data-theme="light"] .intro-text {
  color: var(--heading-color) !important;
}
[data-theme="light"] .logo-svg {
  filter: brightness(0) invert(0) !important;
}
[data-theme="light"] .nav-logo {
  filter: brightness(0) !important;
}
[data-theme="light"] .footer-logo img {
  filter: brightness(0) !important;
}
[data-theme="light"] .profile-section h2,
[data-theme="light"] .profile-section p {
  color: var(--text-color);
}
[data-theme="light"] .content-block,
[data-theme="light"] .skills-category,
[data-theme="light"] .timeline-content {
  color: var(--text-color);
}
[data-theme="light"] .content-block h3,
[data-theme="light"] .skills-category h3,
[data-theme="light"] .timeline-content h3 {
  color: var(--heading-color);
}

/* ========== HORIZONTAL PROJECT SHOWCASE ========== */
.showcase-section {
  position: relative;
  padding: 1.5rem 0 0;
}
.showcase-pin {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  padding: 3rem 0 2rem;
}
.showcase-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  text-align: center;
}
.showcase-sub {
  color: var(--muted-text, #ccc);
  font-size: var(--step-0);
  margin: 0.75rem auto 0;
  max-width: 52ch;
  text-align: center;
  line-height: 1.5;
}
.showcase-track-wrap {
  overflow: hidden;
  width: 100%;
  padding-left: max(2rem, calc((100vw - 1200px) / 2));
}
.showcase-track {
  display: flex;
  gap: 2rem;
  will-change: transform;
  padding-right: 2rem;
}
.showcase-card {
  flex: 0 0 420px;
  min-height: 360px;
  padding: 2.2rem 2rem;
  border-radius: 18px;
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 1px 0 var(--card-highlight) inset,
    0 30px 60px -20px var(--card-shadow);
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.showcase-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color);
}
.showcase-card-category {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-muted);
  margin-bottom: 1.5rem;
}
.showcase-card-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  color: var(--heading-color);
  margin: 0 0 1rem;
}
.showcase-card-excerpt {
  color: var(--secondary-text);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  flex: 1;
}
.showcase-card-cta {
  color: var(--primary-color);
  font-size: 0.95rem;
  font-weight: 500;
  transition: transform 0.3s ease;
}
.showcase-card:hover .showcase-card-cta {
  transform: translateX(4px);
}
.showcase-progress {
  height: 2px;
  width: min(400px, 50%);
  margin: 0 auto;
  background: var(--card-border);
  border-radius: 2px;
  overflow: hidden;
}
.showcase-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary-color);
  transition: width 0.05s linear;
}

@media (max-width: 768px) {
  .showcase-section { padding-top: 3rem; }
  .showcase-pin { min-height: auto; }
  .showcase-track-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-left: 1.5rem; }
  .showcase-card { flex: 0 0 85vw; min-height: 300px; padding: 1.8rem 1.5rem; }
  .showcase-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-track { transform: none !important; }
  .showcase-track-wrap { overflow-x: auto; }
  .showcase-pin { min-height: auto; }
}

/* ========== PAGE TRANSITIONS (View Transitions API) ========== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms;
  }
}

/* ========== CURSOR-TRACKED GRADIENTS ========== */
.cta-button,
.skills-pill {
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}

.cta-button::after,
.skills-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle 80px at var(--mx) var(--my),
    rgba(255, 204, 0, 0.35),
    transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: screen;
}

.cta-button.cursor-glow::after,
.skills-pill.cursor-glow::after {
  opacity: 1;
}

[data-theme="light"] .cta-button::after,
[data-theme="light"] .skills-pill::after {
  background: radial-gradient(circle 80px at var(--mx) var(--my),
    rgba(184, 134, 11, 0.25),
    transparent 60%);
  mix-blend-mode: multiply;
}

/* ========== MOBILE POLISH ========== */
@media (max-width: 768px) {
  /* --- Profile card becomes a sleek bottom bar --- */
  .profile-section {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 72px !important;
    padding: 0.6rem 1rem !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--card-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: var(--card-glass) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    box-shadow: 0 -10px 30px -10px var(--card-shadow) !important;
    z-index: 1000;
    overflow: hidden !important;
    transform: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
  }
  /* ALWAYS visible on mobile — override the scroll gate and vanilla-tilt transforms */
  .profile-section,
  .profile-section.hidden-until-scroll,
  .profile-section.active,
  .profile-section.minimized {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    perspective: none !important;
  }
  /* When minimized or active — same as default bar */
  .profile-section.minimized,
  .profile-section.active {
    max-height: 72px !important;
    padding: 0.6rem 1rem !important;
    right: 0 !important;
  }

  .profile-section .profile-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    height: 100%;
    width: 100%;
  }

  /* Tiny circular photo on the left */
  .profile-section .profile-inner > img,
  .profile-section img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: 1.5px solid var(--primary-color) !important;
  }

  /* Compact name */
  .profile-section .profile-inner h2 {
    display: block !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    color: var(--heading-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    flex: 1 1 auto !important;
    order: 2 !important;
  }
  /* Override [data-split] overflow so the split words show */
  .profile-section .profile-inner h2[data-split] {
    overflow: hidden !important;
  }
  .profile-section .profile-inner h2 .word {
    display: inline !important;
  }
  /* Subtitle under name */
  .profile-section .profile-inner h2::after {
    content: '';
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.65;
    color: var(--muted-text);
    line-height: 1.1;
    margin-top: 2px;
  }
  .profile-section .profile-inner p,
  .profile-section .profile-inner > p {
    display: none !important;
  }

  /* Keep only Contact Me button */
  .profile-section .profile-inner .profile-buttons {
    flex: 0 0 auto !important;
    gap: 0.4rem !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 3 !important;
    display: flex !important;
  }
  .profile-section .profile-inner .profile-buttons .cta-button {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.85rem !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    flex: 0 0 auto !important;
  }
  /* Hide resume download button on the bar — keep the primary Contact CTA */
  .profile-section .profile-inner .profile-buttons > a:first-child {
    display: none !important;
  }

  /* Hide social links — not needed in compact bar */
  .profile-section .profile-inner .social-links,
  .profile-section .profile-inner .profile-social-links,
  .profile-section .social-links,
  .profile-section .profile-social-links {
    display: none !important;
    visibility: hidden !important;
  }

  /* Kill the floating yellow circle toggle — bar is always visible */
  .profile-toggle {
    display: none !important;
  }

  /* Pad the bottom of main content so the bar doesn't cover it */
  body {
    padding-bottom: 72px;
  }

  /* --- Scaling fixes --- */
  /* Skill items were 9.6px — way too small */
  .skill-item {
    font-size: 0.78rem !important;
    min-height: 36px !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 8px !important;
  }
  /* Give skills pills a bit more breathing room on mobile */
  .skills-pill {
    font-size: 0.82rem !important;
    padding: 0.45rem 0.95rem !important;
  }
  /* Slightly tame the massive section titles on mobile */
  .section-title, h2:not(.profile-section h2) {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
  }
  /* Section padding breathing room */
  .showcase-section {
    padding-top: 2rem !important;
  }
  .showcase-header {
    padding: 0 1.5rem !important;
  }
  .showcase-sub {
    font-size: 0.95rem !important;
  }
}

/* Extra small phones */
@media (max-width: 400px) {
  .profile-section h2::after {
    content: '';
  }
}

/* ========== ANIMATED SKILL ICONS ========== */
.skill-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem !important;
  text-align: center;
  position: relative;
  overflow: visible !important;
  min-height: 78px !important;
  word-break: break-word;
  hyphens: auto;
}

.skill-icon {
  font-size: 1.35rem;
  color: var(--accent-muted, #c9a84c);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s ease;
  display: inline-block;
  will-change: transform;
}

.skill-item span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.2;
  transition: color 0.3s ease;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.skill-item:hover .skill-icon {
  color: var(--primary-color);
  transform: scale(1.25) rotate(-6deg) translateY(-2px);
}

.skill-item:hover span {
  color: var(--heading-color);
}

/* Subtle entrance wobble when category reveals chips */
@keyframes skill-icon-pop {
  0% { transform: scale(0.6) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.skills-category.chips-visible .skill-icon {
  animation: skill-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.skills-category.chips-visible .skill-item:nth-child(1) .skill-icon { animation-delay: 0.05s; }
.skills-category.chips-visible .skill-item:nth-child(2) .skill-icon { animation-delay: 0.09s; }
.skills-category.chips-visible .skill-item:nth-child(3) .skill-icon { animation-delay: 0.13s; }
.skills-category.chips-visible .skill-item:nth-child(4) .skill-icon { animation-delay: 0.17s; }
.skills-category.chips-visible .skill-item:nth-child(5) .skill-icon { animation-delay: 0.21s; }
.skills-category.chips-visible .skill-item:nth-child(6) .skill-icon { animation-delay: 0.25s; }
.skills-category.chips-visible .skill-item:nth-child(7) .skill-icon { animation-delay: 0.29s; }
.skills-category.chips-visible .skill-item:nth-child(8) .skill-icon { animation-delay: 0.33s; }
.skills-category.chips-visible .skill-item:nth-child(9) .skill-icon { animation-delay: 0.37s; }
.skills-category.chips-visible .skill-item:nth-child(10) .skill-icon { animation-delay: 0.41s; }
.skills-category.chips-visible .skill-item:nth-child(11) .skill-icon { animation-delay: 0.45s; }
.skills-category.chips-visible .skill-item:nth-child(12) .skill-icon { animation-delay: 0.49s; }

/* Mobile: smaller icons, tighter spacing */
@media (max-width: 768px) {
  .skill-icon { font-size: 1.1rem; }
  .skill-item {
    padding: 0.55rem 0.3rem !important;
    gap: 0.25rem;
    min-height: 62px !important;
  }
  .skill-item span {
    font-size: 0.66rem;
    line-height: 1.15;
  }
}

/* Reduced motion: skip the pop-in animation */
@media (prefers-reduced-motion: reduce) {
  .skills-category.chips-visible .skill-icon {
    animation: none;
  }
  .skill-item:hover .skill-icon {
    transform: scale(1.1);
  }
}

/* ========== TIMELINE — dense two-column on desktop, linear on mobile ========== */

/* Consistent breathing room above every section title */
#experience,
#skills,
.contact-section .section-title,
.showcase-header .section-title {
  margin-top: 5rem !important;
  margin-bottom: 2.5rem !important;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Contact section — give the Get In Touch header proper space above and below */
.contact-section {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.contact-section .section-title {
  margin-top: 0 !important;
  margin-bottom: 3rem !important;
}
.contact-section .contact-content {
  margin-top: 3.5rem !important;
}

/* Desktop: traditional alternating staircase timeline — items flow chronologically
   down the line, alternating left/right. Each item hangs from the line via its own
   row, so short/tall pairs don't create empty gaps. */
@media (min-width: 993px) {
  .timeline {
    max-width: 1000px !important;
    margin: 2rem auto !important;
    padding: 2rem 0 !important;
    position: relative !important;
  }
  /* Center line full height of timeline */
  .timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    height: auto !important;
    background: var(--primary-color) !important;
    transform: translateX(-50%) !important;
  }
  /* Each item is half-width, alternating sides with overlapping vertical offset
     so the rhythm feels tight but still uses both sides visually */
  .timeline-item {
    position: relative !important;
    width: 50% !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 3rem 0 0 !important;
    box-sizing: border-box;
  }
  .timeline-item:nth-child(even) {
    margin-left: 50% !important;
    padding: 0 0 0 3rem !important;
    margin-top: -2.5rem !important; /* pull right-side items up so the zig-zag overlaps vertically */
  }
  /* Line must fully cover the last item */
  .timeline-item:last-child {
    margin-bottom: 0 !important;
  }
  /* Dot markers: on the inside edge of each card pointing at the center line */
  .timeline-content::before {
    width: 18px !important;
    height: 18px !important;
    border: 3px solid var(--bg-color) !important;
    top: 24px !important;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.55) !important;
    background: var(--primary-color) !important;
    border-radius: 50% !important;
    position: absolute !important;
  }
  .timeline-item:nth-child(odd) .timeline-content::before {
    right: -37px !important;
    left: auto !important;
  }
  .timeline-item:nth-child(even) .timeline-content::before {
    left: -37px !important;
    right: auto !important;
  }
}

/* Mobile / tablet: clean single-column stack with line on the LEFT */
@media (max-width: 992px) {
  .timeline {
    max-width: 100% !important;
    padding: 0 0 1.5rem 1.5rem !important;
    margin: 1rem 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .timeline::before {
    left: 7px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    transform: none !important;
    width: 2px !important;
  }
  .timeline-item {
    width: 100% !important;
    margin: 0 0 1.25rem 0 !important;
    padding: 0 !important;
  }
  /* Critical: last item should have NO margin-bottom so the line fully covers it */
  .timeline-item:last-child {
    margin-bottom: 0 !important;
  }
  .timeline-item:nth-child(even) {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .timeline-content::before {
    left: -1.6rem !important;
    right: auto !important;
    width: 14px !important;
    height: 14px !important;
    top: 1.1rem !important;
    border: 3px solid var(--bg-color) !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.55) !important;
  }
  .timeline-item:nth-child(even) .timeline-content::before {
    left: -1.6rem !important;
    right: auto !important;
  }
  /* Tame the Experience & Education heading on mobile so it doesn't overwhelm */
  #experience,
  .contact-section .section-title {
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 1rem !important;
  }
  .contact-section {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
  }
  .contact-section .contact-content {
    margin-top: 1.5rem !important;
  }
}

/* ========== PROFESSIONAL MODE — clean corporate ========== */

/* Flat cool-white background — no gradient wash, no grain */
[data-theme="light"] body {
  background: var(--bg-color) !important;
}

/* Hero + sections: flat or very subtle gradient, no warm wash */
[data-theme="light"] .intro {
  background: linear-gradient(180deg, #F6F7F9 0%, #EDEFF3 100%) !important;
}
[data-theme="light"] .hero,
[data-theme="light"] .portfolio-section,
[data-theme="light"] .contact-section {
  background: var(--bg-color) !important;
}
[data-theme="light"] .main-content {
  background: transparent !important;
}

/* Navigation — clean white bar with crisp bottom border */
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-theme="light"] .nav-links a {
  color: var(--text-color) !important;
  transition: color 0.2s ease;
}
[data-theme="light"] .nav-links a:hover {
  color: var(--primary-color) !important;
}
[data-theme="light"] .nav-toggle {
  color: var(--text-color) !important;
}

/* Content cards: clean white with subtle shadow — no glass blur */
[data-theme="light"] .content-block,
[data-theme="light"] .skills-category,
[data-theme="light"] .timeline-content,
[data-theme="light"] .contact-item,
[data-theme="light"] .showcase-card,
[data-theme="light"] .github-stats-container,
[data-theme="light"] .github-repos-container,
[data-theme="light"] .github-stat-card {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 8px 20px -10px rgba(15, 23, 42, 0.08) !important;
}

/* Section h3 headings: deep charcoal, NOT gold — keep gold for moments only */
[data-theme="light"] .content-block h3,
[data-theme="light"] .skills-category h3,
[data-theme="light"] .timeline-content h3,
[data-theme="light"] .github-section-title,
[data-theme="light"] .showcase-card-title,
[data-theme="light"] .contact-item h3 {
  color: var(--heading-color) !important;
}

/* Section titles (Skills, Experience & Education, etc): charcoal with gold underline */
[data-theme="light"] .section-title {
  color: var(--heading-color) !important;
}
[data-theme="light"] .section-title::after {
  background: var(--primary-color) !important;
}

/* Skill chips: white cards with subtle border, blue hover ring */
[data-theme="light"] .skill-item {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--text-color) !important;
}
[data-theme="light"] .skill-item:hover {
  background: #FFFFFF !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18), 0 1px 2px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .skill-icon {
  color: var(--muted-text) !important;
}
[data-theme="light"] .skill-item:hover .skill-icon {
  color: var(--primary-color) !important;
}

/* Filter pills: subtle white with blue active */
[data-theme="light"] .skills-pill {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-color) !important;
}
[data-theme="light"] .skills-pill:hover {
  border-color: var(--primary-color) !important;
  color: var(--heading-color) !important;
  background: #EFF6FF !important;
}
[data-theme="light"] .skills-pill.active {
  background: #DBEAFE !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color-deep, #1D4ED8) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Timeline line + dots: charcoal line, blue dots */
[data-theme="light"] .timeline::before {
  background: var(--card-border) !important;
  opacity: 1;
}
[data-theme="light"] .timeline-content::before {
  background: var(--primary-color) !important;
  border-color: var(--bg-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Date badge: subtle slate pill */
[data-theme="light"] .timeline-content .date {
  background: #F3F4F6 !important;
  color: var(--muted-text) !important;
  font-style: normal;
}

/* CTA buttons: blue bg, white text — signature button */
[data-theme="light"] .cta-button {
  background: var(--primary-color) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  font-weight: 600 !important;
}
[data-theme="light"] .cta-button:hover {
  background: var(--primary-color-deep, #1D4ED8) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

/* Form inputs: clean white with gold focus ring */
[data-theme="light"] input,
[data-theme="light"] textarea {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-color) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--muted-text) !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none !important;
}

/* Footer: soft gray */
[data-theme="light"] .footer {
  background: #EDEFF3 !important;
  border-top: 1px solid var(--card-border);
  color: var(--text-color) !important;
}
[data-theme="light"] .footer-text,
[data-theme="light"] .footer p {
  color: var(--muted-text) !important;
}

/* Progress bar */
[data-theme="light"] .progress-bar {
  background: var(--primary-color) !important;
}

/* Profile card: clean white with crisp border */
[data-theme="light"] .profile-section {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 20px 40px -20px rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .profile-section img {
  border-color: var(--primary-color) !important;
}
[data-theme="light"] .profile-section h2 {
  color: var(--heading-color) !important;
}

/* Social icons: slate on white */
[data-theme="light"] .social-links a,
[data-theme="light"] .contact-social a {
  color: var(--muted-text) !important;
  border-color: var(--card-border) !important;
}
[data-theme="light"] .social-links a:hover,
[data-theme="light"] .contact-social a:hover {
  color: var(--heading-color) !important;
  border-color: var(--primary-color) !important;
}

/* Showcase cards */
[data-theme="light"] .showcase-card-category {
  color: var(--muted-text) !important;
}
[data-theme="light"] .showcase-card-cta {
  color: var(--primary-color) !important;
  font-weight: 600;
}
[data-theme="light"] .showcase-card-excerpt {
  color: var(--secondary-text) !important;
}

/* Theme toggle button (sun icon in pro mode) */
[data-theme="light"] .theme-toggle {
  border-color: var(--card-border) !important;
}
[data-theme="light"] .theme-toggle i {
  color: var(--heading-color) !important;
}

/* Hero text: keep signature handwritten look but in charcoal */
[data-theme="light"] .intro-text {
  color: var(--heading-color) !important;
}

/* ========== NAV ORDERING ========== */
/* Pin hamburger next to the theme toggle on the right (instead of floating mid-nav) */
.nav-toggle {
  order: 90 !important;
  margin-left: auto !important;
}
.theme-toggle {
  order: 100 !important;
}
.nav-links {
  order: 50 !important;
}
.nav-mark,
.nav-logo {
  order: 10 !important;
}

/* Mobile: tighter nav, hide the big "Lewis Campbell" logo signature (nav-mark is the mobile logo),
   and pin the hamburger + theme toggle tight to the right edge */
@media (max-width: 768px) {
  .nav {
    padding: 0.6rem 1rem !important;
    justify-content: flex-start !important;
  }
  /* The absolutely-positioned signature takes up the center and crowds the hamburger — hide it on mobile */
  .nav-logo {
    display: none !important;
  }
  /* Hamburger: push to the right, leaving only a small gap before the theme toggle */
  .nav-toggle {
    margin-left: auto !important;
    margin-right: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  .theme-toggle {
    margin-left: 0 !important;
    width: 34px !important;
    height: 34px !important;
  }

  /* Make sure bottom bar buttons + links actually receive touch events
     on iOS Safari (backdrop-filter can sometimes create an overlay that
     intercepts touches) */
  .profile-section,
  .profile-section * {
    touch-action: auto !important;
  }
  .profile-section .profile-buttons .cta-button,
  .profile-section .social-links a {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 204, 0, 0.2);
  }
  /* Ensure the bar itself sits above noise overlay (z:9997) so its children are reachable */
  .profile-section {
    z-index: 9998 !important;
  }
}

/* ========== H1 ALIASES ==========
   The profile card name was promoted from <h2> to <h1> for SEO.
   These rules make h1 inherit the styles already tuned for
   .profile-section h2 across main.css, premium.css, and the mobile
   bottom-bar overrides. */
.profile-section h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  text-align: center;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .profile-section .profile-inner h1 {
    display: block !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    color: var(--heading-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    text-align: left !important;
  }
  .profile-section .profile-inner h1[data-split] {
    overflow: hidden !important;
  }
  .profile-section .profile-inner h1 .word {
    display: inline !important;
  }
}
[data-theme="light"] .profile-section h1 {
  color: var(--heading-color) !important;
}

/* ========== PROFILE CARD RE-INTRODUCTION ANIMATION ==========
   The profile card "poofs" (scale up + blur + fade) when the user reaches
   the Contact section. If they scroll back up, we reverse it with this
   animation so the card drops back in instead of staying gone. */
@keyframes profile-reappear {
  0% {
    transform: scale(2.2);
    opacity: 0;
    filter: blur(18px);
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
    filter: blur(2px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.profile-section.reappearing {
  animation: profile-reappear 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: auto;
}

/* On MOBILE the profile-section is the fixed bottom bar. Hard-hiding it with
   display:none when poofed means the Contact Me button + avatar stay gone
   even if the user scrolls back up. Soften the poofed state so it can be
   reversed by the reappearing animation. */
@media (max-width: 768px) {
  .profile-section.poofed {
    display: block !important;     /* keep in flow */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* but remove it immediately — no lingering stacking-context issues */
    transition: none !important;
  }
  /* When reappearing class is added, the keyframes take over and
     visibility + opacity are driven by the animation. */
  .profile-section.reappearing {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-section.reappearing {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ========== THEME TOGGLE — PILL SWITCH ==========
   A proper sliding toggle with moon on the left, sun on the right, and a
   solid thumb that slides between them. Designed to be unmistakable as a
   switch, with strong contrast so it's visible in both themes. */
.theme-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  width: 68px !important;
  height: 34px !important;
  padding: 0 9px !important;
  margin-left: 1rem;
  border: 2px solid var(--primary-color) !important;
  border-radius: 999px !important;
  background: #0a0a0a !important;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-toggle:hover {
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

/* Both icons visible, positioned on each side of the track */
.theme-toggle__icon {
  font-size: 0.85rem !important;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Dark mode (default): moon on left is bright gold, sun on right dimmed */
.theme-toggle__icon--dark {
  color: #ffcc00 !important;
  opacity: 1;
}
.theme-toggle__icon--light {
  color: #888 !important;
  opacity: 0.5;
}

/* Professional mode: moon dims, sun brightens to blue */
[data-theme="light"] .theme-toggle__icon--dark {
  color: #94a3b8 !important;
  opacity: 0.5;
}
[data-theme="light"] .theme-toggle__icon--light {
  color: #2563EB !important;
  opacity: 1;
}

/* The sliding thumb — big solid circle. Clearly looks like a toggle switch. */
.theme-toggle__thumb {
  position: absolute !important;
  top: 50% !important;
  left: 3px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #ffcc00 !important;
  border: none !important;
  transform: translateY(-50%) !important;
  transition: left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease !important;
  z-index: 1 !important;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Thumb slides right in professional mode */
[data-theme="light"] .theme-toggle__thumb {
  left: calc(100% - 29px) !important;
  background: #2563EB !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

/* Pro mode: white track with blue border */
[data-theme="light"] .theme-toggle {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}
[data-theme="light"] .theme-toggle:hover {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25), 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

/* Mobile: keep it big enough to see and tap */
@media (max-width: 768px) {
  .theme-toggle {
    width: 60px !important;
    height: 30px !important;
    padding: 0 7px !important;
  }
  .theme-toggle__thumb {
    width: 22px !important;
    height: 22px !important;
  }
  [data-theme="light"] .theme-toggle__thumb {
    left: calc(100% - 25px) !important;
  }
  .theme-toggle__icon {
    font-size: 0.65rem;
  }
}

/* Timeline mission tagline — the italic subtitle under the company/date */
.timeline-content > p > em:only-child {
  color: var(--accent-muted, var(--muted-text));
  font-size: 0.92rem;
  line-height: 1.4;
  display: inline-block;
  margin-top: 0.2rem;
}
.timeline-content p:has(> em:only-child) {
  margin: 0.2rem 0 0.75rem;
}

/* ========== SKIP-TO-CONTENT (a11y) ========== */
/* Visible only on keyboard focus. Uses transform-based hide so it works
   regardless of containing-block / overflow context on the host page. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  padding: 0.6rem 1rem;
  background: #ffcc00;
  color: #0a0a0a;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
[data-theme="light"] .skip-link {
  background: #2563EB;
  color: #fff;
}

/* ========== ALIGN PORTFOLIO + SHOWCASE WITH FIXED PROFILE CARD ========== */
/* Hero content shifts right by 350px on desktop to clear the fixed profile
   card; the GitHub portfolio block and the horizontal showcase need the same
   shift so they read as part of the same column.

   For the showcase, the padding has to live on the *inner* content rather
   than the section, because GSAP ScrollTrigger pins .showcase-pin (an inner
   element). When pinned, the section's padding-left is bypassed and the
   carousel slides under the profile card. Padding the inner header and
   track-wrap keeps the content right of the profile in both pinned and
   un-pinned states. */
@media (min-width: 769px) {
  .portfolio-section {
    padding-left: calc(2rem + 350px);
    padding-right: 2rem;
  }
  .showcase-section {
    padding-left: 0;
  }
  .showcase-header {
    padding-left: calc(350px + 2rem);
    padding-right: 2rem;
    max-width: none;
    margin: 0;
  }
  .showcase-track-wrap {
    padding-left: 350px;
  }
}

/* ========== LIVE DEMO BADGE + PIXEL-ART HANDHELD TV ========== */
.live-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0a0a0a;
  background: #7CFF7C;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(124, 255, 124, 0.55);
  animation: live-demo-pulse 2.4s ease-in-out infinite;
  text-transform: uppercase;
  white-space: nowrap;
}
.live-demo-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d11c1c;
  box-shadow: 0 0 6px #ff3a3a;
  animation: live-demo-blink 1.4s steps(2, end) infinite;
}
@keyframes live-demo-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(124,255,124,0.4); }
  50%      { box-shadow: 0 0 18px rgba(124,255,124,0.8); }
}
@keyframes live-demo-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}
[data-theme="light"] .live-demo-badge {
  color: #fff;
  background: #16a34a;
  box-shadow: 0 0 12px rgba(22, 163, 74, 0.45);
}

/* List-card emphasis for live-demo posts */
.post-card.is-live-demo {
  position: relative;
  border-color: rgba(124, 255, 124, 0.45);
  box-shadow: 0 0 0 1px rgba(124, 255, 124, 0.25), 0 14px 30px -18px rgba(124, 255, 124, 0.4);
}
[data-theme="light"] .post-card.is-live-demo {
  border-color: rgba(22, 163, 74, 0.5);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2), 0 14px 30px -18px rgba(22, 163, 74, 0.35);
}

/* Shelf-view box TV (with rabbit-ear antennas + console knob) */
.shelf-tv-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 104px;
  height: 190px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.shelf-tv-wrap:hover {
  transform: translateY(-6px);
}
.shelf-tv {
  width: 96px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.shelf-tv-screen {
  animation: tv-screen-flicker 4s ease-in-out infinite;
}
.shelf-tv-cursor {
  animation: tv-cursor-blink 1s steps(2, end) infinite;
}
.shelf-tv-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 38%;
  border-radius: 8px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(124,255,124,0.55), rgba(124,255,124,0) 70%);
  filter: blur(6px);
  z-index: 1;
  animation: tv-glow-pulse 2.4s ease-in-out infinite;
}
.shelf-tv-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #7CFF7C;
  text-shadow: 0 0 6px rgba(124,255,124,0.9);
  white-space: nowrap;
  z-index: 3;
}
[data-theme="light"] .shelf-tv-label {
  color: #16a34a;
  text-shadow: 0 0 6px rgba(22,163,74,0.6);
}
@keyframes tv-screen-flicker {
  0%, 100% { fill: #0d2410; }
  48%      { fill: #0d2410; }
  50%      { fill: #103018; }
  52%      { fill: #0d2410; }
  78%      { fill: #0d2410; }
  80%      { fill: #0a1f0c; }
  82%      { fill: #0d2410; }
}
@keyframes tv-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tv-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-tv-screen, .shelf-tv-cursor, .shelf-tv-glow, .live-demo-badge, .live-demo-dot {
    animation: none !important;
  }
}

/* Hugging Face embed wrapper for the post body */
.hf-embed-wrap {
  position: relative;
  width: 100%;
  height: 720px;
  margin: 1.5rem 0 2rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card-glass);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55);
}
.hf-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .hf-embed-wrap { height: 560px; }
}

.post-update-banner {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: rgba(124, 255, 124, 0.06);
  border: 1px solid rgba(124, 255, 124, 0.35);
  color: var(--text-color);
}
[data-theme="light"] .post-update-banner {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.4);
}
.post-update-banner a { color: var(--primary-color); }

/* ========== COMMENTS SECTION ========== */
.comments-section {
  max-width: 760px;
  margin: 4rem auto 2rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--card-border);
  box-sizing: border-box;
}
.comments-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.6rem;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.comments-section h2::before {
  content: '\f075'; /* fa-comment */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85em;
  color: var(--primary-color);
  opacity: 0.85;
}
.comments-intro {
  color: var(--secondary-text);
  margin: 0 0 2rem;
  line-height: 1.6;
  font-size: 0.95rem;
}
.comments-list {
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.comments-empty {
  margin: 0;
  padding: 1.25rem 1.4rem;
  border-radius: 10px;
  background: var(--card-glass);
  border: 1px dashed var(--card-border);
  color: var(--muted-text);
  font-size: 0.95rem;
}
.comment {
  padding: 1.1rem 1.4rem;
  border-radius: 12px;
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.comment-author {
  font-weight: 700;
  color: var(--heading-color);
}
.comment-date {
  font-size: 0.82rem;
  color: var(--muted-text);
}
.comment-body {
  margin: 0;
  color: var(--text-color);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Comment form */
.comment-form {
  position: relative;
  padding: 1.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  box-sizing: border-box;
  width: 100%;
}
[data-theme="light"] .comment-form {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.1);
}
.comment-form h3 {
  margin: 0 0 1.4rem;
  font-size: 1.15rem;
  color: var(--heading-color);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.comment-field {
  display: block;
  margin-bottom: 1.2rem;
}
.comment-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-color);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.comment-required { color: #ef4444; font-weight: 700; }
[data-theme="light"] .comment-required { color: #dc2626; }
.comment-optional,
.comment-hint {
  color: var(--muted-text);
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.95rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme="light"] .comment-form input[type="text"],
[data-theme="light"] .comment-form input[type="email"],
[data-theme="light"] .comment-form textarea {
  background: #fafafa;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0a0a0a;
}
[data-theme="light"] .comment-form input::placeholder,
[data-theme="light"] .comment-form textarea::placeholder {
  color: rgba(15, 23, 42, 0.4);
}
.comment-form input:hover,
.comment-form textarea:hover {
  border-color: rgba(255, 204, 0, 0.4);
}
[data-theme="light"] .comment-form input:hover,
[data-theme="light"] .comment-form textarea:hover {
  border-color: rgba(37, 99, 235, 0.4);
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18);
}
[data-theme="light"] .comment-form input:focus,
[data-theme="light"] .comment-form textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.comment-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}
.comment-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--card-border);
}
.comment-form-row .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.comment-form-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted-text);
  flex: 1 1 auto;
  text-align: right;
}
@media (max-width: 540px) {
  .comment-form { padding: 1.3rem; }
  .comment-form-row { flex-direction: column; align-items: stretch; }
  .comment-form-note { text-align: left; }
  .comment-form-row .cta-button { justify-content: center; }
}
.comment-form-status {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  display: none;
}
.comment-form-status.is-pending { display: block; color: var(--muted-text); background: rgba(255,255,255,0.04); }
.comment-form-status.is-success { display: block; color: #1f9d55; background: rgba(31, 157, 85, 0.1); border: 1px solid rgba(31, 157, 85, 0.3); }
.comment-form-status.is-error { display: block; color: #d11c1c; background: rgba(209, 28, 28, 0.08); border: 1px solid rgba(209, 28, 28, 0.3); }

/* ========== FEATURED-WORK SHOWCASE: live-demo highlight (lightsaber blue) ========== */
/* Saber palette: 59,201,255 = #3BC9FF (the bright cyan-blue core).
   The other badges across the site stay green (CRT-live convention) — only
   the homepage showcase card gets the saber treatment so it reads as
   "premium / hero" rather than just "live status". */
.showcase-card.is-live-demo {
  position: relative;
  border-color: rgba(59, 201, 255, 0.55);
  box-shadow:
    0 1px 0 var(--card-highlight) inset,
    0 0 0 1px rgba(59, 201, 255, 0.28),
    0 30px 60px -20px rgba(59, 201, 255, 0.45),
    0 30px 60px -20px var(--card-shadow);
}
.showcase-card.is-live-demo:hover {
  border-color: rgba(59, 201, 255, 0.85);
}
.showcase-card.is-live-demo .showcase-card-cta {
  color: #3BC9FF;
  text-shadow: 0 0 12px rgba(59, 201, 255, 0.55);
}
/* Re-paint the LIVE DEMO badge inside the saber card so it doesn't clash
   with the surrounding blue glow. Other instances of the badge keep green. */
.showcase-card.is-live-demo .live-demo-badge {
  color: #04253b;
  background: #3BC9FF;
  box-shadow: 0 0 14px rgba(59, 201, 255, 0.65);
  animation-name: saber-pulse;
}
.showcase-card.is-live-demo .live-demo-dot {
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
}
@keyframes saber-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(59,201,255,0.4); }
  50%      { box-shadow: 0 0 22px rgba(59,201,255,0.95); }
}

[data-theme="light"] .showcase-card.is-live-demo {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow:
    0 1px 0 var(--card-highlight) inset,
    0 0 0 1px rgba(37, 99, 235, 0.22),
    0 30px 60px -20px rgba(37, 99, 235, 0.3),
    0 30px 60px -20px var(--card-shadow);
}
[data-theme="light"] .showcase-card.is-live-demo .showcase-card-cta {
  color: #1d4ed8;
  text-shadow: none;
}
[data-theme="light"] .showcase-card.is-live-demo .live-demo-badge {
  color: #fff;
  background: #2563EB;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
}

.showcase-card.is-live-demo .showcase-card-category {
  margin-bottom: 1.25rem;
}

/* ========== PROFILE CARD: never scroll, scale to fit ========== */
/* The legacy desktop rule in main.css set max-height + overflow-y: auto on
   the profile card. On short viewports (small laptops, zoomed windows,
   browsers with chunky chrome) the card hit its max-height and started
   scrolling internally — visually broken. Override here so the card
   never scrolls; instead, scale it down uniformly when the viewport
   gets too short. */
@media (min-width: 769px) {
  .profile-section {
    overflow: visible !important;
    max-height: none !important;
    transform-origin: top left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Step the scale down as viewport height shrinks. transform-origin: top left
   keeps the card pinned to its top-left corner, so it never crashes into the
   nav or the bottom of the screen. */
@media (min-width: 769px) and (max-height: 900px) {
  .profile-section { transform: scale(0.94); }
}
@media (min-width: 769px) and (max-height: 820px) {
  .profile-section { transform: scale(0.86); }
}
@media (min-width: 769px) and (max-height: 740px) {
  .profile-section { transform: scale(0.78); }
}
@media (min-width: 769px) and (max-height: 660px) {
  .profile-section { transform: scale(0.70); }
}
@media (min-width: 769px) and (max-height: 580px) {
  .profile-section { transform: scale(0.62); }
}

/* ========== HIDDEN ACE OF CLUBS (dark-mode easter egg) ========== */
/* Sits inside the .intro section, positioned among the starfield. Looks like
   a faint star at first glance — pulses very slowly so a careful viewer can
   catch the silhouette. Dark mode only. */
.ace-of-clubs {
  position: absolute;
  top: 30%;
  right: 38%;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  opacity: 0.32;
  transform: rotate(-12deg);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.25s ease;
  animation: ace-glimmer 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.3));
}
.ace-of-clubs svg { width: 100%; height: 100%; display: block; }
.ace-of-clubs:hover,
.ace-of-clubs:focus-visible {
  opacity: 1;
  transform: rotate(-12deg) scale(1.6);
  filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.85));
  outline: none;
}
@keyframes ace-glimmer {
  0%, 100% { opacity: 0.30; filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.25)); }
  50%      { opacity: 0.65; filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.7)); }
}
/* Hide entirely in professional mode and on touch devices where it'd be
   nearly impossible to find without an obvious click target. */
[data-theme="light"] .ace-of-clubs { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ace-of-clubs { animation: none; opacity: 0.4; }
}

/* "Already-found" mark — small subtle indicator shown after first reveal */
.ace-of-clubs.is-found {
  opacity: 0.4;
  animation: none;
}
.ace-of-clubs.is-found::after {
  content: '✓';
  position: absolute;
  top: -6px; right: -6px;
  width: 12px; height: 12px;
  background: #ffcc00;
  color: #0a0a0a;
  font-size: 8px;
  font-weight: 900;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
}

/* Reveal modal */
.ace-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 5, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  /* Allow vertical scrolling on short phone viewports */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: ace-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ace-modal[hidden] { display: none; }
@keyframes ace-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ace-modal-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2rem 2rem 1.6rem;
  border-radius: 16px;
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 var(--card-highlight) inset,
    0 30px 60px -25px rgba(255, 204, 0, 0.5),
    0 30px 60px -25px var(--card-shadow);
  text-align: center;
  animation: ace-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ace-card-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.ace-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  background: transparent;
  border: 0;
  color: var(--muted-text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.ace-modal-close:hover {
  color: var(--text-color);
  background: rgba(255, 204, 0, 0.08);
}
.ace-modal-card-icon {
  width: 80px;
  height: 110px;
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 8px 24px rgba(255, 204, 0, 0.4));
  animation: ace-card-flip 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ace-modal-card-icon svg { width: 100%; height: 100%; }
@keyframes ace-card-flip {
  from { transform: rotateY(180deg) scale(0.6); }
  to   { transform: rotateY(0) scale(1); }
}
.ace-modal-card h3 {
  margin: 0 0 0.6rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}
.ace-modal-card p {
  margin: 0 0 0.8rem;
  color: var(--secondary-text);
  line-height: 1.55;
}
.ace-modal-card .ace-modal-foot {
  font-size: 0.85rem;
  color: var(--muted-text);
  font-style: italic;
  margin-bottom: 1.4rem;
}
.ace-modal-card .ace-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
.ace-modal-card .ace-modal-actions .cta-button {
  width: 100%;
  justify-content: center;
}
.ace-modal-card .cta-button--ghost {
  background: transparent !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  box-shadow: none !important;
}
.ace-modal-card .cta-button--ghost:hover {
  background: rgba(255, 204, 0, 0.1) !important;
}
[data-theme="light"] .ace-modal-card .cta-button--ghost {
  color: #2563EB !important;
  border-color: #2563EB !important;
}
[data-theme="light"] .ace-modal-card .cta-button--ghost:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Burst particles (gold confetti on reveal) */
.ace-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 8px; height: 8px;
  border-radius: 1px;
  background: #ffcc00;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.8);
  animation: ace-burst-fly 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ace-burst-fly {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

/* ========== ANCHOR SCROLL OFFSETS (clear sticky nav) ========== */
/* When a nav link scrolls to a section heading, scroll-margin-top
   ensures the heading lands ~88px below the viewport top instead of
   right at the edge (where the sticky nav covers it). */
#bio,
#experience,
#skills,
#contact,
.section-title[id],
.skills-section[id] {
  scroll-margin-top: 96px;
}
@media (max-width: 768px) {
  #bio, #experience, #skills, #contact,
  .section-title[id], .skills-section[id] {
    scroll-margin-top: 80px;
  }
}

/* ========== INTRO ENTER BUTTON — light-mode fix ========== */
/* The base .enter-button is white-on-transparent — invisible on the
   light intro gradient. Repaint it with the professional-mode primary. */
[data-theme="light"] .enter-button {
  border-color: #2563EB !important;
  color: #2563EB !important;
}
[data-theme="light"] .enter-button:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3) !important;
}
[data-theme="light"] .enter-button::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.18), transparent) !important;
}

/* ========== ACE-MODAL inline wallet states ========== */
.ace-state[hidden] { display: none; }
.ace-state {
  animation: ace-state-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ace-state-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ace-spinner {
  width: 32px;
  height: 32px;
  margin: 0.5rem auto 1rem;
  border: 3px solid rgba(255, 204, 0, 0.18);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: ace-spin 0.9s linear infinite;
}
[data-theme="light"] .ace-spinner {
  border-color: rgba(37, 99, 235, 0.18);
  border-top-color: #2563EB;
}
@keyframes ace-spin { to { transform: rotate(360deg); } }

.ace-status-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  animation: ace-mark-pop 0.45s cubic-bezier(0.16, 1.6, 0.3, 1);
}
.ace-status-mark--ok {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.35);
}
.ace-status-mark--bad {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.ace-status-mark--neutral {
  background: rgba(255, 204, 0, 0.12);
  color: var(--primary-color);
}
[data-theme="light"] .ace-status-mark--neutral {
  background: rgba(37, 99, 235, 0.10);
  color: #2563EB;
}
@keyframes ace-mark-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.ace-modal-card a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="light"] .ace-modal-card a { color: #1d4ed8; }
.ace-modal-card code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: rgba(255, 204, 0, 0.08);
  color: var(--primary-color);
  word-break: break-all;
}
[data-theme="light"] .ace-modal-card code {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

/* ========== ACE OF CLUBS — touch / mobile tweaks ========== */
/* Bump tap target on touch devices via an invisible ::after hit-area
   without changing the visual size. Apple HIG recommends ≥44×44 px. */
@media (hover: none) and (pointer: coarse) {
  .ace-of-clubs::after {
    content: '';
    position: absolute;
    inset: -12px;          /* expand hit area on every side */
    border-radius: 8px;
  }
}

/* On very small screens, give the modal card a touch more breathing room
   and the close button a bigger tap target. */
@media (max-width: 480px) {
  .ace-modal { padding: 0.9rem; }
  .ace-modal-card { padding: 1.6rem 1.2rem 1.4rem; }
  .ace-modal-close {
    padding: 0.6rem 0.8rem;     /* easier to tap */
    font-size: 1.2rem;
  }
  .ace-modal-card .ace-modal-actions { gap: 0.5rem; }
  .ace-modal-card-icon {
    width: 64px;
    height: 88px;
    margin-bottom: 0.9rem;
  }
}

/* Reown AppKit injects its own modal as <w3m-modal> / <appkit-modal>
   with z-index in the 999 range. Ensure it sits above ours so the
   wallet picker isn't trapped behind the Ace card. */
w3m-modal,
appkit-modal,
wui-modal {
  z-index: 100000 !important;
}

/* ========================================================================
   INTRO SECTION — UNIVERSAL VIEWPORT HANDLING
   Bullet-proof responsive for the opening screen across:
     • desktop, laptop, tablet (portrait + landscape)
     • mobile (portrait + landscape)
     • short browser windows + browser chrome on mobile
     • very tall phones (iPhone Pro Max etc.)
   ======================================================================== */

/* Use the small-viewport height unit so mobile browser address-bars don't
   push the Enter button below the fold. Falls back to 100vh on browsers
   without svh support (very old). min-height keeps a sensible floor. */
.intro {
  height: 100vh;          /* fallback */
  height: 100svh;         /* small viewport — accounts for mobile UI chrome */
  min-height: 420px;
}

/* Center the logo stack robustly. The base has display:flex+center; this
   re-applies it with !important to defeat any inherited overrides. */
.intro {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
}
.intro > .logo-container {
  margin: 0 auto !important;
}

/* Logo container: tighter gaps and explicit max-width so text/button
   never gets pushed off-screen by the stack. */
.logo-container {
  width: min(720px, 92vw);
  gap: clamp(0.4rem, 1.2vw, 1rem);
}

/* LC animated stroke logo — clamp size so it can't outgrow narrow phones
   or look puny on big monitors. Original main.css set width: 87.5%; this
   replaces with a clamp-driven size keyed to viewport width. */
.lc-logo-animation {
  width: clamp(220px, 60vw, 640px) !important;
  max-width: 640px;
  margin: 0 auto;
}

/* Signature SVG (white in dark, black in pro mode). */
.logo-svg {
  width: clamp(160px, 32vw, 280px) !important;
  height: auto;
  max-width: 100%;
}

/* Subtitle text */
.intro-text {
  padding: 0.4rem 1rem;
  font-size: clamp(0.78rem, 2.2vw, 1.4rem);
  max-width: min(720px, 92vw);
  /* drop the rigid 2.5em min-height — on short heights it pushed the
     button off-screen */
  min-height: 0;
  line-height: 1.4;
}

/* Enter button — tap-target friendly across sizes */
.enter-button {
  padding: clamp(0.65rem, 1.6vw, 1rem) clamp(1.4rem, 3.5vw, 2.5rem);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  min-height: 44px;       /* a11y / touch target */
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
}

/* Mobile portrait — phones */
@media (max-width: 640px) {
  .logo-container { gap: 0.4rem; padding: 0 1rem; }
  .lc-logo-animation { width: clamp(220px, 80vw, 380px) !important; }
  .logo-svg { width: clamp(160px, 56vw, 240px) !important; }
}

/* Tiny phones (iPhone SE width = 375px; older androids = 320px) */
@media (max-width: 380px) {
  .lc-logo-animation { width: 86vw !important; }
  .logo-svg { width: 60vw !important; }
  .intro-text { font-size: 0.78rem; }
  .enter-button { padding: 0.6rem 1.4rem; font-size: 0.85rem; }
}

/* SHORT viewports — landscape phones, split-screen, anything < 560px tall.
   The full LC stack doesn't fit vertically; shrink everything aggressively
   so the Enter button is still on-screen. */
@media (max-height: 560px) {
  .intro { padding: 0.5rem 0; }
  .logo-container { gap: 0.2rem; }
  .lc-logo-animation { width: clamp(180px, 32vw, 320px) !important; }
  .logo-svg { width: clamp(120px, 18vw, 200px) !important; }
  .intro-text {
    font-size: clamp(0.72rem, 1.6vw, 1rem);
    padding: 0.2rem 1rem;
  }
  .enter-button {
    padding: 0.5rem 1.3rem;
    font-size: 0.85rem;
    margin-top: 0.4rem;
  }
}

/* Very short viewports — tiny landscape phones, ~360px tall */
@media (max-height: 400px) {
  .lc-logo-animation { width: 22vw !important; min-width: 140px; }
  .logo-svg { width: 14vw !important; min-width: 96px; }
  .intro-text { display: none; }   /* save vertical space */
}

/* Tall phones — iPhone Pro Max, Pixel 7 Pro, etc. — give the stack room */
@media (min-height: 800px) and (max-width: 480px) {
  .lc-logo-animation { width: 84vw !important; max-width: 380px; }
  .logo-svg { width: 60vw !important; max-width: 260px; }
  .logo-container { gap: 0.6rem; }
}

/* Tablets — iPad portrait (≈768×1024) and landscape (≈1024×768) */
@media (min-width: 641px) and (max-width: 1024px) {
  .lc-logo-animation { width: clamp(360px, 60vw, 560px) !important; }
  .logo-svg { width: clamp(220px, 30vw, 280px) !important; }
}

/* Reduced motion: stop the gentle floats so the layout stays put */
@media (prefers-reduced-motion: reduce) {
  .logo-svg { animation: none !important; }
  .stars, .star::after { animation: none !important; }
}

/* ========== ACE OF CLUBS — mobile reposition ========== */
/* On narrow screens the LC animation occupies the center 80vw; with the
   Ace at right:38% it ends up sitting underneath the orange-C / purple-L
   strokes and is invisible. Tuck it into the upper-right corner on
   anything <= 640px so it's actually findable. */
@media (max-width: 640px) {
  .ace-of-clubs {
    top: 14% !important;
    right: 8% !important;
  }
}
@media (max-width: 380px) {
  .ace-of-clubs {
    top: 12% !important;
    right: 6% !important;
  }
}