/* Camada de movimento — aplicada por cima do build do Tailwind (style.css). Tudo aqui depende da classe .js-motion no , adicionada por um script inline no . Sem JavaScript, nenhum conteúdo fica escondido. */ .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-y, 1.25rem), 0) scale(var(--reveal-scale, 1)); transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* O parallax escreve --parallax-y via JS. */ .js-motion [data-parallax] { transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; } /* Imagens que preenchem o container (o hero) precisam de folga vertical para deslocar sem mostrar borda. Sangramos a altura em vez de escalar, para não recortar a arte de propósito. Vence as utilities do Tailwind por especificidade; com top + height definidos, o bottom do inset-0 é ignorado. */ @media (min-width: 1024px) { .js-motion [data-parallax-bleed] { top: calc(-1 * var(--parallax-bleed)); height: calc(100% + 2 * var(--parallax-bleed)); } } /* Selo "ar" — antes era uma imagem; agora é texto sobre um path circular. Não depende de .js-motion: é CSS puro e precisa desenhar sem JavaScript. */ .selo { height: auto; aspect-ratio: 1; fill: var(--color-brand); font-family: var(--font-display); font-style: italic; } .selo-ar { font-size: 76px; } .selo-palavra { font-size: 14px; letter-spacing: 0.02em; } .selo-anel { transform-box: view-box; transform-origin: center; animation: selo-gira 36s linear infinite; } @keyframes selo-gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .js-motion [data-reveal], .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; } .js-motion [data-parallax] { transform: none; } .js-motion [data-parallax-bleed] { top: 0; height: 100%; } .selo-anel { animation: none; } }