/* =========================================================
   HERO — giro 3D do monitor (2026-11-13) · JS: js/hero.js (passoGiro e zoom)
   O monitor fica em perspectiva: entra girando, balança devagar, inclina para o mouse
   e, ao rolar, gira de frente enquanto o zoom entra na tela.
   O reflexo do vidro (--brilho) corre conforme o ângulo.
   ========================================================= */
#hero .city-scene { perspective: 1700px; perspective-origin: 50% 38%; }
#hero .city-aparelho { will-change: transform, opacity; backface-visibility: hidden; }
#hero .city-aparelho.is-dentro { will-change: auto; }

/* reflexo: uma faixa de luz que atravessa o vidro conforme o monitor gira */
#hero .ap-moldura {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--brilho, 50%) - 26%), rgba(255, 255, 255, .1) var(--brilho, 50%), rgba(255, 255, 255, 0) calc(var(--brilho, 50%) + 16%)),
    linear-gradient(118deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 36%);
}
body.light-theme #hero .ap-moldura {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--brilho, 50%) - 26%), rgba(255, 255, 255, .28) var(--brilho, 50%), rgba(255, 255, 255, 0) calc(var(--brilho, 50%) + 16%)),
    linear-gradient(118deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 36%);
}
/* a luz da tela no ambiente acompanha um pouco mais forte, para o giro "iluminar" a mesa */
#hero .city-mesa { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { #hero .city-scene { perspective: none; } }