/* =========================================================
   HERO — detalhes (2026-11-12) · marcação: index.html #hero
   JS: js/hero.js (verbos, apresentação, rolagem) e js/hero-cena.js (a cidade reage)
   - identidade: monograma, nome e área numa pílula de vidro
   - verbos do título: passar o mouse (ou tocar) acende o verbo e muda a cidade 3D
   - números numa faixa de vidro, convite de rolagem com mouse e atalho da busca
   Vem depois de visual.css e tema-claro.css: sobrepõe só o necessário.
   ========================================================= */
#hero { --hero-acc: #e5a963; --hero-vidro: rgba(255, 255, 255, .07); --hero-linha: rgba(255, 255, 255, .14); --hero-suave: rgba(245, 245, 247, .7); }
body.light-theme #hero { --hero-acc: var(--accent); --hero-vidro: rgba(255, 255, 255, .62); --hero-linha: rgba(19, 32, 30, .12); --hero-suave: rgba(19, 32, 30, .72); }

/* ---------- identidade ---------- */
.city-tag {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(24 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); border-radius: 999px;
  background: var(--hero-vidro); box-shadow: inset 0 0 0 1px var(--hero-linha);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: -.005em; color: var(--hero-ink);
}
.ct-mono {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--hero-acc); color: #0b0b0d; font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .02em;
}
body.light-theme .city-tag { color: var(--hero-ink); }
body.light-theme .ct-mono { color: #fbfaf5; }
.ct-nome { font-weight: 600; }
.ct-sep { width: 1px; height: calc(14 * var(--u)); background: var(--hero-linha); }
.ct-area { color: var(--hero-suave); }

/* ---------- verbos do título ---------- */
.city-copy .hv { display: inline-block; position: relative; pointer-events: auto; transition: color .35s ease, opacity .35s ease;
  animation: hv-entra .7s var(--ease-out) backwards; }
.city-copy .hv:nth-of-type(2) { animation-delay: .08s; }
.city-copy .hv:nth-of-type(3) { animation-delay: .16s; }
@keyframes hv-entra { from { opacity: 0; transform: translateY(.28em); } }
body.is-loading .city-copy .hv { animation-play-state: paused; }
.city-copy.is-apagado .hv { pointer-events: none; }
/* traço que se desenha embaixo do verbo aceso (sem pegar o ponto final) */
.hv::after { content: ""; position: absolute; left: .03em; right: .34em; bottom: .04em; height: max(2px, .045em); border-radius: 99px;
  background: var(--hero-acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
#city-titulo[data-modo] .hv { opacity: .5; }
#city-titulo .hv.is-on { opacity: 1; color: var(--hero-acc); }
.hv.is-on::after { transform: scaleX(1); }

/* ---------- números numa faixa de vidro ---------- */
.city-stats {
  display: inline-flex; justify-content: center; gap: 0; margin-top: calc(40 * var(--u)); padding: calc(6 * var(--u));
  border-radius: calc(20 * var(--u)); background: var(--hero-vidro); box-shadow: inset 0 0 0 1px var(--hero-linha);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.city-stats > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)); text-align: left; }
.city-stats > div + div { box-shadow: inset 1px 0 0 var(--hero-linha); }
.city-stats strong { margin: 0; font-size: calc(28 * var(--u)); line-height: 1; white-space: nowrap; }
.city-stats span { margin: 0; max-width: 8.5em; font-size: calc(12.5 * var(--u)); line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--hero-suave); }
body.light-theme .city-stats strong, body.light-theme .city-stats span { text-shadow: none; }

/* ---------- convite para rolar: um mouse com a rodinha andando ---------- */
.cue-mouse { position: absolute; right: calc(100% + 12px); top: 50%; width: 16px; height: 24px; margin-top: -12px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .75; }
.cue-mouse b { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: currentColor;
  animation: cue-roda 1.9s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes cue-roda { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 75%, 100% { opacity: 0; transform: translateY(8px); } }

/* ---------- atalho da busca (só com mouse e teclado) ---------- */
.city-busca {
  position: absolute; z-index: 2; right: calc(36 * var(--u)); bottom: calc(30 * var(--u)); display: none; align-items: center; gap: 10px;
  height: 38px; padding: 0 8px 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hero-vidro); box-shadow: inset 0 0 0 1px var(--hero-linha); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--hero-ink); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; transition: background-color .2s ease;
}
.city-busca svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.city-busca kbd { font-family: inherit; font-size: 11px; font-weight: 600; padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, .12); color: inherit; }
body.light-theme .city-busca kbd { background: rgba(19, 32, 30, .08); }
.city-busca:focus-visible { outline: 2px solid var(--hero-acc); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .city-busca { display: inline-flex; }
  .city-busca:hover { background: rgba(255, 255, 255, .14); }
  body.light-theme .city-busca:hover { background: rgba(255, 255, 255, .86); }
}

/* aparelho sem folga: vidro sem desfoque */
html.perf-low .city-tag, html.perf-low .city-stats, html.perf-low .city-busca { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 28, 30, .72); }
html.perf-low body.light-theme .city-tag, html.perf-low body.light-theme .city-stats, html.perf-low body.light-theme .city-busca { background: rgba(255, 253, 248, .92); }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .city-tag { gap: 9px; padding: 5px 14px 5px 5px; margin-bottom: 18px; font-size: 13px; }
  .ct-mono { width: 26px; height: 26px; font-size: 10px; }
  .ct-sep, .ct-area { display: none; }
  .city-stats { display: flex; width: 100%; max-width: 360px; margin: 22px auto 0; padding: 4px; border-radius: 16px; }
  .city-stats > div { flex: 1; grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 9px 4px; text-align: center; }
  .city-stats strong { font-size: 20px; }
  .city-stats span { max-width: none; font-size: 10.5px; }
  .cue-mouse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .city-copy .hv { animation: none; }
  .hv, .hv::after { transition: none; }
  .cue-mouse b { animation: none; opacity: 1; }
}

/* =========================================================
   COMPUTADOR (2026-11-12): a hero começa dentro de um monitor
   .city-aparelho é a tela inteira (100vw × 100vh) em medidas locais; o js/hero.js
   aplica translate + scale nela pelo primeiro trecho da rolagem. Em escala 1 a tela
   cobre a janela toda e a moldura, o pé e a mesa saem de cena.
   A moldura é só sombra (box-shadow) em volta da tela: cobre os cantos arredondados
   sem recortar a cena 3D. Com "menos movimento" no sistema não há zoom (classe sem-computador).
   ========================================================= */
#hero.city { height: 520vh; }
#hero.city.sem-computador { height: 420vh; }
#hero { --ap-cor: #0c0d10; --ap-aro: rgba(255, 255, 255, .1); --ap-metal-a: #33363d; --ap-metal-b: #111216; --ap-sombra: rgba(0, 0, 0, .7); --ap-r: 22px; }
body.light-theme #hero { --ap-cor: #f4f5f2; --ap-aro: rgba(19, 32, 30, .14); --ap-metal-a: #f1f2ef; --ap-metal-b: #b9bfb8; --ap-sombra: rgba(19, 32, 30, .28); }

.city-aparelho { position: absolute; inset: 0; transform-origin: 50% 0; }
.ap-tela { position: absolute; inset: 0; overflow: hidden; background: var(--hero-bg); }
.city-scene.no-webgl .ap-tela { background: radial-gradient(ellipse at 60% 75%, rgba(229, 169, 99, .22), transparent 55%), var(--hero-bg); }
body.light-theme .city-scene.no-webgl .ap-tela { background: radial-gradient(ellipse at 60% 75%, rgba(18, 150, 140, .2), transparent 55%), radial-gradient(ellipse at 20% 30%, rgba(235, 165, 70, .2), transparent 50%), var(--hero-bg); }

/* moldura: borda escura, um aro de luz e a sombra do monitor sobre a mesa; um reflexo leve no vidro */
.ap-moldura {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: var(--ap-r);
  box-shadow: 0 0 0 var(--ap-b, 20px) var(--ap-cor), 0 0 0 calc(var(--ap-b, 20px) + 1.5px) var(--ap-aro), 0 60px 140px -30px var(--ap-sombra);
  background: linear-gradient(118deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 36%);
}
.ap-camera { position: absolute; left: 50%; top: calc(var(--ap-b, 20px) / -2); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #1a1c21; box-shadow: inset 0 0 0 2px #2b2e35; }
body.light-theme .ap-camera { background: #c3c8c1; box-shadow: inset 0 0 0 2px #d6dad4; }

/* pé do monitor: haste em trapézio e base, em metal escovado */
.ap-pe { position: absolute; left: 35%; width: 30%; top: calc(100% + var(--ap-b, 20px)); height: 19%; pointer-events: none; }
.ap-haste { position: absolute; left: 33%; right: 33%; top: 0; bottom: 13%;
  background: linear-gradient(90deg, var(--ap-metal-b), var(--ap-metal-a) 48%, var(--ap-metal-b));
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.ap-base { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, var(--ap-metal-a), var(--ap-metal-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 40px -12px var(--ap-sombra); }

/* mesa e a luz da tela no ambiente (fica parada; o JS põe a linha da mesa embaixo da base) */
.city-mesa {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(64% 56% at 50% 44%, rgba(95, 224, 216, .11), transparent 72%),
    radial-gradient(44% 18% at 50% var(--mesa-y, 92%), rgba(229, 169, 99, .14), transparent 72%),
    linear-gradient(to bottom, transparent var(--mesa-y, 92%), rgba(255, 255, 255, .05) var(--mesa-y, 92%), rgba(255, 255, 255, 0) 100%);
}
body.light-theme .city-mesa {
  background:
    radial-gradient(48% 40% at 50% 42%, rgba(18, 150, 140, .1), transparent 72%),
    radial-gradient(44% 18% at 50% var(--mesa-y, 92%), rgba(235, 165, 70, .14), transparent 72%),
    linear-gradient(to bottom, transparent var(--mesa-y, 92%), rgba(19, 32, 30, .06) var(--mesa-y, 92%), rgba(19, 32, 30, 0) 100%);
}

/* em pé (celular): vira uma tela de mão, sem pé, com cantos mais redondos */
.city-aparelho.is-retrato { --ap-r: 38px; }
.city-aparelho.is-retrato .ap-pe { display: none; }

/* dentro da cidade (ou sem zoom): moldura, pé e mesa não existem mais */
.city-aparelho.is-dentro .ap-moldura, .city-aparelho.is-dentro .ap-pe, .city-mesa.is-fora { visibility: hidden; }
#hero.sem-computador .ap-moldura, #hero.sem-computador .ap-pe, #hero.sem-computador .city-mesa { display: none; }