/* Janela de site (vídeo ou print, linha do tempo, convite) e palco 3D de sites.
   Saiu de trabalhos.css para servir ao componente PalcoSites em /trabalhos e na página de sites.
   `@scope` prende tudo à página de trabalhos, ao palco, à vitrine de redes (os reels usam o mesmo
   convite e o mesmo cromo de player) e ao carrossel de sites da home: fora deles o site segue com o
   tema normal. */
@scope (.pagina-trabalhos, .palco-sites, .vitrine-redes, .carrossel-sites) {

/* A janela tem a proporção das gravações (1170×970). A capa (primeiro quadro) fica por baixo e o
   vídeo só aparece depois de tocar o primeiro quadro, para não piscar preto enquanto carrega. */
.janela{position:relative;aspect-ratio:1170/970;overflow:hidden;background:#fff}
.janela > img,.janela > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.janela > video{opacity:0;transition:opacity .25s}
.pronto > video{opacity:1}
/* Site sem vídeo: o script desce o print da página inteira (object-position) no mesmo relógio do vídeo. */
.janela:focus-visible{outline:3px solid var(--color-dourado);outline-offset:-3px}
/* Linha do tempo no rodapé da janela: com o mouse em cima, o vídeo segue o ponteiro; no toque, arrasta. */
.linha-tempo{position:absolute;left:0;right:0;bottom:0;z-index:4;height:26px;display:flex;align-items:flex-end;
  cursor:ew-resize;touch-action:none}
.lt-barra{position:relative;display:block;width:100%;height:4px;background:color-mix(in srgb, var(--color-abissal) 35%, transparent);transition:height .15s}
.lt-feito{position:absolute;inset:0;background:var(--color-dourado);transform-origin:left center;transform:scaleX(var(--p,0))}
/* `clamp`: nas pontas a bolinha ficaria metade fora da janela, cortada pelo overflow. */
.lt-cabeca{position:absolute;top:50%;left:clamp(8px, calc(var(--p,0) * 100%), calc(100% - 8px));width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--color-dourado),0 2px 8px color-mix(in srgb, var(--color-abissal) 50%, transparent);
  opacity:0;transition:opacity .15s}
.escovando .lt-barra{height:8px}
.escovando .lt-cabeca{opacity:1}
/* Só com mouse: no toque, o :hover gruda depois do toque e deixava a bolinha à mostra parada. */
@media (hover:hover) and (pointer:fine){
  .janela:hover .lt-barra{height:8px}
  .janela:hover .lt-cabeca{opacity:1}
}
@media (hover:none),(pointer:coarse){
  .lt-barra{height:6px}
  .rodando .lt-cabeca{opacity:1}
}
/* Convite na base: mouse rolando no desktop, toque pulsando no celular. Some enquanto roda. */
.convite{position:absolute;left:50%;bottom:38px;z-index:3;display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 11px;border-radius:100px;background:color-mix(in srgb, var(--color-abissal) 80%, transparent);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--font-small);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--color-abissal) 85%, transparent);pointer-events:none;
  transform:translateX(-50%);animation:convite 2.6s ease-in-out infinite;transition:opacity .3s}
@keyframes convite{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.rodando .convite,.voltando .convite{opacity:0}
.ic-mouse{position:relative;flex:0 0 auto;width:14px;height:21px;border:1.6px solid currentColor;border-radius:8px}
.ic-mouse i{position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;border-radius:2px;
  background:var(--color-dourado);animation:roda 1.5s ease-in-out infinite}
@keyframes roda{0%{transform:translateY(0);opacity:1}70%{transform:translateY(6px);opacity:0}100%{opacity:0}}
.ic-toque{position:relative;flex:0 0 auto;width:18px;height:18px}
.ic-toque::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--color-dourado)}
.ic-toque i{position:absolute;inset:0;border-radius:50%;border:1.6px solid var(--color-dourado);animation:pulso 1.6s ease-out infinite}
@keyframes pulso{from{transform:scale(.4);opacity:1}to{transform:scale(1.2);opacity:0}}
.ic-toque,.t-toque{display:none}
@media (hover:none),(pointer:coarse){
  .ic-mouse,.t-mouse{display:none}
  .ic-toque,.t-toque{display:inline-block}
}

/* ---------- 01C SITES: palco 3D (modelo 1 de /root/quilha-carrosseis.html), com o mesmo player ---------- */
.palco3d{position:relative;container-type:inline-size}
.p3-palco,.p3-legenda{--w:min(560px,72cqw)}
/* Em tela média o palco fica um pouco mais baixo (o teto de --w cai de 560 para 500);
   acima de 1700px de viewport segue em 560, e a regra de <=680px continua mandando abaixo dela. */
@media (max-width:1700px){ .p3-palco,.p3-legenda{--w:min(500px,72cqw)} }
.p3-palco{position:relative;height:calc(var(--w) * 970 / 1170 + 36px);perspective:1500px;perspective-origin:50% 45%;
  touch-action:pan-y;border-radius:12px}
.p3-palco:focus-visible{outline:2px solid var(--color-dourado);outline-offset:10px}
.p3-slide{position:absolute;top:0;left:50%;width:var(--w);margin-left:calc(var(--w) / -2);border-radius:16px;overflow:hidden;
  background:var(--color-profundo);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 70px -40px rgba(0,0,0,.85);cursor:pointer;
  transition:transform .64s cubic-bezier(.22,.9,.26,1),opacity .5s ease}
/* Antes do script posicionar, só o primeiro aparece (sem pilha de slides no primeiro quadro). */
.p3-slide:not(.on){opacity:0}
.p3-slide.on{z-index:30;cursor:default}
.p3-slide::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb, var(--color-abissal) 5%, transparent),color-mix(in srgb, var(--color-abissal) 50%, transparent));transition:opacity .5s}
.p3-slide.on::after{opacity:0}
/* Nome sobre a base da janela, acima da linha do tempo; some enquanto o site roda. */
.p3-nome{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:40px 18px 34px;background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--color-quase-preto) 88%, transparent));pointer-events:none;
  transition:opacity .3s}
.p3-nome b{font-family:var(--font-heading);font-size:16px;color:#fff}
.p3-nome span{font-family:var(--font-small);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-maresia)}
.p3-slide:has(.rodando) .p3-nome,.p3-slide:has(.escovando) .p3-nome{opacity:0}
.p3-brilho{position:absolute;left:50%;bottom:0;width:62%;height:36px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb, var(--color-dourado) 34%, transparent),transparent 70%);filter:blur(14px)}
.p3-legenda{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:min(760px,100%);margin:34px auto 0}
.p3-info b{display:block;font-family:var(--font-heading);font-size:19px;color:#fff}
.p3-info p{margin-top:4px;max-width:48ch;font-size:14px;color:var(--color-maresia)}
.p3-dominio{display:inline-block;margin-top:10px;padding-bottom:2px;border-bottom:1px solid color-mix(in srgb, var(--color-dourado-claro) 35%, transparent);
  font-family:var(--font-small);font-size:11.5px;letter-spacing:.06em;color:var(--color-dourado-claro)}
a.p3-dominio:hover{color:#fff;border-color:#fff}
.p3-controles{display:flex;align-items:center;gap:18px}
.p3-pontos{display:flex;align-items:center;gap:8px}
/* Ponto do site ativo vira pílula e enche com o progresso. */
.p3-pontos button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:100px;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.24);transition:width .25s,background .25s}
.p3-pontos button.on{width:30px;background:color-mix(in srgb, var(--color-dourado) 30%, transparent)}
.p3-pontos button i{position:absolute;inset:0;background:var(--color-dourado);transform-origin:left center;transform:scaleX(var(--p,0))}
.p3-pontos button:focus-visible,.p3-seta:focus-visible{outline:2px solid var(--color-dourado);outline-offset:3px}
.p3-seta{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  color:var(--color-espuma);font-size:16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.p3-seta:hover{background:var(--color-dourado);border-color:var(--color-dourado);color:var(--color-profundo)}
@media (max-width:680px){
  .p3-palco,.p3-legenda{--w:84cqw}
  /* No slide pequeno, a faixa do nome cobria metade do site; a legenda embaixo já diz qual é. */
  .p3-nome{display:none}
  .p3-legenda{flex-direction:column;align-items:stretch}
  .p3-controles{justify-content:space-between}
}

/* Movimento reduzido: o convite e os ícones param (o palco já não toca sozinho pelo script). */
@media (prefers-reduced-motion:reduce){
  .convite,.ic-mouse i,.ic-toque i{animation:none}
}

}