/* ============================================================================
   Store Israel-Brasil — Splash da marca + spinner de espera (sib-loader)
   ----------------------------------------------------------------------------
   Limkor Intermediacao Agenciamento e Solucoes em Pagamento On Line LTDA
   CNPJ: 35.875.926/0001-05 | Rodrigo Tavares Bongiovanni - CPF: 348.878.878-41
   ============================================================================
   Base: design-system/assets/spinner/loader/sib-loader.css (mesmo visual que
   design-system/new/web/styles/app/loader.css — as duas fontes sao
   identicas, so a segunda usa var(--ease-out)/var(--font-mono) com fallback;
   este arquivo usa var() de proposito porque o site JA tem esses tokens em
   styles/tokens/effects.css e styles/tokens/typography.css). Ver
   docs/02-site/15-splash-loader.md.

   0 JS: o progresso ate 90% e animacao CSS pura (sib-fill-progress). Quem
   esconde o splash e sib::shared::splash_hide() (C++/EM_JS, ver
   apps/web-native/shared/splash/) — ela so alterna as classes is-hiding/
   is-hidden abaixo, TODO o visual mora aqui. Se o WASM nunca chamar hide(),
   o failsafe (sib-splash-failsafe, delay 15s) esconde sozinho, sem JS.
   ============================================================================ */
.sib-splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(130% 130% at 50% 26%,#0A2166 0%,#050F33 46%,#0B0E16 100%);opacity:1;transition:opacity .2s var(--ease-out,cubic-bezier(.2,.8,.2,1));font-family:var(--font-mono,ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace);animation:sib-splash-failsafe .6s ease 15s forwards}
.sib-splash.is-hidden{opacity:0;pointer-events:none}
.sib-splash.is-hiding{pointer-events:none}
.sib-splash *,.sib-splash *::before,.sib-splash *::after{box-sizing:border-box}
.splash-core{display:flex;flex-direction:column;align-items:center;gap:24px;position:relative}
.splash-mark{position:relative;width:176px;height:176px;display:grid;place-items:center;animation:sib-breathe 3.6s ease-in-out 1.3s infinite}
.splash-halo{position:absolute;inset:-58px;border-radius:50%;background:conic-gradient(from 0deg,rgba(204,166,76,.18),rgba(74,120,236,.10),rgba(58,164,131,.13),rgba(204,166,76,.18));filter:blur(36px);animation:sib-spin 7.5s linear infinite;pointer-events:none}
.splash-ring{position:absolute;inset:0;width:176px;height:176px}
.splash-ring--a{animation:sib-spin 1.45s linear infinite}
.splash-ring--b{animation:sib-spin-rev 2.1s linear infinite}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
.ring-arc{fill:none;stroke:#CCA64C;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:132 371}
.ring-arc--b{stroke:rgba(74,120,236,.75);stroke-width:2.5;stroke-dasharray:58 357}
.splash-ripple{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(204,166,76,.55);opacity:0;transform:scale(.3);animation:sib-ripple .9s var(--ease-out,cubic-bezier(.2,.8,.2,1)) 1.12s 1}
.splash-star{position:relative;width:98px;height:98px;overflow:visible;z-index:1}
.splash-star .tri{fill:none;stroke-width:8.5;stroke-linejoin:round;stroke-dasharray:250;stroke-dashoffset:0}
.splash-star .tri-a{stroke:#3AA483}
.splash-star .tri-b{stroke:#4A78EC}
.splash-star .wire{stroke:#3AA483;stroke-width:8.5;stroke-linecap:round;opacity:1}
.splash-star .gem{fill:#CCA64C;transform:scale(1);transform-origin:60px 60px}
.splash-word{position:relative;overflow:hidden;opacity:1}
.splash-word img{height:28px;display:block}
.splash-word::after{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);mix-blend-mode:screen;animation:sib-sheen 1.1s ease .2s 1}
.splash-bar{width:208px;height:3px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;opacity:1}
.splash-fill{display:block;width:0%;height:100%;border-radius:99px;background:linear-gradient(90deg,#3AA483,#4A78EC,#CCA64C);animation:sib-fill-progress 8s var(--ease-out,cubic-bezier(.2,.8,.2,1)) forwards}
.splash-note{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.52);opacity:1}

/* Esconder: sib::shared::splash_hide() aplica is-hiding primeiro (crava a
   barra em 100%, mata a animacao de progresso e libera ponteiro), 100ms depois
   is-hidden (fade .2s via .sib-splash.is-hidden acima), remove o no do DOM no
   transitionend (fallback 300ms). Duas classes = duas fases, tudo em CSS. */
.sib-splash.is-hiding .splash-fill{animation:none;width:100%;transition:width .1s var(--ease-out,cubic-bezier(.2,.8,.2,1))}

@keyframes sib-spin{to{transform:rotate(360deg)}}
@keyframes sib-spin-rev{to{transform:rotate(-360deg)}}
@keyframes sib-draw{to{stroke-dashoffset:0}}
@keyframes sib-fade{to{opacity:1}}
@keyframes sib-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sib-pop{0%{transform:scale(0)}68%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes sib-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes sib-sheen{to{transform:translateX(130%) skewX(-18deg)}}
@keyframes sib-breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(74,120,236,0))}50%{filter:drop-shadow(0 10px 30px rgba(74,120,236,.5))}}
@keyframes sib-fill-progress{from{width:0%}to{width:90%}}
/* Failsafe SEM JS (armadilha de WASM que nunca chega a rodar): se
   splash_hide() nunca for chamada, o proprio CSS esconde o splash aos 15s e
   revela o fallback textual do #root (mantido, nunca removido — §3). */
@keyframes sib-splash-failsafe{0%,99%{opacity:1;visibility:visible;pointer-events:auto}100%{opacity:0;visibility:hidden;pointer-events:none}}

@media (prefers-reduced-motion:reduce){
  .splash-halo,.splash-ring--a,.splash-ring--b,.splash-mark,.splash-ripple{animation:none}
  .splash-star .tri{animation:none;stroke-dashoffset:0}
  .splash-star .wire,.splash-word,.splash-bar,.splash-note{animation:none;opacity:1}
  .splash-star .gem{animation:none;transform:none}
  .splash-word::after{animation:none}
  .splash-fill{animation:none;width:90%}
  .sib-splash.is-hiding .splash-fill{transition:none}
}

/* ============================================================================
   .sib-spinner — variante compacta para esperas internas (admin/cliente/
   checkout/catalog: "Carregando…"). Anel ~28px, arco dourado girando,
   inline-block, alinhavel com texto (display:inline-flex + vertical-align).
   ============================================================================ */
.sib-spinner{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;vertical-align:middle;flex-shrink:0}
.sib-spinner svg{display:block;width:100%;height:100%;animation:sib-spin .9s linear infinite}
.sib-spinner .spinner-track{fill:none;stroke:rgba(127,127,127,.22);stroke-width:3}
.sib-spinner .spinner-arc{fill:none;stroke:#CCA64C;stroke-width:3;stroke-linecap:round;stroke-dasharray:28 69}
@media (prefers-reduced-motion:reduce){
  .sib-spinner svg{animation:none}
}

/* ============================================================================
   .sib-root-fallback — texto honesto de #root quando o WASM nunca chega a
   rodar (erro de rede/CSP/browser sem WASM — §3 Zero Fallbacks: e a UNICA
   rede de seguranca de um shell vazio, NUNCA removida, so restilizada).
   Tipografia/cor do site via tokens (styles/tokens/*.css, ja carregado
   depois deste arquivo no <head>).
   ============================================================================ */
.sib-root-fallback{max-width:420px;margin:0 auto;padding:96px 24px 24px;text-align:center;font-family:var(--font-body,sans-serif);font-size:var(--text-sm,13px);line-height:var(--leading-normal,1.55);color:var(--text-muted,#6b7280)}