/* ========================================================================== 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. ========================================================================== */ /* -------------------------------------------------------------------------- Tela de abertura -------------------------------------------------------------------------- */ .loader { display: none; } .js .loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--color-ink); transition: opacity 0.5s ease, visibility 0.5s ease; } .js.is-loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; } /* Trava o scroll enquanto a abertura estiver na frente */ .js:not(.is-loaded) body { overflow: hidden; } .loader__inner { display: flex; flex-direction: column; align-items: center; animation: loader-in 0.6s ease both; } .loader__name { font-family: var(--font-heading); font-size: clamp(2.5rem, 9vw, 4rem); letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-ink); line-height: 1; /* compensa o espaçamento à direita da última letra */ text-indent: 0.28em; } .loader__role { margin-top: 12px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--color-accent-light); text-indent: 0.42em; } .loader__bar { position: relative; display: block; width: 148px; height: 2px; margin-top: 34px; background: rgba(246, 241, 233, 0.14); overflow: hidden; } .loader__bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--color-accent); transform-origin: left center; transform: scaleX(0); animation: loader-bar 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes loader-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes loader-bar { 0% { transform: scaleX(0); } 55% { transform: scaleX(0.72); } 100% { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 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; } .loader__inner, .loader__bar i { animation: none; } .loader__bar i { transform: scaleX(1); } }