/* Site da Digging · as cenas de movimento (transformar, redemoinho, desabrochar, roda, linha, vira-fundo, preencher) */

/* toda cena: faixa alta; o que se vê fica preso (sticky) uma tela inteira */
.lab-cena { position: relative; height: 320vh; }
.lab-cena .fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.lab-cena .palco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* zona protegida do texto: nada entra nela */
.frases { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 760px); min-height: 40vh; display: grid; place-items: center; text-align: center; }
.frase { grid-area: 1 / 1; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.22; font-weight: 700; font-synthesis: weight; opacity: 0; visibility: hidden; will-change: transform, opacity; text-wrap: balance; }
.frase.sempre { opacity: 1; visibility: visible; }
.frase .rotulo { display: block; font-size: .875rem; font-weight: 400; margin-bottom: var(--e2); }

.transformar { background: var(--dg-ameixa); color: #fff; }
.transformar .rotulo, .redemoinho .rotulo { color: var(--dg-mel); }
.redemoinho { background: var(--dg-creme); color: var(--dg-ameixa); }
.redemoinho .rotulo { color: var(--dg-framboesa); }

/* desabrochar */
.desabrochar { background: var(--dg-creme); color: var(--dg-ameixa); height: 260vh; }
.flor { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 980px); display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 820px) { .flor { grid-template-columns: 1.1fr 1fr; } }
.flor svg { width: 100%; height: auto; max-height: 70vh; overflow: visible; }
.flor svg g { transform-box: fill-box; }
.petala-textos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.petala-texto { opacity: 0; will-change: opacity, transform; }
.petala-texto b { display: block; font-size: var(--subtitulo); line-height: 1.15; }
.petala-texto span { display: block; margin-top: 4px; }

/* roda */
.roda { background: var(--dg-ameixa); color: #fff; }
.palco-roda { width: min(92vw, 78vh); height: auto; position: relative; z-index: 2; font-family: var(--fonte); overflow: visible; }
.roda-rotulo { fill: #fff; font-size: 54px; font-weight: 700; }
.roda-centro text { fill: #fff; font-size: 30px; }
@media (max-width: 600px) { .roda-rotulo { font-size: 66px; } .roda-centro text { font-size: 38px; } }

/* linha */
.linha { background: var(--dg-creme); color: var(--dg-ameixa); }
.palco-linha { position: absolute; z-index: 0; right: -6%; top: 50%; transform: translateY(-50%); height: 94vh; width: auto; opacity: .9; }
.linha .frases { justify-self: start; margin-left: var(--gutter); text-align: left; place-items: center start; width: min(100% - 2 * var(--gutter), 520px); }
.linha .rotulo { color: var(--dg-framboesa); }
@media (max-width: 820px) { .palco-linha { right: -30%; height: 70vh; top: 58%; opacity: .55; } .linha .frases { align-self: start; margin-top: calc(var(--menu-altura) + var(--e4)); } }

/* vira fundo */
.vira-fundo { background: var(--dg-creme); color: var(--dg-ameixa); }
.vira-fundo .frase.antes { opacity: 1; visibility: visible; }
.vira-fundo .frase.depois { opacity: 0; visibility: visible; will-change: opacity, transform; }
.vira-fundo .rotulo { color: var(--dg-ameixa); }

/* preencher e contar */
.preencher { background: var(--dg-creme); color: var(--dg-ameixa); height: 240vh; }
.dado { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1080px); display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 820px) { .dado { grid-template-columns: 1fr 1fr; } }
.pictograma { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px 8px; }
.pessoa { width: 100%; aspect-ratio: 22.64 / 41.26; fill: #E4D4C8; transition: fill .35s ease; }
.pessoa.aceso { fill: var(--dg-framboesa); }
.dado .numero { color: var(--dg-framboesa); margin-bottom: var(--e2); }
.dado .numero .n { display: block; font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.dado .numero .r { display: block; font-size: var(--subtitulo); margin-top: 2px; }
.dado .numero + .numero { margin-top: var(--e4); }
.dado p { margin-bottom: var(--e2); max-width: 52ch; }
.dado .fonte { font-family: var(--apoio); font-size: .8rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) { .pessoa { transition: none; } }

/* celular: a legenda do laboratório sai do caminho do conteúdo; o pictograma fica baixo */
@media (max-width: 820px) {
  .pictograma { grid-template-columns: repeat(20, 1fr); gap: 6px 4px; }
  .dado { gap: var(--e4); }
  .dado .numero .n { font-size: 2.6rem; }
}