/* GUI de teste do Vision (ver gui-vision.js). */
.gui-vision { position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.gui-vision.ligada { opacity: 1; }

/* o anel que sai do celular na hora da foto */
.gv-anel { position: absolute; left: var(--anel-x); top: var(--anel-y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid rgb(var(--salmon)); box-shadow: 0 0 12px rgba(var(--salmon), .8); opacity: 0; }
.gui-vision.anel .gv-anel { opacity: calc(1 - var(--anel, 0)); transform: scale(calc(1 + var(--anel, 0) * 6)); }

/* o cartão, como um recorte da tela do app */
.gv-card { position: absolute; left: var(--card-x, auto); top: var(--card-y, 0); width: 172px; padding: 9px; border-radius: 14px; background: rgba(11, 12, 15, .88); border: 1px solid rgba(var(--salmon), .32); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s ease, transform .7s var(--suave); }
.gui-vision[data-fase]:not([data-fase=""]) .gv-card { opacity: 1; transform: none; }

.gv-rotulo { display: flex; align-items: center; gap: 7px; margin: 1px 0 8px; color: var(--texto); font: 600 11px/1.2 var(--sans); white-space: nowrap; }
.gv-rotulo b { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--salmon)); color: #1a0f0c; font-size: 9.5px; font-weight: 800; }

.gv-tela { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #000; }
.gv-foto, .gv-grade, .gv-escolha { position: absolute; inset: 0; transition: opacity .35s ease; }
.gv-foto img, .gv-escolha img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gv-grade, .gv-escolha { opacity: 0; }
.gui-vision[data-fase="caminhos"] .gv-foto,
.gui-vision[data-fase="levar"] .gv-foto,
.gui-vision[data-fase="enviado"] .gv-foto { opacity: 0; }
.gui-vision[data-fase="caminhos"] .gv-grade { opacity: 1; }
.gui-vision[data-fase="levar"] .gv-escolha,
.gui-vision[data-fase="enviado"] .gv-escolha { opacity: 1; }

/* mira da câmera */
.gv-mira { position: absolute; inset: 9px; opacity: .9; transition: opacity .2s ease;
  background:
    linear-gradient(#fff, #fff) 0 0 / 12px 1.5px, linear-gradient(#fff, #fff) 0 0 / 1.5px 12px,
    linear-gradient(#fff, #fff) 100% 0 / 12px 1.5px, linear-gradient(#fff, #fff) 100% 0 / 1.5px 12px,
    linear-gradient(#fff, #fff) 0 100% / 12px 1.5px, linear-gradient(#fff, #fff) 0 100% / 1.5px 12px,
    linear-gradient(#fff, #fff) 100% 100% / 12px 1.5px, linear-gradient(#fff, #fff) 100% 100% / 1.5px 12px;
  background-repeat: no-repeat; }
.gui-vision[data-fase="foto"] .gv-mira { animation: gvMira 1.6s ease-in-out infinite; }
.gui-vision[data-fase="flash"] .gv-mira { opacity: 0; }
@keyframes gvMira { 50% { inset: 13px; } }
.gv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.gui-vision[data-fase="flash"] .gv-flash { animation: gvFlash .4s ease-out forwards; }
@keyframes gvFlash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* os quatro caminhos */
.gv-grade { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.gv-grade img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 4px; opacity: var(--entra, 0); transform: scale(calc(.8 + var(--entra, 0) * .2)); outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .18s ease, filter .35s ease; }
.gv-grade img.foco { outline-color: rgb(var(--salmon)); }
.gui-vision.travado .gv-grade img:not(.foco) { filter: brightness(.4) saturate(.5); }

/* rodapé: disparador na foto, botão depois */
.gv-pe { position: relative; display: grid; place-items: center; height: 32px; margin-top: 8px; }
.gv-disparo, .gv-botao { grid-area: 1 / 1; transition: opacity .3s ease, transform .15s ease, background-color .25s ease, color .25s ease; }
.gv-disparo { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 3px rgb(11, 12, 15), inset 0 0 0 20px #fff; }
.gui-vision[data-fase="flash"] .gv-disparo { transform: scale(.8); }
.gv-botao { display: grid; place-items: center; width: 100%; height: 28px; border-radius: 999px; border: 1px solid rgba(var(--salmon), .55); background: rgba(var(--salmon), .12); color: var(--texto); font: 600 10.5px/1 var(--sans); white-space: nowrap; opacity: 0; }
.gv-botao em { grid-area: 1 / 1; font-style: normal; transition: opacity .25s ease; }
.gv-botao em + em { opacity: 0; }
.gui-vision[data-fase="caminhos"] .gv-disparo,
.gui-vision[data-fase="levar"] .gv-disparo,
.gui-vision[data-fase="enviado"] .gv-disparo { opacity: 0; }
.gui-vision[data-fase="caminhos"] .gv-botao { opacity: .35; }
.gui-vision[data-fase="caminhos"].travado .gv-botao,
.gui-vision[data-fase="levar"] .gv-botao { opacity: 1; }
.gui-vision[data-fase="levar"] .gv-botao { animation: gvChama 1s ease-in-out infinite; }
.gui-vision[data-fase="enviado"] .gv-botao { opacity: 1; background: rgb(var(--salmon)); border-color: rgb(var(--salmon)); color: #1a0f0c; }
.gui-vision[data-fase="enviado"] .gv-botao em { opacity: 0; }
.gui-vision[data-fase="enviado"] .gv-botao em + em { opacity: 1; }
@keyframes gvChama { 50% { box-shadow: 0 0 0 4px rgba(var(--salmon), .18); } }

/* os três passos do texto viram a barra de progresso do vídeo */
.programa[data-slug="vision"] .p-passos li { background: linear-gradient(rgb(var(--c)), rgb(var(--c))) no-repeat 0 0 / var(--gv, 0%) 2px; background-origin: border-box; transition: color .3s ease; }
.programa[data-slug="vision"] .p-passos li.gv-agora { color: var(--texto); }

@media (max-width: 760px) {
  .gv-card { width: 132px; padding: 6px; border-radius: 11px; }
  .gv-rotulo { gap: 5px; margin-bottom: 5px; font-size: 9px; letter-spacing: -.01em; }
  .gv-rotulo b { width: 13px; height: 13px; font-size: 8px; }
  .gv-tela { border-radius: 6px; }
  .gv-mira { inset: 6px; }
  .gv-pe { height: 22px; margin-top: 5px; }
  .gv-disparo { width: 18px; height: 18px; border-width: 1.5px; box-shadow: inset 0 0 0 2px rgb(11, 12, 15), inset 0 0 0 20px #fff; }
  .gv-botao { height: 20px; font-size: 7.5px; }
  @keyframes gvMira { 50% { inset: 9px; } }
}