/* Tela de login do Promoter: preto e dourado, com movimento discreto. */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.login-body { background: #0d0d0d; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--cream); }

/* ------------------------------------------------------------ lado escuro */
.login-brand {
  --mx: 50%; --my: 40%; --px: 0; --py: 0;
  position: relative; overflow: hidden; isolation: isolate; color: #e9e2d3;
  background: #0b0a08; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 40px; text-align: center;
}
.aurora { position: absolute; inset: -20%; z-index: -3; filter: blur(70px); pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 60%; height: 60%; left: 2%; top: 0; background: radial-gradient(circle, #8a5f12 0%, transparent 68%); animation: deriva1 19s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 52%; height: 52%; right: 0; bottom: 4%; background: radial-gradient(circle, #5b3a52 0%, transparent 68%); opacity: .45; animation: deriva2 23s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 42%; height: 42%; left: 34%; top: 40%; background: radial-gradient(circle, #c0902f 0%, transparent 70%); opacity: .3; animation: deriva3 17s ease-in-out infinite alternate; }
.login-brand::before { /* luz que acompanha o mouse */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(240, 199, 94, .17), transparent 62%);
}
.login-brand::after { /* vinheta */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .55) 100%);
}
#particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.arte-wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0); transition: transform .35s ease-out; }
.arte-wrap .arte { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.login-brand .conteudo { position: relative; z-index: 1; max-width: 470px; }
.logo-wrap { position: relative; display: inline-block; margin-bottom: 6px; }
.logo-wrap img.logo { display: block; width: min(310px, 64vw); height: auto; filter: drop-shadow(0 10px 34px rgba(192, 144, 47, .35)); animation: respira 5s ease-in-out infinite; }
.logo-wrap::after { /* brilho que passa só por cima do desenho do logo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat;
  -webkit-mask: url(../img/logo-completo.png) center / contain no-repeat; mask: url(../img/logo-completo.png) center / contain no-repeat;
  animation: brilho 5.5s ease-in-out 1.4s infinite;
}
.login-brand h2 { font: 400 23px/1.4 Georgia, "Times New Roman", serif; color: #fff; margin: 16px 0 8px; }
.login-brand p { color: #b9b09c; margin: 0 0 22px; }
.troca { display: inline-block; color: #F0C75E; font-weight: 700; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.troca.sai { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.login-brand ul { list-style: none; padding: 0; margin: 0; text-align: left; display: inline-block; }
.login-brand li { padding: 6px 0 6px 30px; position: relative; color: #d8d1c4; font-size: 15px; }
.login-brand li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); animation: pulsa 2.8s ease-in-out infinite; }
.login-brand li:nth-child(2)::before { animation-delay: .5s; }
.login-brand li:nth-child(3)::before { animation-delay: 1s; }
.login-brand .rodape { position: relative; z-index: 1; margin-top: 34px; font-size: 12px; color: #8d8467; letter-spacing: 3px; text-transform: uppercase; }

/* entrada em sequência */
.rev { opacity: 0; transform: translateY(18px); animation: sobe .9s cubic-bezier(.2, .7, .2, 1) calc(.15s + var(--i, 0) * .13s) forwards; }

/* arte: as linhas se desenham, depois flutuam */
.anima .objeto :is(path, circle, rect, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha 2.6s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) forwards; }
.arte .flutua { animation: flutua var(--t, 8s) ease-in-out infinite alternate; }
.arte .vento { animation: vento 2.4s ease-in-out infinite; }
.arte .reflexo { animation: reflexo 4.5s ease-in-out infinite; }
.arte .brilha { transform-box: fill-box; transform-origin: center; animation: brilha 3.2s ease-in-out var(--b, 0s) infinite; }

/* ------------------------------------------------------------ lado do formulário */
.login-form { position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px 24px; background: linear-gradient(160deg, #fffaf0 0%, #fbf7f2 55%, #f7e8e0 100%); }
.orbes { position: absolute; inset: 0; pointer-events: none; }
.orbes i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.orbes i:nth-child(1) { width: 320px; height: 320px; right: -90px; top: -80px; background: #f3d58a; animation: deriva2 16s ease-in-out infinite alternate; }
.orbes i:nth-child(2) { width: 280px; height: 280px; left: -90px; bottom: -70px; background: #f0c9bd; animation: deriva1 20s ease-in-out infinite alternate; }

.login-form .box {
  --tx: 0; --ty: 0;
  position: relative; isolation: isolate; width: 100%; max-width: 410px; padding: 36px 34px 30px; border-radius: 22px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 34px 70px -28px rgba(110, 76, 8, .38), 0 2px 0 rgba(255, 255, 255, .9) inset;
  transform: perspective(1000px) rotateX(calc(var(--ty) * -2.6deg)) rotateY(calc(var(--tx) * 2.6deg));
  transition: transform .25s ease-out;
  animation: entra .9s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.login-form .box::before { /* borda dourada que gira */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(230, 217, 200, .9) 0 55%, #D4A93F 78%, #fff2c2 86%, #D4A93F 92%, rgba(230, 217, 200, .9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: gira 7s linear infinite;
}
.login-form .logo-m { display: none; }
.login-form h1 { font-size: 30px; margin-bottom: 4px; }
.login-form .sub { margin-bottom: 22px; }

.campo { position: relative; }
.campo > svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #b3a48f; transition: color .2s, transform .2s; pointer-events: none; }
.campo input { padding-left: 42px; transition: border-color .2s, box-shadow .25s, background .2s; background: rgba(255, 255, 255, .9); }
.campo input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(192, 144, 47, .16), 0 6px 18px -8px rgba(192, 144, 47, .55); }
.campo:focus-within > svg { color: var(--gold); transform: scale(1.12); }
.campo .olho { position: absolute; right: 6px; top: 50%; margin-top: -17px; width: 34px; height: 34px; border: 0; background: transparent; color: #a8998a; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.campo .olho:hover { color: var(--gold-dark); background: rgba(192, 144, 47, .1); }
.campo .olho svg { width: 19px; height: 19px; }
.campo.tem-olho input { padding-right: 44px; }
.aviso-caps { display: none; margin-top: 6px; font-size: 12.5px; color: var(--gold-dark); font-weight: 600; }
.aviso-caps.on { display: block; animation: sobe .3s ease both; }

.login-form .btn.primary {
  position: relative; overflow: hidden; width: 100%; padding: 13px; font-size: 16px; letter-spacing: .3px; border: 0; border-radius: 11px; color: #fff;
  background: linear-gradient(120deg, #c9a13f, #a67a22 45%, #d9b04a 90%); background-size: 200% 100%;
  box-shadow: 0 12px 26px -12px rgba(166, 122, 34, .9); transition: background-position .6s ease, transform .15s, box-shadow .2s;
}
.login-form .btn.primary:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(166, 122, 34, .95); filter: none; }
.login-form .btn.primary:active { transform: translateY(1px); }
.login-form .btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.login-form .btn.primary:hover::after { left: 130%; }
.btn .onda { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: onda .65s ease-out forwards; pointer-events: none; }
.btn .rotulo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }
.btn .gira { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: gira-simples .7s linear infinite; }
.btn.carregando { pointer-events: none; opacity: .92; }
.btn.carregando .gira { display: inline-block; }
.login-form .ajuda { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); }
.login-form .alert.erro { animation: sacode .5s cubic-bezier(.36, .07, .19, .97) both; }

/* ------------------------------------------------------------ movimentos */
@keyframes deriva1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14%, 10%, 0) scale(1.18); } }
@keyframes deriva2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-16%, -8%, 0) scale(.92); } }
@keyframes deriva3 { from { transform: translate3d(-10%, 6%, 0) scale(.9); } to { transform: translate3d(12%, -10%, 0) scale(1.2); } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entra { from { opacity: 0; transform: perspective(1000px) translateY(26px) scale(.97); } to { opacity: 1; } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes brilho { 0% { background-position: -160% 0; } 38%, 100% { background-position: 160% 0; } }
@keyframes pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes flutua { from { transform: translateY(-7px) rotate(-.6deg); } to { transform: translateY(9px) rotate(.8deg); } }
@keyframes vento { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-9px); } }
@keyframes reflexo { 0%, 60%, 100% { opacity: 0; } 75% { opacity: 1; } }
@keyframes brilha { 0%, 100% { opacity: .15; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@keyframes gira { to { --ang: 360deg; } }
@keyframes gira-simples { to { transform: rotate(360deg); } }
@keyframes onda { to { transform: scale(4); opacity: 0; } }
@keyframes sacode { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

/* ------------------------------------------------------------ telas menores */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-form { min-height: 100vh; background: radial-gradient(ellipse at 50% -10%, #3a2a0c 0%, #0d0d0d 62%); }
  .orbes i { opacity: .28; }
  .login-form .box { transform: none; background: rgba(255, 252, 246, .94); }
  .login-form .logo-m { display: block; width: 200px; margin: 0 auto 18px; padding: 14px 20px; border-radius: 20px; box-sizing: content-box;
    background: radial-gradient(ellipse at 50% 0%, #3a2a0c 0%, #0d0d0d 75%); box-shadow: 0 14px 34px -12px rgba(192, 144, 47, .55), 0 0 0 1px rgba(192, 144, 47, .35) inset; animation: respira 5s ease-in-out infinite; }
}

/* quem pede menos movimento no aparelho recebe a tela parada */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .orbes i, .logo-wrap img.logo, .logo-wrap::after, .login-form .box::before, .arte .flutua, .arte .vento, .arte .reflexo,
  .arte .brilha, .login-brand li::before, .login-form .logo-m { animation: none !important; }
  .rev, .login-form .box { opacity: 1; transform: none; animation: none !important; }
  .anima .objeto :is(path, circle, rect, ellipse) { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .logo-wrap::after { display: none; }
  .troca { transition: none; }
}

/* páginas de recuperação de senha: logo no topo do cartão, em qualquer tamanho de tela */
.login-form .logo-topo { display: block; width: 190px; margin: 0 auto 18px; padding: 14px 20px; border-radius: 20px; box-sizing: content-box;
  background: radial-gradient(ellipse at 50% 0%, #3a2a0c 0%, #0d0d0d 75%); box-shadow: 0 14px 34px -12px rgba(192, 144, 47, .55), 0 0 0 1px rgba(192, 144, 47, .35) inset; }
.login-form .ajuda a { color: var(--gold-dark); font-weight: 600; }