/* Carregamento do Brechó com IA: tela cheia com o cabide no centro (aparece, pula, gira e balança), fundo vivo e saída em círculo que "abre" a página. */
.brx{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;background:#F2E6DA;clip-path:circle(150% at 50% 50%);transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .5s ease .45s,visibility 0s linear .95s}
.brx.out{clip-path:circle(0% at 50% 50%);opacity:0;visibility:hidden}
.brx::before,.brx::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px)}
.brx::before{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;background:radial-gradient(circle,rgba(255,163,174,.85),rgba(255,163,174,0) 62%);animation:brx-drift 7s ease-in-out infinite}
.brx::after{width:62vmax;height:62vmax;right:-22vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(240,78,24,.4),rgba(240,78,24,0) 62%);animation:brx-drift 8s ease-in-out -3s infinite reverse}
@keyframes brx-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.12)}}
.brx-d{position:absolute;border-radius:50%;opacity:.0;animation:brx-float 4.2s ease-in-out infinite}
.brx-d:nth-of-type(1){left:18%;top:62%;width:14px;height:14px;background:#FFA3AE;animation-delay:.2s}
.brx-d:nth-of-type(2){left:78%;top:30%;width:10px;height:10px;background:#F04E18;animation-delay:1s}
.brx-d:nth-of-type(3){left:30%;top:24%;width:8px;height:8px;background:#F04E18;animation-delay:1.8s}
.brx-d:nth-of-type(4){left:70%;top:68%;width:16px;height:16px;background:#FFA3AE;animation-delay:.6s}
.brx-d:nth-of-type(5){left:50%;top:84%;width:9px;height:9px;background:#FFA3AE;animation-delay:2.4s}
.brx-d:nth-of-type(6){left:12%;top:36%;width:11px;height:11px;background:#FFF3EA;animation-delay:1.4s}
@keyframes brx-float{0%{opacity:0;transform:translateY(24px) scale(.5)}30%{opacity:.9}100%{opacity:0;transform:translateY(-70px) scale(1.2)}}
.brx-box{position:relative;z-index:1;display:grid;justify-items:center;gap:8px}
.brx-stage{position:relative;width:150px;height:172px;display:grid;place-items:start center}
.brx-svg{width:128px;height:128px;overflow:visible;filter:drop-shadow(0 18px 24px rgba(240,78,24,.22))}
.brx-c{transform-box:fill-box;transform-origin:50% 50%;animation:brx-pop 2.8s cubic-bezier(.3,1.4,.5,1) infinite}
.brx-h{transform-box:fill-box;transform-origin:50% 55%;animation:brx-hang 2.8s cubic-bezier(.4,0,.3,1) infinite}
.brx-s{transform-box:fill-box;transform-origin:50% 50%;animation:brx-tw 1.4s ease-in-out infinite}
.brx-sh{position:absolute;bottom:6px;left:50%;width:82px;height:12px;margin-left:-41px;border-radius:50%;background:rgba(42,24,16,.16);animation:brx-shadow 2.8s cubic-bezier(.4,0,.3,1) infinite}
.brx-w{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:2.1rem;letter-spacing:-.03em;color:#F04E18;line-height:1;animation:brx-word 2.8s ease infinite}
.brx-bar{margin-top:14px;width:170px;height:4px;border-radius:99px;background:rgba(42,24,16,.1);overflow:hidden}
.brx-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#FFA3AE,#F04E18);animation:brx-load var(--brx-t,2s) cubic-bezier(.35,.6,.25,1) forwards}
@keyframes brx-load{to{width:100%}}
@keyframes brx-pop{0%{transform:scale(0)}12%{transform:scale(1.12)}20%,100%{transform:scale(1)}}
@keyframes brx-hang{
 0%{opacity:0;transform:translateY(-70px) rotate(-40deg) scale(.5)}
 12%{opacity:1;transform:translateY(8px) rotate(6deg) scale(1.05)}
 18%{transform:translateY(0) rotate(0) scale(1)}
 27%{transform:translateY(-24px) scale(.96,1.08)}
 36%{transform:translateY(0) scale(1.1,.88)}
 42%{transform:translateY(0) scale(1)}
 50%{transform:translateY(-22px) rotate(0)}
 68%{transform:translateY(-12px) rotate(360deg)}
 76%{transform:translateY(0) rotate(360deg) scale(1.08,.92)}
 82%{transform:translateY(0) rotate(372deg) scale(1)}
 88%{transform:rotate(350deg)}
 94%,100%{opacity:1;transform:rotate(360deg)}}
@keyframes brx-shadow{0%,12%{transform:scaleX(0);opacity:0}18%,42%,76%,100%{transform:scaleX(1);opacity:1}27%,50%{transform:scaleX(.55);opacity:.6}36%{transform:scaleX(1.15)}}
@keyframes brx-tw{0%,100%{transform:scale(.7) rotate(0);opacity:.7}50%{transform:scale(1.25) rotate(45deg);opacity:1}}
@keyframes brx-word{0%,14%{opacity:0;transform:translateY(8px)}28%,92%{opacity:1;transform:none}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.brx::before,.brx::after,.brx-d,.brx-c,.brx-h,.brx-sh,.brx-w{animation:none}.brx-d{display:none}.brx-s{animation-duration:2.4s}.brx-sh{opacity:.6}.brx{transition:opacity .4s ease,visibility 0s linear .4s;clip-path:none}.brx.out{clip-path:none}}

/* celular e PWA instalado: respeita notch/barra inferior e usa a altura visível real */
.brx{height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
html.brx-lock,html.brx-lock body{overflow:hidden}
@media(max-width:600px){.brx-stage{width:124px;height:146px}.brx-svg{width:104px;height:104px}.brx-w{font-size:1.75rem}.brx-bar{width:132px;margin-top:10px}.brx::before{width:110vw;height:110vw;left:-40vw;top:-40vw}.brx::after{width:100vw;height:100vw;right:-40vw;bottom:-40vw}}
@media(max-height:420px){.brx-stage{transform:scale(.75)}.brx-bar{display:none}}

.brx-wm{display:grid;justify-items:center;gap:7px}
.brx-ia{font:600 .74rem 'DM Sans',system-ui,sans-serif;letter-spacing:.38em;text-transform:uppercase;color:#7a5f55;padding-left:.38em;animation:brx-word 2.8s ease .15s infinite}
@media(prefers-reduced-motion:reduce){.brx-ia{animation:none}}