/* =============================================================
   FÁVERO V4 — TEMA CROMÁTICO GLOBAL POR CARD
   CAMADA ADICIONAL: não modifica a tipografia nem a grade da V3.
   ============================================================= */
:root {
  --scene-accent: #161616;
  --scene-bg: #ffffff;
  --scene-panel: #fff;
  --scene-border: #101010;
  --scene-ink: #101010;
  --scene-focus-ink: #101010;
}
body.theme-active {
  background:var(--scene-bg) !important;
  color:var(--scene-accent) !important;
  transition: background-color .5s cubic-bezier(.2,.6,.2,1),color .35s ease !important;
}
/* O cabeçalho, logo, links e footer passam a assumir a cor do case */
body.theme-active header,
body.theme-active header .logo-box,
body.theme-active nav,
body.theme-active nav a {
  color:var(--scene-accent) !important;
  border-color:var(--scene-accent);
}
body.theme-active .logo-box::after {color:var(--scene-accent)}
body.theme-active nav a:hover,
body.theme-active nav a:focus-visible {
  color:var(--scene-bg) !important;
  background:var(--scene-accent) !important;
}
body.theme-active .menu-toggle {border-color:var(--scene-accent)}
body.theme-active .menu-toggle span {background:var(--scene-accent)}
body.theme-active #projetos {color:var(--scene-accent) !important}
body.theme-active .marquee-tech,
body.theme-active .marquee-footer-box {
  background:var(--scene-panel) !important;
  color:var(--scene-accent) !important;
  border-color:var(--scene-border) !important;
}
body.theme-active .container > .block,
body.theme-active .cases-wrapper,
body.theme-active footer {
  border-color:var(--scene-border) !important;
  background:var(--scene-panel) !important;
  color:var(--scene-accent) !important;
}
/* Enquanto há seleção, os cards inativos ficam discretos e desfocados.
   A opacidade não é tão baixa a ponto de desaparecerem por completo. */
body.theme-active .container > .block:not(.is-theme-focus),
body.theme-active .marquee-tech,
body.theme-active .marquee-footer-box,
body.theme-active #projetos,
body.theme-active .cases-wrapper:not(.has-theme-focus) {
  opacity:.17 !important;
  filter:blur(1.8px) !important;
  transition:opacity .42s ease, filter .42s ease, background-color .42s ease !important;
}
body.theme-active .container > .block.is-theme-focus {
  background:var(--scene-accent) !important;
  border-color:var(--scene-accent) !important;
  color:var(--scene-focus-ink) !important;
  opacity:1 !important;
  filter:none !important;
  z-index:12;
}
/* Imagem de perfil: não cobrir fotografia com placa opaca. */
body.theme-active .container > .block.is-theme-focus:has(.profile-img) {background:var(--scene-panel) !important}
/* Hero do usuário continua exibindo o vídeo original no hover. */
body.theme-active .hero.is-theme-focus {background:var(--scene-bg) !important;color:#fff !important}
body.theme-active .hero.is-theme-focus .hero-content {color:#fff !important}
body.theme-active .hero.is-theme-focus .hero-video {opacity:1;filter:grayscale(.1) blur(0);transform:scale(1)}
body.theme-active .hero.is-theme-focus .video-overlay {opacity:1}
/* O rodapé e os controles permanecem vivos na cor do projeto. */
body.theme-active footer {
  opacity:1 !important;
  filter:none !important;
  color:var(--scene-accent) !important;
  background:transparent !important;
  border-color:var(--scene-border) !important;
}
body.theme-active footer .logo-box {background:var(--scene-accent) !important;color:var(--scene-bg) !important}
body.theme-active .social-btn {color:var(--scene-accent) !important;border-color:var(--scene-accent) !important}
body.theme-active .social-btn svg {fill:var(--scene-accent) !important}
body.theme-active .social-btn:hover {background:var(--scene-accent) !important;color:var(--scene-bg) !important}
body.theme-active .social-btn:hover svg {fill:var(--scene-bg) !important}
/* ACORDEÃO ORIGINAL: expande do mesmo jeito; tema afeta apenas a pele. */
body.theme-active .cases-wrapper.has-theme-focus {
  opacity:1 !important; filter:none !important;
  border-color:var(--scene-border) !important;
  background:var(--scene-bg) !important;
}
body.theme-active .cases-wrapper .case-item {
  background:var(--scene-panel) !important;
  border-right-color:var(--scene-border) !important;
  border-bottom-color:var(--scene-border) !important;
  transition:flex .64s cubic-bezier(.23,1,.32,1),background .32s,color .32s,filter .32s,opacity .32s !important;
}
body.theme-active .cases-wrapper.has-theme-focus .case-item:not(.is-theme-focus) {
  opacity:.15 !important;
  filter:blur(2px) !important;
  color:var(--scene-accent) !important;
  background:var(--scene-panel) !important;
}
body.theme-active .cases-wrapper.has-theme-focus .case-item.is-theme-focus {
  opacity:1 !important;
  filter:none !important;
  background:var(--scene-bg) !important;
  color:var(--scene-accent) !important;
  box-shadow:inset 0 0 0 5px var(--scene-accent);
  flex:5;
  z-index:12;
}
body.theme-active .case-item.is-theme-focus .case-img {
  opacity:1 !important;
  filter:grayscale(0) blur(0) !important;
  transform:scale(1) !important;
}
body.theme-active .case-item.is-theme-focus .case-header {color:var(--scene-accent) !important}
body.theme-active .case-item.is-theme-focus .case-title {
  color:var(--scene-accent) !important;
  text-shadow:1px 1px 0 var(--scene-bg),-1px -1px 0 var(--scene-bg);
  writing-mode:horizontal-tb;transform:none;align-self:flex-start;
}
body.theme-active .case-item.is-theme-focus .case-header::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--scene-bg) -25%, transparent 70%);
}
/* Fallback discreto para cases sem JPG: nunca exibir uma fotografia inventada. */
.case-img {background-repeat:no-repeat;background-size:cover;background-position:center;}
/* Animação suave de inversão de tonalidades para menu, mantendo hacker existente. */
body.theme-active header,body.theme-active nav a,
body.theme-active .logo-box,body.theme-active footer {transition:color .32s,background-color .32s,border-color .32s,opacity .32s}
/* Somente no mobile: primeiro toque abre a imagem e define a paleta, segundo visita o case. */
@media(max-width:768px) {
 body.theme-active .cases-wrapper.has-theme-focus .case-item.is-theme-focus {flex:none !important;height:260px;min-height:260px}
 body.theme-active nav.open {background:var(--scene-bg) !important; color:var(--scene-accent) !important}
 body.theme-active nav.open a {color:var(--scene-accent) !important}
 body.theme-active nav.open a:hover {color:var(--scene-bg) !important}
 body.theme-active .menu-toggle[aria-expanded='true'] {border-color:var(--scene-accent) !important}
 body.theme-active .menu-toggle[aria-expanded='true'] span {background:var(--scene-accent) !important}
 body.theme-active .container > .block.is-theme-focus:has(.profile-img) {color:var(--scene-accent) !important}
}
@media(prefers-reduced-motion:reduce){body.theme-active *{transition-duration:.01ms !important}}