/* Endogin Hero — camada premium só para login e hub (não vai pras ferramentas).
   Fundo em shader (endogin-hero.js) + vidro refrativo + wordmark metálico. */

html{background:#07131A;}
:root[data-theme="light"]{background:#eef1f4;}
body{background:transparent !important;}
/* o shader (canvas fixo z-index:-1) substitui os blobs de CSS do polish */
body::before{display:none !important;}
/* garante o conteúdo acima do canvas */
.box,.wrap,header.top,main,footer{position:relative; z-index:1;}

/* ---- vidro com refração real (usa o filtro #eg-refract injetado pelo hero.js) ---- */
.eg-glass{
  background:linear-gradient(150deg, rgba(29,44,56,.44), rgba(9,18,24,.34)) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 12px rgba(0,0,0,.3) !important;
  -webkit-backdrop-filter:blur(5px) saturate(1.55);
  backdrop-filter:blur(5px) saturate(1.55) url(#eg-refract);
}
:root[data-theme="light"] .eg-glass{
  background:linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.42)) !important;
  border:1px solid rgba(255,255,255,.7) !important;
}

/* ---- wordmark metálico (o brilho corre devagar) ---- */
.eg-metal{
  background:linear-gradient(176deg,#fff 2%,#E7C173 26%,#C8912F 46%,#7c5714 58%,#E7C173 76%,#fff 98%);
  background-size:100% 320%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,145,47,.26));
  animation:eg-sheen 9s linear infinite;
}
@keyframes eg-sheen{0%{background-position:0 0;}100%{background-position:0 -320%;}}

/* ---- botão dourado com brilho passando ---- */
.eg-cta{position:relative; overflow:hidden;}
.eg-cta::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); animation:eg-swipe 6s ease-in-out infinite; pointer-events:none;}
@keyframes eg-swipe{0%,74%{left:-60%;}88%{left:130%;}100%{left:130%;}}

@media (prefers-reduced-motion:reduce){
  .eg-metal,.eg-cta::after{animation:none !important;}
}

/* o mármore de fundo é um elemento CONTÍNUO entre login↔hub: em vez de piscar,
   ele atravessa a troca de página (View Transitions trata pelo nome compartilhado). */
#eg-hero-canvas{ view-transition-name: eg-bg; }
::view-transition-group(eg-bg){ animation-duration:.5s; }
::view-transition-old(eg-bg),::view-transition-new(eg-bg){ mix-blend-mode:normal; }

/* --- LOGIN: grau de animação alto (inspirado em componentes premium animados) --- */
/* campos com foco animado (anel dourado que pulsa, estilo OTP) */
body:has(#tabLogin) input,body:has(#tabLogin) select{transition:border-color .2s,box-shadow .3s cubic-bezier(.22,.61,.36,1),background .2s;}
body:has(#tabLogin) input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 36%,transparent),0 0 22px color-mix(in srgb,var(--brand) 26%,transparent);animation:eg-focuspulse .55s ease;}
@keyframes eg-focuspulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);}}
/* tabs Entrar/Criar conta: transição suave + "pop" ao ativar */
body:has(#tabLogin) .tabs button{transition:color .25s cubic-bezier(.22,.61,.36,1),background .25s,box-shadow .25s,transform .25s;}
body:has(#tabLogin) .tabs button.active{animation:eg-pop .42s ease;}
/* botão Entrar: press com mola */
body:has(#tabLogin) .btn{transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .15s;}
body:has(#tabLogin) .btn:hover{transform:translateY(-1px) scale(1.012);}
body:has(#tabLogin) .btn:active{transform:scale(.97);}
/* entrada dos campos do formulário em cascata */
body:has(#tabLogin) form label,body:has(#tabLogin) form .btn,body:has(#tabLogin) form input{animation:eg-fieldin .5s cubic-bezier(.22,.61,.36,1) both;}
body:has(#tabLogin) form > *:nth-child(2){animation-delay:.04s}
body:has(#tabLogin) form > *:nth-child(3){animation-delay:.08s}
body:has(#tabLogin) form > *:nth-child(4){animation-delay:.12s}
body:has(#tabLogin) form > *:nth-child(5){animation-delay:.16s}
body:has(#tabLogin) form > *:nth-child(n+6){animation-delay:.2s}
@keyframes eg-fieldin{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  body:has(#tabLogin) input:focus,body:has(#tabLogin) .tabs button.active,body:has(#tabLogin) form label,body:has(#tabLogin) form .btn,body:has(#tabLogin) form input{animation:none !important;}
}