/* Cada bloco usa uma cena completa, relacionada às disciplinas da etapa. */
body .cepi-workspace-item.cepi-block-card {
  --cepi-art-width: 2cm;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-left: calc(var(--cepi-art-width) + 16px);
  border-left: 1px solid color-mix(in srgb, var(--cepi-block-accent) 25%, white);
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--cepi-block-accent) 20%, white),
    color-mix(in srgb, var(--cepi-block-accent) 17%, white) 62%,
    color-mix(in srgb, var(--cepi-block-accent) 15%, white));
}

body .cepi-workspace-item.cepi-block-card::before,
body .cepi-workspace-item.cepi-block-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background-image: var(--cepi-block-scene);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* A cena inteira ocupa o card uma única vez e se apaga, sem desaparecer. */
body .cepi-workspace-item.cepi-block-card::before {
  right: 0;
  width: 100%;
  opacity: .48;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #0007 2cm, #0004 100%);
  mask-image: linear-gradient(to right, #000 0%, #0007 2cm, #0004 100%);
}

/* A faixa mostra o começo da mesma cena, viva e sem distorção. */
body .cepi-workspace-item.cepi-block-card::after {
  width: var(--cepi-art-width);
  background-position: left center;
  background-size: auto 100%;
  border-right: 1px solid #ffffff80;
  box-shadow: 2px 0 8px #243b6212;
}

body .cepi-workspace-item.cepi-block-card > * {
  position: relative;
  z-index: 1;
}

body .cepi-workspace-item.cepi-block-fundamental.cepi-block-1,
body .cepi-workspace-item.cepi-block-medio.cepi-block-1 { --cepi-block-scene: url("media/cepi-block-scenes/portugues.webp"); }
body .cepi-workspace-item.cepi-block-fundamental.cepi-block-2 { --cepi-block-scene: url("media/cepi-block-scenes/ciencias.webp"); }
body .cepi-workspace-item.cepi-block-fundamental.cepi-block-3,
body .cepi-workspace-item.cepi-block-medio.cepi-block-3 { --cepi-block-scene: url("media/cepi-block-scenes/matematica.webp"); }
body .cepi-workspace-item.cepi-block-fundamental.cepi-block-4,
body .cepi-workspace-item.cepi-block-medio.cepi-block-4 { --cepi-block-scene: url("media/cepi-block-scenes/linguas-arte-esporte.webp"); }
body .cepi-workspace-item.cepi-block-fundamental.cepi-block-5,
body .cepi-workspace-item.cepi-block-medio.cepi-block-2 { --cepi-block-scene: url("media/cepi-block-scenes/historia-geografia.webp"); }
body .cepi-workspace-item.cepi-block-fundamental.cepi-block-6 { --cepi-block-scene: url("media/cepi-block-scenes/geografia.webp"); }
body .cepi-workspace-item.cepi-block-medio.cepi-block-5 { --cepi-block-scene: url("media/cepi-block-scenes/fisica-quimica.webp"); }
body .cepi-workspace-item.cepi-block-medio.cepi-block-6 { --cepi-block-scene: url("media/cepi-block-scenes/biologia-sociologia-filosofia.webp"); }
body .cepi-workspace-item.cepi-enem-card {
  --cepi-block-strong: #6950a8;
  --cepi-block-color: #9b8bce;
  --cepi-block-accent: #8b70bd;
  --cepi-block-scene: url("media/cepi-block-scenes/enem.webp");
}

@media (max-width: 700px) {
  body .cepi-workspace-item.cepi-block-card {
    padding-left: calc(var(--cepi-art-width) + 10px);
    padding-right: 10px;
  }
}