/* Tela de entrada do Super Ciclo App (docs/24): o pasto pela hora do dia, com o cartão de vidro do login.
   Folha própria: a tela de entrada não usa o app.css. Paleta Blueprint e tipografia do Super Ciclo. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Poppins:wght@400;500;600;700&display=swap');
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #040a1c; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #0a1a40; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #13306a; }
@property --c4 { syntax: '<color>'; inherits: true; initial-value: #1c3f7e; }
@property --m1 { syntax: '<color>'; inherits: true; initial-value: #1a3263; }
@property --m2 { syntax: '<color>'; inherits: true; initial-value: #10254d; }
@property --m3 { syntax: '<color>'; inherits: true; initial-value: #071733; }
@property --cerca { syntax: '<color>'; inherits: true; initial-value: #020a1c; }
@property --astro { syntax: '<color>'; inherits: true; initial-value: #eef3ff; }
@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --sy { syntax: '<percentage>'; inherits: true; initial-value: 60%; }
@property --estrelas { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --nevoa { syntax: '<number>'; inherits: true; initial-value: .2; }
@property --raios { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --indigo: #0A2550; --blueprint: #1240A0; --bright: #2060D0; --sky: #4090E0; --drafting: #DDEEFA;
  --texto: #0f1d33; --muted: #5b6b82; --vermelho: #c4352b;
  --titulo: 'Bricolage Grotesque', 'Poppins', Arial, sans-serif; --texto-f: 'Poppins', Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --simbolo: url('/img/super-ciclo/simbolo.png');
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--texto-f); color: #fff; background: #040a1c; -webkit-font-smoothing: antialiased; overflow: hidden; }
.mask { -webkit-mask: var(--simbolo) center / contain no-repeat; mask: var(--simbolo) center / contain no-repeat; background: currentColor; display: block; }

/* ===== Cena ===== */
.cena { position: fixed; inset: 0; height: 100dvh; transition: --c1 1.6s, --c2 1.6s, --c3 1.6s, --c4 1.6s, --m1 1.6s, --m2 1.6s, --m3 1.6s, --cerca 1.6s, --astro 1.6s,
  --sx 2.2s var(--ease), --sy 2.2s var(--ease), --estrelas 1.6s, --nevoa 1.6s, --raios 1.6s; }
.ceu { position: absolute; inset: 0; background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 38%, var(--c3) 70%, var(--c4) 100%); }
/* Abertura: a cena nasce escura e clareia até a hora do dia */
.escuro { position: absolute; inset: 0; background: #040a1c; z-index: 3; pointer-events: none; animation: clareia 3.2s .2s ease-out forwards; }
@keyframes clareia { to { opacity: 0; } }
.estrelas { position: absolute; inset: 0 0 45% 0; opacity: var(--estrelas); }
.estrelas i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: pisca 3s ease-in-out infinite alternate; }
@keyframes pisca { from { opacity: .25; } to { opacity: 1; } }

/* A paisagem: céu em cima e pasto embaixo; no celular o cartão fica no meio, entre os dois */
.paisagem { position: absolute; inset: 0; }
.astro { position: absolute; left: var(--sx); bottom: var(--sy); width: 190px; height: 190px; margin: 0 0 -95px -95px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--astro) 30%, color-mix(in srgb, var(--astro) 45%, transparent) 52%, transparent 70%);
  transform: translateY(140px); animation: nasce 4s .3s var(--ease) forwards; }
@keyframes nasce { to { transform: none; } }
.cena.noite .astro { width: 74px; height: 74px; margin: 0 0 -37px -37px; background: #eef3ff; box-shadow: 0 0 40px 10px rgba(200,220,255,.35), inset -14px -6px 0 0 #c9d6f2; }
.raios { position: absolute; left: var(--sx); bottom: var(--sy); width: 1400px; height: 1400px; margin: 0 0 -700px -700px; opacity: var(--raios); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.12) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: roda 90s linear infinite; }
@keyframes roda { to { transform: rotate(360deg); } }
.passaros { position: absolute; left: 0; right: 0; top: 18%; height: 80px; opacity: calc(1 - var(--estrelas)); }
.cena.noite .passaros, .cena.madrugada .passaros { display: none; }
.passaro { position: absolute; width: 22px; height: 10px; color: rgba(12, 30, 70, .55); animation: voa linear infinite; }
.passaro svg { width: 100%; height: 100%; animation: bate .5s ease-in-out infinite alternate; transform-origin: center; }
@keyframes voa { from { transform: translate(-10vw, 30px); } to { transform: translate(110vw, -20px); } }
@keyframes bate { to { transform: scaleY(-.6); } }
.morros { position: absolute; left: -4%; right: -4%; bottom: 0; height: 54%; }
.morros svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.camada { transition: transform .8s ease-out; transform: translate(calc(var(--mx, 0) * var(--k) * 1px), calc(var(--my, 0) * var(--k) * .35px)); }
.nevoa { position: absolute; left: -20%; right: -20%; height: 70px; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(22px); opacity: var(--nevoa); animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
/* Gado em três distâncias: longe (pequeno e claro), meio, perto (parado na cerca) */
.gado { position: absolute; left: 0; right: 0; overflow: visible; pointer-events: none; }
.boi { position: absolute; bottom: 0; }
.boi .mask { width: 100%; height: 100%; }
.boi.anda { animation: anda linear infinite; }
.boi.anda .mask { animation: balanca 1.1s ease-in-out infinite alternate; }
.boi.parado .mask { animation: respira 3.2s ease-in-out infinite alternate; transform-origin: bottom; }
.boi.direita .mask { transform: scaleX(-1); }
.boi.direita.parado .mask { animation-name: respira-d; }
@keyframes anda { from { transform: translateX(110vw); } to { transform: translateX(-20vw); } }
@keyframes balanca { from { translate: 0 0; } to { translate: 0 -2px; } }
@keyframes respira { from { transform: scaleY(1); } to { transform: scaleY(1.025); } }
@keyframes respira-d { from { transform: scaleX(-1) scaleY(1); } to { transform: scaleX(-1) scaleY(1.025); } }
.gado.longe { bottom: 37%; color: var(--m2); opacity: .9; }
.gado.meio { bottom: 25%; color: var(--m3); }
.capim { position: absolute; left: 0; right: 0; bottom: -2px; height: 60px; color: var(--m3); }
.capim svg { width: 100%; height: 100%; overflow: visible; }
.capim path { transform-box: fill-box; transform-origin: bottom center; animation: verga ease-in-out infinite alternate; }
@keyframes verga { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.vagalumes { position: absolute; inset: 40% 0 0 0; display: none; }
.cena.noite .vagalumes { display: block; }
.vagalumes i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe98a; box-shadow: 0 0 8px 3px rgba(255,220,100,.6); animation: flutua 6s ease-in-out infinite alternate; }
@keyframes flutua { 0% { transform: translate(0,0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(24px,-30px); opacity: .3; } }

/* ===== Cartão ===== */
.conteudo { position: absolute; inset: 0; display: grid; place-items: safe center; padding: 24px; z-index: 4; overflow-y: auto; } /* tela baixa: o cartão rola em vez de cortar */
.cartao { width: 100%; max-width: 420px; padding: 30px 32px 26px; border-radius: 24px; background: rgba(8, 24, 56, .38); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 30px 70px rgba(3, 10, 30, .4), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: 0; transform: translateY(40px) scale(.98); animation: sobeCartao 1.1s 1.5s var(--ease) forwards; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cartao { background: rgba(8, 24, 56, .88); } }
@keyframes sobeCartao { to { opacity: 1; transform: none; } }
.cartao.treme { animation: treme .45s; opacity: 1; transform: none; }
@keyframes treme { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.cartao.saindo { animation: sai .7s var(--ease) forwards; opacity: 1; }
@keyframes sai { to { opacity: 0; transform: translateY(-24px) scale(.96); } }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca .simb { width: 46px; height: 34px; }
.marca b { font: 800 21px var(--titulo); letter-spacing: -.01em; }
.marca em { font: 700 10.5px var(--texto-f); font-style: normal; padding: 3px 8px; border-radius: 99px; letter-spacing: .06em; text-transform: uppercase; background: #fff; color: var(--indigo); }
.sobe { opacity: 0; transform: translateY(14px); animation: sobe .7s var(--ease) forwards; animation-delay: calc(1.7s + var(--i, 0) * 85ms); }
@keyframes sobe { to { opacity: 1; transform: none; } }
.f .saud { margin-top: 22px; font: 600 12px var(--texto-f); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.f h2 { font: 800 30px/1.05 var(--titulo); letter-spacing: -.015em; margin-top: 4px; }
.f .sub { color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.f .campo { display: block; margin-top: 16px; }
.f .campo > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ctl { position: relative; display: flex; align-items: center; }
.ctl > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.f input { width: 100%; height: 52px; border: 1.5px solid transparent; border-radius: 12px; padding: 0 46px 0 44px; font: 500 16px var(--texto-f); background: rgba(255,255,255,.95);
  color: var(--texto); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.f input:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(64, 144, 224, .35); background: #fff; }
.f input.errado { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgba(196, 53, 43, .25); }
.olho { position: absolute; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; display: grid; place-items: center; }
.olho:hover { background: #eef3f9; color: var(--indigo); }
.olho svg { width: 19px; height: 19px; }
.f small { display: block; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 5px; }
.f .erro { min-height: 0; overflow: hidden; max-height: 0; transition: max-height .3s, margin .3s; font-size: 13px; font-weight: 600; color: #fff; }
.f .erro.on { max-height: 60px; margin-top: 12px; }
.f .erro span { display: block; padding: 9px 12px; border-radius: 10px; background: rgba(196, 53, 43, .85); }
.entrar { position: relative; overflow: hidden; width: 100%; height: 52px; margin-top: 20px; border: 0; border-radius: 12px; background: #fff; color: var(--indigo);
  font: 700 15.5px var(--texto-f); cursor: pointer; transition: transform .15s, background .2s, box-shadow .2s; box-shadow: 0 10px 24px rgba(3, 10, 30, .25); }
.entrar:hover { background: var(--drafting); }
.entrar:active { transform: scale(.985); }
.entrar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(32,96,208,.18), transparent); animation: brilho 6s 3.2s infinite; }
@keyframes brilho { 0% { left: -60%; } 16%, 100% { left: 130%; } }
.entrar.carregando { color: transparent; pointer-events: none; }
.entrar.carregando::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2.5px solid rgba(10,37,80,.18); border-top-color: var(--indigo); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.rede { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.85); }
.rede i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 4px rgba(126,226,168,.2); }
.rede.off i { background: #ffc46b; box-shadow: 0 0 0 4px rgba(255,196,107,.2); }
.f .rodape { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 10px; line-height: 1.5; }

/* ===== Celular: paisagem em cima, formulário numa folha presa embaixo ===== */
@media (max-width: 760px) {
  /* Celular: céu e sol em cima, cartão no meio, pasto embaixo (o chão continua no chão) */
  .morros { height: 34%; }
  .gado.longe { bottom: 23%; } .gado.meio { bottom: 15.5%; }
  .boi { scale: .7; transform-origin: bottom left; }
  .capim { height: 42px; }
  /* O sol fica baixo, entre o cartão e os morros, para aparecer no vão */
  .astro { width: 130px; height: 130px; margin: 0 0 -65px -65px; bottom: calc(24% + var(--sy) * .18); }
  .raios { bottom: calc(24% + var(--sy) * .18); }
  .cena.noite .astro { bottom: auto; top: 14px; left: 78%; width: 34px; height: 34px; margin: 0 0 0 -17px; box-shadow: 0 0 24px 6px rgba(200,220,255,.35), inset -9px -4px 0 0 #c9d6f2; }
  .conteudo { place-items: start stretch; padding: 60px 16px 0; }
  .cartao { max-width: none; padding: 22px 20px 20px; border-radius: 22px; }
  .marca .simb { width: 40px; height: 30px; } .marca b { font-size: 19px; }
  .f .saud { margin-top: 14px; }
  .f h2 { font-size: 25px; }
  .f .sub { display: none; }
  .f .campo { margin-top: 12px; }
  .f .rodape { display: none; }
  .entrar { margin-top: 16px; }
  .rede { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .boi.anda { display: none; }
}