/* ========================================================================== motion.css Tela de abertura e entrada das seções no scroll. Tudo aqui é opcional. Para desligar, basta remover o deste arquivo no HTML: o site continua funcionando, só sem animação. Regra de segurança: o estado inicial escondido só vale quando o JavaScript está ativo (classe .js no ). Se o JS falhar, nada some da tela. ========================================================================== */ /* -------------------------------------------------------------------------- Entrada das seções no scroll -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } /* Blocos de imagem entram com uma leve aproximação, além de subir */ .js [data-reveal='zoom'] { transform: translateY(42px) scale(0.94); } .js [data-reveal='zoom'].is-visible { transform: none; } /* O ícone tem vida própria dentro do item: entra girando pra dentro, um instante depois do bloco que o contém. */ .js .method-item[data-reveal] .method-icon { opacity: 0; transform: scale(0.7) rotate(-12deg); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease; transition-delay: calc(var(--reveal-delay, 0ms) + 220ms); } .js .method-item[data-reveal].is-visible .method-icon { opacity: 1; transform: none; } /* A régua âmbar das seções risca para a direita */ .js .rule[data-reveal] { transform: none; transform-origin: left center; scale: 0 1; transition: opacity 0.4s ease, scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .js .section-head .rule[data-reveal], .js .ig-head .rule[data-reveal] { transform-origin: center; } .js .rule[data-reveal].is-visible { scale: 1 1; } /* -------------------------------------------------------------------------- Entrada da home O fundo se afasta devagar e o conteúdo sobe em cascata, tudo disparado no momento em que a tela de abertura sai. -------------------------------------------------------------------------- */ .js .hero__bg img, .js .hero__bg video { transform: scale(1.14); transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .js.is-loaded .hero__bg img, .js.is-loaded .hero__bg video { transform: scale(1); } /* -------------------------------------------------------------------------- Acessibilidade Quem pediu menos movimento no sistema vê a página pronta, sem animação. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js .method-item[data-reveal] .method-icon, .js .rule[data-reveal] { opacity: 1; transform: none; scale: 1 1; transition: none; } .js .hero__bg img, .js .hero__bg video { transform: none; transition: none; } }