/* MONSTERIDLE — tela de carregamento (js/ui/loading.js). * Carregada antes de todo o resto no , para aparecer no primeiro quadro. */ #carregando{position:fixed;inset:0;z-index:400;overflow:hidden;background:#050c1a;color:#e6f1ff; font-family:"Segoe UI",system-ui,-apple-system,sans-serif;transition:opacity .6s ease,visibility .6s} #carregando.some{opacity:0;visibility:hidden;pointer-events:none} #carregando .cg-arte{position:absolute;left:0;right:0;top:0;height:78%; background:url("../assets/ui/loading/fundo.webp") center 30%/cover no-repeat;animation:cg-zoom 24s ease-in-out infinite alternate; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)} @keyframes cg-zoom{from{transform:scale(1)}to{transform:scale(1.06)}} /* a arte some no escuro de baixo, onde ficam a barra e os textos */ #carregando .cg-veu{position:absolute;inset:0; background:linear-gradient(180deg,rgba(5,12,26,0) 0%,rgba(5,12,26,0) 42%,rgba(5,12,26,.55) 62%,#050c1a 80%), radial-gradient(120% 60% at 50% 100%,rgba(12,40,80,.55),transparent 70%)} /* vaga-lumes subindo, para a cena não ficar parada */ #carregando .cg-luz{position:absolute;bottom:18%;width:4px;height:4px;border-radius:50%;background:#fde68a; box-shadow:0 0 8px 2px rgba(253,230,138,.8);opacity:0;animation:cg-luz 7s linear infinite} @keyframes cg-luz{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(30px,-46vh);opacity:0}} #carregando .cg-baixo{position:absolute;left:0;right:0;bottom:0;padding:0 24px 5vh;display:flex;flex-direction:column;align-items:center} #carregando .cg-marca{font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:.14em;margin-bottom:2.2vh; text-shadow:0 4px 18px rgba(0,0,0,.8)} #carregando .cg-marca span{color:#22d3ee;text-shadow:0 0 18px rgba(34,211,238,.6),0 4px 18px rgba(0,0,0,.8)} #carregando .cg-barra{position:relative;width:min(940px,92vw);height:30px;border-radius:99px;padding:5px; background:rgba(4,12,26,.85);border:2px solid rgba(56,189,248,.55); box-shadow:0 0 18px rgba(34,211,238,.35),inset 0 2px 8px rgba(0,0,0,.6)} #carregando .cg-barra i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#0ea5e9,#22d3ee 60%,#67e8f9); box-shadow:0 0 14px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.5);transition:width .35s ease} #carregando .cg-barra i::after{content:"";display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);background-size:40% 100%;background-repeat:no-repeat; animation:cg-brilho 1.6s linear infinite} @keyframes cg-brilho{from{background-position:-40% 0}to{background-position:140% 0}} #carregando .cg-pct{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:700; text-shadow:0 1px 4px #000} #carregando .cg-msg{margin-top:12px;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#bae6fd;min-height:20px} #carregando .cg-dicas{display:grid;grid-template-columns:repeat(4,1fr);width:min(1200px,96vw);margin-top:4vh} #carregando .cg-dica{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 18px; font-size:14px;line-height:1.35;color:#e0f2fe} #carregando .cg-dica + .cg-dica{border-left:1px solid rgba(56,189,248,.35)} #carregando .cg-dica svg{width:40px;height:40px;fill:none;stroke:#38bdf8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(56,189,248,.6))} @media (max-width:700px){ #carregando .cg-arte{height:70%;background-position:24% 30%} #carregando .cg-dicas{grid-template-columns:1fr 1fr;row-gap:16px} #carregando .cg-dica:nth-child(3){border-left:none} #carregando .cg-dica{font-size:12px;padding:0 8px} #carregando .cg-dica svg{width:30px;height:30px} #carregando .cg-barra{height:24px} #carregando .cg-msg{font-size:12px} } @media (prefers-reduced-motion:reduce){#carregando .cg-arte,#carregando .cg-luz,#carregando .cg-barra i::after{animation:none}}