/* =========================================================
   Victor Gabriel — portfólio
   Base tinta-violeta profunda, acentos ciano e violeta.
   A cena 3D fica fixa atrás; o conteúdo rola por cima.
   ========================================================= */

:root{
  --tinta:#07060E;
  --tinta-2:#0D0B1A;
  --painel:rgba(255,255,255,.045);
  --linha:rgba(255,255,255,.13);

  --texto:#F2F1FA;
  --texto-2:#A9A5C6;
  --texto-3:#6E6A8E;

  --ciano:#4DE8FF;
  --violeta:#A855F7;
  --limao:#C8FF4D;

  --max:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}

body{
  background:var(--tinta);
  color:var(--texto);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{display:block}
:focus-visible{outline:2px solid var(--ciano);outline-offset:4px;border-radius:3px}

/* ---------- Cena 3D e textura ---------- */
#cena{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
.cena-pronta #cena{opacity:1}

/* granulado por cima, tira o aspecto liso demais do degradê */
.grao{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23r)' opacity='.35'/></svg>");
  mix-blend-mode:overlay;
}

.carregando{
  position:fixed;inset:0;z-index:200;background:var(--tinta);
  display:grid;place-items:center;transition:opacity .8s ease,visibility .8s;
}
.carregando span{
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);border-top-color:var(--ciano);
  animation:gira .9s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.carregando.sumiu{opacity:0;visibility:hidden}

/* ---------- Cabeçalho ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px clamp(20px,4vw,46px);
  background:linear-gradient(180deg,rgba(7,6,14,.82),transparent);
  backdrop-filter:blur(6px);
}
.marca{
  display:flex;align-items:center;gap:10px;
  font-weight:500;font-size:17px;letter-spacing:-.01em;
}
.marca b{font-weight:700;background:linear-gradient(92deg,var(--ciano),var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.marca-ponto{
  width:9px;height:9px;border-radius:50%;background:var(--ciano);
  box-shadow:0 0 14px var(--ciano);animation:pisca 2.6s ease-in-out infinite;
}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.35}}

.nav{display:flex;gap:30px}
.nav a{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);
  position:relative;padding-bottom:4px;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ciano);transition:width .25s ease;
}
.nav a:hover{color:var(--texto)}
.nav a:hover::after{width:100%}
@media (max-width:860px){.nav{display:none}}

.topo-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:100px;
  border:1px solid var(--linha);background:var(--painel);
  transition:border-color .25s,background .25s,transform .2s;
}
.topo-cta svg{width:17px;height:17px;transition:transform .25s}
.topo-cta:hover{border-color:var(--ciano);background:rgba(77,232,255,.1);transform:translateY(-2px)}
.topo-cta:hover svg{transform:translateX(4px)}
@media (max-width:560px){.topo-cta span{display:none}.topo-cta{padding:11px 13px}}

/* ---------- Estrutura ---------- */
#trilho{position:relative;z-index:2}
.tela,.secao{
  max-width:var(--max);margin:0 auto;
  padding:clamp(90px,13vw,170px) clamp(20px,4vw,46px);
}
.tela{min-height:100vh;display:flex;flex-direction:column;justify-content:center}

.etiqueta{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ciano);
  margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.etiqueta::before{content:"";width:26px;height:1px;background:var(--ciano)}

.titulo{
  font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;
  line-height:1.02;letter-spacing:-.035em;
}
.secao-cab{margin-bottom:clamp(48px,7vw,86px);max-width:22ch}

/* ---------- Abertura ---------- */
.titulao{
  font-size:clamp(3.2rem,13vw,10.5rem);font-weight:700;
  line-height:.92;letter-spacing:-.05em;margin-bottom:34px;
}
.titulao .linha{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.titulao .linha i{
  display:block;font-style:normal;
  transform:translateY(110%);
  animation:sobeLinha 1.1s cubic-bezier(.16,.9,.2,1) forwards;
}
.titulao .linha:nth-child(1) i{animation-delay:.15s}
.titulao .linha:nth-child(2) i{animation-delay:.27s}
.titulao .linha:nth-child(3) i{animation-delay:.39s}
@keyframes sobeLinha{to{transform:translateY(0)}}
.titulao em{
  font-style:normal;
  background:linear-gradient(96deg,var(--ciano),var(--violeta) 65%,var(--limao));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.abertura-txt{
  max-width:46ch;color:var(--texto-2);font-size:clamp(1.05rem,2vw,1.3rem);
  opacity:0;animation:aparece 1s ease .75s forwards;
}
@keyframes aparece{to{opacity:1}}
.abertura-rodape{margin-top:clamp(40px,7vw,80px);opacity:0;animation:aparece 1s ease 1s forwards}
.rolar{
  display:inline-flex;align-items:center;gap:14px;
  font-family:"JetBrains Mono",monospace;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
}
.rolar-barra{
  width:52px;height:2px;background:var(--linha);position:relative;overflow:hidden;
}
.rolar-barra::after{
  content:"";position:absolute;inset:0;width:40%;background:var(--ciano);
  animation:corre 2.2s ease-in-out infinite;
}
@keyframes corre{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ---------- Manifesto ---------- */
.frase{
  font-size:clamp(1.7rem,4.4vw,3.4rem);font-weight:500;
  line-height:1.16;letter-spacing:-.025em;max-width:20ch;
}
.frase em{
  font-style:normal;color:var(--texto-3);
  display:block;
}
.numeros{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);
  margin-top:clamp(48px,7vw,88px);
}
@media (max-width:820px){.numeros{grid-template-columns:repeat(2,1fr)}}
.numero{background:rgba(7,6,14,.72);padding:30px 26px}
.numero b{
  display:block;font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--ciano),var(--violeta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.numero span{display:block;margin-top:6px;color:var(--texto-3);font-size:14.5px;line-height:1.45}

/* ---------- Trabalhos ---------- */
.trabalho{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,5vw,72px);align-items:center;
  margin-bottom:clamp(70px,10vw,140px);
}
.trabalho:last-child{margin-bottom:0}
@media (max-width:900px){.trabalho{grid-template-columns:1fr;gap:28px}}
.trabalho.invertido .trabalho-img{order:2}
@media (max-width:900px){.trabalho.invertido .trabalho-img{order:0}}

.trabalho-img{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--linha);border-radius:6px;
  background:var(--tinta-2);
}
.trabalho-img img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .9s cubic-bezier(.16,.9,.2,1),filter .6s;
  filter:saturate(.85) contrast(1.05);
}
.trabalho-img:hover img{transform:scale(1.05);filter:saturate(1.1) contrast(1.05)}
.trabalho-ver{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);
  background:var(--texto);color:var(--tinta);
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:13px 22px;border-radius:100px;
  opacity:0;transition:opacity .3s ease,transform .4s cubic-bezier(.16,.9,.2,1);
}
.trabalho-img:hover .trabalho-ver{opacity:1;transform:translate(-50%,-50%) scale(1)}

.trabalho-num{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  letter-spacing:.2em;color:var(--texto-3);
}
.trabalho-txt h3{
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.06;margin:10px 0 14px;
}
.trabalho-txt p{color:var(--texto-2);max-width:44ch}
.marcas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 24px}
.marcas li{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);
  border:1px solid var(--linha);border-radius:100px;padding:6px 13px;
}
.link-seta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ciano);
  border-bottom:1px solid rgba(77,232,255,.35);padding-bottom:3px;
  transition:gap .25s,border-color .25s;
}
.link-seta::after{content:"↗"}
.link-seta:hover{gap:14px;border-color:var(--ciano)}

/* ---------- Processo ---------- */
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media (max-width:900px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.passos{grid-template-columns:1fr}}
.passos li{background:rgba(7,6,14,.72);padding:34px 28px 38px;transition:background .3s}
.passos li:hover{background:rgba(168,85,247,.09)}
.passos b{
  font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;color:var(--violeta);
}
.passos h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 10px}
.passos p{color:var(--texto-3);font-size:15px;line-height:1.55}

/* ---------- Contato ---------- */
.contato{text-align:left}
.chamada{
  font-size:clamp(3rem,11vw,8.5rem);font-weight:700;
  line-height:.92;letter-spacing:-.05em;margin-bottom:26px;
}
.chamada em{
  font-style:normal;
  background:linear-gradient(96deg,var(--violeta),var(--ciano));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contato-txt{color:var(--texto-2);max-width:46ch;font-size:1.1rem;margin-bottom:38px}
.botanho{
  display:inline-flex;align-items:center;gap:16px;
  font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.02em;
  padding:20px 34px;border-radius:100px;
  border:1px solid var(--linha);background:var(--painel);
  transition:border-color .3s,background .3s,transform .25s,box-shadow .3s;
}
.botanho svg{width:24px;height:24px;transition:transform .3s}
.botanho .ico-zap{width:27px;height:27px;color:#25D366;flex:none}
.botanho:hover .ico-zap{transform:none}
.contato-nota{
  margin-top:22px;color:var(--texto-3);
  font-family:"JetBrains Mono",monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;
}
.botanho:hover{
  border-color:var(--ciano);background:rgba(77,232,255,.12);
  transform:translateY(-3px);box-shadow:0 18px 50px rgba(77,232,255,.2);
}
.botanho:hover svg{transform:translateX(6px)}

/* ---------- Revelação ---------- */
.revela{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.9,.2,1)}
.revela.ativo{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .revela{opacity:1!important;transform:none!important}
  .titulao .linha i{transform:none!important}
  .abertura-txt,.abertura-rodape{opacity:1!important}
}