/* ===================================================================== Aurelle - Camada de movimento (JohannWeb) Sem biblioteca. Tudo so entra em cena quando a classe .aur-motion existe no - se o JS falhar ou o visitante pedir menos movimento, o site aparece normalmente, sem nada invisivel. ===================================================================== */ :root{--aur-ease:cubic-bezier(.2,.7,.3,1);--aur-dur:.8s} /* ---------- Estado inicial (so com .aur-motion) ---------- */ .aur-motion .aur-rv{opacity:0;transform:translateY(22px)} .aur-motion .aur-rv-sm{opacity:0;transform:translateY(14px)} .aur-motion .aur-rv-zoom{opacity:0;transform:scale(1.05)} .aur-motion .aur-rv-left{opacity:0;transform:translateX(-24px)} /* ---------- Entrada ---------- */ .aur-motion .aur-in{opacity:1;transform:none; transition:opacity var(--aur-dur) var(--aur-ease),transform var(--aur-dur) var(--aur-ease)} /* Rede de seguranca em CSS puro: se o JS de movimento nao assumir (erro, bloqueio, navegador antigo), tudo aparece sozinho em 1,2s. Com o JS no comando (.aur-js) esta regra nao vale. */ @keyframes aurResgate{to{opacity:1;transform:none}} .aur-motion:not(.aur-js) .aur-rv, .aur-motion:not(.aur-js) .aur-rv-sm, .aur-motion:not(.aur-js) .aur-rv-zoom, .aur-motion:not(.aur-js) .aur-rv-left{animation:aurResgate .8s var(--aur-ease) 1.2s forwards} /* ---------- Hero: sobe na carga, sem esperar scroll ---------- */ .aur-motion .hero-tx>*{opacity:0;transform:translateY(24px)} .aur-motion .hero-carregado .hero-tx>*, .aur-motion .hero.hero-carregado .hero-tx>*{opacity:1;transform:none; transition:opacity .9s var(--aur-ease),transform .9s var(--aur-ease)} .aur-motion .hero-carregado .hero-tx>*:nth-child(1){transition-delay:.05s} .aur-motion .hero-carregado .hero-tx>*:nth-child(2){transition-delay:.14s} .aur-motion .hero-carregado .hero-tx>*:nth-child(3){transition-delay:.24s} .aur-motion .hero-carregado .hero-tx>*:nth-child(4){transition-delay:.34s} .aur-motion .hero-carregado .hero-tx>*:nth-child(5){transition-delay:.44s} .aur-motion .hero-img{opacity:0;transform:scale(1.07)} .aur-motion .hero-carregado .hero-img{opacity:1;transform:none; transition:opacity 1.2s var(--aur-ease),transform 1.4s var(--aur-ease)} /* Parallax: o JS so escreve estas duas variaveis */ .hero-img img{will-change:transform;transform:translate3d(0,var(--aur-par,0px),0)} .hero-ghost{will-change:transform;transform:translate3d(var(--aur-ghost,0px),0,0)} /* ---------- Micro-interacoes ---------- */ .btn svg{transition:transform .3s var(--aur-ease)} .btn:hover svg{transform:translateX(3px)} .btn-ghost:hover svg,.padd:hover svg{transform:none} .sec-link{transition:border-color .3s ease,letter-spacing .3s var(--aur-ease)} .sec-link:hover{border-color:var(--ink);letter-spacing:.01em} .col-card img{transition:transform .8s var(--aur-ease)} .col-card:hover img{transform:scale(1.06)} .col-info{transition:padding-bottom .4s var(--aur-ease)} .col-card:hover .col-info{padding-bottom:24px} .pcard{transition:border-color .3s ease,transform .4s var(--aur-ease)} .pcard:hover{transform:translateY(-3px)} .wish svg{transition:transform .25s var(--aur-ease)} .wish:hover svg{transform:scale(1.15)} .wish.on svg{fill:currentColor} /* WhatsApp: um unico aceno, 4s depois da carga */ @keyframes aurAceno{0%,100%{transform:scale(1)}20%{transform:scale(1.1)}40%{transform:scale(.97)}60%{transform:scale(1.05)}} .aur-motion .wfloat.aur-aceno{animation:aurAceno 1.1s var(--aur-ease)} /* Sanfonas abrem com respiro */ @keyframes aurAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .aur-motion details[open] .acc-body, .aur-motion details[open] .qa{animation:aurAbre .4s var(--aur-ease)} /* ---------- Quem pede menos movimento nao recebe nenhum ---------- */ @media (prefers-reduced-motion:reduce){ .aur-motion .aur-rv,.aur-motion .aur-rv-sm,.aur-motion .aur-rv-zoom,.aur-motion .aur-rv-left, .aur-motion .hero-tx>*,.aur-motion .hero-img{opacity:1;transform:none} .hero-img img,.hero-ghost{transform:none} }