/* ========================================================================== RotasSul Transfer — Fase 14: chegada cinematográfica da home Camada puramente visual sobre o hero aprovado. Não altera texto, ordem semântica, tipografia, paleta nem espaçamento: só acrescenta movimento. PROGRESSIVE ENHANCEMENT — regra dura deste arquivo: nada aqui esconde conteúdo sem que o tenha a classe `cinematic-armed`, colocada por um script inline de uma linha no . Sem JavaScript a classe nunca entra, este arquivo fica inerte e o hero renderiza exatamente como na produção atual. A entrada é 100% CSS: mesmo que js/cinematic-home.js falhe ou não carregue, a sequência termina e o conteúdo aparece. As interações (parallax de mouse, scrub de scroll, tilt da frota) escrevem apenas `translate`, `scale`, `opacity` e custom properties — nunca `transform` dos elementos que já têm animação própria. Assim as animações de flutuação existentes (rsp-float-a / rsp-float-c) continuam intactas. Prefixo de classe: cinematic- ========================================================================== */ :root { --cine-ease: cubic-bezier(.16, 1, .3, 1); /* expo.out — lento e caro */ --cine-ease-soft: cubic-bezier(.33, 1, .68, 1); } /* ========================================================================== 1. ENTRADA CINEMATOGRÁFICA ========================================================================== */ /* -------- 1.1 Comum a todas as larguras -------- */ /* A moldura da imagem sobe e revela. Substitui o rsp-slide-in-right do .rsp-hero__visual, que fazia o bloco inteiro (moldura + cards) entrar junto. O delay é MENOR que o da animação original (.12s) para não atrasar o LCP da imagem do hero. */ .cinematic-armed .rsp-hero__visual { animation: none; } .cinematic-armed .rsp-hero__image { animation: cine-frame 1s var(--cine-ease) 40ms both; } /* Zoom de câmera: 1.045 -> 1.02. O valor final é exatamente o scale(1.02) que a imagem já tinha na produção, então o estado de repouso não muda. O canal `transform` fica reservado para esta animação; o scrub de scroll usa a propriedade independente `scale`, que se multiplica a ela. Sem `fill`: ao terminar, a imagem volta a ser pintada pelo estilo base e a camada de composição é liberada. Com `both` o Chrome mantinha o raster feito na escala máxima da animação e a foto ficava com reamostragem levemente diferente da produção (visto em diff de pixel). */ .cinematic-armed .rsp-hero__image img { animation: cine-zoom 1.6s var(--cine-ease-soft); } /* Véu extra que só existe durante o scroll (opacidade 0 em repouso, ou seja, idêntico ao baseline). Fica dentro da moldura, abaixo dos cards. */ .cinematic-armed .rsp-hero__image::before { background: linear-gradient(180deg, #10253600 38%, #10253659 100%); content: ""; inset: 0; opacity: var(--cine-veil, 0); pointer-events: none; position: absolute; z-index: 1; } /* Cards flutuantes: entrada escalonada e só depois a flutuação de sempre. O blur mínimo fica restrito a estes dois elementos pequenos e decorativos (aria-hidden) — é onde a "câmera focando" custa pouco. */ .cinematic-armed .rsp-card--flight { animation: cine-card .95s var(--cine-ease) .76s both, rsp-float-a 4s ease-in-out 1.71s infinite; } .cinematic-armed .rsp-card--private { animation: cine-card .95s var(--cine-ease) .86s both, rsp-float-c 4.6s ease-in-out 1.81s infinite; } /* -------- 1.2 Sequência completa (desktop / laptop) -------- Abaixo de 992px o hero vira coluna única e o elemento de LCP passa a ser o texto. Ali a coluna de copy mantém a entrada da produção (rsp-slide-in-left, sem delay) e nada disto se aplica — é o que impede a Fase 14 de empurrar o LCP no mobile, que é onde a página tem menos folga. Por que `both` e não `backwards`: com `both` o Chrome não trata estes elementos como candidatos a LCP durante a entrada, e o LCP da página segue sendo o mesmo elemento e o mesmo instante de hoje (medido: logo do header, ~1,35s nos dois). Com `backwards` a headline virava o elemento de LCP e a métrica subia ~180ms sem que nada aparecesse mais tarde na tela. */ @media (min-width: 992px) { .cinematic-armed .rsp-hero__copy { animation: none; } .cinematic-armed .rsp-hero__eyebrow { animation: cine-rise-sm .8s var(--cine-ease) 120ms both; } .cinematic-armed .rsp-hero__h1 { animation: cine-rise .95s var(--cine-ease) 200ms both; } .cinematic-armed .rsp-hero__sub { animation: cine-rise .9s var(--cine-ease) 360ms both; } /* A caixa inteira sobe; as três células só acendem, em sequência muito discreta. Animar o
  • moveria as divisórias internas. */ .cinematic-armed .rsp-hero__proof { animation: cine-rise-sm .85s var(--cine-ease) 440ms both; } .cinematic-armed .rsp-hero__proof li { animation: cine-fade .5s var(--cine-ease-soft) both; } .cinematic-armed .rsp-hero__proof li:nth-child(1) { animation-delay: 500ms; } .cinematic-armed .rsp-hero__proof li:nth-child(2) { animation-delay: 560ms; } .cinematic-armed .rsp-hero__proof li:nth-child(3) { animation-delay: 620ms; } .cinematic-armed .rsp-hero__cta-group { animation: cine-rise-sm .8s var(--cine-ease) 610ms both; } .cinematic-armed .rsp-hero__cta-note { animation: cine-fade .7s var(--cine-ease-soft) 730ms both; } .cinematic-armed .rsp-hero__trust { animation: cine-fade .75s var(--cine-ease-soft) 800ms both; } } /* -------- 1.3 Keyframes -------- */ @keyframes cine-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes cine-rise-sm { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes cine-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cine-frame { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes cine-zoom { from { transform: scale(1.045); } to { transform: scale(1.02); } } @keyframes cine-card { from { filter: blur(6px); opacity: 0; transform: translate3d(-12px, 10px, 0); } to { filter: blur(0); opacity: 1; transform: translate3d(0, 0, 0); } } /* ========================================================================== 2. PARALLAX DE MOUSE + 3. SCRUB DE SCROLL Só o preparo de camada; os valores vêm de js/cinematic-home.js. ========================================================================== */ /* will-change só enquanto a cena está REALMENTE em movimento — o JS põe e tira `cinematic-moving`. Não é micro-otimização: promover estes blocos a camada de composição tira o antialiasing subpixel do texto pequeno (eyebrow, rótulos da proof bar, textos dos cards). Conferido por diff de pixel contra a produção. Parado no topo da página, sem mouse no hero, a renderização do texto é idêntica à de hoje; em movimento, o ganho de quadro compensa (p95 de quadro sob CPU 4x: 26ms sem promoção, 17ms com). */ .cinematic-moving .rsp-hero__proof, .cinematic-moving .rsp-card--flight, .cinematic-moving .rsp-card--private { will-change: transform, translate; } /* A foto é a única camada que o scrub também redimensiona. */ .cinematic-moving .rsp-hero__image img { will-change: transform, translate, scale; } /* A coluna de copy também tem a opacidade tocada no fim da saída do hero. */ .cinematic-moving .rsp-hero__copy { will-change: opacity, transform, translate; } /* ========================================================================== 4. TILT 3D MUITO SUTIL NA FROTA Classe .cinematic-tilt entra só com pointer fino e sem reduced-motion. ========================================================================== */ /* Especificidade: o AOS aplica `transform: translateZ(0)` em `[data-aos^=fade][data-aos^=fade].aos-animate` (0,3,0), que já hoje vence o `.fleet-card:hover` (0,2,0) da produção. A classe repetida leva esta regra a (0,3,1) e mantém o tilt previsível, sem !important. */ html.cinematic-tilt .fleet-card.fleet-card { transform: perspective(1100px) rotateX(var(--cine-tilt-x, 0deg)) rotateY(var(--cine-tilt-y, 0deg)); transition: transform .45s var(--ease-out), translate .3s var(--ease-out), box-shadow .3s var(--ease-out); /* O "levantar" do hover viaja por `translate`, canal separado do tilt: assim ele sempre entra suave, mesmo com o tilt seguindo o mouse quadro a quadro. */ translate: 0 var(--cine-tilt-lift, 0px); } html.cinematic-tilt .fleet-card.fleet-card:hover { --cine-tilt-lift: -6px; } /* Com o cursor sobre o card o tilt acompanha o mouse sem atraso; ao sair, a transição de transform devolve o card ao neutro. */ html.cinematic-tilt .fleet-card.fleet-card.is-cine-tilting { transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out); } .cinematic-tilt .fleet-card__media img { translate: var(--cine-tilt-img-x, 0) var(--cine-tilt-img-y, 0); transition: transform .5s var(--ease-out), translate .45s var(--ease-out); } .cinematic-tilt .fleet-card.is-cine-tilting .fleet-card__media img { transition: transform .5s var(--ease-out); } /* ========================================================================== 5. LUZ CINEMATOGRÁFICA NA FOTO DO HERO (Fase 14.2) Dois tratamentos sobre a MESMA foto de produção — a imagem real não é trocada, recortada nem filtrada: a) um brilho especular fixo, que dá à foto o acabamento de carroceria polida e existe mesmo sem JavaScript e sem animação; b) uma passada única de luz (light sweep) logo depois que a foto assenta, como o reflexo que corre na lataria quando o carro encosta. Só `transform` e `opacity`, uma vez por carregamento, nada em laço. A camada é decorativa (`aria-hidden`) e `pointer-events:none`, então não entra na árvore de acessibilidade nem intercepta clique. ========================================================================== */ /* ========================================================================== FOTO DO HERO EM (Fase 14.4A) A art direction exigiu trocar o solto por um . O nasce `display:inline` e sem altura definida, e aí o `width:100%; height:100%` que o CSS de produção aplica ao deixa de resolver: a foto encolhe e sobra uma faixa vazia na moldura. Estas três linhas são o que faz a fotografia voltar a preencher a caixa. ========================================================================== */ .rsp-hero__image picture { display: block; height: 100%; width: 100%; } /* Ancoragem por faixa. Cada recorte foi posicionado para que a janela visível contenha o veículo inteiro nos DOIS extremos de proporção da sua faixa — os valores saem do cálculo da caixa real do carro (x 455–2727, y 1750–2955 no master), não de tentativa e erro. faixa recorte no master proporção object-position mobile 0,1152 3000x2400 1,250 82% 50% tablet 0,1642 3000x1420 2,113 83% 50% notebook 241,500 2700x3150 0,857 50% 50% wide 0,1000 3000x2069 1,450 71% 50% A especificidade precisa vencer `.rsp-hero__image img` (0,1,1) do CSS de produção, daí o seletor composto. */ .rsp-hero__image .rsp-hero__photo { object-position: 71% 50%; } @media (max-width: 1599px) { .rsp-hero__image .rsp-hero__photo { object-position: 50% 50%; } } @media (max-width: 991px) { .rsp-hero__image .rsp-hero__photo { object-position: 83% 50%; } } @media (max-width: 640px) { .rsp-hero__image .rsp-hero__photo { object-position: 82% 50%; } } /* Fase 14.4A: a posição do brilho foi REMEDIDA na fotografia nova, não herdada. Na foto anterior a luz vinha do alto à direita, e o brilho ficava em 62% 22%. Medindo o centróide de luminância de cada recorte novo: recorte centróide núcleo (L>235) wide 17,0% / 64,7% 15,3% / 68,7% notebook 23,0% / 27,4% 21,1% / 24,9% tablet 16,6% / 59,1% 14,9% / 60,9% mobile 15,2% / 63,7% 13,6% / 65,8% Ou seja: a luz agora vem da ESQUERDA em todos os recortes. Manter 62% 22% produziria uma mancha branca contra a direção da fotografia. O centróide puxa para o reflexo do piso molhado, que já é a área mais clara da cena — colocar bloom ali estouraria o que já está no limite. Por isso o brilho é ancorado na FONTE da luz (o sol, alto à esquerda), não no ponto mais claro. Como cada faixa tem um recorte próprio, o sol cai em um lugar diferente em cada uma, e a posição acompanha. */ .rsp-hero__sheen { /* Base = faixa notebook (992–1599px), onde o sol aparece no quadro. */ background: radial-gradient( 40% 46% at 23% 25%, #ffffff1a 0%, #ffffff09 40%, #fff0 68% ); inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 2; } /* Faixa larga: o recorte sobe e o sol fica junto à borda superior. */ @media (min-width: 1600px) { .rsp-hero__sheen { background: radial-gradient( 44% 40% at 19% 11%, #ffffff1a 0%, #ffffff09 42%, #fff0 70% ); } } /* A faixa de luz. Fora do quadro em repouso: sem JS ela nunca aparece. */ .rsp-hero__sheen:after { background: linear-gradient( 104deg, #fff0 0%, #ffffff12 42%, #ffffff33 50%, #ffffff12 58%, #fff0 100% ); bottom: -30%; content: ""; left: -75%; opacity: 0; position: absolute; top: -30%; width: 55%; } .cinematic-armed .rsp-hero__sheen:after { animation: cine-sheen 1.5s cubic-bezier(.45, 0, .25, 1) 1.05s both; } @keyframes cine-sheen { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; transform: translate3d(340%, 0, 0); } } /* No mobile a passada é mais curta e mais discreta: a foto é menor e o que importa ali é legibilidade, não espetáculo. */ @media (max-width: 991px) { .rsp-hero__sheen { /* Nestes recortes o céu fica fora do quadro: a luz entra rasante pela esquerda, e o brilho acompanha, mais fraco. */ background: radial-gradient(48% 50% at 15% 27%, #ffffff12 0%, #fff0 64%); } .cinematic-armed .rsp-hero__sheen:after { animation-duration: 1.2s; animation-delay: .75s; } .rsp-hero__sheen:after { background: linear-gradient( 104deg, #fff0 0%, #ffffff0d 42%, #ffffff24 50%, #ffffff0d 58%, #fff0 100% ); } } /* ========================================================================== 6. TRANSIÇÃO HERO → FAIXA DE BENEFÍCIOS (Fase 14.2) Duas camadas, nenhuma delas ocupando espaço no layout — tudo é `position:absolute` a partir da faixa, então não existe CLS novo e a altura do documento não muda em um pixel. ========================================================================== */ /* a) A ponte: a faixa escura projeta sombra para dentro do fim do hero, como se estivesse por baixo dele. Em vez de duas cores se encontrando numa linha reta, o escuro "emerge". */ .rsp-benefits-strip:before { background: linear-gradient(180deg, #10253600 0%, #10253608 52%, #10253617 100%); content: ""; height: 72px; left: 0; pointer-events: none; position: absolute; right: 0; top: -72px; z-index: 2; } /* b) O fio de luz na quina: dá a leitura de duas camadas sobrepostas, não de dois blocos coladas. */ .rsp-benefits-strip:after { background: linear-gradient(90deg, #ffffff00 0%, #ffffff2e 18%, #ffffff3d 50%, #ffffff2e 82%, #ffffff00 100%); content: ""; height: 1px; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 2; } @media (max-width: 640px) { .rsp-benefits-strip:before { height: 52px; top: -52px; } } /* c) O "reveal": os itens da faixa sobem quando ela entra na tela, uma vez só. A classe vem do IntersectionObserver em js/cinematic-home.js. Sem JS a classe nunca entra e os itens já estão no lugar — por isso o estado inicial fica preso a `.cinematic-armed`, nunca solto. */ .cinematic-armed.cinematic-strip-armed .rsp-benefit { opacity: 0; transform: translate3d(0, 12px, 0); } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit { transition: opacity .62s var(--cine-ease-soft), transform .62s var(--cine-ease); opacity: 1; transform: translate3d(0, 0, 0); } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit:nth-child(1) { transition-delay: 0ms; } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit:nth-child(2) { transition-delay: 70ms; } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit:nth-child(3) { transition-delay: 140ms; } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit:nth-child(4) { transition-delay: 210ms; } .cinematic-armed .rsp-benefits-strip.is-cine-revealed .rsp-benefit:nth-child(5) { transition-delay: 280ms; } /* ========================================================================== ACESSIBILIDADE — prefers-reduced-motion Rede de segurança: mesmo se a página estiver "armed", aqui tudo para. O conteúdo continua 100% visível e disponível. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cinematic-armed .rsp-hero__visual, .cinematic-armed .rsp-hero__image, .cinematic-armed .rsp-hero__image img, .cinematic-armed .rsp-hero__copy, .cinematic-armed .rsp-hero__eyebrow, .cinematic-armed .rsp-hero__h1, .cinematic-armed .rsp-hero__sub, .cinematic-armed .rsp-hero__proof, .cinematic-armed .rsp-hero__proof li, .cinematic-armed .rsp-hero__cta-group, .cinematic-armed .rsp-hero__cta-note, .cinematic-armed .rsp-hero__trust, .cinematic-armed .rsp-card--flight, .cinematic-armed .rsp-card--private { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; translate: none !important; } /* A imagem mantém o scale(1.02) de produção. */ .cinematic-armed .rsp-hero__image img { transform: scale(1.02) !important; scale: none !important; } .cinematic-armed .rsp-hero__image::before { opacity: 0 !important; } /* Fase 14.2: o brilho especular fixo permanece (é acabamento, não movimento); a passada de luz e o reveal da faixa somem. */ .cinematic-armed .rsp-hero__sheen:after { animation: none !important; opacity: 0 !important; } .cinematic-armed.cinematic-strip-armed .rsp-benefit, .cinematic-armed .rsp-benefits-strip .rsp-benefit { opacity: 1 !important; transform: none !important; transition: none !important; } html.cinematic-tilt .fleet-card.fleet-card { transform: none; translate: none; } .cinematic-tilt .fleet-card__media img { translate: none !important; } } /* ========================================================================== 6. EXPLORAR O VEÍCULO — base mínima (Fase 14.3) O resto da Fase 14.3 mora em css/hero-interior.css, carregado sem bloquear a renderização: nada daquilo é preciso para a primeira pintura, já que o controle só existe depois que o JS roda. Aqui fica só o que precisa valer ANTES: o controle nasce fora de cena e não ocupa lugar nenhum. ========================================================================== */ /* Fase 14.4C: o elemento do reflexo nasce invisivel na folha bloqueante, para que nao exista um quadro sequer com ele aparente antes de o JS decidir se a maquina merece o efeito. O resto mora em css/hero-interior.css. */ .rsp-hero__spec { display: none; } .rsp-hero__explore { display: none; } .rsp-hero__explore[hidden] { display: none; }