/* ===================================================================== SALAO 1.0 — Fundo ambiente: cubos 3D subindo (vitrine pública) --------------------------------------------------------------------- Camada fixa ATRÁS de todo o conteúdo (z-index:-1). O fundo do é a "tela": no claro (creme) os cubos sobem esverdiados; no escuro (verde-quase-preto) sobem claros, com um toque dourado — inversão de cor por tema. Cubos de verdade (6 faces, perspectiva) que sobem (rise) enquanto giram lentamente (spin). Animação 100% no compositor (transform/opacity) p/ rodar leve até no celular. Os cubos são criados por assets/js/bg-cubes.js, que sorteia tamanho, posição, duração, atraso e giro de cada um via custom properties. Subtil por design — não compete com o conteúdo. Desliga em prefers-reduced-motion (e o JS nem os cria nesse caso). ===================================================================== */ .bg-cubes { position: fixed; inset: 0; z-index: -1; /* atrás do conteúdo, à frente do fundo do body */ overflow: hidden; pointer-events: none; perspective: 760px; /* dá profundidade real aos cubos */ contain: layout paint style; /* isola pintura/layout do resto da página */ /* Tinta dos cubos — CLARO: esverdiado sobre o creme */ --cube-face: rgba(36, 131, 85, .07); --cube-edge: rgba(36, 131, 85, .34); --cube-glow: rgba(36, 131, 85, .13); --cube-top: rgba(58, 168, 116, .13); /* face de cima: mais luz */ --cube-shadow: rgba(10, 36, 23, .07); /* face de baixo: sombra (volume) */ --cube-hi: rgba(255, 255, 255, .30); /* brilho de vidro (sheen) */ } /* ESCURO: cubos claros (com leve dourado) sobre o verde-quase-preto */ :root[data-theme="dark"] .bg-cubes { --cube-face: rgba(233, 241, 236, .05); --cube-edge: rgba(255, 255, 255, .22); --cube-glow: rgba(236, 213, 150, .12); --cube-top: rgba(255, 255, 255, .12); --cube-shadow: rgba(0, 0, 0, .18); --cube-hi: rgba(255, 255, 255, .16); } /* Cada cubo: sobe (translateY) e some nas pontas. O giro 3D fica no filho .spin para não conflitar com o transform de subida. */ .bg-cubes .cube { position: absolute; /* --x vem em PX do JS (já afastado das bordas, contando tamanho + giro + deriva). O clamp é só rede de segurança se a janela encolher antes do rebuild — garante que a caixa do cubo nunca saia da viewport. */ left: clamp(2px, var(--x), calc(100% - var(--s) - 2px)); bottom: calc(-1 * var(--s) - 40px); width: var(--s); height: var(--s); transform-style: preserve-3d; opacity: 0; animation: cubeRise var(--dur) linear var(--delay) infinite; will-change: transform, opacity; } .bg-cubes .spin { position: absolute; inset: 0; transform-style: preserve-3d; /* --spd (negativo) dessincroniza a fase do giro entre os cubos */ animation: cubeSpin var(--spin) linear var(--spd, 0s) infinite; will-change: transform; } /* Faces: vidro translúcido com brilho superior (sheen) + aresta fina. O sheen no topo e a sombra na base dão volume — mesmo "de canto" lê como cubo, não como hexágono chapado. */ .bg-cubes .cf { position: absolute; inset: 0; border: 1px solid var(--cube-edge); border-radius: 9px; background: linear-gradient(145deg, var(--cube-hi) 0%, transparent 52%), var(--cube-face); box-shadow: inset 0 0 18px var(--cube-glow); } .bg-cubes .cf-tp { /* topo recebe mais luz */ background: linear-gradient(145deg, var(--cube-hi) 0%, transparent 58%), var(--cube-top); } .bg-cubes .cf-bt { /* base sombreada, sem brilho */ background: var(--cube-shadow); } /* Cubos de acento dourado (sorteados no JS) — toque de joalheria da marca */ .bg-cubes .cube.is-gold { --cube-edge: rgba(184, 144, 47, .46); --cube-glow: rgba(205, 163, 73, .18); --cube-hi: rgba(255, 245, 220, .34); } :root[data-theme="dark"] .bg-cubes .cube.is-gold { --cube-edge: rgba(236, 213, 150, .36); --cube-glow: rgba(236, 213, 150, .16); --cube-hi: rgba(255, 247, 225, .18); } /* Montagem do cubo: cada face deslocada meia-aresta no eixo certo */ .bg-cubes .cf-fr { transform: translateZ(calc(var(--s) / 2)); } .bg-cubes .cf-bk { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .bg-cubes .cf-rt { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .bg-cubes .cf-lf { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .bg-cubes .cf-tp { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .bg-cubes .cf-bt { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } /* Sobe da base ao topo da viewport, com leve deriva lateral; fade nas pontas */ @keyframes cubeRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: var(--op); } 88% { opacity: var(--op); } 100% { transform: translate3d(var(--drift), calc(-100vh - var(--s) - 80px), 0); opacity: 0; } } /* Giro 3D contínuo (sentido alternado é definido por cubo no JS) */ @keyframes cubeSpin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } /* Pausa quando a aba não está visível (poupa CPU/bateria) — classe via JS */ .bg-cubes.is-paused .cube, .bg-cubes.is-paused .spin { animation-play-state: paused; } /* Sem movimento: a camada inteira desaparece (o JS também não cria os cubos) */ @media (prefers-reduced-motion: reduce) { .bg-cubes { display: none; } }