/* Theme-specific hero art and shared controls. */
body[data-theme="light"] .hero::before {
  background-image: linear-gradient(90deg, rgba(250,251,253,.82), rgba(250,251,253,.38) 46%, transparent 74%), url("assets/hero-network-light-graphite.webp") !important;
}
body[data-theme="light"] .neural-hero.show-portrait .portrait-visual::before {
  content: "";
  position: absolute;
  inset: 1% 3% 8%;
  background: radial-gradient(ellipse at 59% 36%, rgba(255,255,255,.92), transparent 62%);
}
body[data-theme="light"] .neural-hero.show-portrait .portrait-visual img {
  position: relative;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.72)) !important;
}

.header-right {
  --header-control-size: 42px;
  --header-control-radius: 13px;
}
.header-right .header-cv,
.header-right #themeToggle {
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  border-radius: var(--header-control-radius) !important;
  border: 1px solid var(--border) !important;
  background: radial-gradient(ellipse at 20% 0%, var(--surface-shine), transparent 85%),
              linear-gradient(115deg, color-mix(in srgb, var(--panel) 93%, var(--bg)), color-mix(in srgb, var(--panel) 79%, var(--bg))) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 18px rgba(0,0,0,.11) !important;
}
.header-right #themeToggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  min-width: var(--header-control-size) !important;
  padding: 0 12px !important;
}
#themeToggle .theme-sun,
#themeToggle .theme-moon {
  width: 21px !important;
  height: 21px !important;
}
#themeToggle .theme-label {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.header-right .header-cv:hover,
.header-right #themeToggle:hover {
  background: var(--panel-hover) !important;
  border-color: var(--accent) !important;
}
#themeToggle .theme-moon path { fill: currentColor; }

#work, #credentials {
  --arrow-ink: #f4f8ff;
  --arrow-surface: rgba(24, 39, 58, .52);
  --arrow-hover: rgba(24, 39, 58, .76);
}
body[data-theme="light"] :is(#work, #credentials) {
  --arrow-ink: #25364a;
  --arrow-surface: rgba(250, 252, 255, .62);
  --arrow-hover: rgba(250, 252, 255, .86);
}
#credentials .cert-carousel { overflow: visible; }
#work .carousel-nav > .carousel-arrow,
#credentials .carousel-arrow {
  display: grid !important;
  position: absolute !important;
  z-index: 7;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  padding: 0;
  top: calc((100% - 39px) / 2) !important;
  border: 1px solid color-mix(in srgb, var(--arrow-ink) 45%, transparent) !important;
  border-radius: 50% !important;
  background: var(--arrow-surface) !important;
  color: var(--arrow-ink) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
  touch-action: manipulation;
}
#work #prevProject, #credentials .cert-prev { left: 8px !important; }
#work #nextProject, #credentials .cert-next { right: 8px !important; }
#work .carousel-nav > .carousel-arrow:hover,
#credentials .carousel-arrow:hover { background: var(--arrow-hover) !important; }
.carousel-arrow svg { width: 22px; height: 22px; pointer-events: none; }
#themeToggle:focus-visible,
.carousel-arrow:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

@media (max-width: 690px) {
  .header-right {
    --header-control-size: 44px;
    --header-control-radius: 11px;
  }
  .header-right #themeToggle { padding: 0 !important; }
  #themeToggle .theme-label { display: none; }
  body[data-theme="light"] .hero::before {
    background-position: 58% center !important;
    background-image: linear-gradient(180deg, rgba(249,250,253,.06), rgba(249,250,253,.12) 36%, rgba(249,250,253,.66) 69%, rgba(249,250,253,.96)), url("assets/hero-network-light-graphite.webp") !important;
  }
  .hero-inner:has(.show-portrait) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: end !important;
    min-height: clamp(460px, 106vw, 550px) !important;
  }
  .hero-inner:has(.show-portrait) .hero-copy {
    padding: 0 0 27px !important;
  }
  .hero-inner .neural-hero.show-portrait {
    position: absolute !important;
    inset: var(--v19-header-height) -6% 6px auto !important;
    width: min(112%, 550px) !important;
    height: auto !important;
    max-width: none !important;
  }
  .hero-inner .neural-hero.show-portrait .portrait-visual {
    inset: 0 !important;
  }
  .hero-inner::after {
    content: "";
    position: absolute;
    inset: 0 calc((100% - 100vw) / 2);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 38%,
      color-mix(in srgb, var(--bg) 72%, transparent) 65%, var(--bg) 98%);
  }
  .neural-hero.show-portrait .portrait-visual img,
  body[data-theme="light"] .neural-hero.show-portrait .portrait-visual img {
    position: relative;
    object-position: center bottom !important;
    mask-image: linear-gradient(#000 84%, transparent) !important;
    -webkit-mask-image: linear-gradient(#000 84%, transparent) !important;
    mix-blend-mode: normal;
    filter: drop-shadow(0 5px 12px rgba(5,12,24,.24)) !important;
  }
  .hero .hero-copy :is(h1, .hero-role, .hero-intro) {
    text-shadow: 0 1px 8px var(--bg) !important;
  }

  #work .projects-grid,
  #credentials .cert-grid {
    mask-image: none;
    -webkit-mask-image: none;
  }
  #work .projects-grid {
    scroll-snap-type: x mandatory;
  }
  #work .project-card {
    flex: 0 0 100% !important;
    min-width: 0;
    scroll-snap-stop: always;
    padding-inline: 48px !important;
  }
  #credentials .cert-grid {
    grid-auto-columns: 100% !important;
  }
  #credentials .cert-card {
    scroll-snap-stop: always;
    padding-inline: 48px !important;
  }
}