/* ========================================================================= MOINHO — DESIGN SYSTEM / MOTION ========================================================================= Estados iniciais e transicoes que NAO dependem de JavaScript. Principio: o conteudo e legivel sem animacao. Se o GSAP falhar, nao carregar ou o usuario pedir menos movimento, tudo continua visivel. Por isso o estado escondido so e aplicado quando o JS confirma que vai animar, marcando . ========================================================================= */ /* ------------------------------------------------------------------------- Reveal — entrada de blocos ---------------------------------------------------------------------- */ .moinho-motion [data-moinho-reveal] { opacity: 0; transform: translate3d(0, var(--moinho-reveal-shift, 1.5rem), 0); will-change: opacity, transform; } .moinho-motion [data-moinho-reveal].is-revealed { opacity: 1; transform: none; transition: opacity var(--moinho-duration-slow) var(--moinho-ease-out), transform var(--moinho-duration-slow) var(--moinho-ease-out); transition-delay: calc(var(--moinho-reveal-i, 0) * var(--moinho-stagger)); will-change: auto; } /* ------------------------------------------------------------------------- Split de texto — mascara por palavra ---------------------------------------------------------------------- */ .moinho-split__word { display: inline-block; overflow: hidden; vertical-align: bottom; } .moinho-split__inner { display: inline-block; /* Empurra 1.1em: cobre descendentes sem cortar. */ transform: translate3d(0, 0, 0); } .moinho-motion .moinho-split .moinho-split__inner { transform: translate3d(0, 110%, 0); } .moinho-motion .moinho-split.is-revealed .moinho-split__inner { transform: translate3d(0, 0, 0); transition: transform var(--moinho-duration-reveal) var(--moinho-ease-out); transition-delay: calc(var(--moinho-split-i, 0) * var(--moinho-stagger)); } /* ------------------------------------------------------------------------- Marquee — faixa deslizante em CSS puro, sem custo de JS. Duplique o conteudo no markup e marque a copia com aria-hidden. ---------------------------------------------------------------------- */ .moinho-marquee { display: flex; overflow: hidden; gap: var(--moinho-marquee-gap, var(--moinho-space-lg)); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .moinho-marquee__track { display: flex; flex: none; gap: var(--moinho-marquee-gap, var(--moinho-space-lg)); padding-inline-end: var(--moinho-marquee-gap, var(--moinho-space-lg)); animation: moinho-marquee var(--moinho-marquee-duration, 40s) linear infinite; } @media (hover: hover) and (pointer: fine) { .moinho-marquee:hover .moinho-marquee__track { animation-play-state: paused; } } @keyframes moinho-marquee { to { transform: translate3d(-100%, 0, 0); } } /* ------------------------------------------------------------------------- Hover states compartilhados ---------------------------------------------------------------------- */ .moinho-hover-lift { transition: transform var(--moinho-duration-normal) var(--moinho-ease-out), box-shadow var(--moinho-duration-normal) var(--moinho-ease-out); } @media (hover: hover) { .moinho-hover-lift:hover { transform: translate3d(0, -0.375rem, 0); box-shadow: var(--moinho-shadow-md); } } /* Zoom contido de imagem dentro de .moinho-media. */ @media (hover: hover) { .moinho-hover-zoom .moinho-media :is(img) { transition: transform var(--moinho-duration-slow) var(--moinho-ease-out); } .moinho-hover-zoom:hover .moinho-media :is(img) { transform: scale(1.06); } } /* ------------------------------------------------------------------------- PREFERS-REDUCED-MOTION Ultimo bloco do arquivo de proposito: vence tudo acima. ---------------------------------------------------------------------- */