/* Embaixo d'água: as 13 cenas. Linguagem do topo: falas azuis, áudio verde, B-roll com miniatura, cor em listras. */
.faz-cena { --fala: linear-gradient(180deg, #2c55c2, #1c3a8a); --verde: #78d9b0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 14px; }
.faz-card.espera .faz-cena { opacity: 0; }
.faz-card .faz-cena { transition: opacity 200ms ease; }
@media (hover: hover) { .faz-card { transition: border-color 240ms ease, transform 240ms var(--sai); } .faz-card:hover { border-color: rgba(153,200,255,.32); } }
.faz-card { cursor: default; }

.faz-cena .th0 { background: radial-gradient(ellipse 30% 50% at 60% 30%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #5a412c, #3b2a1d 60%, #1d1611 61%, #4b3626); }
.faz-cena .th1 { background: radial-gradient(ellipse 30% 50% at 30% 28%, rgba(255,241,220,.45), transparent 70%), linear-gradient(182deg, #55575a, #38393c 60%, #1c1d1f 61%, #434447); }
.faz-cena .th2 { background: radial-gradient(ellipse 26% 40% at 70% 34%, rgba(255,241,220,.5), transparent 70%), linear-gradient(184deg, #8a8378, #635d54 58%, #2e2b27 59%, #514b43); }
.faz-cena .th3 { background: radial-gradient(ellipse 30% 50% at 40% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #3d4a37, #2a3327 64%, #151a14 65%, #33402f); }
.faz-cena .th4 { background: radial-gradient(ellipse 28% 46% at 48% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #2b3445, #1c2230 58%, #0f1219 59%, #262e3d); }
.faz-cena .th5 { background: radial-gradient(ellipse 30% 50% at 55% 30%, rgba(255,241,220,.5), transparent 70%), linear-gradient(180deg, #6b5444, #4a3a2f 66%, #221b16 67%, #5a4639); }

/* nota */
.c-takes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 100%; align-items: center; }
.c-take { position: relative; min-width: 0; aspect-ratio: 9 / 13; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; justify-content: space-between; padding: 6px; }
.c-take b { align-self: flex-start; font-family: var(--mono); font-weight: 400; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(8,9,10,.75); color: var(--t1); }
.c-take span { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: rgba(42,92,240,.85); color: #fff; }
.c-take.fraco span { background: rgba(255,138,122,.85); }
.c-take.melhor { border-color: #cfe3ff; box-shadow: 0 0 0 1px rgba(207,227,255,.4), 0 0 20px rgba(90,162,255,.6); }
.c-take.melhor b { background: var(--azul); }
.c-take em { position: absolute; right: 6px; top: 5px; font-style: normal; color: #ffd66b; font-size: 15px; text-shadow: 0 0 10px rgba(255,214,107,.7); }
.c-take.fraco { opacity: .35; }

/* transcreve */
.c-palavras { font-size: 17px; line-height: 1.35; color: var(--t1); }
.c-tempo { font-family: var(--mono); font-size: 11px; color: var(--azul-sel); }

/* ilhas */
.c-fita { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 56px; border-radius: 6px; overflow: hidden; }
.c-fita i { display: block; }
.c-ilha { position: absolute; top: 0; bottom: 0; border: 2px solid #9fd0ff; border-radius: 5px; background: rgba(42,92,240,.22); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
  font-family: var(--mono); font-weight: 400; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; transform-origin: bottom; }
.c-tremido { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255,138,122,.55) 0 4px, rgba(255,138,122,.15) 4px 8px); transform-origin: bottom; }
.c-scan { position: absolute; top: -2px; bottom: -2px; left: 100%; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; opacity: 0; }
.c-legenda { font-family: var(--mono); font-size: 10.5px; color: var(--t3); }
.c-legenda .ok { color: #9fd0ff; } .c-legenda .ruim { color: #ff8a7a; margin-left: 8px; }

/* roteiro */
.c-roteiro { display: grid; gap: 5px; font-size: 13px; color: var(--t2); }
.c-roteiro li { display: flex; gap: 10px; align-items: baseline; }
.c-roteiro b { flex: none; width: 34px; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--azul-sel); }
.c-roteiro .fora { color: #ff9f92; text-decoration: line-through; text-decoration-color: rgba(255,138,122,.5); }
.c-roteiro .fora b { color: #ff8a7a; text-decoration: none; }

/* silêncio */
.c-onda { display: flex; align-items: center; gap: 2px; height: 96px; }
.c-onda i { flex: 1; border-radius: 2px; background: var(--verde); opacity: .85; transform-origin: center; }
.c-corte { position: absolute; top: 10px; bottom: 30px; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.9); }
.c-corte::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.c-rotulo { position: absolute; left: 14px; bottom: 9px; font-family: var(--mono); font-size: 10.5px; color: var(--t3); }

/* trilhas genéricas das cenas (broll, whoosh, música) */
.c-trilha { position: relative; height: 34px; border-radius: 5px; background: rgba(255,255,255,.03); }
.c-trilha.a2 { height: 26px; } .c-trilha.a1 { height: 30px; }
.c-cl { position: absolute; top: 0; bottom: 0; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); transform-origin: left; }
.c-cl.fala { background: var(--fala); border-color: rgba(153,200,255,.32); }
.c-cl.voz { background: rgba(120,217,176,.18); border-color: rgba(120,217,176,.45); }
.rampa { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, rgba(255,255,255,.55), transparent); }
.rampa.e { left: 0; transform-origin: left; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.rampa.d { right: 0; transform-origin: right; clip-path: polygon(0 0, 100% 100%, 0 100%); background: linear-gradient(270deg, rgba(255,255,255,.55), transparent); }
.c-whoosh { position: absolute; top: 2px; bottom: 2px; }
.c-whoosh svg { width: 100%; height: 100%; }
.c-whoosh path { fill: rgba(120,217,176,.5); stroke: var(--verde); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-marca { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #fff; box-shadow: 0 0 12px #fff; transform-origin: center; }
.c-musica { display: flex; align-items: center; gap: 2px; height: 46px; }
.c-musica i { flex: 1; height: 80%; border-radius: 2px; background: rgba(120,217,176,.55); transform-origin: center; }
.c-musica i.baixa { transform: scaleY(.38); }

/* trilhas V1–V6 */
.faz-card[data-anima="trilhas"] .faz-cena { flex-direction: row; align-items: stretch; gap: 14px; }
.c-pilha { flex: 1.2; display: grid; gap: 3px; align-content: center; }
.c-linha { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; }
.c-linha b { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--t3); }
.c-faixa { height: 18px; border-radius: 4px; padding: 0 8px; display: flex; align-items: center; font-family: var(--mono); font-size: 9.5px; color: #e8f1ff; white-space: nowrap; overflow: hidden; }
.c-faixa.texto { background: rgba(245,245,243,.88); color: #0c0d0f; width: 40%; }
.c-faixa.cor { background: repeating-linear-gradient(135deg, rgba(153,200,255,.22) 0 6px, rgba(153,200,255,.08) 6px 12px); color: var(--azul-sel); }
.c-faixa.grafico { background: linear-gradient(90deg, #1a2656, #33489e); width: 30%; }
.c-faixa.broll { background: rgba(255,255,255,.1); width: 70%; }
.c-faixa.fala { background: var(--fala); }
.c-quadros { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; border-radius: 6px; overflow: hidden; }
.c-quadros i { display: block; }
.c-varre { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; background: var(--azul-sel); box-shadow: 0 0 12px var(--azul-sel); opacity: 0; }
@media (max-width: 600px) { .c-quadros { display: none; } }

/* textos */
.faz-card[data-anima="textos"] .faz-cena { align-items: center; }
.c-tela { position: relative; height: 100%; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.c-logo { position: absolute; right: 8px; top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: #fff; padding: 2px 5px; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; }
.c-terco { position: absolute; left: 10px; bottom: 12px; padding: 6px 10px; border-left: 2px solid #fff; background: rgba(8,9,10,.55); }
.c-terco b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1; color: #fff; }
.c-terco span { font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,.8); }

/* peças */
.c-grava { height: 30px; border-radius: 6px; background: linear-gradient(90deg, #2b3445, #3d4a37, #5a412c, #2b3445); display: flex; align-items: center; padding: 0 10px; font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.85); transform-origin: left; }
.c-pecas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.c-pecas span { height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: #fff; border: 1px solid rgba(255,255,255,.14); }
.c-pecas span:nth-child(1) { background: linear-gradient(180deg, #2c55c2, #1c3a8a); }
.c-pecas span:nth-child(2) { background: linear-gradient(180deg, #2d6b5a, #1d4a3e); }
.c-pecas span:nth-child(3) { background: linear-gradient(180deg, #4b3f8f, #322a66); }

/* versões */
.faz-card[data-anima="versoes"] .faz-cena { display: block; position: relative; }
.c-versao { position: absolute; left: 14px; right: 26px; height: 46px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: #12141a; display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.c-versao b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--t2); }
.c-versao span { flex: 1; height: 14px; border-radius: 3px; background: linear-gradient(90deg, #2c55c2 0 30%, transparent 30% 32%, #2c55c2 32% 62%, transparent 62% 64%, #2c55c2 64%); opacity: .6; }
.c-versao.v01 { top: 14px; }
.c-versao.v02 { top: 42px; left: 26px; right: 14px; border-color: rgba(153,200,255,.4); box-shadow: 0 10px 30px -10px rgba(0,0,0,.9), 0 0 18px -4px rgba(42,92,240,.6); background: #141a2a; }
.c-versao.v02 b { color: var(--azul-sel); }
.c-versao.v02 span { opacity: 1; background: linear-gradient(90deg, #3a6ae0 0 24%, transparent 24% 26%, #3a6ae0 26% 58%, transparent 58% 60%, #5aa2ff 60%); }
.c-versao em { position: absolute; left: 10px; bottom: -21px; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--azul-sel); white-space: nowrap; }

/* revisa */
.c-checa { display: grid; gap: 4px; font-size: 12.5px; color: var(--t2); }
.c-checa li { display: flex; align-items: center; gap: 0; padding: 3px 10px; border-radius: 7px; background: rgba(255,255,255,.03); }
.c-checa li::before { content: "✓"; color: var(--ok); padding-right: 8px; }
.c-checa b { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 11.5px; color: var(--ok); }

/* ── Uau: inclinação e reflexo com o mouse ── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .faz-card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--sai), border-color 240ms ease; }
  .faz-card.mexe { transition: transform 140ms linear, border-color 240ms ease; }
  .faz-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(153,200,255,.14), transparent 60%); }
  .faz-card.mexe::after { opacity: 1; }
}