/* ============================================================ UDOW TECNOLOGIA · animations.css Keyframes e estados de entrada controlados por IntersectionObserver. Tudo aqui só entra em cena quando o tem a classe .has-js — sem JS o conteúdo permanece visível e estático. ============================================================ */ /* ------------------------------------------------------------ 1. Estados de revelação ------------------------------------------------------------ */ html.has-js [data-reveal]{ opacity:0; transform:translate3d(0,26px,0); transition: opacity .85s var(--ease-out) var(--rd,0ms), transform .95s var(--ease-out) var(--rd,0ms); will-change:opacity,transform; } html.has-js [data-reveal].is-in{opacity:1;transform:none} /* linhas de título com máscara (split por JS) */ html.has-js [data-split="lines"] .l{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; } html.has-js [data-split="lines"] .l > .li{ display:block; transform:translate3d(0,110%,0) rotate(2.4deg); transform-origin:0 100%; transition:transform 1.05s var(--ease-out) var(--ld,0ms); will-change:transform; } html.has-js [data-split="lines"].is-in .l > .li{transform:none} /* palavras (citação) */ html.has-js [data-split="words"] .w{ display:inline-block; opacity:.14; transition:opacity .6s var(--ease) var(--wd,0ms); } html.has-js [data-split="words"].is-in .w{opacity:1} /* nós do ecossistema */ html.has-js .node{ opacity:0; transform:translate3d(0,20px,0) scale(.96); transition: opacity .8s var(--ease-out) var(--nd,0ms), transform .9s var(--ease-out) var(--nd,0ms); } html.has-js .node.is-in{opacity:1;transform:none} html.has-js .core{ opacity:0;transform:scale(.82); transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out); } html.has-js .core.is-in{opacity:1;transform:none} /* blocos da marca montando no preloader */ html.has-js .mark--loader .mk{ opacity:0; transform:scale(.4); transform-origin:center; transform-box:fill-box; animation:blockIn .62s var(--ease-out) forwards; } html.has-js .mark--loader .mk-wire{ opacity:0; animation:fadeIn .5s var(--ease) .62s forwards; } .mark--loader .mk:nth-of-type(1) {animation-delay:.02s} .mark--loader .mk:nth-of-type(2) {animation-delay:.06s} .mark--loader .mk:nth-of-type(3) {animation-delay:.10s} .mark--loader .mk:nth-of-type(4) {animation-delay:.14s} .mark--loader .mk:nth-of-type(5) {animation-delay:.18s} .mark--loader .mk:nth-of-type(6) {animation-delay:.22s} .mark--loader .mk:nth-of-type(7) {animation-delay:.26s} .mark--loader .mk:nth-of-type(8) {animation-delay:.30s} .mark--loader .mk:nth-of-type(9) {animation-delay:.34s} .mark--loader .mk:nth-of-type(10){animation-delay:.38s} .mark--loader .mk:nth-of-type(11){animation-delay:.42s} .mark--loader .mk:nth-of-type(12){animation-delay:.46s} .mark--loader .mk:nth-of-type(13){animation-delay:.50s} .mark--loader .mk:nth-of-type(14){animation-delay:.54s} .mark--loader .mk:nth-of-type(15){animation-delay:.58s} /* marca grande da seção Sobre: blocos pulsando em sequência */ html.has-js .about__mark.is-in .mark--big .mk{ animation:blockPulse 4.6s var(--ease) infinite; } .mark--big .mk:nth-of-type(3n+1){animation-delay:0s} .mark--big .mk:nth-of-type(3n+2){animation-delay:.5s} .mark--big .mk:nth-of-type(3n+3){animation-delay:1s} /* ------------------------------------------------------------ 2. Keyframes ------------------------------------------------------------ */ @keyframes blockIn{ from{opacity:0;transform:scale(.4)} to {opacity:1;transform:scale(1)} } @keyframes fadeIn{ to{opacity:1} } @keyframes blockPulse{ 0%,72%,100%{opacity:1} 84%{opacity:.32} } @keyframes marquee{ from{transform:translate3d(0,0,0)} to {transform:translate3d(-50%,0,0)} } @keyframes ping{ 0% {opacity:.9;transform:scale(.7)} 70% {opacity:0;transform:scale(2.1)} 100%{opacity:0;transform:scale(2.1)} } @keyframes cue{ 0% {transform:translateX(-100%)} 55% {transform:translateX(250%)} 100%{transform:translateX(250%)} } @keyframes breathe{ 0%,100%{opacity:.72;transform:scale(1)} 50% {opacity:1;transform:scale(1.07)} } @keyframes spin{ from{transform:rotate(0deg)} to {transform:rotate(360deg)} } /* pacote de dados correndo pela trilha do diagrama */ @keyframes packet{ from{stroke-dashoffset:1} to {stroke-dashoffset:0} } @keyframes grain{ 0% {transform:translate3d(0,0,0)} 10% {transform:translate3d(-4%,-4%,0)} 20% {transform:translate3d(-8%,2%,0)} 30% {transform:translate3d(4%,-6%,0)} 40% {transform:translate3d(-2%,8%,0)} 50% {transform:translate3d(-6%,4%,0)} 60% {transform:translate3d(6%,0,0)} 70% {transform:translate3d(0,6%,0)} 80% {transform:translate3d(2%,-4%,0)} 90% {transform:translate3d(-4%,2%,0)} 100%{transform:translate3d(0,0,0)} } /* ------------------------------------------------------------ 3. Movimento reduzido: entrega tudo em estado final ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ html.has-js [data-reveal], html.has-js .node, html.has-js .core{opacity:1;transform:none} html.has-js [data-split="lines"] .l > .li{transform:none} html.has-js [data-split="words"] .w{opacity:1} html.has-js .mark--loader .mk, html.has-js .mark--loader .mk-wire{opacity:1;transform:none;animation:none} .ticker__track{animation:none} .eco__pulses{display:none} }