/* ============================================================
   Panorama — pré-carregamento temático das seções (js/preloader.js)
   Céu noturno, uma estrela cadente e depois a chuva (meteoros ou ouro),
   com as cores de cada seção:
     data-tema="brasil" → verde e amarelo · "eua" → azul, branco e vermelho
     data-tema="ouro"   → poeira de ouro caindo
   ============================================================ */
#auth-overlay[data-tema] {
    position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: var(--pk-fundo);
    transition: opacity .7s ease, visibility .7s ease;
}
#auth-overlay[data-tema].pk-sai { opacity: 0; visibility: hidden; }
#auth-overlay[data-tema="brasil"] { --pk-fundo: radial-gradient(120% 80% at 50% 110%, #06301f 0%, #04140f 45%, #020806 100%); --pk-a: #22c55e; --pk-b: #fde047; --pk-c: #ffffff; --pk-brilho: rgba(253, 224, 71, .55); }
#auth-overlay[data-tema="eua"]    { --pk-fundo: radial-gradient(120% 80% at 50% 110%, #0b1f4a 0%, #060c1f 45%, #02040b 100%); --pk-a: #60a5fa; --pk-b: #ffffff; --pk-c: #f87171; --pk-brilho: rgba(147, 197, 253, .6); }
#auth-overlay[data-tema="ouro"]   { --pk-fundo: radial-gradient(120% 80% at 50% 110%, #2a1a05 0%, #110b03 45%, #050301 100%); --pk-a: #f59e0b; --pk-b: #fde68a; --pk-c: #fffbeb; --pk-brilho: rgba(251, 191, 36, .6); }

.pk-ceu { position: absolute; inset: 0; pointer-events: none; }
.pk-ceu::after {   /* névoa da via láctea na cor do tema */
    content: ""; position: absolute; inset: -20%; opacity: .5; transform: rotate(-18deg);
    background: radial-gradient(40% 16% at 30% 35%, color-mix(in srgb, var(--pk-a) 14%, transparent), transparent 70%),
                radial-gradient(35% 14% at 70% 62%, color-mix(in srgb, var(--pk-b) 10%, transparent), transparent 70%);
}
.pk-estrela { position: absolute; border-radius: 50%; background: #fff; opacity: .2; animation: pk-pisca ease-in-out infinite; }
@keyframes pk-pisca { 50% { opacity: .95; transform: scale(1.4); } }

/* meteoro: elemento girado; a cabeça brilha na ponta e o rastro fica para trás */
.pk-meteoro {
    position: absolute; height: 1.5px; width: 150px; border-radius: 2px; opacity: 0; transform-origin: 100% 50%;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--pk-cor, #fff) 30%, transparent) 55%, var(--pk-cor, #fff) 100%);
    animation: pk-cai linear infinite;
}
.pk-meteoro::after {
    content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 6px 2px var(--pk-cor, #fff), 0 0 16px 4px var(--pk-brilho);
}
@keyframes pk-cai {
    0% { opacity: 0; transform: rotate(var(--ang)) translateX(0); }
    8%, 70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--ang)) translateX(var(--dist)); }
}
.pk-meteoro.pk-cadente { width: 280px; height: 2px; --pk-cor: var(--pk-b); animation: pk-cai 1.6s cubic-bezier(.45, .05, .55, .95) .35s 1 both; }
.pk-meteoro.pk-cadente::after { width: 6px; height: 6px; margin-top: -3px; box-shadow: 0 0 10px 3px #fff, 0 0 30px 8px var(--pk-brilho); }

/* ouro: poeira dourada caindo em vez de meteoros */
.pk-po { position: absolute; top: -12px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fffbeb 0%, var(--pk-b) 40%, var(--pk-a) 100%);
    box-shadow: 0 0 6px 1px var(--pk-brilho); animation: pk-chove linear infinite; }
@keyframes pk-chove {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    10%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--deriva), 105vh, 0) rotate(540deg); }
}
.pk-po.pk-lasca { border-radius: 1px; width: 5px !important; height: 2px !important; background: linear-gradient(90deg, var(--pk-a), #fffbeb, var(--pk-a)); }

/* centro */
.pk-centro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }
.pk-orbe { position: relative; width: 116px; height: 116px; display: grid; place-items: center; margin-bottom: 22px; opacity: 0; animation: pk-surge 1s cubic-bezier(.2, .8, .2, 1) .9s forwards; }
.pk-orbe::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;
    background: conic-gradient(from 0deg, transparent 0 15%, var(--pk-b) 25%, var(--pk-a) 35%, transparent 50% 65%, var(--pk-c) 78%, transparent 90%);
    -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 exclude, linear-gradient(#000 0 0);
    animation: pk-gira 2.4s linear infinite; }
.pk-orbe::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pk-b) 22%, transparent), transparent 70%); animation: pk-respira 2.4s ease-in-out infinite; }
.pk-orbe img { position: relative; z-index: 1; width: 64px; height: auto; max-height: 64px; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 0 14px var(--pk-brilho)); }
.pk-marca { font: 800 13px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .45em; margin-right: -.45em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--pk-a), var(--pk-b) 40%, #ffffff 50%, var(--pk-b) 60%, var(--pk-a)); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0; animation: pk-surge .9s ease 1.2s forwards, pk-brilho 3s linear 1.2s infinite; }
.pk-texto { margin-top: 14px; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .26em; text-transform: uppercase; color: #64748b; opacity: 0; animation: pk-surge .9s ease 1.4s forwards; }
.pk-texto i { font-style: normal; animation: pk-ponto 1.4s infinite; }
.pk-texto i:nth-child(2) { animation-delay: .2s; } .pk-texto i:nth-child(3) { animation-delay: .4s; }
.pk-linha { position: relative; width: 160px; height: 1px; margin-top: 18px; overflow: hidden; background: rgba(148, 163, 184, .15); opacity: 0; animation: pk-surge .9s ease 1.5s forwards; }
.pk-linha::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, var(--pk-b), transparent); animation: pk-corre 1.6s ease-in-out infinite; }
@keyframes pk-surge { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pk-gira { to { transform: rotate(360deg); } }
@keyframes pk-respira { 50% { transform: scale(1.12); opacity: .6; } }
@keyframes pk-brilho { from { background-position: 120% 0; } to { background-position: -130% 0; } }
@keyframes pk-ponto { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes pk-corre { to { left: 100%; } }