/* Tela de cadastro 3D - Cotemig */
#loginBox{position:fixed;inset:0;z-index:1000;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 15%,#3a8f26 0%,#14461a 52%,#06200c 100%);
  perspective:1200px;font-family:'Open Sans',Arial,sans-serif;transition:opacity .6s,transform .6s}
#loginBox.saindo{opacity:0;transform:scale(1.2)}

/* piso em perspectiva que "corre" */
.piso{position:absolute;left:-50%;bottom:-10%;width:200%;height:65%;
  background:
   linear-gradient(rgba(150,255,100,.35) 2px,transparent 2px) 0 0/100% 60px,
   linear-gradient(90deg,rgba(150,255,100,.35) 2px,transparent 2px) 0 0/80px 100%;
  transform:perspective(500px) rotateX(68deg);transform-origin:50% 100%;
  animation:corre 1.4s linear infinite;
  -webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
@keyframes corre{to{background-position:0 60px,0 0}}

/* cubos 3D flutuando */
.cubo{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;
  animation:giro var(--d) linear infinite,flutua 5s ease-in-out infinite alternate;animation-delay:var(--a),var(--a)}
.cubo i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.45);background:rgba(140,230,90,.14);box-shadow:inset 0 0 18px rgba(170,255,120,.25)}
.cubo i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cubo i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cubo i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cubo i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cubo i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cubo i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
@keyframes giro{to{transform:rotateX(360deg) rotateY(360deg)}}
@keyframes flutua{from{translate:0 -18px}to{translate:0 18px}}

/* cartão */
.cartao-box{position:relative;z-index:2;animation:flutua 6s ease-in-out infinite alternate}
.cartao{position:relative;width:min(350px,88vw);padding:26px 26px 22px;border-radius:24px;text-align:center;
  background:linear-gradient(145deg,#fff,#eaf5e4);transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out;
  box-shadow:0 45px 70px rgba(0,0,0,.55),inset 0 0 40px rgba(120,200,80,.18)}
.cartao::before{content:"";position:absolute;inset:0;border-radius:24px;background:#1d5a14;transform:translateZ(-14px);
  box-shadow:0 0 0 2px #2e7d1f}
.cartao::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;transform:translateZ(1px);
  background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.7),transparent 45%)}
.cartao .logo{display:block;width:78%;margin:0 auto 6px;transform:translateZ(70px);
  filter:drop-shadow(0 14px 10px rgba(0,60,0,.35));animation:pulo 3.2s ease-in-out infinite}
@keyframes pulo{50%{transform:translateZ(90px) translateY(-4px)}}
.cartao h2{margin:6px 0 16px;font-size:20px;color:#1d3d17;transform:translateZ(40px)}
.cartao input{display:block;width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:12px;font-size:16px;
  border:2px solid #cfe5c6;border-radius:12px;outline:0;background:#fff;transform:translateZ(28px);
  box-shadow:0 6px 12px rgba(0,60,0,.12);transition:border-color .2s,box-shadow .2s}
.cartao input:focus{border-color:#4aa22f;box-shadow:0 0 0 4px rgba(74,162,47,.25),0 6px 12px rgba(0,60,0,.12)}
.cartao .jogar{width:100%;padding:13px;font-size:18px;font-weight:700;letter-spacing:.5px;color:#fff;cursor:pointer;
  border:0;border-radius:14px;background:linear-gradient(#5cc03a,#3a9a22);transform:translateZ(50px);
  box-shadow:0 7px 0 #1f5f12,0 16px 20px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s}
.cartao .jogar:hover{filter:brightness(1.08)}
.cartao .jogar:active{transform:translateZ(50px) translateY(5px);box-shadow:0 2px 0 #1f5f12,0 6px 10px rgba(0,0,0,.35)}
.cartao #loginErro{color:#c62828;min-height:22px;margin-top:14px;font-size:14px;transform:translateZ(20px)}
.cartao a{color:#2e7d1f;font-size:14px;font-weight:600;transform:translateZ(20px);display:inline-block}

@media (prefers-reduced-motion:reduce){.piso,.cubo,.cartao-box,.cartao .logo{animation:none}}