/* ==========================================================================
   CASES (capitulos 05 a 09)
   Um componente so, repetido. Trocar o placeholder pela midia real nao
   mexe em nenhuma regra daqui: a moldura ja tem a proporcao e o corte.
   ========================================================================== */

.case { position: relative; padding: var(--s7) 0; overflow: hidden; }

/* o numero gigante no fundo do case */
.case__mark {
  left: auto;
  right: -2%;
  top: 42%;
  transform: translateY(-50%);
  font-size: clamp(140px, 30vw, 520px);
}

.case__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--s6);
  row-gap: var(--s5);
  align-items: start;
}

/* Cabecalho do case: numero e titulo na mesma linha, sobre um fio. */
.case__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-top: var(--s3);
  /* o fio de topo comeca verde e vira cinza: marca o inicio do case sem
     precisar de mais nenhum enfeite */
  background: linear-gradient(90deg,
      var(--accent) 0 clamp(44px, 7vw, 110px),
      var(--rule) 0) top left / 100% 1px no-repeat;
}
.case__n {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--accent);
  flex: 0 0 auto;
}
.case__title { text-transform: uppercase; }

/* Moldura da midia. Recorte que abre conforme o case entra na tela. */
.case__media {
  grid-column: 1;
  --glass-r: 20px;
  overflow: hidden;
}
/* a moldura de vidro some quando a midia real entra */
.case__media:has(img),
.case__media:has(video) { border-color: transparent; }
.case__media img,
.case__media video { transition: transform var(--t-slow) var(--ease); }
.case__media:hover img,
.case__media:hover video { transform: scale(1.02); }

.case__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  align-items: flex-start;
  padding-top: var(--s2);
}

.case__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Entrada da midia: sobe e acende. Recorte animado obriga o navegador a
   repintar a imagem inteira a cada quadro, e o scroll sente. */
.anim-ready .case__media { opacity: 0; transform: translate3d(0, 34px, 0); }