/* A silhueta e a luz ficam atrás da navegação, só no interior com os ícones aprovados. */
body[data-estado="interior"][data-icones] .veu {
  --posicao-silhueta: 76% 43%;
  background: #101112;
  opacity: 1;
}

body[data-estado="interior"][data-icones] .veu::before,
body[data-estado="interior"][data-icones] .veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/silhueta-rise.jpg") var(--posicao-silhueta) / cover no-repeat;
  pointer-events: none;
}

/* Os caracteres do ombro e do fundo recebem uma variação lenta de luz. */
body[data-estado="interior"][data-icones] .veu::before { opacity: .85; }
body[data-estado="interior"][data-icones] .veu::after {
  mask-image: radial-gradient(ellipse 13% 20% at 73% 65%, #000 10%, transparent 100%),
              radial-gradient(ellipse 7% 24% at 29% 55%, #000 8%, transparent 100%);
  filter: brightness(1.38);
  animation: luz-do-portfolio 11s ease-in-out infinite alternate;
  opacity: 0;
}
@keyframes luz-do-portfolio { from { opacity: 0; } to { opacity: .62; } }
body[data-movimento="off"][data-estado="interior"][data-icones] .veu::after { animation-play-state: paused; }

body[data-icones] .tela-interior .gaveta {
  background: linear-gradient(160deg, rgba(17,19,20,.24), rgba(10,12,14,.50));
}
body[data-icones] .tela-interior .gaveta:is(:focus-visible,:hover,.ativa) {
  background: linear-gradient(150deg, rgba(68,54,22,.43), rgba(14,16,18,.52));
}
body[data-icones] .tela-interior .g-palco { background-color: transparent; mix-blend-mode: screen; }

@media (max-width: 650px) {
  body[data-estado="interior"][data-icones] .veu { --posicao-silhueta: 73% center; }
  body[data-estado="interior"][data-icones] .veu::before { opacity: .64; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-estado="interior"][data-icones] .veu::after { animation: none; }
}
@media (forced-colors: active) {
  body[data-estado="interior"][data-icones] .veu { display: none; }
}