/* ========================================================================== ARQUIVO: css/animations.css ONDE ESTÁ INTERLIGADO: Carregado no da index.html DESCRIÇÃO: Estado inicial ("escondido") e transições dos elementos que aparecem suavemente (fade-in) quando entram na tela durante o scroll. Quem decide QUANDO adicionar a classe .is-visible é o JS (js/animations.js, via IntersectionObserver) — aqui só definimos COMO fica antes e depois dessa classe ser adicionada. ========================================================================== */ /* Estado inicial: invisível e levemente deslocado, pronto pra "entrar" */ .reveal-up, .reveal-card, .image-reveal, .reveal-scale, .reveal-book { opacity: 0; transform: translateY(55px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); } /* Variações de efeito conforme a classe usada no HTML */ .image-reveal { transform: scale(1.07); } /* imagens começam levemente ampliadas */ .reveal-scale { transform: scale(.92); } /* elementos começam levemente menores */ .reveal-book { transform: translateY(35px) scale(.94); } /* Estado final: quando o JS adiciona esta classe, o elemento aparece por completo */ .is-visible { opacity: 1 !important; transform: none !important; } /* Pequeno atraso entre os cards de uma lista, pra não aparecerem todos juntos */ .reveal-card:nth-child(2) { transition-delay: .08s; } .reveal-card:nth-child(3) { transition-delay: .16s; } .reveal-card:nth-child(4) { transition-delay: .24s; } /* Efeitos de hover (não são "reveal", são interação do mouse) */ .animated-card:hover h3 { transform: translateX(7px); } .animated-card h3 { transition: transform .45s; } .principle h3 { transition: transform .5s; } .principle:hover h3 { transform: translateX(8px); } /* Animações de entrada específicas do Hero (título e livro), tocam uma vez ao carregar a página */ .hero-copy.reveal-up { animation: heroIn 1.1s .35s both cubic-bezier(.2,.7,.2,1); } .hero-book-area.reveal-book { animation: heroBookIn 1.4s .25s both cubic-bezier(.2,.7,.2,1); } @keyframes heroIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes heroBookIn { from { opacity: 0; transform: translateY(-45%) scale(.78) rotateY(-18deg); } to { opacity: 1; transform: translateY(-50%) scale(1) rotateY(0); } }