/* ============================================================
   BaseFIRST — Em breve
   Cores extraídas do Figma:
     fundo  rgb(2,0,11)     #02000B
     rosa   rgb(236,42,119) #EC2A77
     branco rgb(245,246,246)#F5F6F6
   ============================================================ */

:root {
  --bg:      #02000b;
  --pink:    #ec2a77;
  --white:   #f5f6f6;
  --sphere:  min(194vmin, 2475px); /* esfera +50% (acumulado) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Palco ---- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* vinheta sutil para dar profundidade ao fundo */
  background:
    radial-gradient(120% 120% at 50% 46%, rgba(42,21,43,0.45) 0%, rgba(2,0,11,0) 55%),
    var(--bg);
}

/* ---- Esfera de partículas ---- */
.sphere-wrap {
  position: absolute;
  top: 47%;            /* centro vertical levemente acima, como no Figma */
  left: 50%;
  width: var(--sphere);
  height: var(--sphere);
  transform: translate(-50%, -50%);
}

/* halo difuso por trás da esfera (estático) */
.sphere-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(150,60,220,0.30) 0%,
              rgba(236,42,119,0.10) 38%,
              rgba(2,0,11,0) 66%);
  filter: blur(14px);
}

.sphere {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}

/* ---- Logotipo BaseFIRST. ---- */
.logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  line-height: 1;
  user-select: none;
  /* tamanho proporcional ao Figma (455px de largura em canvas de 1440) */
  font-size: clamp(65px, 13.9vmin, 163px); /* marca +70% */
  letter-spacing: -0.005em;
  /* estado base = VISÍVEL (garante render em print/export/preview) */
  opacity: 1;
}

/* Revelação na carga: só quando há permissão de movimento.
   Parte do escondido (keyframe), base permanece visível. */
@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: reveal 1.1s cubic-bezier(.2,.7,.2,1) 0.25s both;
  }
}

.logo-base {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: var(--pink);
}

.logo-first {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.01em;
}

.logo-dot {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: var(--pink);
  margin-left: 0.04em;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* ---- Acessibilidade: respeita preferência por menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  .sphere, .sphere-glow { animation: none; }
  .logo {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}