/* ============================================================
   COXTON · animações (recado, em cena, prancha)
   Usa as cores e as letras que o site já tem.
   ============================================================ */

/* ---------- O recado: a faixa onde o Bob corre, embaixo dos botões ---------- */
.recado { position: relative; height: 0; transition: height .26s cubic-bezier(.2, 0, 0, 1); }
.recado.is-aberto { height: var(--recado-h, 128px); }
.recado__tela { position: absolute; left: 0; pointer-events: none; z-index: 2; }
/* 06/10: o formulário da casa é uma grade com 18 px de espaço entre as linhas; fechada, a faixa
   fica fora da grade para não somar esse espaço. Abre só depois que a pessoa manda. */
.campo > .recado:not(.is-aberto) { position: absolute; }

/* ---------- Em cena: o botão que abre o curta e o palco ---------- */
.em-cena-abrir { display: inline-flex; align-items: center; gap: 10px; font: 500 14.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2021; background: transparent; border: 1px solid #d3cfc4; border-radius: 40px; padding: 10px 16px 10px 12px; cursor: pointer; min-height: 44px; }
.em-cena-abrir:hover { border-color: #1f2021; }
.em-cena-abrir:focus-visible { outline: 2px solid #0063c6; outline-offset: 3px; }
.em-cena-abrir__play { width: 26px; height: 26px; border-radius: 50%; background: #0063c6; display: grid; place-items: center; flex: 0 0 auto; }
.em-cena-abrir__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.em-cena-abrir small { font-size: 12.5px; color: #636a70; font-weight: 400; }

.em-cena-dialogo { width: min(1080px, calc(100vw - 24px)); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #12171d; color: #e9ecef; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.em-cena-dialogo::backdrop { background: rgba(18, 23, 29, .72); }
.em-cena-dialogo__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 500 12px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: #9aa7b3; }
.em-cena-dialogo__fechar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.em-cena-dialogo__fechar:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 2px; }

.em-cena-palco { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #f3f2ed; overflow: hidden; }
.em-cena-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.em-cena__controles { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px; }
.em-cena__controles button { font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 40px; padding: 8px 14px; min-height: 36px; cursor: pointer; }
.em-cena__controles button:focus-visible { outline: 2px solid #8ec9ff; outline-offset: 2px; }
.em-cena__linha { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.em-cena__linha i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: #4fb3ff; }

/* ---------- A prancha da marca ---------- */
.prancha { display: grid; gap: clamp(18px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .prancha { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.prancha__folha { position: relative; border: 1px solid #d3cfc4; background: #faf9f6; border-radius: 4px; overflow: hidden; }
.prancha__folha svg { display: block; width: 100%; height: auto; }
.prancha__controles { display: grid; gap: 10px; margin-top: 14px; }
.prancha__capitulos { display: flex; flex-wrap: wrap; gap: 6px; }
.prancha__capitulos button { font: 500 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #4b5156; background: transparent; border: 1px solid #d3cfc4; border-radius: 40px; padding: 7px 12px; min-height: 32px; cursor: pointer; font-variant-numeric: tabular-nums; }
.prancha__capitulos button[aria-current="step"] { background: #1f2021; color: #fff; border-color: #1f2021; }
.prancha__capitulos button:focus-visible, .prancha__tocar:focus-visible { outline: 2px solid #0063c6; outline-offset: 3px; }
.prancha__trilha { display: flex; align-items: center; gap: 10px; }
.prancha__tocar { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1px solid #1f2021; background: #1f2021; color: #fff; cursor: pointer; display: grid; place-items: center; }
.prancha__trilha input[type="range"] { flex: 1; accent-color: #0063c6; min-width: 0; }

html[data-movimento="menos"] .recado { transition: none; }
@media (prefers-reduced-motion: reduce) { .recado { transition: none; } }