/* Esparta Brasil — motion + encaixe visual 232
   Camada visual sem alterar rotas, dados ou permissoes. */
:root{
  --m232-gold:#e9b92f;
  --m232-gold-soft:rgba(233,185,47,.12);
  --m232-ease:cubic-bezier(.2,.78,.24,1);
  --m232-fast:180ms;
  --m232-med:420ms;
  --cursor-x:50vw;
  --cursor-y:35vh;
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
#app{isolation:isolate;position:relative}
#app:before{
  content:"";
  position:fixed;
  z-index:0;
  width:520px;
  height:520px;
  left:var(--cursor-x);
  top:var(--cursor-y);
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(232,184,47,.055) 0%,rgba(232,184,47,.018) 34%,transparent 70%);
  filter:blur(8px);
  opacity:.82;
  transition:opacity .25s ease;
}
.sidebar,.workspace{z-index:1}
.workspace{position:relative;min-height:100vh}

/* Encaixe geral */
.content{width:100%;padding-inline:clamp(20px,3.2vw,44px)!important}
.page{width:100%;min-width:0}
.feed{width:min(100%,760px)}
.home-feed-layout{gap:22px!important;align-items:start!important}
.home-feed-layout>.feed{min-width:0}
.ad-sidebar{position:sticky;top:94px;align-self:start}
.grid,.grid3,.products,.community227-grid{align-items:stretch}
.card,.product,.post,.community227-card,.notif227,.sponsored-card{min-width:0}
.toolbar{column-gap:10px!important;row-gap:9px!important}

/* Linha de luz discreta no topo */
.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(233,185,47,.08) 24%,rgba(233,185,47,.22) 50%,rgba(233,185,47,.08) 76%,transparent 100%);
  opacity:.48;
  pointer-events:none;
}

/* Navegacao com microinteracao */
.nav button,.btn,.iconbtn,.login-submit,.postactions button,.product,.community227-card.can-open{
  -webkit-tap-highlight-color:transparent;
}
.nav button,.btn,.iconbtn,.login-submit,.postactions button{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
.nav button{transition:background var(--m232-fast) ease,color var(--m232-fast) ease,transform var(--m232-fast) var(--m232-ease)!important}
.nav button:hover{transform:translateX(2px)}
.nav button:active{transform:translateX(1px) scale(.985)}
.nav button .ico{transition:transform var(--m232-fast) var(--m232-ease),background var(--m232-fast) ease,color var(--m232-fast) ease!important}
.nav button:hover .ico{transform:scale(1.08)}
.nav button.active .ico{transform:scale(1.04)}
.logout{transition:background var(--m232-fast) ease,color var(--m232-fast) ease,transform var(--m232-fast) ease!important}
.logout:active{transform:scale(.98)}

/* Busca e botoes */
.search{transition:border-color var(--m232-fast) ease,background var(--m232-fast) ease,box-shadow var(--m232-fast) ease,width var(--m232-med) var(--m232-ease)!important}
.search:focus{width:min(370px,35vw)!important;background:#101720!important}
.iconbtn,.btn{transition:transform var(--m232-fast) var(--m232-ease),background var(--m232-fast) ease,border-color var(--m232-fast) ease,box-shadow var(--m232-fast) ease!important}
.iconbtn:hover,.btn:hover{transform:translateY(-1px)}
.iconbtn:active,.btn:active{transform:translateY(0) scale(.97)}
#refreshBtn.is-spinning{animation:m232Spin .62s var(--m232-ease)}

/* Spotlight nos principais cards */
.post,.card,.product,.community227-card,.notif227,.sponsored-card{
  position:relative;
}
.post:before,.card:before,.product:before,.community227-card:before,.notif227:before,.sponsored-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(237,193,67,.072),transparent 62%);
  transition:opacity .22s ease;
}
.post:hover:before,.card:hover:before,.product:hover:before,.community227-card:hover:before,.notif227:hover:before,.sponsored-card:hover:before{opacity:1}
.post>*:not(.motion-ripple),.card>*:not(.motion-ripple),.product>*:not(.motion-ripple),.community227-card>*:not(.motion-ripple),.notif227>*:not(.motion-ripple),.sponsored-card>*:not(.motion-ripple){position:relative;z-index:1}

/* Cards mais encaixados e com profundidade leve */
.post,.product,.community227-card,.sponsored-card{
  transition:border-color .22s ease,background .22s ease,box-shadow .28s ease,transform .28s var(--m232-ease)!important;
}
.post:hover,.product:hover,.community227-card.can-open:hover,.sponsored-card:hover{
  box-shadow:0 20px 52px rgba(0,0,0,.18)!important;
}
.product:hover{transform:translateY(-2px)!important}
.productimg img{transition:transform .45s var(--m232-ease),filter .3s ease}
.product:hover .productimg img{transform:scale(1.025)}
.igp-grid-item img{transition:transform .5s var(--m232-ease),filter .35s ease!important}
.igp-grid-item:hover img{transform:scale(1.035)}
.avatar img{transition:transform .35s var(--m232-ease)}
.avatar:hover img{transform:scale(1.06)}

/* Feed e acoes */
.postactions button{transition:color .16s ease,background .16s ease,transform .16s var(--m232-ease)!important}
.postactions button:hover{background:rgba(255,255,255,.035)!important;transform:translateY(-1px)}
.postactions button:active{transform:scale(.94)}
.postactions button.on{filter:drop-shadow(0 0 8px rgba(233,185,47,.22))}

/* Titulos de pagina */
#pageTitle,#pageSubtitle{transform-origin:left center}
#pageTitle.title-pulse{animation:m232Title .38s var(--m232-ease)}
#pageSubtitle.title-pulse{animation:m232Sub .46s var(--m232-ease)}

/* Entrada de rota */
#content.route-motion-enter>.page,
#content.route-motion-enter>.feed,
#content.route-motion-enter>.home-feed-layout,
#content.route-motion-enter>.community227-page,
#content.route-motion-enter>.activity227-page,
#content.route-motion-enter>.igp-shell{
  animation:m232RouteIn .46s var(--m232-ease) both;
}
.motion-item{opacity:0;transform:translateY(13px) scale(.995)}
.motion-item.is-visible{animation:m232ItemIn .48s var(--m232-ease) both;animation-delay:min(calc(var(--motion-i,0) * 28ms),220ms)}

/* Ripple */
.motion-ripple{
  position:absolute!important;
  z-index:20!important;
  width:12px;height:12px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,220,108,.26);
  transform:translate(-50%,-50%) scale(0);
  animation:m232Ripple .62s ease-out forwards;
}

/* Modal */
.modalbg{animation:m232Backdrop .2s ease both}
.modal{animation:m232Modal .34s var(--m232-ease) both;transform-origin:center top}

/* Login com movimento ambiental */
.login-showcase:after{animation:m232Orbit 14s ease-in-out infinite alternate}
.login-glow-one{animation:m232GlowOne 9s ease-in-out infinite alternate}
.login-glow-two{animation:m232GlowTwo 11s ease-in-out infinite alternate}
.login-showcase-content{animation:m232LoginCopy .58s var(--m232-ease) both}
.login-card{animation:m232LoginCard .58s .06s var(--m232-ease) both}
.login-emblem{transition:transform .25s var(--m232-ease),box-shadow .25s ease}
.login-brand:hover .login-emblem{transform:translateY(-2px) rotate(-1.5deg);box-shadow:inset 0 0 0 4px rgba(239,186,39,.05),0 18px 45px rgba(0,0,0,.3),0 0 24px rgba(239,186,39,.06)}
.login-feature{transition:transform .22s var(--m232-ease),border-color .22s ease,background .22s ease!important}
.login-feature:hover{transform:translateY(-2px);border-color:rgba(239,186,39,.14)!important;background:rgba(18,24,33,.72)!important}
.login-submit{transition:transform .18s var(--m232-ease),box-shadow .18s ease,filter .18s ease!important}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(239,186,39,.13)}
.login-submit:active{transform:scale(.985)}
.online-dot{animation:m232Online 2.3s ease-out infinite}

/* Tela de carregamento Esparta */
.boot:not(.loginboot){
  position:fixed;
  inset:0;
  z-index:5000;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(233,185,47,.105),transparent 22%),
    radial-gradient(circle at 50% 52%,#101720 0%,#080c12 38%,#05070a 100%);
}
.boot:not(.loginboot):before{
  content:"";
  position:absolute;
  width:min(72vw,720px);
  aspect-ratio:1;
  border:1px solid rgba(233,185,47,.08);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(233,185,47,.014),0 0 0 140px rgba(233,185,47,.009);
  animation:m232BootOrbit 10s linear infinite;
}
.boot:not(.loginboot):after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at center,#000 0%,transparent 72%);
}
.boot-stage{position:relative;z-index:2;width:128px;height:128px;display:grid;place-items:center;margin-bottom:8px}
.boot-ring{position:absolute;border-radius:50%;border:1px solid rgba(233,185,47,.15)}
.boot-ring.r1{inset:0;animation:m232Ring 5.6s linear infinite}
.boot-ring.r2{inset:12px;border-style:dashed;border-color:rgba(233,185,47,.24);animation:m232RingReverse 7.4s linear infinite}
.boot-ring.r3{inset:25px;border-color:rgba(255,255,255,.07);animation:m232Breath 2.6s ease-in-out infinite}
.boot-crest{position:relative;z-index:2;filter:drop-shadow(0 14px 28px rgba(0,0,0,.32))}
.boot:not(.loginboot) .brandmark{width:62px;height:62px;border-radius:17px;background:linear-gradient(145deg,#1a170d,#0c1117);box-shadow:inset 0 0 0 4px rgba(233,185,47,.025),0 0 34px rgba(233,185,47,.08);animation:m232Crest 2.8s ease-in-out infinite}
.boot:not(.loginboot)>strong,.boot:not(.loginboot)>span,.boot-progress{position:relative;z-index:2}
.boot:not(.loginboot)>strong{font-size:19px;letter-spacing:.055em;text-transform:uppercase}
.boot:not(.loginboot)>span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#707b89}
.boot-progress{width:170px;height:2px;margin-top:13px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.055)}
.boot-progress i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,#e9b92f,#ffe08a,transparent);animation:m232Progress 1.45s ease-in-out infinite}

/* Pequenos detalhes */
.chip.gold{box-shadow:inset 0 0 14px rgba(233,185,47,.025)}
.skeleton,.skeleton-card{position:relative;overflow:hidden}
.skeleton:after,.skeleton-card:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);animation:m232Skeleton 1.55s infinite}

@keyframes m232Spin{to{transform:rotate(360deg)}}
@keyframes m232Title{0%{opacity:.2;transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes m232Sub{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes m232RouteIn{0%{opacity:0;transform:translateY(8px) scale(.997)}100%{opacity:1;transform:none}}
@keyframes m232ItemIn{0%{opacity:0;transform:translateY(13px) scale(.995)}100%{opacity:1;transform:none}}
@keyframes m232Ripple{0%{opacity:.7;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(24)}}
@keyframes m232Backdrop{from{opacity:0}to{opacity:1}}
@keyframes m232Modal{from{opacity:0;transform:translateY(13px) scale(.975)}to{opacity:1;transform:none}}
@keyframes m232Orbit{from{transform:translateY(-50%) rotate(0deg) scale(.98)}to{transform:translateY(-50%) rotate(8deg) scale(1.04)}}
@keyframes m232GlowOne{from{transform:translate(0,0) scale(.95)}to{transform:translate(42px,28px) scale(1.08)}}
@keyframes m232GlowTwo{from{transform:translate(0,0) scale(1)}to{transform:translate(-34px,-24px) scale(1.12)}}
@keyframes m232LoginCopy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes m232LoginCard{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes m232Online{0%{box-shadow:0 0 0 0 rgba(79,211,138,.22)}70%{box-shadow:0 0 0 8px rgba(79,211,138,0)}100%{box-shadow:0 0 0 0 rgba(79,211,138,0)}}
@keyframes m232BootOrbit{to{transform:rotate(360deg)}}
@keyframes m232Ring{to{transform:rotate(360deg)}}
@keyframes m232RingReverse{to{transform:rotate(-360deg)}}
@keyframes m232Breath{50%{transform:scale(.94);opacity:.48}}
@keyframes m232Crest{50%{transform:translateY(-3px);box-shadow:inset 0 0 0 4px rgba(233,185,47,.035),0 0 44px rgba(233,185,47,.13)}}
@keyframes m232Progress{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@keyframes m232Skeleton{100%{transform:translateX(100%)}}

@media(max-width:1050px){
  #app:before{width:390px;height:390px;opacity:.55}
  .content{padding-inline:24px!important}
  .ad-sidebar{position:static}
}
@media(max-width:760px){
  #app:before{display:none}
  .content{padding-inline:14px!important}
  .topbar:after{opacity:.32}
  .search:focus{width:min(100%,320px)!important}
  .post:hover,.product:hover,.community227-card.can-open:hover,.sponsored-card:hover{box-shadow:none!important}
  .post:before,.card:before,.product:before,.community227-card:before,.notif227:before,.sponsored-card:before{display:none}
  .login-feature:hover,.product:hover{transform:none!important}
  .boot:not(.loginboot):before{width:105vw}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #app:before{display:none}
  .motion-item{opacity:1!important;transform:none!important}
}