/* ============================================================================
   NETSYSTEM Internet — Tema Galaxy (redesenhado)
   skeleton-auto.css  ·  Estrutura, fundo premium, blobs, tipografia e rodapé
   ----------------------------------------------------------------------------
   Índice
     1. Reset leve e base
     2. Fundo premium (gradiente + malha + vinheta)
     3. Camada decorativa (blobs / luzes desfocadas)  -> reaproveita #object1..12
     4. Grid / container (coluna central da "landing")
     5. Tipografia (nome, bio, links)
     6. Espaçamentos
     7. Barra de rolagem
     8. Rodapé de créditos
   ----------------------------------------------------------------------------
   Tokens de cor/forma vêm de extra/custom-head.blade.php (:root).
   Os poucos valores repetidos aqui têm fallback embutido para robustez.
   ========================================================================== */


/* 1. Reset leve e base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  font-size:100%;
  -webkit-text-size-adjust:100%;
  /* Cor sólida de fallback: garante que NUNCA apareça branco, mesmo em
     páginas mais altas que a viewport ou em overscroll no mobile. */
  background-color:var(--bg-0, #04122E);
}

body{
  margin:0;
  padding:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:var(--font, 'Poppins', sans-serif);
  color:var(--text, #F4F8FF);
  /* Gradiente que cobre a PÁGINA INTEIRA (sem background-attachment:fixed,
     que deixava o rodapé sem cobertura em páginas longas). O brilho "fixo"
     premium fica por conta da camada de blobs (.background-container). */
  background:
    radial-gradient(1200px 800px at 50% -10%, var(--glow-top, rgba(29,78,216,.28)) 0%, transparent 60%),
    radial-gradient(900px 900px at 100% 0%,  var(--glow-side, rgba(96,165,250,.16)) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, var(--bg-2, #0A2560) 0%, var(--bg-0, #04122E) 78%);
  background-color:var(--bg-0, #04122E);
  background-repeat:no-repeat;
  background-size:cover;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Entrada suave da página inteira */
  opacity:0;
  animation:pageIn .9s var(--ease, ease-out) .15s forwards;
}

/* Malha de pontos sutil + vinheta para dar profundidade (bem discreto) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  opacity:.5;
}

@keyframes pageIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0);    }
}


/* 2/3. Camada decorativa — blobs / luzes desfocadas
   --------------------------------------------------------------------------
   O LinkStack injeta .background-container > .parallax-background com 12 divs
   (#object1..#object12). Reaproveitamos alguns como orbes de luz desfocada e
   escondemos o restante. Nada de "estrelas" — visual limpo e premium.
   -------------------------------------------------------------------------- */
.background-container{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  /* translate leve controlado pelo parallax opcional (custom-body-end) */
  will-change:transform;
}
.parallax-background{ position:absolute; inset:0; }

/* Base comum dos orbes */
.parallax-background > div{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  transform:translateZ(0);
}

/* Esconde os objetos não usados (4 em diante) */
#object4,#object5,#object6,#object7,#object8,
#object9,#object10,#object11,#object12{ display:none !important; }

/* Orbe 1 — azul principal, topo esquerdo */
#object1{
  width:46vmax; height:46vmax; max-width:620px; max-height:620px;
  top:-14vmax; left:-12vmax;
  background:radial-gradient(circle at 50% 50%, var(--ns-blue, #1D4ED8) 0%, transparent 70%);
  opacity:.55;
  animation:floatBlob 22s ease-in-out infinite;
}

/* Orbe 2 — azul claro, direita/centro */
#object2{
  width:40vmax; height:40vmax; max-width:560px; max-height:560px;
  top:6vmax; right:-14vmax;
  background:radial-gradient(circle at 50% 50%, var(--ns-blue-light, #60A5FA) 0%, transparent 70%);
  opacity:.40;
  animation:floatBlob 28s ease-in-out infinite reverse;
}

/* Orbe 3 — verde de acento (pequeno), base */
#object3{
  width:30vmax; height:30vmax; max-width:420px; max-height:420px;
  bottom:-12vmax; left:20%;
  background:radial-gradient(circle at 50% 50%, var(--ns-green, #22C55E) 0%, transparent 72%);
  opacity:.22;
  animation:floatBlob 32s ease-in-out infinite;
}

@keyframes floatBlob{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(4%,3%)  scale(1.08); }
  66%    { transform:translate(-3%,5%) scale(.96); }
}


/* 4. Grid / container — coluna central da "landing"
   -------------------------------------------------------------------------- */
.container{
  position:relative;
  width:100%;
  max-width:520px;              /* coluna enxuta e centralizada */
  margin:0 auto;
  padding:0 22px;
  text-align:center;
  box-sizing:border-box;
  word-break:break-word;
}
.column,.columns{
  width:100%;
  float:none;
  margin:0;
  box-sizing:border-box;
}

@media (min-width:400px){ .container{ padding:0 24px; } }
@media (min-width:550px){ .container{ max-width:540px; } }


/* 5. Tipografia
   -------------------------------------------------------------------------- */
/* Nome / título do perfil */
h1{
  margin:14px 0 10px;
  font-family:var(--font);
  font-weight:800;
  font-size:2rem;              /* mobile-first ~32px */
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--text);
  /* leve gradiente premium no título */
  background:linear-gradient(180deg, #FFFFFF 0%, var(--title-tint, #C9DCFF) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (min-width:400px){ h1{ font-size:2.35rem; } }
@media (min-width:700px){ h1{ font-size:2.6rem;  } }

/* Nome do perfil OCULTO visualmente, mas MANTIDO no DOM (sr-only) para SEO e
   leitores de tela. O texto continua no <title> da aba e nas metatags OG.
   Para reexibir na página, remova este bloco. */
h1{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}
/* Bio some da página (fica só nas metatags description/og/twitter). */
.description-parent{ display:none !important; }

p{ margin-top:0; }

/* Links de texto genéricos */
a{ color:var(--ns-blue-light, #60A5FA); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--link-hover, #93C0FF); }

/* Bloco de bio (elemento .description-parent do core) */
.description-parent{
  color:var(--text-muted);
  font-weight:400;
  font-size:1.02rem;
  line-height:1.6;
  max-width:42ch;
  margin:0 auto;
  padding-bottom:26px !important;
}
.description-parent *{ margin-bottom:.6em; }
.description-parent a{ color:var(--ns-blue-light); font-weight:600; }

/* Posicionamento vertical do conteúdo principal.
   O core (LinkStack) empurra o conteúdo pra baixo por dois motivos:
     1) deixa a `.sharediv` do botão Compartilhar OCULTA (visibility:hidden)
        ocupando ~70px no topo quando o share está desativado;
     2) aplica um `style="margin-top:5%"` INLINE na coluna principal.
   Colapsamos os dois e definimos o respiro exato do topo e do rodapé. */

/* remove o espaço do botão de share quando ele está desativado (oculto) */
.sharediv[style*="hidden"]{ display:none !important; }

/* coluna principal (tem o margin-top inline do core) */
.column[style*="margin-top"]{
  margin-top:0 !important;   /* zera o 5% inline */
  padding-top:36px;          /* respiro do topo */
  padding-bottom:65px;       /* soma 100px abaixo do último botão (65 + 14 margem + 21 whitespace do core) */
}

/* .spacing é usado em outras views/rodapé — mantém neutro */
.spacing{ padding:0 10px; }


/* 6. Espaçamentos utilitários (mantém compat. Skeleton)
   -------------------------------------------------------------------------- */
button,.button{ display:block; margin-bottom:14px; }
input,textarea,select,fieldset{ margin-bottom:1.5rem; }
pre,blockquote,dl,figure,ol{ margin-bottom:2.5rem; }

.u-full-width{ width:100%; box-sizing:border-box; }
.u-max-full-width{ max-width:100%; box-sizing:border-box; }
.u-pull-right{ float:right; }
.u-pull-left{ float:left; }

hr{
  margin:2.4rem auto;
  width:70%;
  border:0;
  border-top:1px solid rgba(255,255,255,.12);
}

code{
  padding:.2rem .5rem; margin:0 .2rem; font-size:90%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:8px; color:#E6EEFF;
}
pre>code{ display:block; padding:1rem 1.25rem; white-space:pre; }


/* 7. Barra de rolagem
   -------------------------------------------------------------------------- */
*{ scrollbar-width:thin; scrollbar-color:var(--ns-blue) transparent; }
*::-webkit-scrollbar{ width:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--ns-blue), var(--ns-blue-dark));
  border-radius:20px;
  border:2px solid transparent;
  background-clip:content-box;
}


/* 8. Rodapé de créditos
   -------------------------------------------------------------------------- */
.credit-footer{ position:relative; margin-top:14px; }
.credit-txt{
  font-weight:500;
  font-size:13px;
  letter-spacing:.2px;
  text-decoration:none;
}
.credit-txt-clr{ color:var(--text-faint) !important; transition:color .25s var(--ease); }
.credit-footer:hover .credit-txt-clr{ color:var(--ns-blue-light) !important; }
.credit-icon{ display:none; }


/* Acessibilidade — respeita quem prefere menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  body{ opacity:1; }
}