/* =====================================================================
   Motion das telas de entrada (login e cadastro) — tema "Horizonte"
   Amanhecer no pasto: estrelas somem, céu esquenta, sol nasce atrás dos morros
   e a vaca com o bezerro surge no lugar, com uma respiração sutil.
   Usado junto com /js/motion.js. Respeita "reduzir movimento" do sistema.
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Cenário do lado esquerdo ---------- */
.auth-hero.horizonte { isolation: isolate; background: #0a2550; }
.auth-hero.horizonte::after { display: none; } /* sem a marca d'água antiga */
.auth-hero > .cenario { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cenario .ceu { position: absolute; inset: 0; background: linear-gradient(180deg, #06142f 0%, #0a2550 45%, #173f8a 75%, #3d6fc4 100%); }
.cenario .ceu::after { content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255,170,110,.20) 78%, rgba(255,205,140,.35) 100%); }
.motion .cenario .ceu::after { animation: m-aparecer 4s .4s ease-out forwards; }
.cenario .estrela { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: m-piscar 3s ease-in-out infinite; }
.motion .cenario .estrelas { animation: m-sumirEstrelas 5s 1s ease-out forwards; }
.cenario .sol { position: absolute; left: 80%; bottom: 95px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d6 0%, #ffd38a 35%, rgba(255,180,90,0) 70%); transform: translateY(160px); opacity: 0; filter: blur(1px); }
.motion .cenario .sol { animation: m-nascer 4.2s .3s var(--ease) forwards; }
.cenario .halo { position: absolute; left: 80%; bottom: 40px; width: 900px; height: 520px; margin-left: -450px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,200,130,.28), transparent); }
.motion .cenario .halo { animation: m-aparecer 4s .8s ease-out forwards; }
.cenario .morros { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.cenario .morros svg { position: absolute; left: -5%; bottom: 0; width: 110%; height: 100%; transition: transform .6s var(--ease); }
.cenario .rebanho { position: absolute; bottom: 21%; left: min(56vw, 520px); width: 170px; height: 122px; transform-origin: 50% 100%;
  background: #04112a; -webkit-mask: url('/img/super-ciclo/simbolo.png') center / contain no-repeat; mask: url('/img/super-ciclo/simbolo.png') center / contain no-repeat;
  opacity: 0; transform: scale(1.04); filter: blur(16px); }
.motion .cenario .rebanho { animation: m-surgir 2.8s 1.4s cubic-bezier(.22,.8,.25,1) forwards, m-respirar 4.8s 4.2s ease-in-out infinite; }
.cenario .capim { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; opacity: .65; transform-origin: bottom;
  background: repeating-linear-gradient(100deg, transparent 0 6px, rgba(3,12,32,.9) 6px 7px, transparent 7px 13px); animation: m-vento 5s ease-in-out infinite; }

@keyframes m-aparecer { to { opacity: 1; } }
@keyframes m-piscar { 50% { opacity: .25; } }
@keyframes m-sumirEstrelas { to { opacity: .25; } }
@keyframes m-nascer { to { transform: translateY(0); opacity: 1; } }
@keyframes m-vento { 50% { transform: skewX(-4deg); } }
/* a vaca surge no lugar saindo do desfoque */
@keyframes m-surgir {
  0%   { opacity: 0; transform: scale(1.04); filter: blur(16px); }
  45%  { opacity: 1; filter: blur(6px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes m-respirar {
  0%, 100% { opacity: 1; filter: blur(0); transform: translateY(0) scaleY(1) rotate(0); }
  50%      { opacity: 1; filter: blur(0); transform: translateY(-1.5px) scaleY(1.018) rotate(-.6deg); }
}

/* ---------- Entrada do conteúdo do lado esquerdo ---------- */
.logo-motion { position: relative; display: block; width: 340px; max-width: 80%; aspect-ratio: 1076 / 243; margin-bottom: 18px; align-self: flex-start; }
.logo-motion img { width: 100%; height: 100%; display: block; }
.motion .logo-motion img { clip-path: inset(0 100% 0 0); animation: m-revelar 1.1s .1s var(--ease) forwards; }
@keyframes m-revelar { to { clip-path: inset(0 0 0 0); } }
.logo-motion::after { content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%) 150% 0 / 300% 100% no-repeat;
  -webkit-mask: url('/img/super-ciclo/logo-horizontal.png') center / contain no-repeat; mask: url('/img/super-ciclo/logo-horizontal.png') center / contain no-repeat; }
.motion .logo-motion::after { animation: m-reflexo 1.4s 1.3s ease-in-out forwards; }
@keyframes m-reflexo { 0% { opacity: 1; background-position: 150% 0; } 99% { opacity: 1; background-position: -50% 0; } 100% { opacity: 0; } }

.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.palavra > span { display: inline-block; }
.motion .palavra > span { transform: translateY(110%); animation: m-palavra .8s var(--ease) forwards; animation-delay: var(--d); }
@keyframes m-palavra { to { transform: none; } }
.auth-hero h1 em { font-style: normal; background: linear-gradient(90deg, #8fc4ff, #ffffff 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.motion .entra { opacity: 0; transform: translateY(18px); animation: m-entrar .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes m-entrar { to { opacity: 1; transform: none; } }

/* ---------- Cartão do formulário ---------- */
.auth-form { position: relative; overflow: hidden; }
.auth-form::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(18,64,160,.12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 75%); mask: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 75%); }
.motion .card-motion { opacity: 0; transform: translateX(28px); animation: m-cardEntra .9s .45s var(--ease) forwards; }
@keyframes m-cardEntra { to { opacity: 1; transform: none; } }
.motion .card-motion::before { width: 0; right: auto; animation: m-barra 1s 1s var(--ease) forwards; }
@keyframes m-barra { to { width: 100%; } }
/* filhos do cartão entram em sequência (o --d é definido no motion.js) */
.motion .card-motion > .m-item { opacity: 0; transform: translateY(10px); animation: m-entrar .7s var(--ease) forwards; animation-delay: var(--d); }
/* ao terminar, a animação é removida (evita camadas que cobririam as listas de estado/cidade) */
.motion .m-fim { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Troca entre telas do login (esqueci a senha, código, nova senha) */
.troca-tela { animation: m-troca .35s var(--ease); }
@keyframes m-troca { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Campo: linha de foco que corre por baixo */
.auth-card .campo:not(.sem-linha) { position: relative; }
.auth-card .campo:not(.sem-linha)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--sc-blueprint), var(--sc-sky)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.auth-card .campo:not(.sem-linha):has(.dica)::after { bottom: 22px; }
.auth-card .campo:focus-within::after { transform: scaleX(1); }
.auth-card .campo label { transition: color .25s; }
.auth-card .campo:focus-within > label, .auth-card .campo:focus-within .rotulo-linha label { color: var(--sc-bright); }

/* Botão: brilho no hover e leve "aperto" */
.auth-card .btn { position: relative; overflow: hidden; transition: transform .15s, background .2s; }
.auth-card .btn::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); }
.auth-card .btn:hover::after { animation: m-brilho .9s ease-in-out; }
@keyframes m-brilho { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.auth-card .btn:active { transform: scale(.98); }

/* Erro: o cartão treme */
.tremer { animation: m-tremer .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes m-tremer { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Responsivo e acessibilidade ---------- */
@media (max-width: 820px) {
  /* no celular o cenário fica numa faixa abaixo do texto */
  .auth-hero.horizonte { padding-bottom: 120px; }
  .auth-hero.horizonte ul { display: none; }
  .cenario .morros { height: 120px; }
  .cenario .sol { left: 78%; bottom: 52px; width: 80px; height: 80px; margin-left: -40px; }
  .cenario .halo { left: 78%; bottom: 10px; width: 420px; height: 220px; margin-left: -210px; }
  .cenario .rebanho { left: auto; right: 22px; width: 92px; height: 66px; bottom: 34px; }
  .cenario .capim { height: 28px; }
  .logo-motion { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cenario .estrela, .cenario .capim { animation: none !important; }
}