/* efeitos da tela "lendo a sua conversa" (leitura-fx.js). So transform/opacity. */
.le.fx-on{position:relative;overflow:hidden;border-radius:26px;background:radial-gradient(120% 90% at 50% 0%,#fff6fb 0%,#f3eeff 55%,#fff 100%)}
.fx-camada{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-bolha{position:absolute;bottom:-70px;border-radius:14px;box-shadow:0 2px 0 rgba(0,0,0,.07);padding:9px 11px;opacity:0;animation:fxSobe var(--dur,3.4s) cubic-bezier(.25,.6,.35,1) forwards;display:block}
.fx-l{border-top-left-radius:3px}.fx-r{border-top-right-radius:3px}
.fx-linha{display:block;height:5px;border-radius:3px;margin-bottom:6px;opacity:.55}
.fx-hr{display:block;width:22px;height:4px;border-radius:3px;margin:2px 0 0 auto;opacity:.4}
@keyframes fxSobe{0%{transform:translateY(0) scale(.7) rotate(var(--rot,0deg));opacity:0}12%{opacity:.5}70%{opacity:.42}100%{transform:translateY(-330px) scale(1.04) rotate(var(--rot,0deg));opacity:0}}
.fx-faisca{position:absolute;width:7px;height:7px;border-radius:50%;margin:-3px 0 0 -3px;opacity:0;animation:fxFaisca .9s ease-out forwards}
@keyframes fxFaisca{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}}
.le.fx-on .le-n,.le.fx-on .le-num,.le.fx-on h2,.le.fx-on .le-prog,.le.fx-on .le-f,.le.fx-on .sub{position:relative;z-index:1}
.le.fx-on .le-num{text-shadow:0 6px 30px rgba(157,92,242,.25)}
.fx-tic{animation:fxTic .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fxTic{0%{transform:scale(1)}40%{transform:scale(1.12);filter:drop-shadow(0 0 14px rgba(214,36,110,.55))}100%{transform:scale(1)}}
.le.fx-on .le-f{animation:fxFrase .55s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes fxFrase{0%{opacity:0;transform:translateY(14px) scale(.96);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}
.le.fx-fim .le-prog i{box-shadow:0 0 18px rgba(214,36,110,.8)}
@media (prefers-reduced-motion:reduce){.fx-camada{display:none}.le.fx-on{background:none}}
.le.fx-on{min-height:380px;justify-content:center}