/* ==========================================================
   OBRAS (CONCLUÍDAS E EM ANDAMENTO): vitrine com sequência automática
   Usa as variáveis já existentes no style.css do site
   (--red, --red-neon, --red-dim, --branco, --muted, --borda,
    --borda-forte, --glass, --bg-2, --display, --mono)
   ========================================================== */

.exe{
  --exe-dur:5000ms;
  --exe-ease:cubic-bezier(.77,0,.18,1);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,64px);
  margin-top:54px;
  align-items:stretch;
  max-width:80%;margin-inline:auto; /* vitrine 20% menor no desktop */
}

/* ---------- palco (foto grande) ---------- */
.exe-stage{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--borda);
  touch-action:pan-y;
  user-select:none;
}
.exe-slide{position:absolute;inset:0;margin:0;visibility:hidden}
.exe-slide.is-prev{visibility:visible;z-index:1}
.exe-slide.is-active{visibility:visible;z-index:2}
.exe-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* troca: painel de vidro "entrando" na fachada, com a linha vermelha no encaixe */
.exe-slide.is-active.is-anim{animation:exeWipe .95s var(--exe-ease) both}
.exe-slide.is-active.is-anim[data-dir="back"]{animation-name:exeWipeBack}
.exe-slide.is-active.is-anim::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--red-neon);box-shadow:0 0 18px var(--red-neon),0 0 4px var(--red-neon);
  animation:exeEdge .95s var(--exe-ease) both;pointer-events:none
}
.exe-slide.is-active.is-anim[data-dir="back"]::after{animation-name:exeEdgeBack}
@keyframes exeWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes exeWipeBack{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes exeEdge{0%{left:100%;opacity:1}80%{opacity:1}100%{left:0;opacity:0}}
@keyframes exeEdgeBack{0%{left:0;opacity:1}80%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}

/* aproximação lenta enquanto a foto está em cena */
.exe-slide.is-active img{animation:exeKen calc(var(--exe-dur) + 1s) linear both}
@keyframes exeKen{from{transform:scale(1.08)}to{transform:scale(1)}}

.exe-slide .idx{
  position:absolute;top:16px;left:16px;z-index:3;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--red-neon);
  background:rgba(255,255,255,.85);border:1px solid var(--red-dim);padding:5px 10px;backdrop-filter:blur(6px)
}
:root[data-theme="dark"] .exe-slide .idx{background:rgba(10,13,22,.75)}

/* legenda fica no HTML (SEO e leitores de tela), o painel lateral exibe a ativa */
.exe-slide figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* selo "em execução" fixo no palco */
.exe-status{
  position:absolute;left:16px;bottom:16px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(17,26,61,.78);border:1px solid rgba(255,255,255,.18);padding:7px 12px;backdrop-filter:blur(6px)
}
.exe-status i{width:7px;height:7px;border-radius:50%;background:var(--red-neon);box-shadow:0 0 10px var(--red-neon);animation:exePulse 1.6s ease-in-out infinite}
@keyframes exePulse{50%{opacity:.25}}
/* variante entregue: ponto fixo, sem pulsar */
.exe-status--done i{animation:none;background:#fff;box-shadow:none}

/* construtora no canto inferior direito da foto */
.exe-cons{
  position:absolute;right:16px;bottom:16px;z-index:4;max-width:45%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(10,13,22,.42);padding:7px 10px;backdrop-filter:blur(6px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ---------- painel lateral ---------- */
.exe-side{display:flex;flex-direction:column;gap:26px;min-width:0}
.exe-meta{margin-bottom:auto}
.exe-count{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-family:var(--mono);color:var(--muted);font-size:13px;letter-spacing:.12em}
.exe-count b{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--red-neon);letter-spacing:0;font-variant-numeric:tabular-nums}
.exe-name{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,44px);line-height:1.05;margin:0 0 10px;color:var(--branco);
  min-height:2.1em;display:flex;align-items:flex-end
}
.exe-client{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.exe-client b{color:var(--red-neon);font-weight:400}

.exe-progress{height:2px;background:var(--borda-forte);overflow:hidden;margin-bottom:18px}
.exe-progress i{display:block;height:100%;background:var(--red-neon);transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px var(--red-neon)}
.exe-progress.run i{animation:exeBar var(--exe-dur) linear forwards}
@keyframes exeBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.exe-ctrl{display:flex;gap:10px;align-items:center}
.exe-ctrl button{
  width:50px;height:50px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--borda-forte);color:var(--branco);cursor:pointer;transition:.3s
}
.exe-ctrl button:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 24px rgba(224,38,38,.4)}
.exe-ctrl button:focus-visible,.exe-thumb:focus-visible{outline:2px solid var(--red-neon);outline-offset:3px}
.exe-ctrl svg{width:18px;height:18px;fill:currentColor}
.exe-hint{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* botão pausar/reproduzir: troca ícone e rótulo pelo estado */
.exe-toggle .ic-play,.exe-toggle .t-play{display:none}
.exe.is-paused .exe-toggle .ic-play,.exe.is-paused .exe-toggle .t-play{display:block}
.exe.is-paused .exe-toggle .ic-pause,.exe.is-paused .exe-toggle .t-pause{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- miniaturas: mostram de cara que existem várias obras ---------- */
.exe-thumbs{display:grid;grid-template-columns:repeat(var(--exe-cols,7),minmax(0,1fr));gap:8px}
.exe-thumb{
  position:relative;aspect-ratio:3/4;padding:0;border:1px solid var(--borda);background:var(--bg-2);
  overflow:hidden;cursor:pointer;transition:border-color .3s
}
.exe-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.7);opacity:.6;transition:.35s}
.exe-thumb:hover img{filter:none;opacity:1}
.exe-thumb[aria-current="true"]{border-color:var(--red-neon)}
.exe-thumb[aria-current="true"] img{filter:none;opacity:1}
.exe-thumb i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red-neon);transform:scaleX(0);transform-origin:left}
.exe-thumb.run i{animation:exeBar var(--exe-dur) linear forwards}
/* construtora na miniatura: caixa sólida no rodapé, texto normal para facilitar a leitura */
.exe-thumb-cons{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:4px 1px 5px;text-align:center;pointer-events:none;
  font-size:8.5px;font-weight:400;line-height:1.15;letter-spacing:0;color:#fff;
  background:rgba(17,26,61,.92)
}
.exe-thumb i{z-index:2}
.exe-thumb[aria-current="true"] .exe-thumb-cons{background:var(--red)}

/* pausa (mouse em cima, foco por teclado, fora da tela ou botão) */
.exe.is-held .exe-progress i,
.exe.is-held .exe-thumb i,
.exe.is-held .exe-slide.is-active img{animation-play-state:paused}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .exe{grid-template-columns:1fr;gap:14px;margin-top:24px;max-width:none}
  /* foto 20% menor e limitada pela altura da tela: vitrine inteira cabe sem rolar */
  .exe-stage{aspect-ratio:4/5;max-height:none;margin-inline:auto;
    width:min(80%,calc((100vh - 340px) * .8));width:min(80%,calc((100svh - 340px) * .8))}
  .exe-side{gap:12px}
  .exe-meta{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
  .exe-count{grid-row:1 / 3;margin:0;flex-direction:column;gap:2px;align-items:center}
  .exe-count b{font-size:30px}
  .exe-count span{font-size:11px}
  .exe-name{min-height:0;font-size:clamp(20px,5.8vw,26px);margin:0 0 4px}
  .exe-progress{margin-bottom:10px}
  .exe-ctrl button{width:42px;height:42px}
  .exe-thumbs{
    display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-right:calc(var(--exe-bleed,20px) * -1);padding-right:var(--exe-bleed,20px)
  }
  .exe-thumbs::-webkit-scrollbar{display:none}
  .exe-thumb{flex:0 0 56px;scroll-snap-align:start}
  .exe-thumb-cons{font-size:8px;padding:3px 2px 4px}
  .exe-hint{display:none}
  .exe-cons{right:10px;top:10px;bottom:auto;max-width:58%;font-size:9.5px;letter-spacing:.06em;padding:6px 8px} /* no alto: no rodapé esbarraria no selo "Em execução" */
}

/* ---------- movimento reduzido: sem autoplay, sem cortina, só troca ---------- */
@media (prefers-reduced-motion:reduce){
  .exe-slide.is-active.is-anim,
  .exe-slide.is-active.is-anim::after,
  .exe-slide.is-active img,
  .exe-status i{animation:none}
}