/* ==========================================================================
   04 / FEITO PARA A DELOITTE  (o visualizador)
   Nada de grade de cards. Aqui e um console: a lista numerada de um lado,
   a peca grande do outro. O scroll troca a peca ativa, e clicar em um item
   da lista leva direto para ele.
   ========================================================================== */

/* grade em vez de coluna flex: a cabeca ocupa o que precisa e o
   visualizador fica com todo o resto. Assim nada transborda do quadro,
   em nenhuma altura de tela. */
.scene--made .stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 2.4vh, 32px);
  padding-block: clamp(58px, 8vh, 92px);
}

.made__head { flex: 0 0 auto; }
.made__title {
  font-size: clamp(26px, 3.8vw, 56px);
  max-width: 20ch;
  margin-bottom: var(--s2);
}
.made__head .body { margin-top: var(--s2); }

.viewer {
  display: grid;
  grid-template-columns: minmax(210px, 28%) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

/* ------------------------------------------------------------------
   A lista
   ------------------------------------------------------------------ */
.viewer__index {
  display: grid;
  gap: 2px;
  align-content: center;
  border-left: 1px solid var(--rule-soft);
  min-height: 0;
  overflow: hidden;
}

.viewer__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 9px 0 9px 16px;
  cursor: pointer;
  color: var(--fg-3);
  transition: color var(--t-fast) var(--ease-soft);
}
.viewer__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-glow);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-mid) var(--ease);
}
.viewer__item:hover { color: var(--fg-2); }

.viewer__n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  line-height: 1.6;
}
.viewer__t {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.viewer__d {
  grid-column: 2;
  font-size: clamp(11px, .88vw, 13px);
  line-height: 1.5;
  color: var(--fg-3);
  max-width: 40ch;
  display: none;
}

.viewer__item.is-on { color: var(--fg); }
.viewer__item.is-on::before { transform: scaleY(1); }
.viewer__item.is-on .viewer__n { color: var(--accent-glow); }
.viewer__item.is-on .viewer__d { display: block; }

/* ------------------------------------------------------------------
   O palco
   ------------------------------------------------------------------ */
.viewer__stage {
  position: relative;
  height: 100%;
  min-height: 0;
  padding-bottom: 26px;   /* espaco para a etiqueta embaixo */
}

.viewer__slide {
  position: absolute;
  inset: 0 0 26px 0;   /* a faixa de baixo e da etiqueta */
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-soft), visibility var(--t-mid);
}
.viewer__slide.is-on { opacity: 1; visibility: visible; }

/* Sem JavaScript o console nao tem quem troque a peca ativa. Entao ele
   deixa de ser console e vira lista: as sete pecas uma embaixo da outra,
   todas visiveis, cada uma com a legenda dela. Nada de conteudo escondido
   atras de um script que nao carregou. */
html.anim-off .scene--made .stage { display: block; height: auto; }
html.anim-off .viewer { grid-template-columns: 1fr; height: auto; }
html.anim-off .viewer__index { display: none; }
html.anim-off .viewer__stage {
  height: auto;
  padding-bottom: 0;
  display: grid;
  gap: var(--s5);
}
html.anim-off .viewer__stage::after { display: none; }
html.anim-off .viewer__slide {
  position: static;
  inset: auto;
  opacity: 1;
  visibility: visible;
  display: block;
}
html.anim-off .viewer__frame {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
}
html.anim-off .viewer__frame img,
html.anim-off .viewer__frame video {
  position: static;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
}

/* a peca sempre cabe: a altura manda, a largura acompanha, e a moldura
   se ajusta ao formato de cada peca (vertical, quadrada ou deitada) */
.viewer__frame img,
.viewer__frame video {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* A PECA NUNCA E CORTADA.
   O palco e uma tela de proporcao fixa e cada material aparece inteiro
   dentro dela, por contain. Vertical, quadrado ou deitado: entra todo.
   A moldura chanfrada fica no palco, nao na peca. */
.viewer__frame {
  position: absolute;
  inset: 0;
  height: auto;
  max-width: none;
  padding: 0;
  display: block;
}
.viewer__frame img,
.viewer__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.viewer__stage::after {
  content: "";
  position: absolute;
  inset: 0 0 26px 0;
  border: 1px solid var(--rule);
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  pointer-events: none;
}

/* o card do material que vive fora do site (o Powtoon) */
.viewer__frame--link { display: grid; place-items: center; }
.viewer__linkcard {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(24px, 3vw, 44px);
  min-width: min(90%, 420px);
}
.viewer__linkcard .mono {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-glow);
}
.viewer__linktitle {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* botao de play sobre o video */
.viewer__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(5, 8, 10, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  transition: border-color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
.viewer__play:hover { border-color: var(--accent-glow); background: rgba(10, 30, 12, .6); }
.viewer__slide.is-playing .viewer__play { display: none; }

.viewer__tag {
  position: absolute;
  left: 0;
  bottom: -24px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ==========================================================================
   MOCKUP AO VIVO
   Os cases de site e landing entram dentro de uma janela de navegador, com
   a pagina de verdade rodando em iframe. Nao e print: e o site no ar.
   O quadro nao captura clique, entao rolar por cima continua rolando a
   pagina. Para navegar de verdade existe o botao VER NO AR.
   ========================================================================== */
.mockup {
  position: relative;
  margin: 0;
  background: rgba(5, 8, 10, .6);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.mockup__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, .04);
}
.mockup__dots { display: inline-flex; gap: 6px; }
.mockup__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.mockup__dots i:first-child { background: rgba(126, 240, 74, .55); }
.mockup__url {
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup__screen {
  position: relative;
  aspect-ratio: var(--mk-ratio, 16 / 10);
  overflow: hidden;
  background: #0b0f0d;
}
.mockup__screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mk-w, 1440px);
  height: var(--mk-h, 900px);
  border: 0;
  transform: scale(var(--mk-scale, .42));
  transform-origin: top left;
  pointer-events: none;
}
/* O print estatico, quando existir */
.mockup__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* O cartao de espera. A pagina ao vivo entra sozinha quando o case chega
   perto da tela; ate ela pintar, e este cartao que ocupa a moldura. Assim
   nada fica vazio e so uma pagina externa vive por vez. */
.mockup__poster {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: var(--s4) var(--s3);
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(71,238,1,.07), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.mockup__name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--fg);
}
.mockup__sub {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* a linha de espera, com o ponto verde piscando enquanto a pagina vem */
.mockup__wait {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-soft);
}
.mockup__wait i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: mkPulse 1.2s var(--ease-soft) infinite;
}
@keyframes mkPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.mockup.is-live .mockup__wait,
.laptop.is-live .mockup__wait { opacity: 1; }

/* quando a pagina termina de pintar, o cartao sai por cima dela */
.mockup__poster,
.laptop .mockup__poster {
  z-index: 2;
  transition: opacity var(--t-slow) var(--ease-soft);
}
.mockup.is-ready .mockup__poster,
.laptop.is-ready .mockup__poster { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mockup__wait i { animation: none; opacity: .7; }
}

/* ==========================================================================
   PAINEL DE ACERVO (o case sem iframe)
   ========================================================================== */
.stack {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
}
.stack li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  background: rgba(5, 8, 10, .55);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-2);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.stack li:hover { background: rgba(126, 240, 74, .06); color: var(--fg); }
.stack li b { color: var(--accent-glow); font-weight: 500; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 900px) {
  /* No celular a lista inteira nao cabe do lado da peca. Entao a lista
     vira legenda: so o item ativo aparece, embaixo da peca, com numero,
     titulo e descricao. O scroll continua trocando a peca. */
  .viewer {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
  }
  .viewer__stage { order: -1; min-height: 0; }
  .viewer__index {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding-top: 12px;
    gap: 0;
    overflow: visible;
  }
  .viewer__item { display: none; padding: 0 0 0 12px; }
  .viewer__item.is-on { display: grid; }
  .viewer__item::before { left: 0; }
  .viewer__d { display: block; max-width: none; }
  .viewer__t { font-size: 15px; }
  .viewer__tag { display: none; }
}

@media (max-width: 760px) {
  .mockup__screen { --mk-ratio: 4 / 3; }
  .scene--made .stage { gap: 14px; }
  .made__title { max-width: 100%; }
}