/** * Primeira Essência — Motion & Microinteractions. * * Sistema central de scroll-reveal ([data-pe-reveal]) + microinterações de * hover/foco (header, menu, botões, cards, FAQ, formulário, WhatsApp). * Carregado em todas as páginas (depende de pe-components, antes de * home.css/internal-pages.css). Só CSS — a orquestração fica em motion.js. * * Fallback sem JS: os estados iniciais ocultos de [data-pe-reveal] só * existem quando tem a classe "pe-motion-ready" (adicionada por * motion.js). Sem JS, nada fica com opacity:0 — ver seção de fallback * abaixo e motion.js. */ /* ========================================================================== 1. Sistema de Reveal (scroll) ========================================================================== */ [data-pe-reveal] { opacity: 1; transform: none; } /* :where(html.pe-motion-ready) zera a especificidade do "portão" — sem isso, o elemento "html" + a classe elevam a especificidade acima da de regras de hover no mesmo elemento (ex.: .musico-card:hover), fazendo o estado "revelado" (transform:none) vencer o hover e cancelar o lift do card. */ :where(html.pe-motion-ready) [data-pe-reveal] { opacity: 0; transform: translateY(var(--pe-reveal-distance)); transition: opacity var(--pe-motion-base) var(--pe-ease-premium), transform var(--pe-motion-base) var(--pe-ease-premium); transition-delay: var(--pe-reveal-delay, 0ms); } :where(html.pe-motion-ready) [data-pe-reveal='fade'] { transform: none; } :where(html.pe-motion-ready) [data-pe-reveal='fade-left'] { transform: translateX(calc(var(--pe-reveal-distance) * -1)); } :where(html.pe-motion-ready) [data-pe-reveal='fade-right'] { transform: translateX(var(--pe-reveal-distance)); } :where(html.pe-motion-ready) [data-pe-reveal='scale'] { transform: scale(0.96); } :where(html.pe-motion-ready) [data-pe-reveal].is-visible { opacity: 1; transform: none; } /* prefers-reduced-motion: conteúdo sempre visível, sem transform pendente, independente de pe-motion-ready/IntersectionObserver já ter disparado. */ @media (prefers-reduced-motion: reduce) { :where(html.pe-motion-ready) [data-pe-reveal] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 2. Hero — zoom sutil da imagem (não depende de JS/observer; a imagem é o LCP, então roda como animação CSS pura, sem atraso na primeira pintura) ========================================================================== */ @keyframes pe-hero-zoom { from { transform: scale(1.035); } to { transform: scale(1); } } .hero__media__img, .entity-hero__media__img, .home-estrutura__media__img { animation: pe-hero-zoom 6s var(--pe-ease-premium) forwards; } @media (prefers-reduced-motion: reduce) { .hero__media__img, .entity-hero__media__img, .home-estrutura__media__img { animation: none; } } /* ========================================================================== 3. Header no scroll ========================================================================== */ .site-header { transition: background-color var(--pe-motion-fast) var(--pe-ease-premium), border-color var(--pe-motion-fast) var(--pe-ease-premium), box-shadow var(--pe-motion-fast) var(--pe-ease-premium), backdrop-filter var(--pe-motion-fast) var(--pe-ease-premium); } .site-header__inner { transition: min-height var(--pe-motion-fast) var(--pe-ease-premium); } .site-header--scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); } .site-header--scrolled .site-header__inner { min-height: 80px; } /* ========================================================================== 4. Menu — indicador dourado animado (desktop) ========================================================================== */ .site-nav__menu > .menu-item > a { position: relative; } .site-nav__menu > .menu-item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--pe-color-gold); border-radius: var(--pe-radius-pill); transform: scaleX(0); transform-origin: left; transition: transform var(--pe-motion-fast) var(--pe-ease-premium); } .site-nav__menu > .menu-item > a:hover::after, .site-nav__menu > .menu-item > a:focus-visible::after, .site-nav__menu > .current-menu-item > a::after { transform: scaleX(1); } /* ========================================================================== 5. Botões ========================================================================== */ .btn { transition: background-color var(--pe-transition-base), color var(--pe-transition-base), border-color var(--pe-transition-base), box-shadow var(--pe-motion-fast) var(--pe-ease-premium), transform var(--pe-motion-fast) var(--pe-ease-premium); } .btn--primary:hover, .btn--primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(212, 175, 55, 0.3); } .btn--outline:hover, .btn--outline:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } .btn:active { transform: translateY(1px); box-shadow: none; } /* ========================================================================== 6. WhatsApp flutuante ========================================================================== */ .pe-whatsapp-float:hover, .pe-whatsapp-float:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212, 175, 55, 0.32); } .pe-whatsapp-float--hidden:hover { transform: translateY(12px) scale(0.92); } /* ========================================================================== 7. Cards — Músico / Formação / História (compartilhados Home + páginas internas) ========================================================================== */ .musico-card, .formacao-card, .historia-card { transition: transform var(--pe-motion-fast) var(--pe-ease-premium); } .musico-card__media, .formacao-card__media, .historia-card__media { overflow: hidden; } .musico-card__media__img, .formacao-card__media__img, .historia-card__media__img { transition: transform var(--pe-motion-base) var(--pe-ease-premium); } .musico-card:hover, .formacao-card:hover, .historia-card:hover { transform: translateY(-4px); } .musico-card:hover .musico-card__media__img, .formacao-card:hover .formacao-card__media__img, .historia-card:hover .historia-card__media__img { transform: scale(1.045); } .musico-card__nome, .formacao-card__body h3, .historia-card__body h3 { transition: color var(--pe-transition-fast); } .musico-card:hover .musico-card__nome, .formacao-card:hover .formacao-card__body h3, .historia-card:hover .historia-card__body h3 { color: var(--pe-color-gold); } .musico-card__link svg, .historia-card__link svg { transition: transform var(--pe-motion-fast) var(--pe-ease-premium); } .musico-card:hover .musico-card__link svg, .historia-card:hover .historia-card__link svg { transform: translateX(3px); } /* ========================================================================== 8. FAQ — abertura/fechamento suave (classes aplicadas por faq-accordion.js; aria-expanded/aria-controls/hidden continuam a fonte de verdade) ========================================================================== */ .faq-item__panel { overflow: hidden; } .faq-item__panel.pe-faq-animating { transition: max-height var(--pe-motion-fast) var(--pe-ease-premium); } /* ========================================================================== 9. Formulário — foco com glow discreto (visual apenas; nomes/ids/nonce/ honeypot/validação intocados) ========================================================================== */ .field input, .field textarea, .field select { transition: border-color var(--pe-motion-fast) var(--pe-ease-premium), box-shadow var(--pe-motion-fast) var(--pe-ease-premium); } .field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16); } .field label { transition: color var(--pe-transition-fast); } .field:focus-within label { color: var(--pe-color-gold); } .pe-form-submit { transition: background-color var(--pe-transition-base), color var(--pe-transition-base), border-color var(--pe-transition-base), box-shadow var(--pe-motion-fast) var(--pe-ease-premium), transform var(--pe-motion-fast) var(--pe-ease-premium); } /* ========================================================================== 10. Footer — links ========================================================================== */ .site-footer a { transition: color var(--pe-transition-fast); }