/* ==========================================================================
PRISMA · foundations/cena.css — A CENA (registro expressivo · D-005, D-012)
--------------------------------------------------------------------------
O QUE É. O momento de marca: abertura de produto, fecho de página, painel
de acompanhamento. Um painel de cantos grandes com um CAMPO DE LUZ dentro
e, no máximo, três textos e um controle de vidro por cima.
DE ONDE VEM — referência, não invenção:
· refs da autora em D:/OneDrive/Escritorio/DESIGN SYSTEM/ — nas oito o fundo
é um campo de luz em MEIO-TOM, grande, macio, com UM objeto focal. Nunca
quase-preto: vidro sobre quase-preto é escuro sobre escuro, e some.
· 0ac7c728….jpg — massa escultural azul-ardósia com um fio QUENTE na aresta.
É daí que sai a forma desta cena.
· Orbit (docs/ANALISE_ORBIT_2026-09-19.md) — hero em moldura de raio grande,
16px da janela; vidro SÓ sobre imagem ou campo; deriva de 22–26s.
O PRISMA SEM TRIÂNGULO. A metáfora é percebida, não desenhada: luz branca
encontra a aresta de uma massa e se abre em cor — azul, ciano, um fio
laranja. Nenhum feixe, nenhuma seta, nenhum rótulo.
CUSTO. Nenhum `filter: blur()`: a maciez vem dos degraus do próprio
gradiente, e o grão esconde o bandeamento. O que se move é UMA camada,
só por transform.
ANATOMIA
Variantes: .cena--funda (acompanhar: mais sombra, fio discreto)
.cena--calma (fecho: forma centrada embaixo)
Com fotografia: ![]()
dentro de .cena-luz — a forma some,
fica um véu de sombra para o texto. A foto é decisão e acervo da autora.
CORES. Só tokens de marca + color-mix. Trocar a paleta troca a cena.
========================================================================== */
.cena {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-2xl);
background-color: var(--surface-destaque-base);
color: var(--text-on-destaque);
/* geometria da forma — o layout ajusta, a cena não sabe onde está */
--forma-largura: 164%;
--forma-proporcao: 1.16;
--forma-x: -67%;
--forma-y: 9%;
--forma-giro: -9deg;
--foto-foco: 70% 50%; /* onde a fotografia, se houver, mantém o foco ao recortar */
/* --- CONTROLES SOBRE A CENA ------------------------------------------------
Aqui dentro o chão é luz, não ardósia. O contrato semântico é o mesmo; o
valor é o de "sobre destaque", que o sistema já tinha (tokens.css, base).
Resultado: .vidro, .chip, .composer, .btn--vidro funcionam sem variante. */
--text-primary: var(--text-on-destaque);
--text-secondary: var(--text-on-destaque-2);
--text-muted: var(--text-on-destaque-3);
--text-disabled: var(--text-on-destaque-3);
--glass-tint-clear: var(--glass-on-destaque);
--glass-tint-liquid: var(--glass-on-destaque);
--glass-tint-frosted: color-mix(in srgb, var(--surface-destaque-base) 46%, transparent);
--surface-glass: var(--glass-on-destaque);
--surface-glass-strong: var(--glass-on-destaque-hover);
--glass-saturacao: 125%;
--border-glass: color-mix(in srgb, var(--text-on-destaque) 30%, transparent);
--surface-2: var(--glass-on-destaque);
--surface-3: var(--glass-on-destaque);
--border-subtle: var(--border-on-destaque);
--border-default: color-mix(in srgb, var(--text-on-destaque) 16%, transparent);
--border-strong: color-mix(in srgb, var(--text-on-destaque) 34%, transparent);
--glow-focus: 0 0 0 2px color-mix(in srgb, var(--surface-destaque-base) 60%, transparent),
0 0 0 4px var(--border-focus-sobre-imagem);
--elev-raised: 0 1px 2px color-mix(in srgb, var(--surface-destaque-base) 30%, transparent);
--elev-floating: 0 18px 48px -12px color-mix(in srgb, var(--surface-destaque-base) 55%, transparent);
}
/* --- O campo ----------------------------------------------------------------- */
.cena-luz {
position: absolute; inset: 0; z-index: -1;
pointer-events: none;
/* céu: do quase-branco frio, no alto à direita, ao azul estrutural */
background: var(--cena-ceu); /* o valor mora em tokens/tokens.css — cores em uso */
}
/* AS LÂMINAS. Duas placas de vidro azul, elipses bem excêntricas (círculo leria
como planeta), sobrepostas e levemente desencontradas — ref. 0ac7c728.
A de trás é translúcida e deixa o céu passar; a da frente é o chão do texto.
O calor aparece num TRECHO CURTO da aresta da frente: reflexo, não anel.
*/
.cena-forma {
position: absolute;
left: var(--forma-x); top: var(--forma-y);
width: var(--forma-largura);
aspect-ratio: var(--forma-proporcao);
transform: rotate(var(--forma-giro));
}
.cena-forma::before, .cena-forma::after { content: ""; position: absolute; border-radius: 50%; }
/* corpo da lâmina da frente: azul de verdade — meio-tom, não noite */
.cena-forma::before {
inset: 0;
background:
linear-gradient(118deg, color-mix(in srgb, var(--brand-blue) 22%, transparent) 0%, transparent 44%),
radial-gradient(closest-side,
color-mix(in srgb, var(--accent-active) 44%, var(--optico-solido)) 0%,
color-mix(in srgb, var(--accent-active) 58%, var(--optico-solido)) 56%,
color-mix(in srgb, var(--accent-active) 80%, var(--optico-solido)) 86%,
color-mix(in srgb, var(--accent-hover) 84%, var(--optico-solido)) 97.2%,
color-mix(in srgb, var(--brand-blue) 62%, var(--text-on-destaque)) 99.3%,
transparent 100%);
}
/* o reflexo quente: mora FORA e DENTRO da borda (por isso inset negativo), macio,
e a máscara cônica o acende só num trecho */
.cena-forma::after {
inset: -7%;
background: radial-gradient(closest-side,
transparent 80%,
color-mix(in srgb, var(--brand-orange) 10%, transparent) 84.5%,
color-mix(in srgb, var(--brand-orange) 46%, transparent) 86.9%,
color-mix(in srgb, var(--text-on-destaque) 70%, var(--brand-orange)) 87.7%,
color-mix(in srgb, var(--brand-orange) 40%, transparent) 88.6%,
color-mix(in srgb, var(--brand-orange) 9%, transparent) 92%,
transparent 97%);
-webkit-mask-image: conic-gradient(from var(--reflexo-de, 22deg) at 50% 50%,
transparent 0deg, black 16deg, black 30deg, transparent 52deg, transparent 360deg);
mask-image: conic-gradient(from var(--reflexo-de, 22deg) at 50% 50%,
transparent 0deg, black 16deg, black 30deg, transparent 52deg, transparent 360deg);
}
/* lâmina de trás: maior, mais inclinada, translúcida; aresta fria e fina */
.cena-forma--fundo {
left: var(--fundo-x, -71%); top: var(--fundo-y, 1%);
width: var(--fundo-largura, 180%);
aspect-ratio: var(--fundo-proporcao, 1.17);
transform: rotate(var(--fundo-giro, -13deg));
}
.cena-forma--fundo::before {
background: radial-gradient(closest-side,
color-mix(in srgb, var(--accent-primary) 70%, transparent) 0%,
color-mix(in srgb, var(--accent-primary) 58%, transparent) 90%,
color-mix(in srgb, var(--brand-blue) 44%, transparent) 98.4%,
color-mix(in srgb, var(--text-on-destaque) 62%, transparent) 99.6%,
transparent 100%);
}
.cena-forma--fundo::after { display: none; }
/* grão: tira o bandeamento do gradiente e dá pele de fotografia */
.cena-luz::after {
content: ""; position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: .16;
mix-blend-mode: soft-light;
}
/* --- Com fotografia ---------------------------------------------------------------
Quando houver foto aprovada pela autora. Sem texto nem interface pintados na
imagem: a interface de verdade é a que fica por cima. */
.cena-foto {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: var(--foto-foco);
/* VÁRIAS FOTOS (ref. Orbit: três no hero). Empilhadas; só a [data-ativa] aparece.
Uma foto vira "a cara" do produto; várias mostram de quem ele é. A troca é por
visita e por botão — NUNCA sozinha: fundo que muda enquanto se lê é ruído. */
opacity: 0;
transition: opacity 900ms var(--easing-movimento);
}
.cena-foto[data-ativa], .cena-foto:only-of-type { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cena-foto { transition-duration: var(--motion-default); } }
/* com foto, o que aparece onde ela se desfaz é ardósia — não o céu azul da cena */
.cena-luz:has(.cena-foto) { background: color-mix(in srgb, var(--surface-destaque-base) 38%, var(--optico-solido)); }
.cena-luz:has(.cena-foto) .cena-forma { display: none; }
.cena-luz:has(.cena-foto)::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg, color-mix(in srgb, var(--surface-destaque-base) 78%, transparent) 0%, transparent 62%),
linear-gradient(0deg, color-mix(in srgb, var(--surface-destaque-base) 70%, transparent) 0%, transparent 55%);
}
/* --- Variantes ------------------------------------------------------------------ */
/* FUNDA — acompanhar trabalho. A massa toma quase tudo; sobra uma fresta de céu. */
.cena--funda {
--forma-largura: 230%;
--forma-proporcao: 2;
--forma-x: -70%;
--forma-y: 3%;
--forma-giro: 6deg;
--fundo-largura: 250%; --fundo-proporcao: 2.05; --fundo-x: -76%; --fundo-y: -5%; --fundo-giro: 8deg;
--reflexo-de: 12deg;
}
.cena--funda .cena-luz {
background: var(--cena-ceu-fundo); /* o valor mora em tokens/tokens.css — cores em uso */
}
.cena--funda .cena-forma:not(.cena-forma--fundo)::before {
background: radial-gradient(closest-side,
color-mix(in srgb, var(--accent-active) 30%, var(--optico-solido)) 0%,
color-mix(in srgb, var(--accent-active) 46%, var(--optico-solido)) 88%,
color-mix(in srgb, var(--accent-hover) 70%, var(--optico-solido)) 98.6%,
color-mix(in srgb, var(--brand-blue) 60%, var(--text-on-destaque)) 99.6%,
transparent 100%);
}
/* CALMA — fecho. A forma sobe de baixo, centrada; o texto fica no céu. */
.cena--calma {
--forma-largura: 170%;
--forma-proporcao: 2.2;
--forma-x: -62%;
--forma-y: 87%;
--forma-giro: -5deg;
--fundo-largura: 190%; --fundo-proporcao: 2.25; --fundo-x: -68%; --fundo-y: 81%; --fundo-giro: -7deg;
--reflexo-de: 8deg;
}
.cena--calma .cena-luz {
background: var(--cena-ceu-calmo); /* o valor mora em tokens/tokens.css — cores em uso */
}
/* --- Controles: o que muda de verdade sobre a cena ---------------------------------
O selecionado deixa de ser "azul sobre azul" e vira placa clara — como o chip
ativo da Orbit e o "Activate" da ref. 4f0d8a0e. */
.cena .chip {
background-color: var(--glass-on-destaque);
-webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(var(--glass-saturacao));
backdrop-filter: blur(var(--glass-blur-clear)) saturate(var(--glass-saturacao));
border-color: var(--border-glass);
color: var(--text-on-destaque);
}
.cena .chip:hover { background-color: var(--glass-on-destaque-hover); }
.cena .chip[aria-pressed="true"],
.cena .chip--ativo {
background-color: var(--text-on-destaque);
border-color: transparent;
color: var(--surface-destaque-base);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.cena .composer-enviar:not(:disabled) {
background-color: var(--text-on-destaque);
background-image: none;
color: var(--surface-destaque-base);
}
.cena .composer-enviar:not(:disabled):hover { background-color: var(--border-focus-sobre-imagem); }
/* --- Movimento -----------------------------------------------------------------------
PORTÃO (skill animate): é o ÚNICO movimento ambiente da tela e mora num momento
de marca; propósito = atmosfera de abertura. 26s de ida, vai-e-volta: ~0,02 Hz —
longe da faixa que dá enjoo (≈0,2 Hz, skill apple-design §14). Só transform,
numa camada. Nada do que a pessoa LÊ ou USA se mexe. */
@media (prefers-reduced-motion: no-preference) {
.cena-forma {
animation: cena-deriva 26s var(--easing-movimento) infinite alternate;
will-change: transform;
}
.cena-forma--fundo { animation-name: cena-deriva-fundo; animation-duration: 34s; }
[data-reduzir-movimento] .cena-forma { animation: none; will-change: auto; }
}
@keyframes cena-deriva {
from { transform: translate3d(0, 0, 0) rotate(var(--forma-giro)) scale(1); }
to { transform: translate3d(-1.2%, 1%, 0) rotate(calc(var(--forma-giro) + 2.5deg)) scale(1.025); }
}
@keyframes cena-deriva-fundo {
from { transform: translate3d(0, 0, 0) rotate(var(--fundo-giro, -13deg)) scale(1); }
to { transform: translate3d(1%, -.8%, 0) rotate(calc(var(--fundo-giro, -13deg) - 2deg)) scale(1.02); }
}
/* --- Degradação ------------------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
.cena { --glass-tint-clear: color-mix(in srgb, var(--surface-destaque-base) 82%, transparent);
--glass-tint-liquid: color-mix(in srgb, var(--surface-destaque-base) 88%, transparent); }
}
@media (forced-colors: active) {
.cena-luz { display: none; }
.cena { border: 1px solid CanvasText; }
}
/* ==========================================================================
ACRESCENTADO NA MESCLA DA HOME (19/09/2026 · D-014)
========================================================================== */
/* título editorial sobre a cena: a segunda frase a 70% — o "muted" daqui (55%) some sobre luz */
.cena .editorial em { color: var(--text-on-destaque-2); }
/* --- CENA COM FOTOGRAFIA ---------------------------------------------------------------
+ ![]()
dentro de .cena-luz.
A foto JÁ traz seu lado calmo (pedido nos prompts: esquerda em sombra). O véu só firma o
chão do título — um sopro da esquerda, dosado POR FOTO em --foto-veu — e o do composer.
O composer vira vidro fumê (ref. 3abdd9d3, "Ask me anything" sobre a água): mesa e papel
claros por trás de vidro claro apagariam o texto.
Direção de arte das fotos: docs/PROMPTS_IMAGEM.md (dia claro, gente no computador, feliz por
ganhar tempo, realidade brasileira, sem letra/tela/logo/triângulo dentro da imagem). */
:root { --foto-veu: 46%; } /* cada foto pode pedir o seu: data-veu no ![]()
*/
.cena--foto { background-color: color-mix(in srgb, var(--surface-destaque-base) 38%, var(--optico-solido)); }
.cena--foto .cena-luz:has(.cena-foto)::before {
background:
linear-gradient(90deg, color-mix(in srgb, var(--optico-solido) var(--foto-veu), transparent) 0%,
color-mix(in srgb, var(--optico-solido) calc(var(--foto-veu) * .6), transparent) 38%, transparent 70%),
linear-gradient(0deg, color-mix(in srgb, var(--optico-solido) 58%, transparent) 0%, transparent 44%);
transition: opacity 900ms var(--easing-movimento);
}
.cena--foto .composer-caixa { background-color: var(--glass-tint-frosted); }
/* A FOTO OCUPA A CENA INTEIRA em qualquer tela maior que celular — foi isso que a autora aprovou (19/09, 22h02 e 23h39).
Às 22h50 o Claude estendeu a "faixa" a tudo abaixo de 1100px para salvar um rosto cortado, sem mostrar a ela: REVERTIDO.
Rosto cortado se resolve com o FOCO da foto, por largura e por foto:
--foto-foco tela larga
--foto-corte 721–1100px: a cena fica quase quadrada e só metade da foto aparece. Porcentagem fixa de foco não serve
(a janela muda com a largura e corta o rosto). Cada foto diz QUANTO pode ser cortado à direita
(fração da imagem, p.ex. .16): a pessoa encosta na direita e o título fica livre à esquerda.
--foto-foco-faixa só celular, onde a foto vira faixa no alto e se desfaz — ali o texto não cabe ao lado de ninguém. */
:root { --foto-faixa: 350px; --foto-foco-faixa: initial; --foto-corte: .14; --foto-proporcao: 1.777; }
.cena--foto .cena-luz { container-type: size; } /* para o corte ser medido pela altura da própria cena (cqh) */
@media (min-width: 721px) and (max-width: 1100px) {
.cena--foto .cena-foto {
/* desloca a imagem para a direita em corte × largura-renderizada; o max() impede que sobre vão à esquerda */
/* (a forma `right center`, de três valores, NÃO vale em object-position — o navegador ignorava a regra inteira) */
object-position: calc(100% + min(var(--foto-corte) * var(--foto-proporcao) * 100cqh, var(--foto-proporcao) * 100cqh - 100cqw)) 50%;
}
}
@media (max-width: 720px) {
.cena--foto .cena-foto {
height: var(--foto-faixa);
object-position: var(--foto-foco-faixa, var(--foto-foco));
-webkit-mask-image: linear-gradient(180deg, black 34%, transparent 92%);
mask-image: linear-gradient(180deg, black 34%, transparent 92%);
}
.cena--foto .cena-luz:has(.cena-foto)::before { background: none; }
}