/* Creche do Sítio — efeitos e interações.
   Os mesmos conceitos do site do Sítio Barreiras (para os dois conversarem),
   com a linguagem da creche: blocos e sóis no lugar das frutas e das ondas. */

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

/* Capa: o texto entra em sequência */
.heroi .entra { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.heroi.pronta .entra { opacity: 1; transform: none; }
.heroi.pronta .entra:nth-child(1) { transition-delay: .1s; }
.heroi.pronta .entra:nth-child(2) { transition-delay: .3s; }
.heroi.pronta .entra:nth-child(3) { transition-delay: .5s; }
.heroi.pronta .entra:nth-child(4) { transition-delay: .7s; }
.heroi .heroi__midia.entra { transition-delay: .35s; }

/* 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; }

/* Fotos que abrem em cortina (fresta de 1% para o navegador já carregar a imagem) */
.cortina { clip-path: inset(0 99% 0 0); transition: clip-path 1.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); }

/* Brilho que passa sobre as fotos */
.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,.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-22deg); }
.brilho:hover::after, .acao:hover .brilho::after, .servico:hover .brilho::after, .turma:hover .brilho::after { animation: brilho .9s ease; }
@keyframes brilho { to { left: 130%; } }

/* Ícones que giram */
.valor img, .destaque__icone svg, .servico__icone svg, .turma__icone svg { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.valor:hover img { transform: rotateY(360deg); }
.destaque:hover .destaque__icone svg, .servico:hover .servico__icone svg, .turma:hover .turma__icone svg { transform: rotateY(360deg); }

/* Botões: texto que rola e seta que gira */
.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%); }
.botao .seta { transition: transform .3s ease; }
.botao:hover .seta { transform: rotate(-45deg); }

/* Selo circular girando */
.selo-giratorio { position: absolute; z-index: 3; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: var(--branco); box-shadow: var(--sombra); }
.selo-giratorio svg.anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.selo-giratorio .anel__texto { transform-origin: 100px 100px; animation: gira 28s linear infinite; }
.selo-giratorio text { font-family: var(--fonte-texto); font-weight: 900; font-size: 12.4px; letter-spacing: .18em; fill: var(--noite); }
.selo-giratorio img { width: 58%; position: relative; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Sóis e blocos flutuando com parallax */
.flutua { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.flutua--sol { width: 74px; opacity: .9; }
.flutua--bloco { width: 34px; height: 34px; border-radius: 6px; }
.flutua ~ .recipiente { position: relative; z-index: 1; }

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

/* Cabeçalho some ao descer e volta ao subir */
.topo { transition: background .3s, box-shadow .3s, transform .35s ease; }
.topo--escondido { transform: translateY(-100%); }
.topo--solido { box-shadow: 0 10px 30px -18px rgba(15, 34, 102, .45); }

/* Voltar ao topo com anel de progresso */
.ao-topo { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--branco); color: var(--azul); box-shadow: var(--sombra);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.ao-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.ao-topo svg.progresso { position: absolute; inset: 0; transform: rotate(-90deg); }
.ao-topo circle { fill: none; stroke-width: 3; }
.ao-topo .trilha { stroke: var(--cinza); }
.ao-topo .barra { stroke: var(--amarelo); stroke-linecap: round; stroke-dasharray: 144.5; transition: stroke-dashoffset .1s linear; }
.ao-topo .seta-topo { width: 22px; height: 22px; position: relative; }

/* Faixa de palavras correndo */
.faixa { overflow: hidden; white-space: nowrap; }
.faixa__trilho { display: inline-flex; animation: corre 38s linear infinite; }
.faixa--volta .faixa__trilho { animation-direction: reverse; animation-duration: 46s; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes corre { to { transform: translateX(-50%); } }

/* Pequenos detalhes vivos */
.sobe-desce { animation: sobe-desce 4.5s ease-in-out infinite; }
@keyframes sobe-desce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 720px) {
  .flutua { display: none; }
  .selo-giratorio { width: 118px; height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .heroi .entra, .revela, .dividir .palavra > span { opacity: 1 !important; transform: none !important; }
  .cortina { clip-path: none !important; }
  .selo-giratorio .anel__texto, .faixa__trilho, .sobe-desce { animation: none !important; }
}