/* Catshroom Store — tela de loading de geração/exportação de arquivo (cs-gerando). Só loja; o Hub não usa.
   Mascote + 2 engrenagens (giram em loop) + barra rosa em loop. Doc: docs/design-system/components/Gerando/README.md */
.cs-gerando { --g-fundo: #F0ECFD; --g-tinta: #171717; --g-rosa: #F65AA8; --g-rosa-2: #FF86C3; --g-amarelo: #FFD52A; --g-barra: #FFFFFF; --g-pill: #171717;
  width: min(360px, 100%); margin: 0 auto; box-sizing: border-box; background: var(--g-fundo); color: var(--g-tinta); border: 4px solid var(--g-tinta); border-radius: 36px;
  box-shadow: 8px 8px 0 var(--g-tinta); padding: 22px 24px 24px; text-align: center; }
.cs-gerando__palco { position: relative; z-index: 1; width: 100%; aspect-ratio: 1140 / 974; }
.cs-gerando__palco::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 974' preserveAspectRatio='none'%3E%3Cg transform='translate(0 60)'%3E%3Cg fill='%23E6DAFB'%3E%3Ccircle cx='205' cy='520' r='205'/%3E%3Ccircle cx='290' cy='290' r='215'/%3E%3Ccircle cx='520' cy='470' r='370'/%3E%3Ccircle cx='870' cy='290' r='235'/%3E%3Ccircle cx='920' cy='560' r='220'/%3E%3Ccircle cx='640' cy='729' r='245'/%3E%3Ccircle cx='290' cy='759' r='215'/%3E%3C/g%3E%3Cg fill='%23D2BEF6'%3E%3Ccircle cx='205' cy='520' r='175'/%3E%3Ccircle cx='290' cy='290' r='185'/%3E%3Ccircle cx='520' cy='470' r='340'/%3E%3Ccircle cx='870' cy='290' r='205'/%3E%3Ccircle cx='920' cy='560' r='190'/%3E%3Ccircle cx='640' cy='729' r='215'/%3E%3Ccircle cx='290' cy='759' r='185'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cs-gerando__palco img, .cs-gerando__palco svg { position: absolute; display: block; }
.cs-gerando__mascote { left: 1.05%; top: 1.13%; width: 83.42%; height: 98.87%; }
.cs-gerando__g { transform-origin: 50% 50%; animation: cs-gerando-gira var(--t) linear infinite; }
.cs-gerando__g--a { left: 63.07%; top: 16.02%; width: 24.12%; height: 28.23%; --t: 9s; }
.cs-gerando__g--b { left: 80.26%; top: 34.50%; width: 18.77%; height: 21.97%; --t: 6s; animation-direction: reverse; }
/* a etiqueta cobre a base do mascote; a barra vem logo abaixo */
.cs-gerando__barra { position: relative; margin-top: 18px; height: 34px; border: 4px solid var(--g-tinta); border-radius: 999px; background: var(--g-barra); overflow: hidden; box-shadow: 4px 4px 0 var(--g-tinta); }
.cs-gerando__barra i { display: block; height: 100%; width: 44%; border-radius: 999px; border-right: 4px solid var(--g-tinta);
  background: repeating-linear-gradient(-45deg, var(--g-rosa) 0 14px, var(--g-rosa-2) 14px 28px); background-size: 40px 100%;
  animation: cs-gerando-vai 1.8s ease-in-out infinite, cs-gerando-lista .8s linear infinite; }
.cs-gerando__titulo { position: relative; z-index: 2; margin: -26px 0 0; display: inline-block; font-family: "Archivo Black", var(--font-display, sans-serif); font-weight: 400; font-size: 26px; line-height: 1.2;
  background: var(--g-amarelo); color: var(--g-pill); border: 4px solid var(--g-tinta); border-radius: 16px; padding: 6px 22px; box-shadow: 4px 4px 0 var(--g-tinta); }
.cs-gerando__sub { margin: 16px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
@keyframes cs-gerando-gira { to { transform: rotate(360deg); } }
@keyframes cs-gerando-lista { to { background-position: 40px 0; } }
@keyframes cs-gerando-vai { 0% { transform: translateX(-100%); } 100% { transform: translateX(230%); } }
@media (prefers-reduced-motion: reduce) { .cs-gerando *, .cs-gerando { animation: none !important; } .cs-gerando__barra i { width: 60%; }
  /* nada gira: as bolinhas acendem uma depois da outra (só opacidade), para ainda indicar "carregando" */
  .cs-gerando__roda i { opacity: .35; animation: cs-gerando-acende 1.4s ease-in-out infinite !important; animation-delay: calc(var(--k) * 200ms) !important; } }
@keyframes cs-gerando-acende { 0%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (max-width: 380px) { .cs-gerando { padding: 16px 16px 18px; border-radius: 28px; } .cs-gerando__titulo { font-size: 22px; } }

/* dentro do modal de carregamento padrão (loja.js: carregando(texto, { gerando: true })) */
.carr .cs-gerando { display: none; }
.carr.carr-ger .carr-box { background: none; border: 0; box-shadow: none; padding: 0; max-width: min(92vw, 360px); }
.carr.carr-ger .carr-spin, .carr.carr-ger .carr-t, .carr.carr-ger .carr-bar { display: none; }
.carr.carr-ger .cs-gerando:not(.cs-gerando--espera) { display: block; }

/* variante "espera" (Carregando…): mascote de olhos fechados + anel de pontos girando; a etiqueta cobre a base do mascote */
.cs-gerando--espera .cs-gerando__palco { aspect-ratio: 1030 / 980; }
.cs-gerando--espera .cs-gerando__palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 980' preserveAspectRatio='none'%3E%3Cg transform='translate(0 50)'%3E%3Cg fill='%23E6DAFB'%3E%3Ccircle cx='180' cy='540' r='180'/%3E%3Ccircle cx='230' cy='300' r='200'/%3E%3Ccircle cx='390' cy='480' r='330'/%3E%3Ccircle cx='810' cy='400' r='220'/%3E%3Ccircle cx='850' cy='570' r='180'/%3E%3Ccircle cx='430' cy='700' r='230'/%3E%3Ccircle cx='190' cy='740' r='190'/%3E%3C/g%3E%3Cg fill='%23D2BEF6'%3E%3Ccircle cx='180' cy='540' r='150'/%3E%3Ccircle cx='230' cy='300' r='170'/%3E%3Ccircle cx='390' cy='480' r='300'/%3E%3Ccircle cx='810' cy='400' r='190'/%3E%3Ccircle cx='850' cy='570' r='150'/%3E%3Ccircle cx='430' cy='700' r='200'/%3E%3Ccircle cx='190' cy='740' r='160'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cs-gerando__espera { left: .68%; top: .41%; width: 72.43%; height: 99.08%; }
/* "loading bolinha": 7 bolinhas em HTML, paradas no anel, com cauda (tamanho e opacidade caem atrás da primeira).
   Só o anel gira (transform num elemento HTML = compositor), então fica liso mesmo com o Clicker processando.
   Cores do mascote: roxo do moletom, lilás, rosa do cogumelo, azul do talo e menta do rosto. */
.cs-gerando__palco .cs-gerando__roda { position: absolute; display: block; left: 70.1%; top: 26.33%; width: 29.13%; aspect-ratio: 1; animation: cs-gerando-gira 900ms linear infinite; }
.cs-gerando__roda i { position: absolute; left: 39.33%; top: 39.33%; width: 21.33%; aspect-ratio: 1; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(23,23,23,.16); opacity: var(--o); transform: rotate(calc(var(--k) * -51.4286deg)) translateY(-156.25%) scale(var(--s)); }
.cs-gerando__roda i:nth-child(1) { --k: 0; --s: 1;   --o: 1;   --c: #9B5CF0; }
.cs-gerando__roda i:nth-child(2) { --k: 1; --s: .9;  --o: .94; --c: #B98AF6; }
.cs-gerando__roda i:nth-child(3) { --k: 2; --s: .81; --o: .86; --c: #D79CF2; }
.cs-gerando__roda i:nth-child(4) { --k: 3; --s: .73; --o: .78; --c: #F0A8E6; }
.cs-gerando__roda i:nth-child(5) { --k: 4; --s: .66; --o: .68; --c: #8FD3F4; }
.cs-gerando__roda i:nth-child(6) { --k: 5; --s: .6;  --o: .56; --c: #86E6E0; }
.cs-gerando__roda i:nth-child(7) { --k: 6; --s: .55; --o: .44; --c: #A8F0DA; }
.cs-gerando--espera .cs-gerando__titulo { position: relative; z-index: 2; margin-top: -30px; }
.cs-gerando__titulo span { display: inline-block; }
/* entrada: com gerando.js, o cartão espera o mascote ficar pronto (até 400 ms) e entra inteiro, mascote e bolinhas juntos */
html.cs-g-js .cs-gerando--espera:not(.cs-gerando--pronto) { opacity: 0; }
.cs-gerando--espera.cs-gerando--pronto { animation: cs-gerando-entra 220ms cubic-bezier(.23,1,.32,1) both; }
@keyframes cs-gerando-entra { from { opacity: 0; transform: translateY(6px) scale(.97); } }
/* sucesso (gerando.js: CatGerando.sucesso): o mascote comemorando entra no lugar do de olhos fechados */
.cs-gerando__palco .cs-gerando__ok { left: 2%; bottom: 1%; width: 96%; height: auto; opacity: 0; transform: scale(.92); transform-origin: 40% 100%; }
.cs-gerando--saindo { opacity: 0 !important; transform: scale(.98); transition: opacity 160ms ease-out, transform 160ms ease-out; animation: none !important; }
/* modal geral: sem a variante de geração, mostra a "espera"; com progresso, a barra aparece embaixo do cartão */
.carr:not(.carr-ger) .cs-gerando--espera { display: block; }
.carr:not(.carr-ger) .carr-box { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; width: min(92vw, 360px); max-width: none; }
.carr:not(.carr-ger) .carr-spin, .carr:not(.carr-ger) .carr-t { display: none; }
.carr:not(.carr-ger) .carr-bar { order: 9; margin-top: 18px; background: #fff; border: 3px solid #171717; height: 14px; }

/* tema escuro (data-theme do Hub e da loja; sem escolha, segue o sistema): cartão no roxo "Ameixa noite", contorno, sombra e texto creme,
   nuvem atrás do mascote em roxos escuros. A etiqueta amarela e as bolinhas não mudam (o texto da etiqueta continua escuro) */
html[data-theme="dark"] .cs-gerando { --g-fundo: #271B3A; --g-tinta: #FFF0E4; --g-barra: #20172F; }
html[data-theme="dark"] .cs-gerando__palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 974' preserveAspectRatio='none'%3E%3Cg transform='translate(0 60)'%3E%3Cg fill='%2333264B'%3E%3Ccircle cx='205' cy='520' r='205'/%3E%3Ccircle cx='290' cy='290' r='215'/%3E%3Ccircle cx='520' cy='470' r='370'/%3E%3Ccircle cx='870' cy='290' r='235'/%3E%3Ccircle cx='920' cy='560' r='220'/%3E%3Ccircle cx='640' cy='729' r='245'/%3E%3Ccircle cx='290' cy='759' r='215'/%3E%3C/g%3E%3Cg fill='%233D2D5C'%3E%3Ccircle cx='205' cy='520' r='175'/%3E%3Ccircle cx='290' cy='290' r='185'/%3E%3Ccircle cx='520' cy='470' r='340'/%3E%3Ccircle cx='870' cy='290' r='205'/%3E%3Ccircle cx='920' cy='560' r='190'/%3E%3Ccircle cx='640' cy='729' r='215'/%3E%3Ccircle cx='290' cy='759' r='185'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html[data-theme="dark"] .cs-gerando--espera .cs-gerando__palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 980' preserveAspectRatio='none'%3E%3Cg transform='translate(0 50)'%3E%3Cg fill='%2333264B'%3E%3Ccircle cx='180' cy='540' r='180'/%3E%3Ccircle cx='230' cy='300' r='200'/%3E%3Ccircle cx='390' cy='480' r='330'/%3E%3Ccircle cx='810' cy='400' r='220'/%3E%3Ccircle cx='850' cy='570' r='180'/%3E%3Ccircle cx='430' cy='700' r='230'/%3E%3Ccircle cx='190' cy='740' r='190'/%3E%3C/g%3E%3Cg fill='%233D2D5C'%3E%3Ccircle cx='180' cy='540' r='150'/%3E%3Ccircle cx='230' cy='300' r='170'/%3E%3Ccircle cx='390' cy='480' r='300'/%3E%3Ccircle cx='810' cy='400' r='190'/%3E%3Ccircle cx='850' cy='570' r='150'/%3E%3Ccircle cx='430' cy='700' r='200'/%3E%3Ccircle cx='190' cy='740' r='160'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html[data-theme="dark"] .carr:not(.carr-ger) .carr-bar { background: #20172F; border-color: #FFF0E4; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .cs-gerando { --g-fundo: #271B3A; --g-tinta: #FFF0E4; --g-barra: #20172F; }
html:not([data-theme="light"]) .cs-gerando__palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 974' preserveAspectRatio='none'%3E%3Cg transform='translate(0 60)'%3E%3Cg fill='%2333264B'%3E%3Ccircle cx='205' cy='520' r='205'/%3E%3Ccircle cx='290' cy='290' r='215'/%3E%3Ccircle cx='520' cy='470' r='370'/%3E%3Ccircle cx='870' cy='290' r='235'/%3E%3Ccircle cx='920' cy='560' r='220'/%3E%3Ccircle cx='640' cy='729' r='245'/%3E%3Ccircle cx='290' cy='759' r='215'/%3E%3C/g%3E%3Cg fill='%233D2D5C'%3E%3Ccircle cx='205' cy='520' r='175'/%3E%3Ccircle cx='290' cy='290' r='185'/%3E%3Ccircle cx='520' cy='470' r='340'/%3E%3Ccircle cx='870' cy='290' r='205'/%3E%3Ccircle cx='920' cy='560' r='190'/%3E%3Ccircle cx='640' cy='729' r='215'/%3E%3Ccircle cx='290' cy='759' r='185'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html:not([data-theme="light"]) .cs-gerando--espera .cs-gerando__palco::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1030 980' preserveAspectRatio='none'%3E%3Cg transform='translate(0 50)'%3E%3Cg fill='%2333264B'%3E%3Ccircle cx='180' cy='540' r='180'/%3E%3Ccircle cx='230' cy='300' r='200'/%3E%3Ccircle cx='390' cy='480' r='330'/%3E%3Ccircle cx='810' cy='400' r='220'/%3E%3Ccircle cx='850' cy='570' r='180'/%3E%3Ccircle cx='430' cy='700' r='230'/%3E%3Ccircle cx='190' cy='740' r='190'/%3E%3C/g%3E%3Cg fill='%233D2D5C'%3E%3Ccircle cx='180' cy='540' r='150'/%3E%3Ccircle cx='230' cy='300' r='170'/%3E%3Ccircle cx='390' cy='480' r='300'/%3E%3Ccircle cx='810' cy='400' r='190'/%3E%3Ccircle cx='850' cy='570' r='150'/%3E%3Ccircle cx='430' cy='700' r='200'/%3E%3Ccircle cx='190' cy='740' r='160'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html:not([data-theme="light"]) .carr:not(.carr-ger) .carr-bar { background: #20172F; border-color: #FFF0E4; }
}