/* 4ADVS · DocumentGeneratorAnimation — apenas camada visual */ .dga{--dga-bg:#0d0d0f;--dga-panel:#141417;--dga-line:#26262b;--dga-text:#ecebe6;--dga-mute:#8b8a86; --dga-gold:#d4a72c;--dga-gold-soft:rgba(212,167,44,.14);--dga-blue:#3b82f6;--dga-paper:#f2eee4;--dga-ink:#2b2822; width:0;opacity:0;overflow:hidden;flex:none;transition:width .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--dga-text)} .dga.is-open{width:var(--dga-width,380px);max-width:100%;opacity:1} .dga__inner{width:var(--dga-width,380px);max-width:100vw;height:100%;box-sizing:border-box;padding:26px 24px;display:flex;flex-direction:column;gap:20px; background:var(--dga-bg);border-left:1px solid var(--dga-line)} .dga__state{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dga-gold);font-weight:500} .dga__pulse{position:relative;width:18px;height:18px;flex:none;display:grid;place-items:center} .dga__pulse::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dga-gold);animation:dga-pulse 1.6s ease-in-out infinite} .dga__pulse svg{position:absolute;inset:0;width:18px;height:18px;opacity:0} .dga__pulse circle,.dga__pulse path{fill:none;stroke:var(--dga-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60} .dga__type{margin:14px 0 2px;font-size:19px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dga-text)} .dga__client{margin:0;font-size:14px;color:var(--dga-mute)} .dga__stage{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:22px 14px; background:var(--dga-panel);border:1px solid var(--dga-line);border-radius:14px;overflow:hidden} .dga__paper{position:relative;width:100%;max-width:290px;aspect-ratio:1/1.35;max-height:100%;box-sizing:border-box;padding:22px 20px;display:flex;flex-direction:column; background:var(--dga-paper);border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(212,167,44,.0);transition:box-shadow .6s ease,opacity .4s ease} .dga__ptitle{flex:none;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(43,40,34,.2);text-align:center; font:600 8px/1.3 Georgia,"Times New Roman",serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dga-ink)} .dga__body{position:relative;flex:1;min-height:0;overflow:hidden; -webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)} .dga__text{white-space:pre-wrap;word-break:break-word;text-align:justify;font:7.4px/1.6 Georgia,"Times New Roman",serif;color:var(--dga-ink)} .dga__text.has-caret::after{content:"";display:inline-block;width:1.5px;height:8px;margin-left:1px;vertical-align:-1px;background:var(--dga-gold);animation:dga-blink .9s steps(1) infinite} .dga__skel{display:flex;flex-direction:column;gap:7px} .dga__skel i{display:block;height:4px;border-radius:2px;background:rgba(43,40,34,.16);transform-origin:left;animation:dga-line .7s cubic-bezier(.2,.8,.2,1) both} .dga__msg{position:absolute;inset:auto 14px 22px;text-align:center;font-size:13px;color:var(--dga-mute);opacity:0;pointer-events:none} .dga__steps{display:flex;gap:6px;margin:0;padding:0;list-style:none} .dga__steps li{flex:1;height:2px;border-radius:2px;background:var(--dga-line);transition:background .4s} .dga__steps li.on{background:var(--dga-gold)} .dga__open{align-self:stretch;padding:12px 16px;border:0;border-radius:10px;font:600 14px inherit;font-family:inherit;color:#fff;background:var(--dga-blue);cursor:pointer; opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s .35s,transform .45s .35s,filter .2s} .dga__open:hover{filter:brightness(1.1)} .dga__open:focus-visible{outline:2px solid var(--dga-gold);outline-offset:2px} /* estados */ .dga[data-status=completed] .dga__pulse::before,.dga[data-status=error] .dga__pulse::before{display:none} .dga[data-status=completed] .dga__pulse svg{opacity:1} .dga[data-status=completed] .dga__pulse circle{animation:dga-draw .6s ease forwards} .dga[data-status=completed] .dga__pulse path{animation:dga-draw .4s .35s ease forwards} .dga[data-status=completed] .dga__paper{box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px var(--dga-gold),0 0 36px var(--dga-gold-soft);animation:dga-lift .7s ease} .dga[data-status=completed] .dga__open{opacity:1;transform:none;pointer-events:auto} .dga[data-status=completed] .dga__text::after{display:none} .dga[data-status=error] .dga__state{color:#c9c5bb} .dga[data-status=error] .dga__pulse::before{display:block;background:#6b6a66;animation:none} .dga[data-status=error] .dga__paper{opacity:.28} .dga[data-status=error] .dga__msg{opacity:1} @keyframes dga-pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,167,44,.5)}50%{box-shadow:0 0 0 6px rgba(212,167,44,0)}} @keyframes dga-blink{50%{opacity:0}} @keyframes dga-line{from{transform:scaleX(0);opacity:0}} @keyframes dga-draw{to{stroke-dashoffset:0}} @keyframes dga-lift{50%{transform:translateY(-5px)}} @media (max-width:640px){.dga.is-open,.dga__inner{width:100vw}} @media (prefers-reduced-motion:reduce){.dga,.dga *{animation:none!important;transition-duration:.01s!important}.dga__pulse circle,.dga__pulse path{stroke-dashoffset:0}} .dga__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--success-600); background: var(--success-50); padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-top: 16px; font-weight: 500; border: 1px solid var(--success-200); display: none; } .dga[data-status=\ completed\] .dga__msg { display: block; animation: dgaTypeMsg 1.5s steps(40, end) forwards; } @keyframes dgaTypeMsg { from { width: 0; opacity: 0; } 1% { opacity: 1; } to { width: 100%; opacity: 1; } }