/* ============================================================
   Tela de entrar do CestasBrasil (23/10/2026): cores do logo (marinho + laranja),
   céu estrelado, logo que se desenha, cartão com borda viva e a passagem para o portal.
   Animações de entrada só mexem em transform/traço: nada fica escondido se travar.
   ============================================================ */
:root{
  --marinho:#01204C; --marinho2:#0A2A5E; --fundo-fundo:#000B22;
  --laranja:#C8500E; --laranja2:#FF8A45; --laranja3:#E8742F;
  --tinta:#141B2D; --tinta2:#5A6275; --linha:#E3E6EE;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body.tela-portal{margin:0;font-family:'Red Hat Display','Segoe UI',system-ui,sans-serif;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#0B3270 0%,var(--marinho) 45%,var(--fundo-fundo) 100%);overflow-x:hidden;min-height:100%}
#ceu{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.orbe{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;will-change:transform}
.orbe-a{width:46vmax;height:46vmax;right:-14vmax;top:-12vmax;background:radial-gradient(circle,rgba(232,116,47,.55),rgba(232,116,47,0) 65%);animation:orbe-a 16s ease-in-out infinite alternate}
.orbe-b{width:52vmax;height:52vmax;left:-18vmax;bottom:-22vmax;background:radial-gradient(circle,rgba(46,90,180,.55),rgba(46,90,180,0) 65%);animation:orbe-b 19s ease-in-out infinite alternate}
@keyframes orbe-a{to{transform:translate(-8vmax,10vmax) scale(1.12)}}
@keyframes orbe-b{to{transform:translate(10vmax,-8vmax) scale(1.1)}}

.palco-entrar{position:relative;z-index:2;min-height:100%;display:grid;place-items:center;align-content:center;gap:26px;
  padding:calc(28px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}

/* ---------- logo se desenhando ---------- */
.marca-hero{position:relative;display:grid;justify-items:center;gap:6px;text-align:center}
.brilho-logo{position:absolute;top:-30px;left:50%;width:260px;height:220px;margin-left:-130px;background:radial-gradient(circle,rgba(255,138,69,.38),rgba(255,138,69,0) 62%);animation:pulsa 3.6s ease-in-out infinite;pointer-events:none}
@keyframes pulsa{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
.cesta{width:150px;height:auto;overflow:visible;filter:drop-shadow(0 10px 28px rgba(0,0,0,.35));animation:flutua 5s ease-in-out 2.2s infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cesta .alca{stroke-dasharray:1;stroke-dashoffset:1;animation:desenha .9s cubic-bezier(.6,0,.2,1) .2s forwards}
.cesta .lente{stroke-dasharray:1;stroke-dashoffset:1;animation:desenha .8s cubic-bezier(.6,0,.2,1) 1s forwards}
@keyframes desenha{to{stroke-dashoffset:0}}
.cesta .borda{transform-origin:10px 67px;transform:scaleX(0);animation:abre .5s cubic-bezier(.2,.8,.2,1) .55s forwards}
.cesta .trama rect{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:abre .45s cubic-bezier(.2,.8,.2,1) forwards}
.cesta .trama rect:nth-child(3n+1){animation-delay:.7s}.cesta .trama rect:nth-child(3n+2){animation-delay:.8s}.cesta .trama rect:nth-child(3n){animation-delay:.9s}
@keyframes abre{to{transform:scaleX(1)}}
.cesta .lupa{transform-box:fill-box;transform-origin:30% 30%;transform:scale(.4) rotate(-40deg);animation:lupa-entra .7s cubic-bezier(.3,1.6,.5,1) .95s forwards}
@keyframes lupa-entra{to{transform:scale(1) rotate(0)}}
.cesta .cabo{transform-box:fill-box;transform-origin:0 0;transform:scale(0);animation:abre-cabo .4s cubic-bezier(.3,1.8,.5,1) 1.55s forwards}
@keyframes abre-cabo{to{transform:scale(1)}}
.cesta .reflexo{animation:reflete 3.2s ease-in-out 2.4s infinite}
@keyframes reflete{0%,70%,100%{stroke:#fff}80%{stroke:#FFD2B0}}
.nome-marca{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1;transform:translateY(14px);animation:sobe .7s cubic-bezier(.2,.8,.2,1) 1.4s forwards}
.nome-marca b{color:var(--laranja2);font-weight:800}
.frase-marca{margin:4px 0 0;font-size:15.5px;color:rgba(255,255,255,.78);transform:translateY(10px);animation:sobe .7s cubic-bezier(.2,.8,.2,1) 1.6s forwards}
@keyframes sobe{to{transform:none}}

/* ---------- cartão com borda viva girando ---------- */
.cartao-entrar{position:relative;width:min(400px,100%);border-radius:26px;padding:2px;transform:translateY(24px) scale(.98);animation:cartao-entra .8s cubic-bezier(.2,.8,.2,1) .9s forwards;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
@keyframes cartao-entra{to{transform:none}}
.borda-viva{position:absolute;inset:0;border-radius:26px;overflow:hidden;pointer-events:none}
.borda-viva::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 55%,#FF8A45 70%,#fff 76%,#2E5AB4 84%,transparent 95%);animation:gira 5s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.cartao-miolo{position:relative;border-radius:24px;background:rgba(255,255,255,.97);color:var(--tinta);padding:26px 22px 20px;display:grid;gap:14px}
.cartao-miolo h1{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--marinho)}
.cartao-miolo .sub{margin:-10px 0 2px;color:var(--tinta2);font-size:15px}
.aviso-erro{background:#FDE7DF;color:#A8320B;border-radius:12px;padding:10px 12px;font-size:14.5px;font-weight:700}
.aviso-erro[hidden]{display:none}

/* campos com rótulo que sobe */
.campo-flut{position:relative;display:block}
.campo-flut input{width:100%;height:58px;border-radius:15px;border:1.5px solid var(--linha);background:#F7F8FB;padding:22px 48px 6px 16px;font:inherit;font-size:16.5px;font-weight:600;color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.campo-flut span{position:absolute;left:17px;top:19px;font-size:16px;color:var(--tinta2);pointer-events:none;transition:transform .2s,font-size .2s,color .2s;transform-origin:left top}
.campo-flut input:focus{border-color:var(--laranja3);background:#fff;box-shadow:0 0 0 4px rgba(232,116,47,.16)}
.campo-flut input:focus+span,.campo-flut input:not(:placeholder-shown)+span{transform:translateY(-11px);font-size:14px;font-weight:800;color:var(--laranja)}
.olho{position:absolute;right:8px;top:9px;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--tinta2);display:grid;place-items:center;cursor:pointer}
.olho svg{width:20px;height:20px}
.olho.on{color:var(--laranja)}

/* botão com brilho passando */
.bt-entrar{position:relative;overflow:hidden;height:58px;border:0;border-radius:16px;background:linear-gradient(135deg,#F07A33,#C8500E 60%,#B4470C);color:#fff;font:inherit;font-size:17px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 12px 26px rgba(204,83,15,.42);transition:transform .15s,box-shadow .15s}
.bt-entrar:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(204,83,15,.5)}
.bt-entrar:active{transform:scale(.98)}
.bt-entrar::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:brilho 3.8s ease-in-out 2.6s infinite}
@keyframes brilho{0%{left:-60%}35%,100%{left:130%}}
.bt-entrar .seta{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);transition:transform .2s}
.bt-entrar:hover .seta{transform:translateX(3px)}
.bt-entrar .seta svg{width:17px;height:17px}
.bt-entrar .carrega{display:none;width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:roda .7s linear infinite}
@keyframes roda{to{transform:rotate(360deg)}}
.bt-entrar.indo .txt,.bt-entrar.indo .seta{display:none}
.bt-entrar.indo .carrega{display:block}
.rodape-entrar{margin:0;text-align:center;font-size:14px;color:var(--tinta2)}
.rodape-entrar a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.cartao-entrar.treme{animation:treme .45s ease}
@keyframes treme{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* ---------- passagem para o portal ---------- */
.portal{position:fixed;inset:0;z-index:20;pointer-events:none;background:radial-gradient(circle at var(--px,50%) var(--py,40%),#fff 0%,#FFE1CC 18%,#FF8A45 42%,#C8500E 70%,#01204C 100%);
  clip-path:circle(0% at var(--px,50%) var(--py,40%));visibility:hidden}
body.entrando .portal{visibility:visible;animation:portal-abre .75s cubic-bezier(.7,0,.3,1) .55s forwards}
@keyframes portal-abre{to{clip-path:circle(150% at var(--px,50%) var(--py,40%))}}
body.entrando .cartao-entrar{animation:cartao-sai .55s cubic-bezier(.6,0,.4,1) forwards}
@keyframes cartao-sai{to{transform:translateY(40px) scale(.7) rotateX(25deg);opacity:0;filter:blur(6px)}}
body.entrando .nome-marca,body.entrando .frase-marca{animation:texto-sai .4s ease forwards}
@keyframes texto-sai{to{opacity:0;transform:translateY(-12px)}}
body.entrando .cesta{animation:cesta-mergulha 1.1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes cesta-mergulha{40%{transform:translateY(40px) scale(1.15)}100%{transform:translateY(40px) scale(9);opacity:0}}
body.entrando .orbe{animation-duration:1.2s}
.boas-vindas{position:fixed;left:0;right:0;top:46%;z-index:21;margin:0;text-align:center;font-size:clamp(26px,6vw,44px);font-weight:900;color:var(--marinho);letter-spacing:-.02em;pointer-events:none;visibility:hidden}
body.entrando .boas-vindas{visibility:visible;animation:ola .6s cubic-bezier(.2,.8,.2,1) 1s both}
@keyframes ola{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .cesta *,.cesta,.nome-marca,.frase-marca,.cartao-entrar,.orbe,.brilho-logo,.bt-entrar::after,.borda-viva::before{animation:none!important;transform:none!important;stroke-dashoffset:0!important}
}
@media (max-height:700px){.cesta{width:110px}.nome-marca{font-size:28px}.palco-entrar{gap:18px}}
/* já logada (30/10/2026): aviso de com quem ela está e o link pra continuar */
.ja-logada{line-height:1.5}
.ja-logada a{color:#FF8A45;font-weight:700;display:inline-block;margin-top:6px}
.cartao-entrar form{margin:18px 0 0}

/* Lumi (29/10/2026): acenando no cartão de entrar e na boas-vindas */
.cartao-miolo{position:relative}
.lumi-entrar{position:absolute;right:-6px;top:-70px;width:120px;height:120px;object-fit:contain;pointer-events:none}
.boas-vindas-lumi{position:fixed;left:50%;top:calc(46% - 170px);width:160px;height:160px;margin-left:-80px;object-fit:contain;z-index:21;visibility:hidden;pointer-events:none}
body.entrando .boas-vindas-lumi{visibility:visible;animation:ola .6s cubic-bezier(.2,.8,.2,1) .9s both}
.lumi-acena{transform-origin:50% 90%;animation:lumiAcena 1.6s ease-in-out infinite}
@keyframes lumiAcena{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.lumi-acena{animation:none}}
@media(max-width:420px){.lumi-entrar{width:92px;height:92px;top:-56px}}