/* Efeitos inspirados na referência: entrada da capa, títulos por palavra, revelação ao rolar,
   brilho nas fotos, ícones que giram, seta dos botões, selo girando, contadores e flutuação. */

.pular { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--amarelo); color: var(--azul-noite); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

/* capa: o texto entra em sequência */
/* entrada da capa só com CSS: começa no primeiro quadro, sem esperar o JavaScript (o selo é o maior elemento da tela, e o Google mede quando ele aparece) */
.capa .entra { animation: capa-entra .9s cubic-bezier(.2, .7, .2, 1) both; }
.capa .entra:nth-child(2) { animation-delay: .2s; }
.capa .entra:nth-child(3) { animation-delay: .4s; }
.capa .entra:nth-child(4) { animation-delay: .6s; }
.capa .capa__legenda.entra { animation-delay: .75s; }
@keyframes capa-entra { from { opacity: .01; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* títulos que sobem palavra por palavra */
.dividir .palavra { display: inline-block; vertical-align: baseline; clip-path: inset(-.3em -.2em -.32em -.2em); }
.dividir .palavra > span { display: inline-block; transform: translateY(150%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.dividir.visivel .palavra > span { transform: none; }

/* revelação ao rolar (sobe, ou vem das laterais) */
.revela { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.revela[data-efeito="esquerda"] { transform: translateX(-46px); }
.revela[data-efeito="direita"] { transform: translateX(46px); }
.revela.visivel { opacity: 1; transform: none; }

/* brilho que passa sobre as fotos no hover */
.brilho { position: relative; overflow: hidden; }
.brilho::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-22deg); }
.brilho:hover::after, .etapa:hover .etapa__foto::after, .unidade:hover .unidade__foto::after, .cartao:hover .brilho::after { animation: brilho .9s ease; }
.etapa__foto::after, .unidade__foto::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-22deg); }
@keyframes brilho { to { left: 130%; } }

/* ícones que giram no hover */
.pilar__icone svg, .etapa__icone svg, .numero__icone svg, .valor__icone svg, .pioneiro__num { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.pilar:hover .pilar__icone svg, .etapa:hover .etapa__icone svg, .numero:hover .numero__icone svg, .valor:hover .valor__icone svg { transform: rotateY(360deg); }
.pioneiro:hover .pioneiro__num { transform: rotate(360deg); }

/* seta dos botões gira e avança */
.botao__icone { transition: transform .3s ease; }
.botao:hover .botao__icone { transform: rotate(-45deg); }
.botao[data-abre-filme]:hover .botao__icone { transform: scale(1.12); }

/* selo circular girando (Fruto do Bem · desde 1996) */
/* a sombra é fixa no círculo (box-shadow), não um filtro: com o anel de texto girando, o filtro era redesenhado a cada quadro e piscava no celular */
.selo-giratorio { position: absolute; z-index: 3; right: -54px; bottom: -54px; width: 184px; height: 184px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 16px 26px -6px rgba(15, 58, 102, .4); transform: translateZ(0); }
.selo-giratorio svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.selo-giratorio__texto { transform-origin: 100px 100px; animation: gira 30s linear infinite; will-change: transform; }
.selo-giratorio text { font-family: var(--corpo); font-weight: 400; font-size: 11.6px; fill: #0F3A63; }
@keyframes gira { to { transform: rotate(360deg); } }

/* frutas flutuando com parallax */
.flutua { position: absolute; z-index: 0; opacity: .55; pointer-events: none; will-change: transform; }
.flutua--clara { filter: brightness(0) invert(1); opacity: .2; }
.flutua ~ .container { position: relative; z-index: 1; }
.historia > .container, .gestao-secao > .container, #social > .container { position: relative; z-index: 1; }
.paralaxe { will-change: transform; }

/* contador mecânico */
.numero strong.contador { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; }
.contador .digito { display: inline-block; height: 1em; overflow: hidden; }
.contador .coluna { display: flex; flex-direction: column; transition: transform 2s cubic-bezier(.2, .8, .2, 1); }
.contador .coluna span { height: 1em; display: block; }

/* bananas no bloco de frutas */
.frutas__bananas { display: flex; gap: 6px; margin-bottom: 12px; }
.frutas__bananas img { width: 110px; height: 110px; }
.fruta--banana { padding: 8px 18px; }

/* imagens que se revelam em cortina ao entrar na tela */
/* fica uma fresta de 1% para o navegador carregar a imagem (lazy) antes de abrir */
.cortina { clip-path: inset(0 99% 0 0); transition: clip-path 1s cubic-bezier(.63, .25, .25, 1); }
.cortina[data-lado="baixo"] { clip-path: inset(99% 0 0 0); }
.cortina[data-lado="direita"] { clip-path: inset(0 0 0 99%); }
.cortina.visivel { clip-path: inset(0 0 0 0); }
.social__foto.cortina.visivel { clip-path: inset(-40px -40px -40px -40px); }

/* texto do botão que rola no hover */
.botao__texto { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.botao__texto > span { display: block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.botao__texto::after { content: attr(data-texto); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.botao:hover .botao__texto > span, .botao:hover .botao__texto::after { transform: translateY(-100%); }

/* pulso no play do filme */
.botao[data-abre-filme] .botao__icone { position: relative; }
.botao[data-abre-filme] .botao__icone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: pulso 2.2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* cartões com leve inclinação 3D que segue o mouse */
@media (hover: hover) and (pointer: fine) {
  .inclina { transform-style: preserve-3d; }
  .inclina.visivel:hover, .inclina:not(.revela):hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); transition: transform .18s ease-out, box-shadow .2s; }
}

/* topo some ao descer e volta ao subir */
.topo { transition: background .3s, box-shadow .3s, transform .35s ease; }
.topo--escondido { transform: translateY(-100%); }

/* pequenos detalhes vivos */
.fruta { transition: border-color .2s, transform .2s; }
.fruta:hover { transform: translateY(-2px); border-color: var(--amarelo); }
.fruta:hover img { animation: chacoalha .7s ease; }
@keyframes chacoalha { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.08); } 40% { transform: rotate(10deg) scale(1.08); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.frutas__bananas img { animation: sobe-desce 4.5s ease-in-out infinite; }
.frutas__bananas img:nth-child(2) { animation-delay: -2.2s; }
@keyframes sobe-desce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.numero { transition: transform .25s, background .25s; }
.numero:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .13); }
.numero:hover .numero__icone { animation: quica .9s ease; }
.pilar:hover .pilar__icone svg { transform: rotateY(360deg); }
.pilar__icone svg { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes quica { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(-5px); } }
.social__citacao p::before { animation: sobe-desce 5s ease-in-out infinite; }

@media (max-width: 720px) {
  .selo-giratorio { width: 120px; height: 120px; right: -14px; bottom: -48px; }
  .flutua { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .capa .entra, .revela, .dividir .palavra > span { opacity: 1 !important; transform: none !important; }
  .cortina { clip-path: none !important; }
  .selo-giratorio__texto { animation: none; }
}