/* ============================================================================
   Guilherme Apolinário Gonçalves — Portfólio
   style.css  |  Mobile-first  |  Paleta: preto profundo + azul cobalto/neon
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- Azuis (iguais nos dois temas) --- */
  --blue-cobalt:#0047ff;
  --blue-royal:#2563eb;
  --blue:#3b82f6;
  --blue-soft:#60a5fa;
  --blue-neon:#22d3ee;

  /* --- Layout --- */
  --container:1180px;
  --radius:18px;
  --radius-sm:12px;
  --nav-h:74px;

  /* --- Timing --- */
  --t-fast:.2s;
  --t:.3s;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* --------------------------------------------------- TEMA ESCURO (padrão) */
:root,
:root[data-theme="dark"]{
  color-scheme:dark;

  --bg-900:#04060d;          /* preto azulado profundo */
  --bg-800:#070b16;
  --bg-700:#0b1120;

  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.09);
  --stroke-blue:rgba(59,130,246,.35);

  --text:#e8edf9;
  --text-dim:#9aa7c2;
  --text-mute:#63708c;

  --grad-blue:linear-gradient(120deg,#60a5fa 0%,#2563eb 45%,#22d3ee 100%);
  --glow-blue:0 0 0 1px rgba(59,130,246,.35), 0 12px 40px -12px rgba(37,99,235,.65);
  --glow-neon:0 0 24px rgba(34,211,238,.45);

  /* Intensidade dos efeitos de fundo — ajuste tudo por aqui.
     0 = invisível · 1 = cheio. Suba/desça em passos de .05. */
  --scene-op:.38;   /* cena 3D (esfera + detritos) */
  --glow-op:.34;    /* manchas de luz que flutuam */
  --beam-op:.19;    /* feixes laterais (aurora)   */
  --grid-op:.16;    /* malha quadriculada         */
  --rail-op:.34;    /* trilhos laterais           */
  --veil-1:rgba(4,6,13,.55);
  --veil-2:rgba(4,6,13,.35);
  --nav-bg:rgba(6,9,18,.72);
  --panel-bg:rgba(8,12,24,.94);
}

/* ---------------------------------------------------------- TEMA CLARO */
:root[data-theme="light"]{
  color-scheme:light;

  --bg-900:#eef3fc;          /* branco levemente azulado */
  --bg-800:#ffffff;
  --bg-700:#dfe8f8;

  --surface:rgba(255,255,255,.72);
  --surface-2:rgba(255,255,255,.92);
  --stroke:rgba(15,32,66,.12);
  --stroke-blue:rgba(37,99,235,.3);

  --text:#0a1226;
  --text-dim:#41526f;
  --text-mute:#6b7c99;

  /* Neon puro perde contraste no claro — puxa para o ciano escuro */
  --blue-neon:#0e7490;
  --blue-soft:#1d4ed8;

  --grad-blue:linear-gradient(120deg,#1d4ed8 0%,#2563eb 45%,#0e7490 100%);
  --glow-blue:0 0 0 1px rgba(37,99,235,.25), 0 12px 34px -14px rgba(37,99,235,.45);
  --glow-neon:0 0 20px rgba(14,116,144,.28);

  /* No claro tudo precisa ser ainda mais discreto: sobre fundo branco
     o mesmo valor "pesa" muito mais do que sobre preto. */
  --scene-op:.28;
  --glow-op:.18;
  --beam-op:.11;
  --grid-op:.26;
  --rail-op:.24;
  --veil-1:rgba(238,243,252,.35);
  --veil-2:rgba(238,243,252,.2);
  --nav-bg:rgba(255,255,255,.78);
  --panel-bg:rgba(255,255,255,.96);
}

/* Transição suave ao alternar o tema */
:root.theme-anim,
:root.theme-anim *{
  transition:background-color .5s var(--ease),
             color .5s var(--ease),
             border-color .5s var(--ease)!important;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-900);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* `clip` corta igual ao `hidden` mas NÃO cria um container de rolagem —
   sem isso o pin (scroll lateral) do ScrollTrigger quebra. */
@supports (overflow:clip){ body{overflow-x:clip} }
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--blue-royal);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-900)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--blue-royal),var(--blue-neon));border-radius:10px}

:focus-visible{outline:2px solid var(--blue-neon);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ 3. UTILITÁRIOS */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}

.grad{
  background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-soft);
  padding:6px 14px;margin-bottom:16px;
  border:1px solid var(--stroke-blue);border-radius:999px;
  background:rgba(37,99,235,.08);
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue-neon);box-shadow:var(--glow-neon)}

.section{position:relative;padding:96px 0;z-index:1}
.section--alt{background:linear-gradient(180deg,transparent,rgba(37,99,235,.045),transparent)}
.section__head{max-width:660px;margin:0 auto 56px;text-align:center}
.section__title{
  font-size:clamp(1.9rem,5.2vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;
}
.section__lead{margin-top:16px;color:var(--text-dim);font-size:1.02rem}

/* ================================================= 3b. CENA 3D GLOBAL
   Fixa atrás de tudo. Como não vive mais dentro do hero, a animação
   atravessa todas as seções — não existe mais o corte na dobra.
   ==================================================================== */
/* Ordem das camadas fixas:
   0 = glows / grid / feixes  ·  1 = cena 3D  ·  2 = véu + trilhos  ·  3 = conteúdo */
.scene{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
  mix-blend-mode:screen;          /* soma luz: o azul brilha em vez de cobrir */
  opacity:0;                      /* o JS faz o fade-in quando a cena carrega */
  transition:opacity 1.2s var(--ease);
  /* Sem `contain:paint` aqui — ele criaria containment de pintura e o
     mix-blend-mode deixaria de enxergar o fundo da página. */
  contain:layout style;
}
.scene.is-ready{opacity:var(--scene-op)}
:root[data-theme="light"] .scene{mix-blend-mode:multiply}

/* Véu fixo: mantém o texto legível por cima da cena, sem faixa de corte.
   A opacidade sobe conforme a rolagem (variável --veil-strength, via JS). */
.scene__veil{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 42%,transparent 30%,var(--veil-2) 100%);
  opacity:var(--veil-strength,0);
  transition:opacity .4s linear;
}

/* Todo o conteúdo passa a flutuar acima da cena */
main,.footer{position:relative;z-index:3}

/* ------------------------------------------------- 4. FUNDO (glows + grid) */
.bg-glow{
  position:fixed;border-radius:50%;filter:blur(110px);
  opacity:var(--glow-op);pointer-events:none;z-index:0;
  transition:opacity .6s var(--ease);
}
.bg-glow--1{
  width:560px;height:560px;top:-170px;left:-170px;
  background:radial-gradient(circle,rgba(37,99,235,.85),rgba(37,99,235,.2) 45%,transparent 70%);
  animation:drift1 18s ease-in-out infinite;
}
.bg-glow--2{
  width:640px;height:640px;bottom:-230px;right:-210px;
  background:radial-gradient(circle,rgba(34,211,238,.6),rgba(34,211,238,.15) 45%,transparent 70%);
  animation:drift2 22s ease-in-out infinite;
}
.bg-glow--3{
  width:460px;height:460px;top:42%;left:50%;margin-left:-230px;
  background:radial-gradient(circle,rgba(0,71,255,.45),transparent 68%);
  animation:drift3 26s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(90px,60px) scale(1.14)}
  66%    {transform:translate(40px,120px) scale(.94)}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(-110px,-80px) scale(1.18)}
}
@keyframes drift3{
  0%,100%{transform:translate(-50%,0) scale(.9);opacity:.5}
  50%    {transform:translate(-50%,-90px) scale(1.15);opacity:1}
}

.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grid-op);
  overflow:hidden;
  color:rgba(255,255,255,.05);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 15%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 15%,transparent 78%);
}
:root[data-theme="light"] .bg-grid{color:rgba(15,32,66,.07)}

/* O "deslizar" do grid roda em transform, não em background-position:
   background-position força repintura a cada frame (30s em loop, mas
   contínua), o que competia com o compositor durante a rolagem e
   travava o scroll. -64px de folga em cada lado esconde a costura
   enquanto o padrão desliza um quadro (64px) via GPU. */
.bg-grid__pattern{
  position:absolute;inset:-64px;
  background-image:linear-gradient(currentColor 1px,transparent 1px),
                   linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:64px 64px;
  animation:gridShift 30s linear infinite;
  will-change:transform;
}
@keyframes gridShift{to{transform:translate3d(64px,64px,0)}}

/* --- Feixes laterais (aurora) --- */
.beams{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beam{
  position:absolute;top:-25%;width:min(230px,32vw);height:150%;
  filter:blur(46px);opacity:var(--beam-op);
  transition:opacity .6s var(--ease);
}
.beam--l1{
  left:-90px;
  background:linear-gradient(180deg,transparent,rgba(0,71,255,.85),transparent);
  transform:rotate(14deg);animation:beamPulse 9s ease-in-out infinite;
}
.beam--l2{
  left:20px;width:min(140px,20vw);
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.6),transparent);
  transform:rotate(-9deg);animation:beamPulse 12s ease-in-out infinite 1.6s;
}
.beam--r1{
  right:-90px;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.7),transparent);
  transform:rotate(-14deg);animation:beamPulse 11s ease-in-out infinite .8s;
}
.beam--r2{
  right:20px;width:min(140px,20vw);
  background:linear-gradient(180deg,transparent,rgba(37,99,235,.7),transparent);
  transform:rotate(9deg);animation:beamPulse 14s ease-in-out infinite 2.4s;
}
@keyframes beamPulse{
  0%,100%{opacity:calc(var(--beam-op) * .35);transform:translateY(-6%) scaleY(.92) rotate(var(--rot,0deg))}
  50%    {opacity:var(--beam-op);            transform:translateY(6%)  scaleY(1.08) rotate(var(--rot,0deg))}
}
/* Mantém a rotação de cada feixe durante o keyframe */
.beam--l1{--rot:14deg}  .beam--l2{--rot:-9deg}
.beam--r1{--rot:-14deg} .beam--r2{--rot:9deg}

/* --- Trilhos laterais com pulso de luz descendo --- */
.rail{
  position:fixed;top:0;bottom:0;width:1px;z-index:2;pointer-events:none;
  opacity:var(--rail-op);
  background:linear-gradient(180deg,transparent,var(--stroke) 15%,var(--stroke) 85%,transparent);
}
.rail--left{left:max(14px,2.2vw)}
.rail--right{right:max(14px,2.2vw)}
.rail span{
  position:absolute;top:0;left:-1px;width:3px;height:130px;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--blue-neon),transparent);
  box-shadow:0 0 18px 3px rgba(34,211,238,.55);
  animation:railRun 6.5s linear infinite;
  will-change:transform;
}
.rail--right span{animation-delay:3.2s;background:linear-gradient(180deg,transparent,var(--blue-royal),transparent);box-shadow:0 0 18px 3px rgba(37,99,235,.55)}
/* transform em vez de "top": animar "top" recalcula layout a cada
   frame; translateY é resolvido só pelo compositor. */
@keyframes railRun{
  0%  {transform:translateY(-140px);opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateY(100vh);opacity:0}
}
/* Só aparecem em telas largas — no mobile roubariam espaço */
@media (max-width:1023px){ .rail{display:none} }

/* ------------------------------------------------------------ 5. PRELOADER */
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;background:var(--bg-900);
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{position:relative;display:grid;place-items:center;width:110px;height:110px}
.preloader__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.07);
  border-top-color:var(--blue-neon);border-right-color:var(--blue-royal);
  animation:spin 1s linear infinite;
}
.preloader__text{
  display:flex;flex-direction:column;align-items:center;line-height:1;
  font-weight:800;letter-spacing:.1em;font-size:1.5rem;
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.preloader__text small{margin-top:4px;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}

/* Progresso de rolagem */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:1000;
  background:var(--grad-blue);box-shadow:var(--glow-neon);
}

/* --------------------------------------------------------------- 6. BOTÕES */
.btn{
  --btn-pad:13px 26px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-pad);border-radius:999px;
  font-size:.94rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn i{font-size:1.2em}
.btn--sm{--btn-pad:9px 18px;font-size:.85rem}
.btn--lg{--btn-pad:16px 34px;font-size:1rem}
.btn--block{width:100%}

.btn--primary{
  background:linear-gradient(120deg,var(--blue-cobalt),var(--blue-royal) 55%,var(--blue-neon));
  background-size:200% 100%;color:#fff;
  box-shadow:0 10px 30px -12px rgba(0,71,255,.9);
}
.btn--primary:hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 18px 44px -14px rgba(34,211,238,.75),var(--glow-neon)}

.btn--ghost{
  background:var(--surface);color:var(--text);
  border:1px solid var(--stroke);backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--blue);color:#fff;background:rgba(37,99,235,.14);transform:translateY(-3px);box-shadow:var(--glow-blue)}

/* Brilho que atravessa o botão no hover */
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(-1px) scale(.98)}
/* Qualquer elemento com efeito magnético (JS) escreve o próprio
   "transform" a cada pointermove — se um :hover/:active de CSS também
   mexesse nele (era o caso de .btn e .contact-card), os dois ficavam
   brigando e o elemento "tremia" ao passar o mouse. */
[data-magnetic]:hover,[data-magnetic].btn:active{transform:none}

.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  border:1px solid var(--stroke);background:var(--surface);color:var(--text-dim);
  transition:all var(--t) var(--ease);
}
.icon-btn:hover{color:var(--blue-neon);border-color:var(--blue);box-shadow:var(--glow-blue)}

/* --- Alternador de tema: sol ⇄ lua --- */
.theme-toggle{position:relative;overflow:hidden}
.theme-toggle i{
  position:absolute;font-size:1.15rem;
  transition:transform .5s var(--ease-back),opacity .35s var(--ease);
}
/* No escuro mostra a lua; no claro mostra o sol */
.theme-toggle__sun {transform:translateY(140%) rotate(90deg);opacity:0}
.theme-toggle__moon{transform:translateY(0)    rotate(0);   opacity:1;color:var(--blue-soft)}
:root[data-theme="light"] .theme-toggle__sun {transform:translateY(0)     rotate(0);   opacity:1;color:#f59e0b}
:root[data-theme="light"] .theme-toggle__moon{transform:translateY(-140%) rotate(-90deg);opacity:0}
.theme-toggle:hover{transform:rotate(12deg) scale(1.08)}

/* --------------------------------------------------------------- 7. NAVBAR */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),height var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.is-stuck{
  height:64px;
  background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--stroke);
  box-shadow:0 8px 32px -18px rgba(0,0,0,.9);
}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.navbar__logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem}
.navbar__logo-mark{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(135deg,var(--blue-cobalt),var(--blue-neon));
  font-weight:800;color:#fff;box-shadow:0 6px 20px -8px rgba(0,71,255,.9);
}
.navbar__logo-text b{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.navbar__links{display:none}
.navbar__link{
  position:relative;font-size:.92rem;font-weight:500;color:var(--text-dim);
  padding:6px 2px;transition:color var(--t) var(--ease);
}
.navbar__link::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:var(--grad-blue);transition:width var(--t) var(--ease);
}
.navbar__link:hover,.navbar__link.is-active{color:#fff}
.navbar__link:hover::after,.navbar__link.is-active::after{width:100%}

.navbar__actions{display:flex;align-items:center;gap:10px}
.navbar__cta{display:none}
.navbar__cta-mobile{margin-top:14px}

.navbar__burger{width:40px;height:40px;display:grid;place-items:center;gap:5px;border-radius:12px;border:1px solid var(--stroke);background:var(--surface)}
.navbar__burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t)}
.navbar__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__burger.is-open span:nth-child(2){opacity:0}
.navbar__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile */
@media (max-width:899px){
  .navbar__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    display:flex;flex-direction:column;gap:6px;padding:24px 22px 32px;
    background:var(--panel-bg);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--stroke);
    transform:translateY(-120%);opacity:0;visibility:hidden;
    transition:transform .45s var(--ease),opacity .35s,visibility .35s;
  }
  .navbar__links.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .navbar__link{display:block;padding:12px 0;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.05)}
}

/* ----------------------------------------------------------------- 8. HERO */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 90px;overflow:hidden;
}
/* (a cena 3D agora é global — ver seção 3b) */
.hero__content{position:relative;z-index:2;text-align:center}

.hero__greet{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  padding:8px 18px;border-radius:999px;
  border:1px solid var(--stroke-blue);background:rgba(37,99,235,.09);
  font-size:.86rem;color:var(--blue-soft);font-weight:500;letter-spacing:.02em;
}
.hero__greet-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-neon);box-shadow:var(--glow-neon);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

.hero__title{
  font-size:clamp(2.4rem,9vw,5.4rem);font-weight:900;line-height:1.02;letter-spacing:-.035em;
  margin-bottom:24px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line__inner{display:block}

.hero__subtitle{
  max-width:640px;margin:0 auto 38px;
  font-size:clamp(1rem,2.4vw,1.16rem);color:var(--text-dim);font-weight:300;
}

.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:64px}

.hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:620px;margin-inline:auto;
  padding:22px 14px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--surface);backdrop-filter:blur(10px);
}
.hero__stats li{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero__stats strong{font-size:clamp(1.4rem,4.5vw,2rem);font-weight:800;background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__stats span{font-size:.74rem;color:var(--text-mute);text-align:center;line-height:1.35}

.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
  transition:color var(--t) var(--ease);
}
.hero__scroll:hover{color:var(--blue-neon)}
.hero__scroll-line{width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-neon));position:relative;overflow:hidden}
.hero__scroll-line::after{content:'';position:absolute;inset:0;background:var(--blue-neon);animation:slide 1.8s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------------------------------------------------------------- 9. SOBRE */
.about{display:grid;gap:48px;align-items:center}

.about__code-wrap{
  position:relative;max-width:440px;margin-inline:auto;
  animation:photoFloat 6s ease-in-out infinite;
}
.about__code-wrap::before{
  content:'';position:absolute;inset:-2px;border-radius:calc(var(--radius) + 6px);
  background:var(--grad-blue);opacity:.55;filter:blur(22px);z-index:0;
}
/* Flutuação contínua e sutil no wrapper; o tilt 3D ao mouse (JS) fica
   no painel em si — em elementos separados para não brigar pelo transform. */
@keyframes photoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* "Editor" de código — sempre escuro nos dois temas, como um terminal/IDE. */
.about__code{
  position:relative;z-index:1;width:100%;border-radius:var(--radius);
  border:1px solid var(--stroke);overflow:hidden;background:#0a0e1a;
  box-shadow:0 30px 70px -30px rgba(0,20,70,.65);
  transition:transform .3s var(--ease);
}
.about__code-bar{
  display:flex;align-items:center;gap:7px;padding:13px 16px;
  background:#0d1322;border-bottom:1px solid rgba(255,255,255,.07);
}
.about__code-dot{width:10px;height:10px;border-radius:50%;flex:none}
.about__code-dot--r{background:#ff5f57}
.about__code-dot--y{background:#febc2e}
.about__code-dot--g{background:#28c840}
.about__code-file{margin-left:6px;font-size:.72rem;color:#64748b;font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace}

.about__code-body{
  position:relative;padding:22px 22px 28px;overflow-x:auto;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.9;white-space:pre;
}
/* Feixe de luz que "varre" o painel de cima a baixo — reforça o clima
   de terminal ativo. transform, não top/background-position, então
   roda só no compositor (ver bug de travamento na rolagem já corrigido
   em outro lugar do site por essa mesma razão). */
.about__code-body::after{
  content:'';position:absolute;inset:-40% 0 auto 0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.09),transparent);
  animation:codeScan 5s ease-in-out infinite;pointer-events:none;
}
@keyframes codeScan{
  0%   {transform:translateY(0)}
  100% {transform:translateY(325%)}
}
.about__code-line{
  padding-left:calc(var(--i,0) * 1.3em);color:#cbd5e1;
  opacity:0;transform:translateX(-14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

.tok-kw{color:#22d3ee}                 /* palavras-chave */
.tok-fn{color:#60a5fa;font-weight:600} /* nomes de função */
.tok-str{color:#4ade80}                /* strings */
.tok-num{color:#f59e0b}                /* números */
.tok-var{color:#e2e8f0}                /* variáveis/parâmetros */

.about__code-cursor{
  display:inline-block;width:7px;height:1em;margin-left:2px;
  background:#22d3ee;vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.about__badge{
  position:absolute;z-index:2;right:-10px;bottom:24px;
  display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:14px;
  background:var(--panel-bg);backdrop-filter:blur(14px);
  border:1px solid var(--stroke-blue);box-shadow:var(--glow-blue);
}
.about__badge i{font-size:1.5rem;color:var(--blue-neon)}
.about__badge strong{display:block;font-size:.9rem;line-height:1.2}
.about__badge span{font-size:.72rem;color:var(--text-mute)}

.about__text p{color:var(--text-dim);margin-bottom:16px}
.about__text p b{color:var(--text);font-weight:600}
.about__list{margin:26px 0 30px;display:grid;gap:12px}
.about__list li{display:flex;align-items:flex-start;gap:11px;color:var(--text-dim);font-size:.95rem}
.about__list i{
  flex:none;width:22px;height:22px;margin-top:2px;display:grid;place-items:center;border-radius:50%;
  background:rgba(37,99,235,.16);color:var(--blue-neon);font-size:.9rem;
}

/* --------------------------------------------------------------- 10. SKILLS */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.skill{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--stroke);background:var(--surface);
  text-align:center;cursor:default;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.skill::before{ /* halo que segue o mouse */
  content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%);
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
  opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none;
}
.skill:hover{transform:translateY(-6px);border-color:var(--blue);background:rgba(37,99,235,.08);box-shadow:var(--glow-blue)}
.skill:hover::before{opacity:1}
.skill i{position:relative;font-size:2.1rem;color:var(--blue-soft);transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.skill:hover i{color:var(--blue-neon);transform:scale(1.12) translateY(-2px)}
.skill span{position:relative;font-size:.88rem;font-weight:600}
.skill small{position:relative;font-size:.7rem;color:var(--text-mute);letter-spacing:.05em;text-transform:uppercase}

/* ================================================= 10b. SCROLL LATERAL
   Usado em #servicos e #projetos.
   • Desktop: o GSAP prende a seção (pin) e desloca o trilho no eixo X.
   • Mobile/reduced-motion: vira swipe nativo com scroll-snap.
   ==================================================================== */
.h-scroll{overflow:hidden}

.h-scroll__viewport{
  width:100%;
  /* Fallback nativo — o JS remove isso quando ativa o pin no desktop */
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:8px;
}
.h-scroll__viewport::-webkit-scrollbar{display:none}

/* Quando o GSAP assume o controle, o scroll nativo é desligado */
.h-scroll.is-pinned .h-scroll__viewport{overflow:hidden;scroll-snap-type:none}

.h-track{
  display:flex;align-items:stretch;gap:22px;
  padding-inline:max(22px,calc((100vw - var(--container)) / 2));
  width:max-content;will-change:transform;
}
.h-track > *{
  flex:0 0 auto;
  width:min(340px,78vw);
  scroll-snap-align:center;
}

/* Rodapé do trilho: dica + barra de progresso horizontal */
.h-scroll__foot{
  display:flex;align-items:center;gap:18px;justify-content:center;
  margin-top:28px;
}
.h-hint{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);
}
.h-hint i{font-size:1.1rem;color:var(--blue-neon);animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.h-bar{
  position:relative;height:3px;width:min(260px,40vw);border-radius:3px;
  background:var(--stroke);overflow:hidden;
}
.h-bar span{
  position:absolute;inset:0 auto 0 0;width:12%;border-radius:3px;
  background:var(--grad-blue);box-shadow:var(--glow-neon);
}

/* ------------------------------------------------------------- 11. SERVIÇOS */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
/* Dentro do trilho horizontal o grid vira flex */
.h-track.services,.h-track.projects{display:flex}
.service{
  position:relative;padding:32px 26px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--surface);overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.service::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none;
  background:linear-gradient(160deg,rgba(37,99,235,.14),transparent 60%);
}
.service:hover{transform:translateY(-7px);border-color:var(--blue);box-shadow:var(--glow-blue)}
.service:hover::after{opacity:1}
.service__icon{
  position:relative;z-index:1;width:52px;height:52px;display:grid;place-items:center;margin-bottom:18px;
  border-radius:14px;font-size:1.6rem;color:#fff;
  background:linear-gradient(135deg,var(--blue-cobalt),var(--blue-neon));
  box-shadow:0 10px 26px -12px rgba(0,71,255,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  animation:iconPulse 3.4s ease-in-out infinite;
}
/* O ícone gira e "salta" para fora do plano ao passar o mouse no card */
.service:hover .service__icon{
  transform:perspective(600px) rotateY(18deg) translateZ(10px) scale(1.08);
  box-shadow:0 16px 34px -14px rgba(0,71,255,1);
}
@keyframes iconPulse{
  0%,100%{box-shadow:0 10px 26px -12px rgba(0,71,255,.9)}
  50%    {box-shadow:0 10px 30px -8px rgba(34,211,238,.85)}
}
.service h3{position:relative;z-index:1;font-size:1.12rem;font-weight:700;margin-bottom:10px}
.service p{position:relative;z-index:1;color:var(--text-dim);font-size:.93rem}

/* ------------------------------------------------------------- 12. PROJETOS */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.filter{
  padding:8px 18px;border-radius:999px;font-size:.85rem;font-weight:500;
  border:1px solid var(--stroke);background:var(--surface);color:var(--text-dim);
  transition:all var(--t) var(--ease);
}
.filter:hover{color:#fff;border-color:var(--blue)}
.filter.is-active{background:linear-gradient(120deg,var(--blue-cobalt),var(--blue-royal));color:#fff;border-color:transparent;box-shadow:0 8px 24px -12px rgba(0,71,255,.9)}

.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
/* Cards de projeto são um pouco mais largos no trilho */
.h-track.projects > *{width:min(390px,82vw)}

.project{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--stroke);
  background:var(--surface);backdrop-filter:blur(6px);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.project:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 24px 60px -28px rgba(0,71,255,.9),var(--glow-blue)}
.project.is-hidden{display:none}

.project__thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-700)}
.project__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter var(--t) var(--ease)}
.project:hover .project__thumb img{transform:scale(1.07);filter:brightness(1.08)}
.project__thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,6,13,.8))}
/* Placeholder quando não há imagem */
.project__thumb--empty{display:grid;place-items:center;color:var(--text-mute);gap:8px;font-size:.75rem;font-family:monospace}
.project__thumb--empty i{font-size:2.6rem;color:var(--blue-royal)}

.project__tag{
  position:absolute;z-index:2;top:14px;left:14px;
  padding:5px 12px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel-bg);backdrop-filter:blur(8px);border:1px solid var(--stroke-blue);color:var(--blue-soft);
}

.project__body{display:flex;flex-direction:column;flex:1;padding:24px}
.project__title{font-size:1.15rem;font-weight:700;margin-bottom:9px}
.project__desc{color:var(--text-dim);font-size:.92rem;margin-bottom:18px;flex:1}
.project__stack{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.project__stack span{
  padding:4px 11px;border-radius:8px;font-size:.72rem;font-weight:500;
  background:rgba(37,99,235,.12);border:1px solid var(--stroke-blue);color:var(--blue-soft);
}
.project__link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:600;color:var(--blue-soft);
  transition:gap var(--t) var(--ease),color var(--t) var(--ease);
}
.project__link:hover{gap:14px;color:var(--blue-neon)}

/* Controles do modo edição dentro do card */
.project__admin{display:none;gap:8px;padding:0 24px 20px}
body.is-editing .project__admin{display:flex}

/* -------------------------------------------------------------- 13. FAIXA CTA */
.cta-band{position:relative;z-index:1;padding:0 0 96px}
.cta-band__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;
  padding:48px 32px;border-radius:26px;overflow:hidden;position:relative;
  border:1px solid var(--stroke-blue);
  background:linear-gradient(135deg,rgba(0,71,255,.18),rgba(34,211,238,.08));
  box-shadow:0 30px 80px -40px rgba(0,71,255,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cta-band__inner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 0%,rgba(34,211,238,.25),transparent 55%);
}
.cta-band h2{position:relative;font-size:clamp(1.5rem,4.5vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.cta-band p{position:relative;color:var(--text-dim);margin-top:8px}
.cta-band .btn{position:relative}

/* --------------------------------------------------------------- 14. RODAPÉ */
.footer{
  position:relative;z-index:1;padding:64px 0 40px;
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,transparent,rgba(37,99,235,.05));
  overflow:hidden;              /* recorta os meteoros nas bordas */
}
.footer > .container{position:relative;z-index:1}   /* conteúdo acima da chuva */

/* ---------- Chuva de meteoros (CSS puro, sem custo de JS) ----------
   O traço é uma barra vertical com degradê (cauda → cabeça). Girando a
   barra, o "para baixo" dela passa a apontar na diagonal; o translate
   acontece no sistema do pai, então basta mover na MESMA direção para
   que a cauda fique alinhada com o movimento. */
.meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

.meteor{
  position:absolute;top:-140px;
  width:2px;height:110px;border-radius:2px;
  background:linear-gradient(to bottom,transparent,rgba(96,165,250,.75),var(--blue-neon));
  filter:drop-shadow(0 0 6px rgba(34,211,238,.75));
  opacity:0;
  animation:meteorFall linear infinite;
}
/* Cabeça brilhante na ponta de baixo */
.meteor::after{
  content:'';position:absolute;left:50%;bottom:-3px;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 3px rgba(34,211,238,.9),0 0 20px 6px rgba(37,99,235,.5);
}

/* rotate(30deg) faz a ponta apontar para baixo-esquerda: o vetor (0,1)
   girado 30° vira (-0.5, 0.87). O translate segue esse mesmo vetor. */
@keyframes meteorFall{
  0%   {transform:translate(0,0) rotate(30deg);opacity:0}
  8%   {opacity:1}
  75%  {opacity:1}
  100% {transform:translate(-360px,624px) rotate(30deg);opacity:0}
}

/* Cada meteoro com posição, ritmo e tamanho próprios — sem isso a chuva
   vira uma fileira sincronizada, que denuncia a animação. */
.meteor:nth-child(1){left:8%;  animation-duration:3.4s; animation-delay:0s}
.meteor:nth-child(2){left:22%; animation-duration:4.8s; animation-delay:1.4s; height:80px;  opacity:.8}
.meteor:nth-child(3){left:35%; animation-duration:2.9s; animation-delay:2.6s}
.meteor:nth-child(4){left:48%; animation-duration:5.4s; animation-delay:.7s;  height:140px}
.meteor:nth-child(5){left:61%; animation-duration:3.8s; animation-delay:3.3s; height:70px}
.meteor:nth-child(6){left:74%; animation-duration:4.2s; animation-delay:1.9s}
.meteor:nth-child(7){left:87%; animation-duration:3.1s; animation-delay:4.1s; height:95px}
.meteor:nth-child(8){left:97%; animation-duration:5.9s; animation-delay:2.2s; height:120px}
.meteor:nth-child(9){left:15%; animation-duration:4.5s; animation-delay:5.2s; height:65px}
.meteor:nth-child(10){left:68%;animation-duration:6.3s; animation-delay:6.4s; height:150px}

/* No tema claro o traço branco/ciano some — escurece e reduz o brilho */
:root[data-theme="light"] .meteor{
  background:linear-gradient(to bottom,transparent,rgba(37,99,235,.5),#0e7490);
  filter:drop-shadow(0 0 4px rgba(14,116,144,.45));
}
:root[data-theme="light"] .meteor::after{
  background:#0e7490;
  box-shadow:0 0 8px 2px rgba(14,116,144,.6);
}

/* Celular: menos traços e trajeto mais curto, proporcional à tela */
@media (max-width:767px){
  .meteor:nth-child(n+6){display:none}
  @keyframes meteorFall{
    0%   {transform:translate(0,0) rotate(30deg);opacity:0}
    10%  {opacity:1}
    70%  {opacity:1}
    100% {transform:translate(-200px,346px) rotate(30deg);opacity:0}
  }
}
.footer__top{display:grid;gap:36px;padding-bottom:36px}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__brand strong{display:block;font-size:1rem}
.footer__brand span{font-size:.83rem;color:var(--text-mute)}

.footer__contacts{display:grid;gap:12px}
.contact-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--stroke);background:var(--surface);height:100%;box-sizing:border-box;
  perspective:700px;   /* dá profundidade ao rotateX/rotateY do tilt 3D (JS) */
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.contact-card:hover{border-color:var(--blue);background:rgba(37,99,235,.1);box-shadow:var(--glow-blue)}
/* `min-width:0` é obrigatório: sem isso o filho flex não encolhe abaixo do
   conteúdo, e "height:100%" no card acima garante que os três fiquem com
   a mesma altura na grade (sem isso, o e-mail — mais comprido — quebrava
   em duas linhas e ficava mais alto que WhatsApp/GitHub). */
.contact-card > div{min-width:0;flex:1}
.contact-card i{font-size:1.5rem;flex:none;color:var(--blue-neon)}
.contact-card span{display:block;font-size:.72rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em}
.contact-card strong{
  display:block;font-size:.94rem;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;   /* trunca em vez de
    quebrar linha — era o que deixava o card do e-mail mais alto que os outros */
}

.footer__bottom{
  display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
  padding-top:28px;border-top:1px solid var(--stroke);
  font-size:.83rem;color:var(--text-mute);
}

/* ------------------------------------------------- 15. WHATSAPP FLUTUANTE */
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:1.8rem;
  box-shadow:0 12px 30px -10px rgba(34,197,94,.8);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.whatsapp-float::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,.6);
  animation:ripple 2.2s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.whatsapp-float:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 18px 40px -12px rgba(34,197,94,.9)}

/* ------------------------------------------------------ 16. SCROLL REVEAL */
/* Estado inicial — o GSAP assume a partir daqui */
.reveal{opacity:0;will-change:transform,opacity}
.no-motion .reveal{opacity:1!important;transform:none!important}

/* Traço luminoso que varre o título da seção quando ele entra na tela */
.section__title{position:relative}
.section__head.is-revealed .section__title::after{
  content:'';position:absolute;left:50%;bottom:-14px;height:2px;width:0;
  transform:translateX(-50%);border-radius:2px;
  background:var(--grad-blue);box-shadow:var(--glow-neon);
  animation:titleSweep 1s var(--ease) .35s forwards;
}
@keyframes titleSweep{to{width:88px}}

/* Realce lateral que "acende" nos blocos que entram pela esquerda/direita */
[data-reveal="left"],[data-reveal="right"]{position:relative}

/* --------------------------------------------------------------- 17. MODAL */
.modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:22px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,4,10,.82);backdrop-filter:blur(6px);animation:fadeIn .3s var(--ease)}
.modal__box{
  position:relative;width:100%;max-width:400px;padding:36px 30px;border-radius:22px;text-align:center;
  background:var(--panel-bg);
  border:1px solid var(--stroke-blue);box-shadow:0 40px 100px -40px rgba(0,71,255,.9);
  animation:popIn .4s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--text-mute);font-size:1.4rem;transition:all var(--t)}
.modal__close:hover{color:#fff;background:var(--surface-2)}
.modal__icon{font-size:2.6rem;color:var(--blue-neon);margin-bottom:10px;display:block}
.modal__box h3{font-size:1.3rem;font-weight:700}
.modal__lead{font-size:.88rem;color:var(--text-dim);margin:8px 0 24px}

.field{display:block;text-align:left;margin-bottom:14px}
.field span{display:block;font-size:.78rem;font-weight:500;color:var(--text-dim);margin-bottom:7px}
.field input{
  width:100%;padding:13px 16px;border-radius:12px;
  background:var(--surface);border:1px solid var(--stroke);color:var(--text);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field input::placeholder{color:var(--text-mute)}
.field input:focus{outline:none;border-color:var(--blue);background:rgba(37,99,235,.08);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.form-error{font-size:.82rem;color:#f87171;margin-bottom:12px;text-align:left}
.form-error[hidden]{display:none}

/* Campo com prefixo fixo "assets/" */
.field__prefixed{
  display:flex;align-items:stretch;border-radius:12px;overflow:hidden;
  border:1px solid var(--stroke);background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t);
}
.field__prefixed:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.field__prefix{
  display:flex;align-items:center;padding:0 12px;flex:none;
  font-family:monospace;font-size:.85rem;color:var(--text-mute);
  background:rgba(255,255,255,.04);border-right:1px solid var(--stroke);
}
.field__prefixed input{
  flex:1;min-width:0;border:0;background:none;padding:13px 14px;
  font-family:monospace;
}
.field__prefixed input:focus{outline:none;box-shadow:none}
.field__hint{
  font-size:.74rem;color:var(--text-mute);text-align:left;
  margin:-6px 0 14px;font-family:monospace;
}

/* Pré-visualização da imagem encontrada */
.img-preview{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:10px;
  border-radius:12px;border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.08);
}
.img-preview[hidden]{display:none}
.img-preview img{width:64px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.img-preview span{font-size:.8rem;color:#4ade80;font-weight:500}

.modal__actions{display:grid;gap:9px}

/* ------------------------------------------------------ 18. MODO EDIÇÃO */
.editbar{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1100;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:12px 18px;border-radius:18px;max-width:calc(100vw - 32px);
  background:var(--panel-bg);backdrop-filter:blur(18px);
  border:1px solid var(--stroke-blue);box-shadow:0 20px 60px -24px rgba(0,71,255,.9);
  animation:popIn .4s var(--ease);
}
.editbar[hidden]{display:none}
.editbar__tag{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--blue-neon)}
.editbar__hint{font-size:.78rem;color:var(--text-mute)}
.editbar__actions{display:flex;gap:8px}

/* --- Campos de texto editáveis ---
   outline em vez de border: não ocupa espaço e por isso não desloca o
   layout ao entrar no modo edição. offset pequeno para não colidir com
   elementos vizinhos em caixas apertadas (era 4px e espremia os cards). */
body.is-editing [data-edit]{
  outline:1px dashed rgba(34,211,238,.5);outline-offset:1px;border-radius:3px;
  cursor:text;transition:background var(--t);
  min-width:1.5ch;                 /* campo vazio continua clicável */
}
body.is-editing [data-edit]:hover{background:rgba(34,211,238,.09)}
body.is-editing [data-edit]:focus{
  outline:2px solid var(--blue-neon);background:rgba(34,211,238,.1);
}
/* Editáveis dentro de flex não podem virar 0px */
body.is-editing .contact-card [data-edit]{display:block;min-width:0}

/* --- Imagens editáveis --- */
body.is-editing [data-edit-img]{
  outline:2px dashed rgba(34,211,238,.55);outline-offset:-2px;
  cursor:pointer;transition:filter var(--t);
}
body.is-editing [data-edit-img]:hover{filter:brightness(1.15) saturate(1.2)}

/* --- Caixas móveis / redimensionáveis --- */
body.is-editing [data-box]{
  outline:1px solid rgba(59,130,246,.35);outline-offset:2px;
  border-radius:var(--radius-sm);
}
body.is-editing [data-box].is-tweaked{outline-color:rgba(34,211,238,.85)}

.box-handle{
  position:absolute;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:var(--blue-royal);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.7);
}
body.is-editing .box-handle{display:flex}

/* Alça de mover: pega no canto superior esquerdo */
.box-handle--move{
  top:-11px;left:-11px;width:24px;height:24px;border-radius:7px;
  cursor:grab;font-size:1rem;
}
.box-handle--move:active{cursor:grabbing}

/* Alça de redimensionar: canto inferior direito */
.box-handle--size{
  bottom:-11px;right:-11px;width:22px;height:22px;border-radius:6px;
  cursor:nwse-resize;font-size:.85rem;
  background:var(--blue-neon);color:#04060d;
}

/* Alça de restaurar: some quando a caixa está no lugar original */
.box-handle--reset{
  top:-11px;left:18px;width:24px;height:24px;border-radius:7px;
  cursor:pointer;font-size:1rem;background:#475569;
}
[data-box]:not(.is-tweaked) .box-handle--reset{display:none!important}

/* Enquanto arrasta: sem seleção de texto e sem transição atrapalhando */
body.is-dragging{user-select:none;cursor:grabbing}
body.is-dragging [data-box]{transition:none!important}

.admin-only{display:none;justify-content:center;margin-top:32px}
body.is-editing .admin-only{display:flex}

/* --------------------------------------------------------------- 19. TOAST */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(16px);
  z-index:1300;padding:13px 22px;border-radius:14px;font-size:.88rem;font-weight:500;
  background:var(--panel-bg);backdrop-filter:blur(14px);
  border:1px solid var(--stroke-blue);box-shadow:var(--glow-blue);
  opacity:0;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.toast[hidden]{display:none}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================== 19b. PERFORMANCE / MOBILE
   ==================================================================== */

/* O rodapé só é renderizado quando chega perto da tela.
   NÃO aplicar em #servicos/#projetos: content-visibility pula o layout e
   o ScrollTrigger mediria o trilho horizontal errado, quebrando o pin. */
#contato{
  content-visibility:auto;
  contain-intrinsic-size:auto 620px;
}

/* Só marca will-change no que realmente vai animar, e só no desktop.
   No mobile, will-change demais estoura a memória de GPU. */
@media (min-width:1024px){
  .h-track{will-change:transform}
  .reveal{will-change:opacity,transform}
}
@media (max-width:1023px){
  .h-track,.reveal{will-change:auto}
}

/* -------------------------------------------------------------- MOBILE */
@media (max-width:767px){
  :root{--nav-h:64px}

  /* Menos efeitos caros: blur grande e backdrop-filter derrubam o FPS
     em GPU de celular. Os glows viram manchas simples, sem animação. */
  .bg-glow{filter:blur(70px);animation:none;opacity:calc(var(--glow-op) * .7)}
  .bg-glow--3{display:none}
  .beam{filter:blur(34px);animation:none;opacity:calc(var(--beam-op) * .55)}
  .beam--l2,.beam--r2{display:none}
  .bg-grid__pattern{animation:none;background-size:44px 44px}
  .service__icon{animation:none}

  /* Painel de código: fonte e entrelinha menores para caber sem rolagem
     horizontal nas linhas mais longas, e o painel não ficar gigante. */
  .about__code-body{font-size:.68rem;line-height:1.65;padding:16px 16px 20px}
  .about__code-line{padding-left:calc(var(--i,0) * 1.05em)}

  .hero{padding:calc(var(--nav-h) + 34px) 0 64px;min-height:92svh}
  .hero__actions{gap:10px;margin-bottom:44px}
  .hero__actions .btn{width:100%}         /* alvos de toque cheios */
  .hero__subtitle{margin-bottom:30px}

  /* 3 colunas de métrica ficavam apertadas: vira 1 por linha, em faixa */
  .hero__stats{grid-template-columns:1fr;gap:0;padding:6px 14px}
  .hero__stats li{
    flex-direction:row;justify-content:space-between;align-items:center;
    gap:14px;padding:12px 2px;
  }
  .hero__stats li + li{border-top:1px solid var(--stroke)}
  .hero__stats span{text-align:right;font-size:.78rem}

  .section{padding:68px 0}
  .section__head{margin-bottom:38px}

  /* Cards do trilho quase cheios, com um respiro para o próximo aparecer */
  .h-track{gap:14px;padding-inline:18px}
  .h-track > *{width:86vw}
  .h-track.projects > *{width:86vw}
  .h-scroll__foot{margin-top:20px;gap:12px}
  .h-bar{width:100%}

  .skills{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .skill{padding:18px 10px;gap:7px}
  .skill i{font-size:1.7rem}
  .skill span{font-size:.8rem}
  .skill small{font-size:.62rem}

  .about{gap:34px}
  .about__badge{right:auto;left:50%;transform:translateX(-50%);bottom:-18px;white-space:nowrap}
  .about__code-wrap{margin-bottom:26px}

  .cta-band{padding-bottom:68px}
  .cta-band__inner{padding:34px 22px}

  .contact-card{padding:14px 16px}
  .contact-card strong{font-size:.85rem;word-break:break-word}

  /* O botão flutuante não pode cobrir a barra de edição */
  .whatsapp-float{width:50px;height:50px;font-size:1.55rem;right:14px;bottom:14px}
  body.is-editing .whatsapp-float{bottom:104px}
  .editbar{bottom:12px;padding:10px 14px;gap:8px}
  .editbar__hint{display:none}
  .toast{bottom:84px;width:calc(100vw - 32px);text-align:center}

  /* Respeita o recorte da tela (notch) e a barra de gestos */
  .footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}

/* Telas bem estreitas */
@media (max-width:379px){
  .hero__title{font-size:2.05rem}
  .navbar__logo-text{font-size:.9rem}
  .h-track > *{width:90vw}
}

/* Altura curta em paisagem: o hero não pode empurrar tudo para fora */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 28px) 0 48px}
  .hero__stats,.hero__scroll{display:none}
}

/* ---------------------------------------------------------- 20. BREAKPOINTS */
@media (min-width:600px){
  .footer__contacts{grid-template-columns:repeat(2,1fr)}
  .footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}

@media (min-width:900px){
  .section{padding:120px 0}
  .navbar__links{display:flex;align-items:center;gap:30px}
  .navbar__cta-mobile{display:none}
  .navbar__cta{display:inline-flex}
  .navbar__burger{display:none}
  .about{grid-template-columns:.85fr 1fr;gap:64px}
  .about__code-wrap{margin-inline:0}
  .footer__top{grid-template-columns:1fr 1.4fr;align-items:center}
  .footer__contacts{grid-template-columns:repeat(3,1fr)}
  .cta-band__inner{flex-direction:row;justify-content:space-between;text-align:left;padding:52px 56px}
}

@media (min-width:1100px){
  .hero__stats{gap:24px}
}

/* --------------------------------------------- 21. ACESSIBILIDADE / MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .scene,.scene__veil,.rail,.beams,.meteors{display:none}
  /* Sem pin: o trilho volta a ser swipe nativo */
  .h-scroll.is-pinned .h-scroll__viewport{overflow-x:auto;scroll-snap-type:x mandatory}
}

/* Impressão */
@media print{
  .navbar,.whatsapp-float,.editbar,.scene,.scene__veil,.bg-glow,.bg-grid,
  .beams,.rail,.meteors,.h-scroll__foot,.preloader{display:none!important}
  body{background:#fff;color:#000}
  .h-track{display:grid!important;grid-template-columns:repeat(2,1fr);width:auto}
}