/* Landing page / portfolio COLASNI — colagem 100% com assets exportados do Figma (static/img/landing/, ver ASSETS.md). Textos e artes são SVG em path (fiéis à referência); só os fundos/gradientes, o marquee e os ícones clicáveis do desktop são feitos em código. ESCALA: o frame do Figma tem 1920px de largura (desktop-lp.svg = 1920). Todo elemento é dimensionado por: largura_do_viewBox / 19.2 = vw. Assim os tamanhos estipulados no design são preservados. */ /* o theme.css trava o body em 100vh para as telas da ferramenta; a landing precisa de rolagem vertical */ /* NÃO pôr overflow no : qualquer overflow (clip/hidden) na raiz muda o container de scroll e QUEBRA o position:sticky da boca. O clip visual do transbordo horizontal (faixas da esteira/marquee que correm fora da tela) já vem do overflow-x:hidden do body. O que faltava era impedir o GESTO de arraste horizontal do iOS (que "puxava" esse conteúdo clipado, deslocando tudo com uma barra lateral): isso é o touch-action — que não afeta o sticky. landing.css só é carregado na LP, então isto não afeta as telas da ferramenta. */ /* v2: zoom TRAVADO — sem pinch-zoom no touch-action (o viewport meta com maximum-scale=1 + user-scalable=no cuida do resto, inclusive do auto-zoom do iOS ao focar inputs; o input do gate também tem font-size >= 16px). */ html { touch-action: pan-y; } body.landing { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; /* iOS: só rolagem vertical, sem pan/overscroll horizontal e sem pinch — nada "mexe" na horizontal ao tocar e o zoom fica travado. */ overscroll-behavior-x: none; touch-action: pan-y; } body.landing img { display: block; user-select: none; } /* ---------- cursores Win98 (assets já usados na intro do player) ---------- */ body.landing { cursor: url('/static/img/Normal.svg') 0 0, auto; } body.landing a { cursor: url('/static/img/Pointer.svg') 6 0, pointer; } /* textura exportada do Figma sobre a página inteira — camada mais alta, repetida verticalmente (tile 1920x2248), sem bloquear cliques */ body.landing::after { content: ''; position: absolute; inset: 0; z-index: 100; background: url('/static/img/landing/texture.webp') top center repeat-y; background-size: 100% auto; pointer-events: none; } /* ---------- S0: intro (olho -> COLASNI, cobre a tela ~2s) ---------- */ body.lp-intro-lock { overflow: hidden; } /* trava o scroll durante a intro */ #lp-intro { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: #FF0000; animation: lp-intro-out .5s ease 4.5s forwards; /* 1s com tudo na tela, depois some (~5s total) */ } /* mesmo grão da página, por cima do vermelho e do logo da intro (o body.landing::after fica abaixo da intro, então repetimos aqui) */ #lp-intro::after { content: ''; position: absolute; inset: 0; z-index: 1; background: url('/static/img/landing/texture.webp') top center repeat-y; background-size: 100% auto; pointer-events: none; } .lp-intro-stage { position: relative; width: min(66vw, 860px); animation: lp-intro-pop .55s cubic-bezier(.2, .8, .3, 1) both; } /* fase 1: recorte estreito em volta do olho (só o olho aparece); fase 2: as letras "desenrolam" pra fora a partir do olho */ .lp-intro-word { display: block; width: 100%; clip-path: inset(0 56.9% 0 18.9%); /* olho inteiro (x 318-707) sem tocar C nem L */ animation: lp-intro-unfurl 2s cubic-bezier(.6, .05, .2, 1) 1.5s forwards; /* 1.5s só o olho, abre em 2s */ } .lp-intro-iris { position: absolute; left: 30.05%; /* mesmo mapeamento do olho no wordmark do hero */ top: 51.2%; width: 8.33%; transform: translate(-50%, -50%); } .lp-intro-iris img { display: block; width: 100%; } @keyframes lp-intro-pop { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } } @keyframes lp-intro-unfurl { to { clip-path: inset(0 0 0 0); } } @keyframes lp-intro-out { to { opacity: 0; visibility: hidden; } } /* ---------- S0b: acesso restrito — senha entre a intro e a página ---------- */ /* mesmo vermelho da intro: quando ela some, a tela "continua" nela, só que sem o logo e com a janela de senha flutuando */ #lp-gate { position: fixed; inset: 0; z-index: 999; /* logo abaixo da intro (1000) */ background: #FF0000; transition: opacity .45s ease; } #lp-gate[hidden] { display: none; } /* sem JS a página fica acessível */ #lp-gate::after { /* mesmo grão da intro, sobre o vermelho (abaixo da janela) */ content: ''; position: absolute; inset: 0; z-index: 2; background: url('/static/img/landing/texture.webp') top center repeat-y; background-size: 100% auto; pointer-events: none; } #lp-gate.liberado { opacity: 0; pointer-events: none; } /* wrapper movido por JS (descanso de tela: quica nas bordas); as tremidas animam o form filho — os transforms não brigam */ .lp-gate-pos { position: absolute; left: 0; top: 0; z-index: 3; /* janela acima do grão (::after z2): sem textura por cima */ opacity: 0; } #lp-gate.aberto .lp-gate-pos { opacity: 1; } #lp-gate.aberto .lp-gate-win { animation: lp-gate-chega .4s ease-out 1; } .lp-gate-win { width: min(320px, 84vw); } .lp-gate-win.treme { animation: lp-gate-treme .35s ease-out 1; } /* tremida da chegada e do erro são gêmeas com nomes diferentes: o nome distinto deixa o JS reiniciar a do erro sem apagar a da chegada */ @keyframes lp-gate-chega { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1.5px) rotate(-.4deg); } 40% { transform: translate(2px, -1px) rotate(.4deg); } 60% { transform: translate(-1.5px, .8px); } 80% { transform: translate(1px, -.6px); } } @keyframes lp-gate-treme { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1.5px) rotate(-.4deg); } 40% { transform: translate(2px, -1px) rotate(.4deg); } 60% { transform: translate(-1.5px, .8px); } 80% { transform: translate(1px, -.6px); } } .lp-gate-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 12px; } .lp-gate-erro { color: #B00000; } .lp-gate-dica { color: #404040; font-style: italic; } .lp-gate-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .lp-gate-win .w98-btn { cursor: url('/static/img/Pointer.svg') 6 0, pointer; } /* ---------- revelar ao entrar na tela ---------- */ .js-reveal .lp-reveal { opacity: 0; transform: translateY(30px); } .js-reveal .lp-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } @media (prefers-reduced-motion: reduce) { #lp-intro { animation: lp-intro-out .3s ease .4s forwards; } .lp-intro-stage { animation: lp-intro-pop .3s ease both; } .lp-intro-word { clip-path: none; animation: none; } #lp-gate.aberto .lp-gate-win, .lp-gate-win.treme { animation: none; } .js-reveal .lp-reveal { transform: none; } .js-reveal .lp-reveal.is-in { transition: opacity .5s ease; } } /* ---------- interações de cursor ---------- */ /* glitch (RGB split + tremida) nos 3 logos do topo (a íris solta treme junto quando o logo do hero está em hover) */ .lp-hero .lp-logo:hover, .lp-hero .lp-logo:hover + .lp-iris-pos .lp-iris, .lp-barcode-falling:hover, .lp-barcode-eye:hover { animation: lp-glitch .28s steps(2, end) infinite; filter: drop-shadow(.18vw 0 0 #00e5ff) drop-shadow(-.18vw 0 0 #ff4dd2); } @keyframes lp-glitch { 0% { transform: translate(0, 0); } 25% { transform: translate(-.2vw, .12vw); } 50% { transform: translate(.2vw, -.08vw); } 75% { transform: translate(-.08vw, -.14vw); } 100% { transform: translate(.14vw, .1vw); } } /* destaque dos textos: cópia colorida deslocada atrás da tinta (cores da paleta do rima-analyzer — "dê destaque ao que importa") */ .lp-milpalavras, .lp-porisso, .lp-mentira, .lp-1000, .lp-textvideo, .lp-filme, .lp-pira img, .lp-lifestyle { transition: filter .15s ease; } .lp-milpalavras:hover { filter: drop-shadow(.45vw .35vw 0 #ffea00); } .lp-porisso:hover { filter: drop-shadow(.45vw .35vw 0 #00e676); } .lp-mentira:hover { filter: drop-shadow(.45vw .35vw 0 #00e5ff); } .lp-1000:hover { filter: drop-shadow(.45vw .35vw 0 #ff9100); } .lp-textvideo:hover { filter: drop-shadow(.45vw .35vw 0 #ff4dd2); } .lp-filme:hover { filter: drop-shadow(.45vw .35vw 0 #a960ff); } .lp-pira img:hover { filter: drop-shadow(.45vw .35vw 0 #c6ff00); } /* ---------- S1 / S11: hero e footer ---------- */ .lp-hero, .lp-footer { display: flex; justify-content: center; padding: 2.5vw 0 0vw; } /* logo acima da figura wireframe (que sobe atrás do wordmark) */ .lp-hero { position: relative; z-index: 2; } .lp-logo { width: 86.9vw; height: auto; } /* 1669/19.2 */ /* íris solta do logo: segue o cursor (JS seta --iris-dx/dy no wrapper .lp-iris-pos; NUNCA pôr transform no img .lp-iris — brigaria com a animação do glitch) */ .lp-logo-wrap { position: relative; width: fit-content; } .lp-iris-pos { position: absolute; left: 30.05%; /* centro da íris medido no canvas do logo: (501.5, 130) de 1669x254 */ top: 51.2%; width: 8.33%; /* 139/1669 */ transform: translate(calc(-50% + var(--iris-dx, 0px)), calc(-50% + var(--iris-dy, 0px))); pointer-events: none; } .lp-iris { width: 100%; height: auto; } .lp-footer { padding: 5vw 0 7vw; } /* ---------- S2 + S3: wrapper (figura atravessa as duas seções) ---------- */ /* o gradiente vermelho->cinza é do conjunto manifesto+poema, para a figura wireframe poder aparecer inteira por trás dos dois */ /* Paradas em PORCENTAGEM da própria altura, não em vw: com stops fixos o cinza só chegava aos 94vw, e como o bloco tem ~81vw de altura o gradiente terminava no meio da transição — a base ficava num rosa alaranjado que brigava com o cinza da seção seguinte. Em % o cinza pousa exatamente na borda de baixo, qualquer que seja o conteúdo do bloco. */ .lp-upper { position: relative; background: linear-gradient(180deg, #FF0000 0%, #FF0000 62%, #C77E7E 81%, #ADADAD 100%); } /* figura wireframe inteira (da cabeça aos pés), centralizada atrás */ .lp-figure { position: absolute; left: 50%; top: -12vw; /* sobe: a cabeça entra atrás do wordmark COLASNI */ transform: translateX(-50%); width: 29.9vw; /* 574/19.2 -> 102.8vw de altura */ z-index: 0; pointer-events: none; } /* ---------- S2: manifesto ---------- */ .lp-manifesto { position: relative; padding: 0vw 3vw 4vw; } /* no design os barcodes sobrepõem a área do texto central, então cada um é ancorado na sua borda */ .lp-mid-row { position: relative; z-index: 1; min-height: 30vw; } .lp-barcode-falling { /* 732/19.2 */ position: absolute; left: -9vw; /* sangra à esquerda para o wordmark não tocar o texto central */ top: 0; width: 38.1vw; } .lp-barcode-eye { /* 599/19.2 */ position: absolute; right: -2.5vw; /* sangra levemente para não tocar o texto central */ top: 0; width: 31.2vw; } .lp-milpalavras { /* 617/19.2 */ width: 32.1vw; margin: 1vw auto 0; } /* como bloco full-width: o img filho posiciona pelas próprias margens (como era antes do swap desktop/mobile) */ .lp-porisso-pic { display: block; } .lp-porisso { position: relative; z-index: 1; width: 69vw; /* 1324/19.2 */ margin: 0vw 0 0 2vw; } .lp-dolby { position: relative; z-index: 1; width: 19.6vw; /* 376/19.2 */ margin: 3vw 3vw 0 auto; } /* ---------- S2.5: esteira de aeroporto ---------- */ /* a esteira (airport.svg 1920x301) ocupa a largura toda e fica parada; as bandejas correm por cima num loop. Sem z-index de propósito: a esteira NÃO cria contexto de empilhamento, então o trilho das bandejas (z-index 101) consegue subir acima do grão global (body::after, z 100) enquanto a esteira em si fica abaixo dele. */ .lp-esteira { position: relative; width: 100%; height: 15.68vw; /* 301/19.2 */ margin-top: 6vw; /* desce um pouco em relação ao manifesto */ /* corta o trilho SÓ na horizontal (ele vaza p/ fora da tela em loop); na vertical fica visível pra bandejas mais altas (ex.: bolsa aberta, mais alta que a esteira) transbordarem por cima das seções vizinhas em vez de serem cortadas. A contenção horizontal da página já vem do body (overflow-x:hidden). clip (não hidden) permite a combinação clip-x + visible-y sem virar scroll. */ overflow-x: clip; overflow-y: visible; /* altura visível do belt (301/19.2 menos o 1.2vw que ele desce): é até onde a bandeja aceita toque — ver .lp-tray::after */ --tray-hit: 14.5vw; } .lp-esteira-belt { /* superfície da esteira, parada */ position: absolute; left: 0; /* o airport.svg tem ~23px (7.6%) transparentes na base; descemos a imagem pra os roletes encostarem no fim da seção e não sobrar faixa vermelha (o .lp-upper vermelho aparecia por baixo). O excesso transparente sai por cima, onde o vermelho é esperado mesmo. */ bottom: -1.2vw; width: 100%; height: auto; pointer-events: none; } /* trilho das bandejas: anda para a esquerda em loop. Duas cópias do conjunto (8 bandejas); translateX(-50%) = exatamente uma cópia, então o loop é contínuo. O espaçamento é margin-right por bandeja (uniforme, inclusive na emenda entre as cópias) para não quebrar a costura do -50%. */ .lp-esteira-track { position: absolute; left: 0; bottom: 0; height: 100%; display: flex; align-items: flex-end; width: max-content; z-index: 101; /* bandejas acima do grão global (100): sem textura por cima */ animation: lp-esteira-move 38s linear infinite; } /* o mouse sobre a esteira PARA o movimento (só onde há mouse: no touch o :hover GRUDA depois do toque e a esteira ficava parada pra sempre) */ @media (hover: hover) { .lp-esteira:hover .lp-esteira-track { animation-play-state: paused; } } .lp-tray { position: relative; flex: none; /* --tray-w vem inline do template (largura natural do SVG / 19.2); o zoom permite a esteira ser maior num breakpoint sem tocar no HTML */ width: calc(var(--tray-w, 20vw) * var(--tray-zoom, 1)); margin-right: 10vw; /* espaço entre bandejas */ cursor: default; pointer-events: none; /* quem recebe o toque é o ::after (faixa da esteira) */ } .lp-tray img { display: block; width: 100%; height: auto; } /* Área de toque/hover = a FAIXA DA ESTEIRA, não a caixa inteira da bandeja. Bandejas altas (e a imagem aberta, que é mais alta e transborda pra baixo) estavam roubando o toque do botão logo abaixo da esteira. --tray-hit é a altura visível do belt, medida a partir da base da bandeja; o min() impede que a faixa passe da própria bandeja quando ela é baixinha. */ .lp-tray::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: min(100%, var(--tray-hit, 100%)); pointer-events: auto; } /* largura de cada bandeja vem inline (style="width:...vw"), calculada em app.py a partir da largura natural do SVG. Só os ajustes verticais abaixo são feitos à mão por bandeja — uma bandeja nova (tray5+) entra com margin-bottom 0 e pode ser acertada adicionando uma regra aqui. */ /* bandejas mais baixas que a esteira sobem um pouco (senão vazam por baixo) */ .lp-tray-1 { margin-bottom: 1.4vw; } /* bin azul: descido p/ centralizar na esteira */ .lp-tray-2 { margin-bottom: 1.0vw; } /* caixas: só um tiquinho pra cima */ .lp-tray-3 { margin-bottom: -1.5vw; } /* bin azul (altura cheia): desce p/ não vazar por cima */ .lp-tray-4 { margin-bottom: 1.6vw; } /* o mouse sobre uma bandeja faz ela tremer (transform no img, não no trilho — não brigam) */ @media (hover: hover) { .lp-tray:hover img { animation: lp-tray-treme .32s ease-in-out infinite; } .lp-tray--swap:hover .lp-tray-closed { opacity: 0; } .lp-tray--swap:hover .lp-tray-open { opacity: 1; } } /* bandejas com troca de imagem (bolsa abre): as duas imagens ficam empilhadas; por padrão mostra a fechada. No desktop quem troca é o hover (acima); no touch é a classe .aberta, posta pelo JS — assim o 2º toque FECHA de volta (com :hover puro o toque grudava a bandeja aberta pra sempre). */ .lp-tray--swap .lp-tray-open { position: absolute; inset: 0; opacity: 0; } .lp-tray--swap.aberta .lp-tray-closed { opacity: 0; } .lp-tray--swap.aberta .lp-tray-open { opacity: 1; } /* ajuste fino vertical da imagem aberta, por bandeja (o -open pode ter enquadre diferente do fechado). top negativo sobe a imagem. */ .lp-tray-4 .lp-tray-open { top: -0.7vw; } @keyframes lp-esteira-move { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes lp-tray-treme { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-.18vw, .12vw) rotate(-1deg); } 40% { transform: translate(.18vw, -.06vw) rotate(1deg); } 60% { transform: translate(-.12vw, .1vw) rotate(-.6deg); } 80% { transform: translate(.14vw, -.08vw) rotate(.7deg); } } @media (prefers-reduced-motion: reduce) { .lp-esteira-track { animation: none; } .lp-tray:hover img { animation: none; } } /* ---------- S3: poema (gradiente vermelho -> cinza) ---------- */ .lp-poema { padding: 3vw 0 2vw; /* fundo vem do .lp-upper */ } /* globo + texto empilhados na mesma célula; o texto-1000 encosta à direita */ .lp-poema-stage { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; } .lp-poema-stage > * { grid-area: 1 / 1; } .lp-globe { width: 76.9vw; z-index: 0; } /* 1476/19.2 */ /* pião: giro disparado por JS (classe .gira) ao entrar com o mouse e que roda inteiro mesmo se o hover cair no meio — a caixa 3D sai de debaixo do cursor durante o rotateY, então :hover puro travava o giro */ .lp-globe.gira { animation: lp-piao 1s cubic-bezier(.25, .8, .35, 1) 1; } @keyframes lp-piao { from { transform: perspective(70vw) rotateY(0deg); } to { transform: perspective(70vw) rotateY(1080deg); } } .lp-mentira { width: 37.5vw; z-index: 1; } /* 720/19.2 */ .lp-1000 { width: 22.3vw; /* 429/19.2 */ z-index: 1; justify-self: end; margin-right: 3vw; } /* ---------- S4/S9: faixa marquee ---------- */ .lp-marquee { overflow: hidden; } .lp-upper + .lp-marquee { background: #ADADAD; } /* a faixa para de correr enquanto o mouse está sobre ela */ .lp-marquee:hover .lp-marquee-track { animation-play-state: paused; } .lp-marquee-track { display: flex; width: max-content; animation: lp-marquee-slide 28s linear infinite; } .lp-marquee-track img { /* tile 2143x244 na escala 1:19.2 */ height: 12.7vw; width: auto; flex: none; } @keyframes lp-marquee-slide { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } } /* ---------- S5: rádio / prédio (cinza) ---------- */ .lp-radio { position: relative; background: linear-gradient(180deg, #ADADAD 0%, #C7C2C2 100%); padding: 3vw 2vw 4vw; overflow: hidden; } .lp-bridge { position: absolute; left: -1vw; top: -1vw; /* tinta colada no barcode-strip acima (vão medido por ink-scan) */ width: 102.1vw; /* 1961/19.2 (sangra 2vw) */ z-index: 0; pointer-events: none; } .lp-textvideo { position: relative; z-index: 1; width: 45.7vw; /* 878/19.2 */ } /* traços (metade esquerda do svg) sublinham o fim de "homicidio"; a cabeça (metade direita) fica logo após a palavra */ .lp-head { position: absolute; left: 38.2vw; /* traços sob "homicidio"; cabeça sem tocar a letra final */ top: 37.3vw; /* traços a 45% da própria altura na base da última linha */ width: 16vw; /* 307/19.2 */ z-index: 1; } .lp-filme { position: absolute; right: 3vw; top: 7vw; width: 39.1vw; /* 751/19.2 */ z-index: 1; } /* ---------- S6: olho + texto circular ---------- */ /* começa no MESMO cinza em que o bloco de cima termina. O tom claro antigo (#C7C2C2) era a saída da seção do rádio, que está oculta — sem ela sobrava um degrau de cinza visível na emenda. Se o rádio voltar, este stop volta a #C7C2C2, que é onde ele entrega. */ .lp-olho { background: linear-gradient(180deg, #ADADAD 0%, #D77777 70%, #FF0000 100%); display: flex; justify-content: center; align-items: center; gap: 4vw; padding: 6vw 0; } /* "isso não é lifestyle / esse é meu estilo de vida" ao lado do olho */ .lp-lifestyle { width: 43vw; } /* 825/19.2 */ .lp-lifestyle:hover { filter: drop-shadow(.45vw .35vw 0 #5c9dff); } .lp-olho-wrap { position: relative; width: 42.8vw; /* 822/19.2 */ aspect-ratio: 1; } .lp-olho-texto { position: absolute; inset: 0; width: 100%; animation: lp-girar 15s linear infinite; } @keyframes lp-girar { to { transform: rotate(-360deg); } } /* olho do logo COLASNI (export logo-colasi-eye-only, 415x254, mesma escala 1:1 do logo) parado no centro do texto circular; a íris viva do hero segue o cursor (mesma técnica: --olho-iris-dx/dy no wrapper da íris, setados pelo script no landing.html — NUNCA transform no img) */ .lp-olho-eye-pos { position: absolute; left: 50%; top: 50%; width: 79%; transform: translate(-50%, -50%); } .lp-olho-eye { width: 100%; } .lp-olho-iris-pos { position: absolute; left: 44.94%; /* centro da íris no canvas 415x254 (ink-scan 1:1 c/ logo) */ top: 51.18%; width: 33.49%; /* 139/415 */ transform: translate(calc(-50% + var(--olho-iris-dx, 0px)), calc(-50% + var(--olho-iris-dy, 0px))); pointer-events: none; } .lp-olho-iris { width: 100%; height: auto; } /* ---------- cursor-martelo (S6 lifestyle + S7 espelhos) ---------- */ /* nas zonas do martelo o cursor real some (JS mostra o martelo que segue o mouse); a classe no body vem do JS, então sem JS o cursor continua normal. Vence o cursor Pointer dos hotspots .lp-quebra por especificidade */ body.lp-hammer-on .lp-espelhos, body.lp-hammer-on .lp-espelhos * { cursor: none; } #lp-hammer { position: fixed; left: 0; top: 0; z-index: 2000; /* acima da textura (100) */ pointer-events: none; opacity: 0; will-change: transform; } #lp-hammer.ativo { opacity: 1; } #lp-hammer img { display: block; width: 7.9vw; /* martelo grande, lúdico */ transform: rotate(var(--rest, 0deg)); transform-origin: var(--piv, 78% 90%); /* pivota no cabo: a cabeça faz o arco */ } /* martelada = "jogar pra trás e voltar": em repouso a cabeça já está no ponto do clique (o usuário mira certinho); ao clicar o martelo recua e volta — o impacto é a VOLTA ao ponto (fim da animação = repouso) */ #lp-hammer img.batendo { animation: lp-martelada .4s 1; } @keyframes lp-martelada { 0% { transform: rotate(var(--rest, 0deg)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 45% { transform: rotate(var(--windback, -52deg)); animation-timing-function: cubic-bezier(.6, 0, .8, 1); } 100% { transform: rotate(var(--rest, 0deg)); } /* volta e bate no ponto */ } /* ---------- S7: espelhos ---------- */ .lp-espelhos { background: #FF0000; display: flex; justify-content: center; padding: 5vw 0 2vw; } /* camada de trás (mirros-1) e da frente (mirrors-2) empilhadas e centradas */ .lp-espelhos-stage { display: grid; place-items: center; } .lp-espelhos-stage > * { grid-area: 1 / 1; } /* mirros fica POR CIMA do mirrors-2; conjunto reduzido: export * .9 * .7 */ .lp-mirrors-2 { width: 64vw; z-index: 0; } /* wrap da interação "quebrar o vidro": intacto embaixo, quebrado por cima revelado por frame (clip-path nos vãos entre porta-retratos: 32.5%/67.5%) */ .lp-quebra-wrap { position: relative; width: 43.8vw; z-index: 1; } .lp-mirros-1 { width: 100%; } .lp-mirros-vidro { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; } .lp-mirros-vidro[data-frame="0"] { clip-path: inset(0 67.5% 0 0); } .lp-mirros-vidro[data-frame="1"] { clip-path: inset(0 32.5% 0 32.5%); } .lp-mirros-vidro[data-frame="2"] { clip-path: inset(0 0 0 67.5%); } /* pixelado por cima do intacto (mesmos recortes por frame): padrão visível; o hover no porta-retrato "revela a foto" (JS põe .revela) e o vidro quebrado revela em definitivo (.quebrado) */ .lp-mirros-pixel { position: absolute; inset: 0; width: 100%; pointer-events: none; transition: opacity .18s ease; } .lp-mirros-pixel[data-frame="0"] { clip-path: inset(0 67.5% 0 0); } .lp-mirros-pixel[data-frame="1"] { clip-path: inset(0 32.5% 0 32.5%); } .lp-mirros-pixel[data-frame="2"] { clip-path: inset(0 0 0 67.5%); } .lp-mirros-pixel.revela, .lp-mirros-pixel.quebrado { opacity: 0; } .lp-mirros-vidro.quebrado { opacity: 1; animation: lp-tremida .35s ease-out 1; } @keyframes lp-tremida { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-.6%, .4%) rotate(-.4deg); } 40% { transform: translate(.6%, -.3%) rotate(.4deg); } 60% { transform: translate(-.4%, .2%); } 80% { transform: translate(.3%, -.2%); } } /* hotspots de clique sobre cada porta-retrato (tinta: 0.5-30 / 35-65 / 70-99.8) */ .lp-quebra { position: absolute; top: 0; height: 100%; padding: 0; border: 0; background: none; cursor: url('/static/img/Pointer.svg') 6 0, pointer; } .lp-quebra[data-frame="0"] { left: .5%; width: 29.5%; } .lp-quebra[data-frame="1"] { left: 35%; width: 30%; } .lp-quebra[data-frame="2"] { left: 70%; width: 29.8%; } .lp-quebra.feito { pointer-events: none; } /* ---------- S8: pira / geladeira ---------- */ .lp-pira { background: #FF0000; display: flex; justify-content: center; padding: 2vw 0 6vw; } .lp-pira img { width: 89.3vw; } /* 1714/19.2 */ /* ---------- S9.5: boca (abre com o scroll, revela o texto) ---------- */ /* runway: define quanto de scroll a animação dura (quanto maior, mais lento abre/fecha). O palco fica preso (sticky) enquanto a página rola por dentro. */ .lp-boca { position: relative; z-index: 101; /* acima da textura global (100): a boca fica por cima do grão */ height: 260vh; background: #FF0000; } .lp-boca-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } .lp-boca-stage { --boca-open: 0; /* 0 = fechada, 1 = totalmente aberta */ --boca-overlap: 4vh; /* distância das tiras fechadas (neg. = folga preta entre elas) */ --boca-travel: 32vh; /* quanto cada tira desliza ao abrir (mobile sobrescreve) */ --boca-travel-bottom: var(--boca-travel); /* curso da tira de baixo, separado (mobile encurta) */ --boca-bottom-drop: 0px; /* desce a tira inferior na posição inicial (mobile usa) */ /* a arte desktop da tira de cima (mouth1.svg) tem margem transparente dentro do próprio SVG (7px à esquerda e 5px à direita de 1504) — na tela isso vira uma fresta de vermelho nas duas laterais. Um zoom mínimo (ancorado na linha dos dentes, que não pode sair do lugar) sangra a arte ~0.6% para fora de cada lado. A arte mobile é full-bleed: lá volta a 1. */ --boca-top-bleed: 1.012; position: relative; width: 100%; height: 100%; background: #FF0000; } /* grão local da seção: como a boca foi elevada acima da textura global (z 100), repetimos o grão aqui, mas ABAIXO das tiras de dente (z 4/5) — assim a textura fica por baixo das imagens da boca, que aparecem limpas por cima. */ .lp-boca-stage::after { content: ''; position: absolute; inset: 0; z-index: 3; background: url('/static/img/landing/texture.webp') top center repeat-y; background-size: 100% auto; pointer-events: none; } /* texto revelado atrás dos dentes (fica no centro; os dentes o cobrem quando fechados). Só aparece de fato conforme a boca abre. */ .lp-boca-texto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: min(56vw, 760px); text-align: center; color: #fff; font-family: Tahoma, sans-serif; font-size: 1.05vw; line-height: 1.5; } .lp-boca-texto p { margin: 0 0 1em; } .lp-boca-titulo { font-family: 'Manufacturing Consent', Tahoma, sans-serif; font-weight: 400; font-size: 5vw; line-height: .9; margin: 0 0 .3em; letter-spacing: .02em; } /* interior escuro da boca: preenche o fundo atrás dos dentes; opaco quando fechada (esconde o texto), some conforme abre. */ .lp-boca-preto { position: absolute; inset: 0; z-index: 2; background: #000; opacity: calc(1 - var(--boca-open)); } /* as duas tiras de dente. Âncora no centro vertical: fechadas, a de baixo sobe e tuca SOB a de cima (a de cima fica por cima — z maior); ao abrir, a de cima sobe e a de baixo desce, revelando o interior. */ .lp-boca-top, .lp-boca-bottom { position: absolute; left: 0; width: 100%; height: auto; will-change: transform; /* Cada tira tem que ALCANÇAR a borda do palco, senão o fundo vermelho+grão vaza como uma faixa laranja acima/abaixo da boca fechada (o pior caso: ao abrir elas só se afastam mais das bordas). A arte é mais larga que alta, então em tela estreita e comprida ela não chegava lá sozinha. O min-height sai das mesmas variáveis da âncora, e o object-fit recorta as LATERAIS em vez de esticar — com object-position na emenda, a linha dos dentes fica exatamente onde estava. */ object-fit: cover; } .lp-boca-top { bottom: calc(50% - var(--boca-overlap)); min-height: calc(50vh + var(--boca-overlap) + 1vh); object-position: center bottom; /* a borda de baixo é a linha dos dentes */ transform-origin: 50% 100%; /* zoom ancorado na linha dos dentes: a emenda não sai do lugar */ transform: translateY(calc(var(--boca-open) * -1 * var(--boca-travel))) scale(var(--boca-top-bleed)); z-index: 6; /* topo absoluto do palco (modal fica em 4) */ } .lp-boca-bottom { top: calc(50% - var(--boca-overlap) + var(--boca-bottom-drop)); min-height: calc(50vh + var(--boca-overlap) - var(--boca-bottom-drop) + 1vh); object-position: center top; /* a borda de cima é a linha dos dentes */ transform: translateY(calc(var(--boca-open) * var(--boca-travel-bottom))); z-index: 5; } /* ---------- S10: desktop XP (atalho para o estúdio) ---------- */ .lp-desktop { background: #FF0000; /* sem padding no topo: o barcode-strip fica colado no início do desktop (as fitas passam por cima dos dois) */ padding: 0 0 8vw; } .lp-desktop-stage { position: relative; width: 100%; } /* imagem 1920x1080 (56.25vw de altura cheia). Cortamos uma faixa gorda do céu por cima (object-position: bottom) pra encurtar a seção e caber melhor na tela inteira, preservando a barra do Windows embaixo. */ .lp-desktop-img { display: block; width: 100%; height: 46vw; object-fit: cover; object-position: center bottom; } /* ícones clicáveis por cima do wallpaper exportado */ .lp-desktop-icons { position: absolute; left: 1.6vw; top: 2vw; display: flex; flex-direction: column; gap: 2.2vw; z-index: 2; } .lp-icon { display: flex; flex-direction: column; align-items: center; gap: .3vw; width: 7vw; text-decoration: none; cursor: pointer; } span.lp-icon { cursor: default; } .lp-icon-img { font-size: 3.2vw; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5)); } .lp-icon-label { font-family: Tahoma, sans-serif; font-size: clamp(9px, 1.1vw, 13px); color: #fff; text-shadow: 1px 1px 2px #000; text-align: center; } .lp-icon:hover .lp-icon-label { background: #0B61FF; } /* ícone que é