/* Fontes locais, não CDN do Google -- a TV pode não alcançar fonts.googleapis.com, e toda a calibragem deste painel assume as métricas do Archivo Black. `font-display: block`, não `swap`: num painel ligado o dia inteiro, uma piscada de fonte errada a cada reload é pior que um instante de texto invisível -- e é justamente o `swap` que entregaria, ainda que por um instante, as métricas erradas que a calibragem assume. */ @font-face { font-family: 'Archivo Black'; src: url('/fonts/ArchivoBlack-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; } @font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; } @font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: block; } @font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; } :root { --amarelo: #FFD60A; --azul: #1530F2; --rosa: #FF2D6F; --verde: #00B86B; --preto: #0A0A0F; --creme: #FFF6DA; --branco: #FFFFFF; --cinza: #E7E4DA; } /* ---------- piso de legibilidade ---------- O piso é uma medida FÍSICA -- milímetros na parede --, então mora em `vh`, não em `px`. Um piso em px acerta 1080p e erra 720p e 4K: é o erro que f57a9b3 diagnosticou ("medida em vh só acerta em uma resolução") e que este token evita. 5.1vh vale 55px a 1080 e 37px a 720p: a MESMA altura real no mesmo painel. Calibragem: TV de 50-55" a ~5m. 1px CSS = 0,63mm a 1080p; 16-20 minutos de arco a 5m exigem 23-29mm de altura de maiúscula. */ :root { --piso-dado: 5.1vh; /* 55,1px @1080 -- número ou nome */ --piso-rotulo: 3.15vh; /* 34,0px @1080 -- rótulo e apoio */ --piso-heroi: 14vh; /* 151,2px @1080 -- o número que se lê em 2s. Estreia em #heroi (Task 4). */ --piso-chrome: 2.2vh; /* 23,8px @1080 -- header, que não pode engordar */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* Quem rola por padrão é o , não o -- `overflow: hidden` só no corpo não segura nada. Com a barra de controles escondida em `translateY(110%)` no ocioso, a área rolável crescia 88px e uma tecla perdida do controle da TV empurrava o header para fora da tela. */ html { height: 100%; overflow: hidden; overscroll-behavior: none; } /* A TV nao rola: a altura e um teto rigido, nao um piso. Com `min-height` o corpo crescia alem da tela e o `overflow: hidden` amputava o excedente -- era assim que o terceiro card de Recordes sumia. */ body { background: var(--preto); color: var(--creme); font-family: 'DM Sans', sans-serif; height: 100vh; height: 100svh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* faixas de altura propria nunca encolhem; so o palco absorve a sobra */ header, .indicadores, .controls { flex: 0 0 auto; } /* Só existe JetBrains Mono Bold local (mesmo bug que 1fae422 corrigiu na tela de gestão): pedir peso 400 faz o navegador sintetizar, e a diferença aparece na tela. Mono só em 700. */ .mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .display { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; } /* ---------- header ---------- */ header { display: flex; align-items: center; justify-content: space-between; padding: clamp(10px, 1.8vh, 20px) clamp(18px, 2vw, 32px); border-bottom: 2px solid var(--amarelo); } header .logo svg { height: clamp(30px, 5vh, 48px); width: auto; display: block; } header .right { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); min-width: 0; } .rotulo-vivo { font-size: max(var(--piso-chrome), 13px); color: var(--cinza); } #clock { font-size: clamp(var(--piso-chrome), 3.2vh, 32px); font-weight: 700; color: var(--amarelo); letter-spacing: 0.08em; } /* contagem regressiva do mês: só muda na virada do dia, mora ao lado do relógio */ #mes-restante { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; font-size: clamp(var(--piso-chrome), 1.8vh, 15px); font-weight: 700; white-space: nowrap; color: var(--cinza); border: 1px solid #2a2a33; padding: 4px 12px; } /* reta final do mês (3 dias ou menos): sobe para a cor de urgência da marca */ #mes-restante.reta-final { color: var(--preto); background: var(--amarelo); border-color: var(--amarelo); } /* anel de giro: quanto falta para o painel virar sozinho */ #giro { display: block; width: clamp(20px, 3vh, 30px); height: clamp(20px, 3vh, 30px); flex: 0 0 auto; } #giro svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } #giro circle { fill: none; stroke-width: 4; } .giro-trilho { stroke: #2a2a33; } /* pathLength=100 no SVG faz o traço valer exatamente 100 unidades, então o arco é escrito em porcentagem em vez de 2*pi*r. */ .giro-arco { stroke: var(--amarelo); stroke-dasharray: 100; stroke-dashoffset: 100; } #giro.correndo .giro-arco { animation: giro-volta var(--giro-ms, 22500ms) linear forwards; } @keyframes giro-volta { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } #conn { width: 14px; height: 14px; border-radius: 50%; background: var(--rosa); } #conn.on { background: var(--verde); animation: beat 1.8s ease-in-out infinite; } @keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } /* ---------- stats ---------- */ .indicadores { height: clamp(170px, 23vh, 260px); /* 248px @1080 (era 205) */ overflow: hidden; border-bottom: 2px solid var(--preto); display: grid; grid-template-columns: clamp(520px, 36%, 760px) minmax(0, 1fr); } /* O recorte do trilho MIGRA de .indicadores para cá: sem isso o trilho desliza por cima do header. */ .stats-janela { overflow: hidden; min-width: 0; } #stats-trilho { height: 200%; display: flex; flex-direction: column; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); } /* `1fr` puro carrega minimo automatico: o nome do vendedor esticava a coluna ate 693px e espremia as demais. `minmax(0, 1fr)` divide a faixa em duas partes iguais de verdade. */ .stats { flex: 0 0 50%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; } #heroi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.5vw, 28px); container-type: size; /* indispensável: cqh/cqw do herói */ } #heroi .value { font-size: clamp(var(--piso-heroi), 18vh, 240px); } #heroi .value { font-size: max(var(--piso-heroi), min(240px, 96cqh, 30cqw)); } #heroi .label { font-size: clamp(var(--piso-rotulo), 3.4vh, 40px); } #heroi .label { font-size: max(var(--piso-rotulo), min(40px, 18cqh)); } #heroi .sub { font-size: clamp(var(--piso-rotulo), 4.2vh, 48px); } #heroi .sub { font-size: max(var(--piso-rotulo), min(48px, 22cqh)); } /* A regra `.stat .sub` impõe nowrap+ellipsis: "faltam 3 · meta 10" a 46px viraria "faltam 3 · met…". Com `normal` ele quebra em duas linhas e cabe, e o texto que o JS escreve não precisa mudar. */ #heroi .sub { white-space: normal; text-overflow: clip; } .stat { display: flex; flex-direction: column; justify-content: center; padding: clamp(10px, 1.6vh, 20px) clamp(12px, 1.5vw, 28px); border-right: 2px solid var(--preto); min-width: 0; min-height: 0; overflow: hidden; container-type: size; } .stat:last-child { border-right: none; } .stat .label { font-size: clamp(var(--piso-rotulo), 3.7vh, 40px); margin-bottom: clamp(4px, 0.9vh, 10px); } .stat .label { font-size: max(var(--piso-rotulo), min(40px, 20cqh)); } /* O valor tem de caber em UMA linha: quebrado em duas ele empurrava o `sub` para fora da faixa. `cqw` e a largura da propria coluna, entao o corpo cai junto com ela; o teto de 13.5cqw acomoda a string mais larga do painel ("R$ 3.184.700" e nomes proprios em Archivo Black). */ .stat .value { font-size: clamp(var(--piso-dado), 7vh, 112px); } .stat .value { font-size: max(var(--piso-dado), min(112px, 8vh, 13.5cqw)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat .sub { font-size: clamp(var(--piso-rotulo), 3.7vh, 40px); margin-top: clamp(4px, 0.9vh, 10px); opacity: 0.85; } .stat .sub { font-size: max(var(--piso-rotulo), min(40px, 20cqh)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* animações de estado nos contadores */ .stat .value, .stat .sub { transform-origin: left center; } .stat .value.bump { animation: bump 0.5s cubic-bezier(0.2, 1.6, 0.35, 1); } @keyframes bump { 0% { transform: scale(1); } 32% { transform: scale(1.16); } 100% { transform: scale(1); } } /* raio do logo: zap a cada venda, glint sutil de ambiente */ .raio-logo { transform-box: fill-box; transform-origin: center; } .logo.zap .raio-logo { animation: raio-zap 0.6s ease-out; } @keyframes raio-zap { 0% { fill: #FFD60A; transform: scale(1) rotate(0deg); } 16% { fill: #FFFFFF; transform: scale(1.28) rotate(-7deg); } 46% { fill: #FF2D6F; transform: scale(0.94) rotate(5deg); } 100% { fill: #FFD60A; transform: none; } } .logo.glint .raio-logo { animation: raio-glint 0.7s ease-out; } @keyframes raio-glint { 0%, 100% { fill: #FFD60A; } 45% { fill: #FFF6DA; } } .stat.amarelo { background: var(--amarelo); color: var(--preto); } .stat.azul { background: var(--azul); color: var(--branco); } .stat.branco { background: var(--creme); color: var(--preto); } .stat.verde { background: var(--verde); color: var(--preto); } .stat.rosa { background: var(--rosa); color: var(--branco); } #overlay.quitacao { background: var(--verde); } /* badge da sequência ativa (🔥 X seguidas) */ #streak-badge { display: none; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; font-size: clamp(var(--piso-chrome), 1.8vh, 15px); font-weight: 700; white-space: nowrap; color: var(--preto); background: var(--amarelo); padding: 4px 12px; } #streak-badge.on { display: inline-block; } #streak-badge.quente { background: var(--rosa); color: var(--branco); animation: badge-pulsa 1s ease-in-out infinite; } @keyframes badge-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } /* ---------- controles ---------- */ .controls { display: flex; gap: 12px; padding: 16px 32px; border-top: 2px solid #2a2a33; transition: opacity 0.4s ease, transform 0.4s ease; } body.idle:not(.audio-travado) .controls { opacity: 0; transform: translateY(110%); pointer-events: none; } body.idle { cursor: none; } /* som travado pelo navegador: o painel admite em vez de dizer "Som ligado" */ #som-travado { display: none; } body.audio-travado #som-travado { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: var(--preto); background: var(--rosa); padding: 12px 18px; animation: som-travado-pulsa 1.6s ease-in-out infinite; } @keyframes som-travado-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } body.audio-travado #btn-sound { border-color: var(--rosa); } /* 13px é deliberado: os controles são operados com a mão, não lidos a 5m, e somem em 5s de ocioso. Fora do contrato do piso. */ .controls button { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; font-weight: 700; cursor: pointer; padding: 12px 20px; border: 2px solid var(--amarelo); background: var(--preto); color: var(--amarelo); } .controls button.on { background: var(--amarelo); color: var(--preto); } /* ---------- overlay de venda · vinheta ---------- */ #overlay { position: fixed; inset: 0; z-index: 50; background: var(--amarelo); color: var(--preto); display: none; align-items: center; justify-content: center; text-align: center; border: 16px solid var(--preto); overflow: hidden; /* reserva espaço para as faixas de marquee (topo/rodapé) e margem lateral, para o palco nunca encostar nelas em telas baixas (720p) ou 4:3 (tablet) */ padding: clamp(72px, 11vh, 116px) clamp(24px, 4vw, 64px); } #overlay.show { display: flex; } /* palco com o conteúdo, treme no impacto do raio */ .palco { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.4vh, 30px); z-index: 2; max-width: 100%; } .show .palco { animation: shake 0.45s linear 0.85s 2; } /* cortinas de abertura: três blocos varrem a tela e saem */ .wipe { position: absolute; inset: 0; transform: translateX(-101%); z-index: 6; pointer-events: none; } .show .wipe1 { background: var(--azul); animation: wipe 0.6s cubic-bezier(0.85, 0, 0.15, 1) 0s both; } .show .wipe2 { background: var(--rosa); animation: wipe 0.6s cubic-bezier(0.85, 0, 0.15, 1) 0.09s both; } .show .wipe3 { background: var(--preto); animation: wipe 0.6s cubic-bezier(0.85, 0, 0.15, 1) 0.18s both; } @keyframes wipe { 0% { transform: translateX(-101%); } 42% { transform: translateX(0); } 58% { transform: translateX(0); } 100% { transform: translateX(101%); } } /* clarão branco na queda do raio */ .flash { position: absolute; inset: 0; background: var(--branco); opacity: 0; z-index: 5; pointer-events: none; } .show .flash { animation: flash 0.5s linear 0.65s both; } @keyframes flash { 0%, 100% { opacity: 0; } 12%, 34% { opacity: 1; } 22% { opacity: 0; } } /* raio despenca do céu e fica pulsando */ .raio { height: clamp(64px, 15vh, 150px); opacity: 0; } .show .raio { animation: raio-drop 0.3s cubic-bezier(0.7, 0, 1, 1) 0.6s both, pulse 0.7s ease-in-out 1.1s infinite alternate; } @keyframes raio-drop { from { transform: translateY(-75vh) scale(2.6); opacity: 1; } to { transform: none; opacity: 1; } } @keyframes pulse { from { transform: scale(1) rotate(-4deg); opacity: 1; } to { transform: scale(1.15) rotate(4deg); opacity: 1; } } /* keyframes reaproveitados pela vinheta e pela comemoração de meta */ @keyframes stamp { 0% { transform: scale(3) rotate(-3deg); opacity: 0; filter: blur(16px); } 55% { filter: blur(0); } 100% { transform: none; opacity: 1; filter: blur(0); } } @keyframes barra { from { clip-path: inset(0 100% 0 0); transform: translateX(-40px); } to { clip-path: inset(0 0 0 0); transform: none; } } @keyframes rise { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } } /* ===== vinheta de venda — foco no vendedor (card de jogador) ===== */ /* kicker */ #ov-titulo { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(13px, 2.5vh, 24px); color: var(--preto); opacity: 0; } .show #ov-titulo { animation: rise 0.5s ease-out 0.65s both; } /* herói: raio (relâmpago) da marca — sem a inicial do vendedor */ .ov-hero { position: relative; display: flex; align-items: center; justify-content: center; margin: clamp(6px, 1.4vh, 18px) 0; } @keyframes avatar-pop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } } .ov-hero .raio { height: clamp(96px, 24vh, 260px); width: auto; opacity: 0; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.16)); } .show .ov-hero .raio { animation: avatar-pop 0.55s cubic-bezier(0.2, 1.6, 0.35, 1) 0.85s both, pulse 0.7s ease-in-out 1.5s infinite alternate; } /* nome do vendedor em faixa */ #ov-vendedor { font-size: clamp(28px, min(6vw, 9vh), 76px); background: var(--preto); color: var(--branco); padding: 6px 30px; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; } .show #ov-vendedor { animation: rise 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 1.25s both; } /* etiqueta do tier de combo (fita, no lugar do carimbo atravessado) */ #ov-combo { display: none; font-size: clamp(24px, min(4.5vw, 7vh), 64px); padding: clamp(4px, 1vh, 10px) clamp(16px, 2.4vw, 36px); white-space: nowrap; } .show.tem-combo #ov-combo { display: inline-block; animation: combo-pop 0.45s cubic-bezier(0.2, 1.8, 0.4, 1) 1.5s both; } @keyframes combo-pop { 0% { transform: scale(0) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } } .show.tem-combo .palco { animation: shake 0.4s linear 1.5s 1; } .c2 #ov-combo { background: var(--azul); color: var(--branco); } .c3 #ov-combo { background: var(--rosa); color: var(--preto); } .c4 #ov-combo { background: var(--preto); color: var(--amarelo); box-shadow: 0 0 22px rgba(0, 0, 0, 0.3); } .c5 #ov-combo { background: var(--preto); color: var(--rosa); box-shadow: 0 0 24px var(--rosa); } .c6 #ov-combo { background: var(--verde); color: var(--preto); } .c7 #ov-combo { background: var(--rosa); color: var(--branco); box-shadow: 0 0 24px var(--rosa); } .c8 #ov-combo { background: var(--azul); color: var(--amarelo); box-shadow: 0 0 26px var(--azul); } .c9 #ov-combo { background: var(--preto); color: var(--amarelo); box-shadow: 0 0 30px var(--amarelo); } /* valor da venda (conta até o total via JS) */ #ov-valor { font-size: clamp(42px, min(9vw, 15vh), 128px); color: var(--preto); opacity: 0; } .show #ov-valor { animation: rise 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 1.75s both; } #ov-cliente { font-size: clamp(13px, 2.4vh, 20px); color: var(--preto); opacity: 0; max-width: 100%; } .show #ov-cliente { animation: rise 0.5s ease-out 2.15s both; } /* faixas em marquee no topo e no rodapé */ .faixa { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: var(--rosa); color: var(--preto); font-size: clamp(13px, 2.2vh, 22px); padding: clamp(8px, 1.6vh, 15px) 0; border-bottom: 4px solid var(--preto); overflow: hidden; white-space: nowrap; } .faixa.baixo { top: auto; bottom: 0; border-bottom: none; border-top: 4px solid var(--preto); } .faixa .fita { display: inline-block; animation: marquee 16s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* chuva de raios (confete) */ #confetes { position: absolute; inset: 0; overflow: hidden; z-index: 4; pointer-events: none; } .confete { position: absolute; top: -14vh; animation-name: cair; animation-timing-function: linear; animation-fill-mode: both; } @keyframes cair { to { transform: translateY(125vh) rotate(720deg); } } @keyframes shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-16px, 7px); } 40% { transform: translate(14px, -9px); } 60% { transform: translate(-11px, -7px); } 80% { transform: translate(11px, 9px); } } /* ---------- mobile: modo consulta, sem vinheta ---------- */ @media (max-width: 960px) { /* No celular o piso não vale: leitura a 60cm, não a 5 metros. Zerar os tokens faz TODA a escala de TV colapsar sozinha para o comportamento atual, sem duplicar uma única regra. `0px`, nunca `0`: zero sem unidade é e invalida min()/max(). */ :root { --piso-dado: 0px; --piso-rotulo: 0px; --piso-heroi: 0px; --piso-chrome: 0px; } body { height: 100svh; min-height: 0; overflow: hidden; } header, .indicadores { flex: 0 0 auto; } header { padding: 14px 16px; } header .logo svg { height: 30px; } header .right { gap: 12px; } header .right .rotulo-vivo { display: none; } #streak-badge.on { display: none; } #mes-restante { font-size: 11px; padding: 3px 8px; } #giro { width: 20px; height: 20px; } #clock { font-size: 20px; } /* #heroi tem especificidade 1-1-0; as regras .stat.* abaixo têm 0-2-0 e perderiam para o herói sem overrides explícitos aqui. */ #heroi { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px 14px; } #heroi .value { font-size: min(40px, 9vw); } #heroi .label { font-size: 12px; } #heroi .sub { font-size: 12px; } /* No celular cada período ocupa uma tela compacta 2×2 e acompanha o carrossel dos painéis inferiores. O herói empilha em cima do trilho de KPIs (sem isso os dois herdam o grid de duas colunas do desktop). */ /* `auto` puro na 1ª linha colapsaria: #heroi tem `container-type: size` (herda de `.stat`), que zera a contribuição de conteúdo no auto-track e cortava "Vendas hoje" a uma tira de ~22px. O piso em px devolve altura ao herói sem depender do conteúdo. De onde vem 64: o valor (35,1px, line-height 31,6px) e o rótulo+apoio empilhados (16 + margem 3 + 16 = 35px) cabem lado a lado — a coluna mais alta é o texto, com 35px — mais os 20px de padding vertical (10 + 10) do próprio #heroi: 35 + 20 = 55px de conteúdo, com ~9px de folga até 64. */ .indicadores { height: clamp(140px, 22vh, 190px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(64px, auto) minmax(0, 1fr); } #stats-trilho { height: 200%; display: flex; } .stats { flex: 0 0 50%; display: grid; grid-template-columns: 1fr 1fr; } .stats .stat { border-bottom: none; } .stat { min-width: 0; padding: 10px 14px; border-right: 2px solid var(--preto); border-bottom: 2px solid var(--preto); } .stats .stat:nth-child(2n) { border-right: none; } .stat .label { font-size: 12px; margin-bottom: 3px; letter-spacing: 0.08em; } .stat .value { font-size: clamp(20px, 7vw, 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat .sub { font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Os corpos fixos acima estouram a faixa quando a tela e baixa (o `.stat` e centrado, entao o excesso sai pelas DUAS pontas e some). O teto em `cqh` amarra rotulo, valor e apoio a altura real da propria celula. */ .stat .label { font-size: min(12px, 17cqh); margin-bottom: min(3px, 4cqh); } .stat .value { font-size: min(28px, 7vw, 38cqh); } .stat .sub { font-size: min(12px, 17cqh); margin-top: min(3px, 4cqh); } /* Os wrappers viram transparentes no flex: cada cena passa a ser um slide de largura inteira, mantendo as quatro cenas no mesmo trilho. */ body #palco { display: flex; flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; } body #trilho { display: flex; min-width: 100%; } body .slide { display: contents; } body .cena { flex: 0 0 100%; width: 100%; min-height: 0; height: 100%; padding: 20px 16px; } body .slide .cena + .cena { border-left: none; border-top: none; } body #cena-dia { order: 0; } body #cena-mes { order: 1; } body #cena-recordes { order: 2; } body #cena-rivalidades { order: 3; } body .cena-head { margin-bottom: 18px; } body .cena-head h2 { font-size: clamp(28px, 9vw, 38px); } body .cena-sub { font-size: 12px; } body .rank-grande { min-height: 0; } body .rank-grande li { flex: 1 1 0; min-height: 0; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 6px 4px; } body .rank-grande.rank-compacto { justify-content: center; gap: 10px; } body .rank-grande.rank-compacto li { flex: 0 1 clamp(96px, 20vh, 140px); padding: 10px 8px; } body .rk-pos { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: 26px; } body .rk-nome { grid-column: 2; min-width: 0; font-size: clamp(19px, 5.7vw, 23px); } body .rk-nome small { font-size: 12px; } body .recordes-grid { min-height: 0; } body .rec-card { padding: 18px 16px; } body .rec-val { font-size: clamp(32px, 10vw, 48px); } /* Em tela baixa (celular deitado, ~600px) os corpos fixos acima nao cabem na linha: o teto em `cqh` faz o texto ceder junto com a caixa. */ body .rk-pos { font-size: min(26px, 40cqh); } body .rk-nome { font-size: min(23px, 5.7vw, 28cqh); } body .rk-nome small { font-size: min(12px, 13cqh); } body .rec-val { font-size: min(48px, 10vw, 60cqh); } body .rec-val.nome { font-size: min(44px, 9vw, 52cqh); } /* precisa superar `.rank-compacto .rk-*` (duas classes) na especificidade */ body .rank-compacto .rk-pos { font-size: min(26px, 30cqh); } body .rank-compacto .rk-nome { font-size: min(23px, 5.7vw, 24cqh); } body .rank-compacto .rk-nome small { font-size: min(12px, 10cqh); } .controls { display: none; } } /* Celular estreito: o header nao comporta badge + anel + relogio. O anel e o que menos informa num aparelho na mao (a tela nao fica sozinha girando), entao ele sai antes da contagem do mes. */ @media (max-width: 430px) { header .logo svg { height: 26px; } #giro { display: none; } #mes-restante { font-size: 10px; padding: 2px 6px; letter-spacing: 0.02em; } } /* ---------- celular deitado: tela baixa demais para linha em duas alturas ---------- Com ~600px de altura, seis vendedores mais a linha de apoio deixariam o nome em corpo ilegivel. Aqui o painel se rearranja: a faixa de indicadores cede altura e a linha de apoio sai, para o nome voltar a ser legivel. */ @media (max-width: 960px) and (max-height: 660px) { /* Os 104px de piso abaixo são de ANTES do herói existir, quando eram só para o trilho de KPIs. O Step 2 deu ao herói um piso rígido de `minmax(64px, auto)` na regra base — mas essa regra base não é tocada aqui, e o `.indicadores` daqui reusava o mesmo grid-template-rows dela. Resultado: em qualquer altura de tela abaixo de ~433px (24vh < 104px, o piso do clamp), o herói consumia 64px fixos e sobravam só ~40px pro trilho inteiro (2 cards com rótulo+valor+apoio) — testado em 960×400: o valor do KPI caía pra ~3px, ilegível. A correção é local a este sub-bloco: o herói fica ainda mais compacto (piso de 40px, com padding e fontes próprios abaixo) e o piso do `.indicadores` sobe para caber os dois — 40px (herói) + ~90px (o mesmo espaço que o trilho já tinha nos 104px originais) = 130px. */ body .indicadores { height: clamp(130px, 24vh, 150px); grid-template-rows: minmax(40px, auto) minmax(0, 1fr); } /* De onde vem 40: com valor a 22px e rótulo/apoio a 10px cada, a coluna mais alta (rótulo+apoio empilhados) mede ~28px — mais os 12px de padding vertical (6 + 6) do #heroi aqui: 28 + 12 = 40px, sem sobra. */ body #heroi { padding: 6px 14px; gap: 8px; } body #heroi .value { font-size: min(22px, 7vw); } body #heroi .label { font-size: 10px; } body #heroi .sub { font-size: 10px; } /* Sem piso, `13cqh` colapsa livre: com o `

` espremido a ~26-39px de altura (header + cabeçalho da cena comem quase tudo em 400px), o R$/ combo do Step 5 vira um traço de ~3px, ilegível. Aqui a consulta é a 60cm, não a 5m do modo TV — o piso pode ser bem menor que o normal do painel, mas 10px ainda dá pra ler de perto sem forçar. */ body .rk-nome small { font-size: max(10px, min(12px, 13cqh)); } body .rk-nome { font-size: min(23px, 5.7vw, 40cqh); } body .rk-pos { font-size: min(26px, 46cqh); } body .rec-card { padding: 10px 14px; } } /* ---------- contagem regressiva do disparo de teste ---------- Só aparece em evento simulado, para quem está ao lado da TV não tomar susto com a buzina. Fica acima de tudo, inclusive da vinheta. */ #contagem-teste { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10, 10, 15, 0.92); color: var(--amarelo); pointer-events: none; text-align: center; padding: 5vh 5vw; } #contagem-teste .ct-kicker { font-size: clamp(14px, 3vh, 28px); color: var(--creme); letter-spacing: 0.3em; } #contagem-teste .ct-num { font-size: clamp(90px, 26vh, 220px); line-height: 1; margin: clamp(8px, 2vh, 24px) 0; } #contagem-teste .ct-rodape { font-size: clamp(12px, 2.4vh, 24px); color: var(--cinza); letter-spacing: 0.2em; } /* ---------- meta do dia batida ---------- */ #meta { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, #FFE24D 0%, var(--amarelo) 46%, #E0B400 100%); color: var(--preto); } #meta.show { display: flex; } /* leque de raios girando ao fundo */ #meta .leque { position: absolute; inset: -30%; z-index: 0; opacity: 0.16; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--preto) 0deg 5deg, transparent 5deg 17deg); } .show .leque { animation: girar 22s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } #meta-confetes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .palco-meta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 24px); padding: 0 5vw; } .show .palco-meta { animation: shake 0.5s linear 0.9s 3; } #meta-selo { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; font-size: clamp(18px, 2.8vw, 40px); background: var(--preto); color: var(--amarelo); padding: clamp(8px, 1.4vh, 16px) clamp(18px, 2.6vw, 40px); clip-path: inset(0 100% 0 0); } .show #meta-selo { animation: barra 0.5s cubic-bezier(0.85, 0, 0.15, 1) 0.5s both; } #meta-num { font-family: 'Archivo Black', sans-serif; line-height: 0.82; font-size: clamp(140px, 30vw, 460px); opacity: 0; } .show #meta-num { animation: stamp 0.6s cubic-bezier(0.2, 1.5, 0.35, 1) 0.7s both, pulse-meta 1.1s ease-in-out 1.4s infinite alternate; } @keyframes pulse-meta { from { transform: scale(1); } to { transform: scale(1.05); } } #meta-label { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: -1px; line-height: 0.95; font-size: clamp(34px, 6.4vw, 96px); opacity: 0; } .show #meta-label { animation: rise 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 1.1s both; } #meta-sub { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(20px, 3.2vw, 44px); opacity: 0; } .show #meta-sub { animation: rise 0.5s ease-out 1.5s both; } /* ---------- combo breaker: cena dedicada estilo arcade ---------- */ /* Inversão de cor: a cena inunda de rosa e o tipo vira preto, a mesma construção do card de meta (que inunda de amarelo). Contra a vinheta de venda, que é escura, dá para ler do outro lado da sala que aconteceu outra coisa — sem precisar de degradê nem de glow, que a marca não usa. */ #breaker { position: fixed; inset: 0; z-index: 65; display: none; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--rosa); color: var(--preto); } /* A opacidade de repouso é 1: a animação só acrescenta o fade, nunca é a fonte da visibilidade. Sem isso, desligar a animação apaga a cena inteira. */ #breaker.show { display: flex; opacity: 1; animation: bk-fundo 0.5s ease-out both; } @keyframes bk-fundo { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } /* Leque de raios ao fundo, o mesmo recurso do card de meta, em preto. */ .bk-leque { position: absolute; inset: -30%; z-index: 0; opacity: 0.12; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--preto) 0deg 5deg, transparent 5deg 17deg); } .show .bk-leque { animation: girar 22s linear infinite; } #cacos { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; } .bk-raio { position: absolute; animation: bk-raio-voa 1.7s cubic-bezier(0.15, 0.6, 0.3, 1) both; } @keyframes bk-raio-voa { from { transform: translate(0, 0) rotate(0) scale(0.35); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0; } } /* flash e onda de choque no momento do impacto (quando a última letra assenta) */ .bk-flash { position: absolute; inset: 0; z-index: 5; background: var(--creme); opacity: 0; pointer-events: none; } .show .bk-flash { animation: bk-flash 0.55s ease-out 1.35s both; } @keyframes bk-flash { 0% { opacity: 0; } 14% { opacity: 0.8; } 100% { opacity: 0; } } .bk-onda { position: absolute; left: 50%; top: 46%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 6px solid var(--preto); border-radius: 50%; opacity: 0; pointer-events: none; } .show .bk-onda { animation: bk-onda 0.85s cubic-bezier(0.1, 0.7, 0.3, 1) 1.32s both; } @keyframes bk-onda { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(24); } } .bk-conteudo { position: relative; z-index: 6; width: min(92vw, 1280px); padding: 0 5vw; } .show .bk-conteudo { animation: bk-tremor 0.5s ease-out 1.32s both; } @keyframes bk-tremor { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-14px, 8px); } 40% { transform: translate(12px, -8px); } 60% { transform: translate(-8px, 6px); } 80% { transform: translate(6px, -4px); } } /* Selo mono em bloco preto, igual ao #meta-selo — mesmo gesto, outra cor. */ .bk-alerta { display: inline-block; margin-bottom: clamp(10px, 2vh, 20px); padding: clamp(7px, 1.2vh, 14px) clamp(16px, 2.4vw, 36px); color: var(--rosa); background: var(--preto); font-size: clamp(12px, 1.9vw, 22px); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0; } .show .bk-alerta { animation: bk-alerta 0.38s cubic-bezier(0.2, 1.4, 0.35, 1) 0.15s both; } @keyframes bk-alerta { from { opacity: 0; transform: translateY(-24px) scaleX(1.5); } to { opacity: 1; transform: none; } } .bk-streak { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px); margin: 0 auto clamp(8px, 1.4vh, 16px); color: var(--preto); opacity: 0; } .show .bk-streak { animation: bk-streak 0.55s cubic-bezier(0.15, 1.5, 0.3, 1) 0.42s both; } @keyframes bk-streak { from { opacity: 0; transform: scale(2.2) rotate(-4deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } #bk-streak-num { color: var(--preto); font-family: 'Archivo Black', sans-serif; font-size: clamp(76px, min(15vw, 20vh), 216px); line-height: 0.72; letter-spacing: -0.08em; text-shadow: 6px 6px 0 var(--creme); } .bk-streak-copy { text-align: left; font-family: 'Archivo Black', sans-serif; font-size: clamp(20px, min(3.4vw, 4.5vh), 52px); line-height: 0.83; text-transform: uppercase; } .bk-streak-copy strong { color: var(--creme); } /* Tipo chapado em preto sobre o rosa, com deslocamento duro em creme. Sem degradê, sem contorno e sem glow: a marca resolve peso com contraste e offset, não com brilho. */ .bk-titulo { display: flex; flex-direction: column; align-items: center; gap: 0.04em; transform: skewX(-7deg); } .bk-linha { display: flex; } .bk-l { display: inline-block; font-size: clamp(56px, min(15vw, 22vh), 240px); line-height: 0.82; color: var(--preto); text-shadow: clamp(4px, 0.7vw, 10px) clamp(4px, 0.7vw, 10px) 0 var(--creme); opacity: 0; } .show .bk-l { animation: bk-letra 0.5s cubic-bezier(0.2, 1.4, 0.35, 1) both; } @keyframes bk-letra { 0% { opacity: 0; transform: translateY(-0.5em) scale(2.3) rotate(-9deg); } 60% { opacity: 1; transform: translateY(0.05em) scale(0.9) rotate(3deg); } 80% { transform: translateY(0) scale(1.08) rotate(-1deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } .bk-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 30px); max-width: 980px; margin: clamp(12px, 2.3vh, 28px) auto 0; opacity: 0; } .show .bk-duelo { animation: rise 0.5s ease-out 1.7s both; } .bk-duelo-pessoa { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: clamp(22px, min(4vw, 5vh), 58px); line-height: 0.95; } .bk-duelo-pessoa small { font-family: 'JetBrains Mono', monospace; font-size: clamp(10px, 1.5vw, 16px); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(10, 10, 15, 0.65); } /* A vítima é riscada em creme; o quebrador fica sólido em preto. */ .bk-duelo-pessoa.vitima { text-align: right; color: rgba(10, 10, 15, 0.62); text-decoration: line-through 4px var(--creme); } .bk-duelo-pessoa.quebrador { text-align: left; color: var(--preto); } .bk-versus { color: var(--creme); font-family: 'Archivo Black', sans-serif; font-size: clamp(38px, 7vw, 86px); line-height: 0.8; } .bk-revanche { margin-top: clamp(6px, 1.2vh, 14px); font-size: clamp(12px, 2.2vh, 22px); letter-spacing: 0.1em; color: rgba(10, 10, 15, 0.7); opacity: 0; } .show .bk-revanche { animation: rise 0.5s ease-out 2s both; } /* acessibilidade: sem vinheta para quem pediu menos movimento. Aqui é só a MOTION que sai; o conteúdo tem de continuar visível. Cada elemento cuja opacidade de repouso é 0 (porque a animação é que revela) precisa aparecer nesta lista, e com especificidade suficiente para vencer a regra de repouso — foi o que faltava em `.ov-hero .raio`, que é 0-2-1 contra o 0-1-0 de `.raio` e deixava um buraco no lugar do raio. */ @media (prefers-reduced-motion: reduce) { #overlay *, #meta *, #breaker, #breaker *, #conn.on { animation: none !important; } .raio, .ov-hero .raio, #ov-titulo, #ov-valor, #ov-cliente, #ov-vendedor, #ov-combo, #meta-num, #meta-label, #meta-sub, .bk-alerta, .bk-streak, .bk-titulo, .bk-l, .bk-duelo, .bk-revanche { opacity: 1; } #ov-vendedor, #meta-selo { clip-path: none; } } /* ---------- rodízio de painéis (modo TV, sem operador) ---------- */ /* `min-height: 0` em toda a cadeia: sem isso o minimo automatico do flex impede o palco de encolher e o conteudo vaza para fora da tela. */ #palco { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; display: flex; } #trilho { display: flex; flex: 1; min-width: 0; min-height: 0; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); } /* cada slide ocupa a tela toda e traz duas cenas lado a lado */ .slide { flex: 0 0 100%; width: 100%; height: 100%; min-height: 0; display: flex; } .cena { flex: 1 1 0; min-width: 0; min-height: 0; height: 100%; overflow: hidden; padding: clamp(16px, 3vh, 40px) clamp(20px, 2.4vw, 44px); display: flex; flex-direction: column; container-type: size; } /* divisória entre as duas colunas do slide */ .slide .cena + .cena { border-left: 2px solid #23232c; } .cena-head { display: flex; flex: 0 0 auto; align-items: baseline; gap: clamp(8px, 1vw, 16px); margin-bottom: clamp(10px, 2.2vh, 26px); } .cena-head h2 { font-size: clamp(var(--piso-dado), 5.9vh, 64px); color: var(--amarelo); letter-spacing: -0.03em; } /* o titulo tambem cede altura quando a cena e baixa, para nao comer o corpo */ .cena-head h2 { font-size: max(var(--piso-dado), min(64px, 3.4vw, 11cqh)); } .cena-sub { color: var(--cinza); font-size: clamp(var(--piso-rotulo), 3.7vh, 40px); } .cena-sub { font-size: max(var(--piso-rotulo), min(40px, 7cqh)); } .cena-vazia { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--cinza); font-size: clamp(var(--piso-dado), 6.6vh, 72px); text-align: center; } .cena-vazia { font-size: max(var(--piso-dado), min(72px, 12cqh)); } /* ranking grande (placar do mês/dia e rivalidades) */ .rank-grande { list-style: none; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; container-type: size; } /* `flex: 1` sozinho nao encolhe: o minimo automatico segura a linha na altura do conteudo e a ultima linha caia para fora da tela. Com `min-height: 0` as linhas (hoje `TOP_RANK`, ver dashboard.mjs) repartem a altura entre si, e o tipo dentro delas acompanha via `cqh`. */ .rank-grande li { display: grid; grid-template-columns: clamp(48px, 5.5vw, 106px) minmax(0, 1fr); gap: clamp(12px, 2vw, 30px); align-items: center; flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; padding: clamp(6px, 1.5cqh, 18px) clamp(8px, 1cqw, 16px); border-bottom: 1px solid #2a2a33; container-type: size; } .rank-grande li:last-child { border-bottom: none; } .rank-grande li.lider { background: rgba(255, 214, 10, 0.10); } /* Com poucos vendedores, evita que uma linha isolada ocupe todo o painel. */ .rank-grande.rank-compacto { justify-content: center; gap: clamp(10px, 1.5vh, 18px); } .rank-grande.rank-compacto li { flex: 0 1 clamp(140px, 23vh, 220px); border: 1px solid #2a2a33; } /* No compacto a linha fica bem mais alta que o normal; sem teto proprio o tipo cresceria junto e comeria a coluna do nome. Estes coeficientes mantem a proporcao do placar normal (`TOP_RANK` linhas). */ .rank-compacto .rk-pos { font-size: max(var(--piso-dado), min(66px, 30cqh)); } .rank-compacto .rk-nome { font-size: max(var(--piso-dado), min(52px, 24cqh, 7cqw)); } .rank-compacto .rk-nome small { font-size: max(var(--piso-rotulo), min(22px, 9cqh)); } /* Os corpos abaixo sao proporcionais a altura da PROPRIA linha (`cqh`), nao a da tela: e o que faz `TOP_RANK` vendedores caberem tao bem quanto dois. A primeira declaracao de cada par e o fallback para navegador sem container queries. */ .rk-pos { font-family: 'Archivo Black', sans-serif; font-size: clamp(var(--piso-dado), 8vh, 88px); color: var(--cinza); text-align: center; } .rk-pos { font-size: max(var(--piso-dado), min(88px, 55cqh)); } .rank-grande li.lider .rk-pos { color: var(--amarelo); } .rk-nome { font-weight: 700; font-size: clamp(var(--piso-dado), 8.1vh, 84px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rk-nome { font-size: max(var(--piso-dado), min(84px, 54cqh, 12cqw)); } /* line-height explícita, e isto NÃO é cosmético. A `normal` do DM Sans é ~1,29: a 84px daria 108px + 52px do small = 160px numa linha de 156,4px. O overflow:hidden com align-items:center amputaria pelas DUAS pontas, em silêncio -- o mesmo modo de falha que c2a198c descreveu. Com 1.05: 88,2 + 46 = 134px. Folga de 22px. */ .rk-nome { line-height: 1.05; } .rk-nome small { display: block; font-weight: 400; font-size: clamp(var(--piso-rotulo), 3.7vh, 40px); color: var(--cinza); overflow: hidden; text-overflow: ellipsis; } .rk-nome small { font-size: max(var(--piso-rotulo), min(40px, 26cqh)); } .rk-nome small { line-height: 1.15; } /* recordes: três blocos grandes, no mesmo tratamento dos stats (rótulo + valor) `repeat(3, 1fr)` e na verdade `minmax(auto, 1fr)`: as linhas se recusavam a encolher abaixo do conteudo e o terceiro card vazava para fora da tela. `minmax(0, 1fr)` reparte a altura de fato, e o conteudo se redimensiona. */ .recordes-grid { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.2vh, 16px); container-type: size; } .rec-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; min-width: 0; overflow: hidden; gap: clamp(6px, 1.6vh, 22px); padding: clamp(12px, 3.4vh, 48px) clamp(16px, 2vw, 36px); } /* medidas do card em fracao da grade (cada linha vale ~31cqh dela) */ .rec-card { gap: clamp(4px, 2.5cqh, 22px); padding: clamp(8px, 3cqh, 48px) clamp(14px, 2.4cqw, 36px); container-type: size; } .rec-card { padding: clamp(8px, 2.2cqh, 40px) clamp(14px, 2.4cqw, 36px); } .rec-card.azul { background: var(--azul); color: var(--branco); } .rec-card.rosa { background: var(--rosa); color: var(--preto); } .rec-card.amarelo { background: var(--amarelo); color: var(--preto); } .rec-lbl { font-size: clamp(var(--piso-rotulo), 3.4vh, 40px); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .rec-lbl { font-size: max(var(--piso-rotulo), min(40px, 26cqh, 5cqw)); } /* mesmo motivo do `.rk-nome` acima: `normal` estoura o card com o teto novo. */ .rec-lbl { line-height: 1.15; } .rec-val { font-size: clamp(var(--piso-dado), 7.6vh, 112px); line-height: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .rec-val { font-size: max(var(--piso-dado), min(112px, 58cqh, 17cqw)); } /* o madrugador e um nome proprio: mais largo por caractere que um valor */ .rec-val.nome { font-size: clamp(var(--piso-dado), 5vw, 72px); } .rec-val.nome { font-size: max(var(--piso-dado), min(72px, 50cqh, 13cqw)); } /* entrada animada dos itens da cena ativa (stagger) */ .cena.ativa .cena-head h2 { animation: cena-titulo 0.6s cubic-bezier(0.2, 1.4, 0.35, 1) both; } @keyframes cena-titulo { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } } .cena.ativa .rank-grande li, .cena.ativa .rec-card { animation: cena-item 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) both; } .cena.ativa .rank-grande li:nth-child(1), .cena.ativa .rec-card:nth-child(1) { animation-delay: 0.02s; } .cena.ativa .rank-grande li:nth-child(2), .cena.ativa .rec-card:nth-child(2) { animation-delay: 0.10s; } .cena.ativa .rank-grande li:nth-child(3), .cena.ativa .rec-card:nth-child(3) { animation-delay: 0.18s; } @keyframes cena-item { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #trilho, #stats-trilho { transition: none !important; } .cena.ativa .rank-grande li, .cena.ativa .rec-card, .cena.ativa .cena-head h2 { animation: none !important; } /* sem animação o anel viraria um círculo cheio e mentiria sobre o giro */ #giro { display: none; } /* o aviso continua visível, só para de pulsar */ body.audio-travado #som-travado { animation: none !important; } }