/* Cenas (ilustrações sincronizadas). Tudo escala com a largura da cena (unidades cqw). */

.trilha-corpo[data-vista="cenas"] { padding: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cena-host { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cena-host .cena { height: 100%; width: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 900px) {
  .trilha-corpo[data-vista="cenas"] { display: block; overflow: auto; }
  .cena-host { height: auto; display: block; }
  .cena-host .cena { height: auto; width: 100%; max-height: none; }
}

.cena {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 90;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 14px;
  color: #4a2c1a;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(120% 90% at 8% 0%, #fff8ec 0%, #f7e5d1 55%, #efd3b9 100%);
  box-shadow: inset 0 0 0 1px rgba(143, 74, 42, .18);
  isolation: isolate;
}
.cena::before {
  content: "";
  position: absolute;
  left: -8%; top: 12%;
  width: 34%; height: 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  z-index: 0;
}
.cena::after {
  content: "";
  position: absolute;
  left: -12%; right: -12%; bottom: -16%;
  height: 28%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(#d5dcb6, #bcc89f);
  opacity: .55;
  z-index: 0;
}
.cena.entrando { animation: cena-entra .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cena-entra { from { opacity: 0; transform: translateX(5%); } to { opacity: 1; transform: none; } }

.cena-fita {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: .9cqw 4.5cqw;
  border-radius: 3cqw;
  background: linear-gradient(#df9266, #bb6a40);
  color: #fff4e3;
  font-weight: 800;
  font-size: 3.1cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 .2cqw 0 rgba(90, 40, 15, .35);
  box-shadow: 0 .7cqw 0 #8f4a2a, 0 1.6cqw 2cqw rgba(80, 40, 20, .25);
  z-index: 3;
}

.cena-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.lig-linha {
  fill: none;
  stroke: #b98b6a;
  stroke-width: .75;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s ease .15s;
}
.lig-ponta { fill: #b98b6a; opacity: 0; transition: opacity .3s ease .65s; }
.lig.vis .lig-linha { stroke-dashoffset: 0; }
.lig.vis .lig-ponta { opacity: 1; }

.el {
  --fundo: #f7d9c6; --borda: #c9774e; --sombra: #dca98c;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.3cqw;
  padding: .6cqw 1.5cqw;
  font-size: 2.4cqw;
  line-height: 1.16;
  font-weight: 650;
  color: #4a2c1a;
  background: var(--fundo);
  border: .38cqw solid var(--borda);
  border-radius: 2.4cqw;
  box-shadow: 0 .7cqw 0 var(--sombra), inset 0 .6cqw .9cqw rgba(255, 255, 255, .6);
  opacity: 0;
  transform: translateY(2.2cqw) scale(.94);
  transition: opacity .5s ease var(--atraso, 0s), transform .55s cubic-bezier(.2, .9, .25, 1.25) var(--atraso, 0s), box-shadow .3s ease;
  cursor: pointer;
}
.el.vis { opacity: 1; transform: none; }
.estatico .el, .estatico .lig-linha, .estatico .lig-ponta { transition: none; }

.c-terra { --fundo: #f7d9c6; --borda: #c9774e; --sombra: #dca98c; }
.c-areia { --fundo: #f8ebd0; --borda: #c9a766; --sombra: #e2cc9f; }
.c-salvia { --fundo: #dff0e2; --borda: #6faa82; --sombra: #b4d4bc; }
.c-rosa { --fundo: #fbdfe5; --borda: #d77d95; --sombra: #e9b2c0; }
.c-azul { --fundo: #e0ecf8; --borda: #6f98c9; --sombra: #b4cde6; }

.el .ic { flex: none; width: 6.8cqw; height: 6.8cqw; display: block; }
.el .ic svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .3cqw .3cqw rgba(80, 40, 20, .3)); }
.el .tx { min-width: 0; overflow-wrap: break-word; hyphens: manual; }

.el.vert { flex-direction: column; justify-content: center; text-align: center; gap: .7cqw; padding: 1cqw 1.2cqw; }
.el.vert .ic { width: 9cqw; height: 9cqw; }

.el.vert.grande { font-size: 3.1cqw; }
.el.vert.grande .ic { width: 14cqw; height: 14cqw; }
.el.vert.medio { font-size: 2.6cqw; }
.el.vert.medio .ic { width: 11.5cqw; height: 11.5cqw; }
.el.selo, .el.pilula { text-transform: none; letter-spacing: 0; }

.el.centro {
  --fundo: #d98a60; --borda: #8f4a2a; --sombra: #a65f3a;
  color: #fff4e3;
  font-size: 2.7cqw;
  font-weight: 800;
  text-shadow: 0 .2cqw 0 rgba(90, 40, 15, .35);
}
.el.centro .ic { width: 10cqw; height: 10cqw; }
.el.grupo { font-size: 2.2cqw; font-weight: 800; justify-content: center; text-align: center; }
.el.selo, .el.pilula { justify-content: center; text-align: center; border-radius: 99cqw; padding: .4cqw 1.6cqw; font-size: 2.15cqw; font-weight: 700; }
.el.pilula { font-size: 2.25cqw; line-height: 1.2; }
.el.rotulo { background: none; border: 0; box-shadow: none; justify-content: center; font-size: 2.3cqw; font-style: italic; font-weight: 700; color: #7a4b32; cursor: default; }
.el.vs {
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: #c9774e;
  border-color: #8f4a2a;
  --sombra: #a65f3a;
  color: #fff4e3;
  font-size: 3.4cqw;
  font-weight: 800;
  cursor: default;
}
.el.rotulo-seta {
  --fundo: rgba(255, 244, 227, .9);
  justify-content: center;
  text-align: center;
  padding: .2cqw .6cqw;
  border: 0;
  border-radius: 1cqw;
  box-shadow: none;
  font-size: 1.95cqw;
  font-style: italic;
  font-weight: 650;
  color: #7a4b32;
  cursor: default;
}

.el.ativo {
  z-index: 4;
  transform: scale(1.04);
  box-shadow: 0 0 0 .7cqw #2f6bd7, 0 .7cqw 0 var(--sombra), 0 1.6cqw 2.4cqw rgba(47, 107, 215, .35);
}

@media (prefers-reduced-motion: reduce) {
  .cena.entrando { animation: none; }
  .el, .lig-linha, .lig-ponta { transition: none; }
}