/* ===== Hypeverse: base preta, detalhes amarelos, gradientes com granulado ===== */
:root{
  --accent:#ffeb00; --zonic:#2fd8c4;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;color:#ececec;font:14px/1.4 "Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:var(--noise-dark),radial-gradient(70% 55% at 50% 45%,#141416 0%,transparent 70%),radial-gradient(60% 50% at 15% 0%,#121214 0%,transparent 60%),linear-gradient(165deg,#0a0a0b,#020202 70%);
  background-size:180px,100% 100%,100% 100%,100% 100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* estrelas e luz que segue o mouse */
.sky{position:fixed;inset:-40px;pointer-events:none}
.sky i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);animation:twinkle var(--d) ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{50%{opacity:calc(var(--o) * .25)}}
.glow-cursor{position:fixed;width:700px;height:700px;left:0;top:0;margin:-350px 0 0 -350px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,235,0,.06),transparent 60%);transform:translate(var(--gx,50vw),var(--gy,50vh));transition:transform .25s linear}

.hv-head{position:fixed;top:22px;left:0;right:0;text-align:center;z-index:50;pointer-events:none;animation:fadeDown 1.2s var(--ease) both .9s}
.hv-title{margin:0;font:700 clamp(26px,3.4vw,40px)/1 "Silkscreen",monospace;color:var(--accent);letter-spacing:.04em;text-shadow:0 0 24px rgba(255,235,0,.25)}
.hv-sub{margin:8px 0 0;font:400 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}}

/* ===== Palco do sistema solar ===== */
.stage{position:fixed;inset:0}
.orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbits ellipse{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1;transition:stroke .5s,stroke-width .5s,opacity .5s;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.2s var(--ease) forwards;animation-delay:var(--dl)}
.orbits ellipse.on{stroke:var(--oc);stroke-width:1.6}
.stage.focus .orbits ellipse:not(.on){opacity:.35}
@keyframes draw{to{stroke-dashoffset:0}}

.sun,.planet{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.sun{width:var(--sz);height:var(--sz);z-index:20}
.sun .core{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#fff7a6 0%,#ffeb00 30%,#ffb300 70%,#ff8a00 100%);
  box-shadow:0 0 30px 6px rgba(255,225,0,.55),0 0 90px 24px rgba(255,170,0,.22),inset -6px -8px 18px rgba(200,90,0,.35);animation:pulse 5s ease-in-out infinite}
.sun .core::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:120px;mix-blend-mode:overlay;opacity:.55;animation:boil 9s linear infinite}
.sun .corona{position:absolute;inset:-60%;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,220,0,.16),transparent 25%,rgba(255,170,0,.14),transparent 55%,rgba(255,235,0,.12),transparent 80%);filter:blur(14px);animation:spin 40s linear infinite}
.sun:hover .core{box-shadow:0 0 40px 10px rgba(255,225,0,.7),0 0 140px 40px rgba(255,170,0,.3),inset -6px -8px 18px rgba(200,90,0,.35)}
@keyframes pulse{50%{box-shadow:0 0 38px 9px rgba(255,225,0,.65),0 0 120px 34px rgba(255,170,0,.26),inset -6px -8px 18px rgba(200,90,0,.35)}}
@keyframes boil{to{background-position:120px 60px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:scale(.4)}}

/* Planetas: esfera com gradiente iluminado pelo sol (posição da luz vem do JS) + granulado */
.planet{width:var(--sz);height:var(--sz);opacity:0;transition:opacity .9s var(--ease),filter .5s}
.planet.in{opacity:1}
.stage.focus .planet:not(.hover){filter:saturate(.5) brightness(.65)}
.planet .body{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:2;
  background:radial-gradient(circle at var(--lx,35%) var(--ly,30%),var(--c1) 0%,var(--c2) 45%,var(--c3) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.planet .body::before{content:"";position:absolute;inset:0;background:var(--grain);background-size:110px;mix-blend-mode:overlay;opacity:.5}
.planet .body::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at calc(100% - var(--lx,35%)) calc(100% - var(--ly,30%)),rgba(0,0,0,.42) 0%,transparent 55%)}
.planet .halo{position:absolute;inset:-45%;border-radius:50%;z-index:0;background:radial-gradient(circle,var(--glow) 0%,transparent 62%);opacity:.35;transition:opacity .5s,transform .6s var(--spring)}
.planet.hover .halo{opacity:1;transform:scale(1.15)}
.p-chat{--c1:#ffffff;--c2:#d9d9de;--c3:#7b7b84;--glow:rgba(255,255,255,.28)}
.p-manager{--c1:#c48bff;--c2:#8a3fc4;--c3:#3c1468;--glow:rgba(160,80,230,.45)}
.p-search{--c1:#ffd27a;--c2:#ff8a00;--c3:#9a3d00;--glow:rgba(255,138,0,.42)}

/* anel (HypeChat): metade de trás atrás do planeta, metade da frente na frente */
.ring{position:absolute;left:50%;top:50%;width:250%;height:58%;margin:-29% 0 0 -125%;border-radius:50%;border:2px solid rgba(255,255,255,.75);transform:rotate(-14deg);pointer-events:none}
.ring.back{z-index:1;clip-path:inset(0 0 50% 0);border-color:rgba(255,255,255,.45)}
.ring.front{z-index:3;clip-path:inset(50% 0 0 0)}

/* Etiquetas */
.pname{position:absolute;left:50%;top:100%;margin-top:10px;transform:translateX(-50%);white-space:nowrap;font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:opacity .4s,color .4s;z-index:4}
.planet.hover .pname{opacity:0}
.pinfo{position:absolute;left:calc(100% + 22px);top:50%;width:230px;transform:translate(-10px,-50%);opacity:0;pointer-events:none;z-index:5;text-align:left;
  padding:14px 16px;border-radius:12px;background:var(--noise),rgba(20,20,22,.78);background-size:180px,auto;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(0,0,0,.45);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.pinfo b{display:block;font:700 17px "Silkscreen",monospace;color:var(--pc,var(--accent));letter-spacing:.03em}
.pinfo small{display:block;margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.7)}
.pinfo .kicker{display:inline-block;margin-top:8px;padding:2px 7px;border-radius:5px;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,235,0,.12);color:var(--accent)}
.sun .pinfo small{font-size:13px;color:rgba(255,255,255,.85)}
.pinfo .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:26px;padding:0 10px;border-radius:13px;font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#141414}
.pinfo .go.soon{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.planet.left .pinfo{left:auto;right:calc(100% + 22px);transform:translate(10px,-50%)}
.planet.hover .pinfo,.sun:hover .pinfo{opacity:1;transform:translate(0,-50%)}
.sun .pinfo{--pc:var(--accent)}
.planet:focus-visible,.sun:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* transição ao entrar num app: o planeta "engole" a tela */
.warp{position:fixed;z-index:100;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2) 50%,var(--c3));
  transition:transform .85s cubic-bezier(.7,0,.2,1)}
.planet.shake{animation:shake .45s}
@keyframes shake{20%,60%{margin-left:-5px}40%,80%{margin-left:5px}}

.hv-foot{position:fixed;left:24px;right:24px;bottom:18px;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.7);z-index:50;pointer-events:none;animation:fadeUp 1.2s var(--ease) both .4s}
.hv-foot .y{color:var(--accent);text-decoration:none;font-weight:700;pointer-events:auto;transition:text-shadow .3s}
.hv-foot .y:hover{text-shadow:0 0 12px rgba(255,235,0,.6);text-decoration:underline;text-underline-offset:3px}
.hv-foot .z{color:var(--zonic)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}

.hv-toast{position:fixed;left:50%;bottom:54px;transform:translate(-50%,20px);padding:9px 16px;border-radius:10px;background:#000;border:1px solid rgba(255,255,255,.15);font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--spring);z-index:200}
.hv-toast.show{opacity:1;transform:translate(-50%,0)}

/* abertura: tela preta que se ilumina do centro para as bordas */
@property --reveal{syntax:'<percentage>';inherits:false;initial-value:0%}
.reveal{position:fixed;inset:0;z-index:300;pointer-events:none;background:#000;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--reveal),#000 calc(var(--reveal) + 30%));
  mask-image:radial-gradient(circle at 50% 50%,transparent var(--reveal),#000 calc(var(--reveal) + 30%));
  animation:reveal 2.2s cubic-bezier(.45,0,.2,1) .15s forwards}
@keyframes reveal{to{--reveal:110%;visibility:hidden}}

@media (max-width:700px){
  .pinfo{width:180px}
  .hv-foot{flex-direction:column;gap:4px;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ===== Conta: Entrar / Criar conta ou nome + Sair (canto superior esquerdo) ===== */
.hv-conta{position:fixed;top:22px;left:24px;z-index:60;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-10px);transition:opacity .8s var(--ease) .9s,transform .8s var(--ease) .9s}
.hv-conta.show{opacity:1;transform:none}
.hv-pill{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#ececec;padding:6px 13px;border-radius:16px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  transition:color .2s,border-color .2s,background .2s,transform .25s var(--spring),box-shadow .25s}
.hv-pill:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,235,0,.08);transform:translateY(-2px)}
.hv-pill.on{color:#141414;border-color:var(--accent);background:var(--noise),var(--accent);background-size:180px,auto}
.hv-pill.on:hover{color:#141414;box-shadow:0 8px 24px rgba(255,235,0,.25)}
.hv-quem{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:#ececec;margin-right:4px}
.hv-quem i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 11px var(--mono);font-style:normal;color:#141414;background:var(--noise),var(--accent);background-size:180px,auto}
.hv-quem i svg{width:100%;height:100%;display:block;border-radius:50%}
.hv-quem i:has(svg){overflow:hidden;width:32px;height:32px;box-shadow:0 0 0 2px var(--accent)}
.hv-quem b{font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hv-conta{transition:none}}
@media (max-width:640px){.hv-conta{top:14px;left:14px}.hv-quem b{display:none}.hv-head{top:60px}}

/* Satélite sem borda, sem caixa e sem rastro. O SVG ganha volume só com luz e sombra. */
.satellite{position:absolute;left:0;top:0;width:var(--sz);height:calc(var(--sz) * 2 / 3);pointer-events:none;opacity:0;will-change:transform;transition:opacity 1s;filter:drop-shadow(0 5px 9px rgba(0,0,0,.3))}
.satellite.in{opacity:1}
.satellite svg{display:block;width:100%;height:100%;overflow:visible}
.p-termo{--c1:#fff8b0;--c2:#ffeb00;--c3:#b47b00;--glow:rgba(255,235,0,.25)}
.p-termo .body{border-radius:0;overflow:visible;background:none;box-shadow:none;transform:rotate(-9deg);filter:drop-shadow(0 7px 9px rgba(0,0,0,.4))}
.p-termo .body::before,.p-termo .body::after{display:none}
.t-sculpture{width:100%;height:110%;display:block;overflow:visible}

/* HypeLighting: planeta do estúdio virtual */
.p-lighting{--c1:#c8fff1;--c2:#36bda8;--c3:#0b514e;--glow:rgba(72,219,188,.4)}

/* HypeView: asteroide lilás com crateras (aprovação de vídeos) */
.p-hypeview{--c1:#ffc4ec;--c2:#a58bff;--c3:#4b2fb8;--glow:rgba(150,110,255,.42)}
.p-hypeview .body{border-radius:0;overflow:visible;background:none;box-shadow:none;filter:drop-shadow(0 7px 10px rgba(40,10,110,.5))}
.p-hypeview .body::before,.p-hypeview .body::after{display:none}
.v-asteroide{width:100%;height:100%;display:block;overflow:visible;animation:v-gira 90s linear infinite}
@keyframes v-gira{to{transform:rotate(360deg)}}