:root {
  --bg: #050505;
  --cyan: #22d3ee;
  --green: #4ade80;
  --purple: #a78bfa;
  --text: #e2e8f0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

.font-mono-tech { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Grid tecnológico de fundo */
.tech-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

#particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Luz que segue o mouse */
#cursor-glow {
  position: fixed; top: 0; left: 0; width: 500px; height: 500px;
  margin: -250px 0 0 -250px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(34,211,238,.12), transparent 65%);
  transition: transform .08s linear;
}

/* Glassmorphism */
.glass {
  background: rgba(15, 17, 24, .55);
  border: 1px solid rgba(148, 163, 184, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
}
.glass-hover { transition: border-color .3s, box-shadow .3s, transform .3s; }
.glass-hover:hover {
  border-color: rgba(34,211,238,.5);
  box-shadow: 0 0 28px rgba(34,211,238,.15);
  transform: translateY(-4px);
}

/* Texto com glow */
.glow-text {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(34,211,238,.35));
}

/* Botões neon */
.btn-neon {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 10px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace; font-size: .9rem;
  border: 1px solid var(--cyan); color: var(--cyan);
  box-shadow: 0 0 12px rgba(34,211,238,.3), inset 0 0 12px rgba(34,211,238,.08);
  transition: all .3s;
}
.btn-neon:hover {
  background: var(--cyan); color: #000;
  box-shadow: 0 0 30px rgba(34,211,238,.7);
}
.btn-neon.alt { border-color: var(--purple); color: var(--purple);
  box-shadow: 0 0 12px rgba(167,139,250,.3), inset 0 0 12px rgba(167,139,250,.08); }
.btn-neon.alt:hover { background: var(--purple); color: #000; box-shadow: 0 0 30px rgba(167,139,250,.7); }

/* Cursor de digitação */
.caret { display: inline-block; width: .6ch; background: var(--green); margin-left: 2px;
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Barras de diagnóstico */
.bar { height: 6px; background: rgba(148,163,184,.15); border-radius: 99px; overflow: hidden; }
.bar > span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 10px var(--cyan);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}

/* Reveal ao scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s, transform .8s; }
.reveal.visible { opacity: 1; transform: none; }

/* Timeline */
.timeline { position: relative; border-left: 1px dashed rgba(34,211,238,.4); }
.timeline-item::before {
  content: ''; position: absolute; left: -6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--cyan); box-shadow: 0 0 10px var(--cyan);
}

/* Linha de scan no avatar */
.scan { position: relative; overflow: hidden; }
.scan::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--cyan); box-shadow: 0 0 14px var(--cyan);
  animation: scan 3.5s linear infinite;
}
@keyframes scan { from { top: 0; } to { top: 100%; } }

::selection { background: rgba(34,211,238,.35); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Foto grande e escura ao fundo, como uma silhueta escondida no sistema */
.hero-photo {
  position: absolute; top: 50%; z-index: 0; pointer-events: none;
  transform: translate(var(--tx, 0px), calc(-50% + var(--ty, 0px))); /* parallax via JS */
  transition: transform .25s ease-out;
  /* O contêiner tem a mesma proporção da imagem (1080x1259), então glow, máscara e scan acompanham a foto */
  right: 3%; height: min(72%, 820px); aspect-ratio: 1080 / 1259; max-width: 100%;
}

.hero-photo > img {
  opacity: .3;
  position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(0.45) contrast(1.25);
  /* máscara radial: dissolve todas as bordas (topo, laterais e base) dentro da própria imagem */
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 45%, transparent 100%);
}
@media (max-width: 767px) { .hero-photo > img { opacity: .3; } }

/* Marca d'água (lâmpada cinza escuro invertida para ficar clara no fundo preto) */
.bg-mark {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(460px, 70vw); opacity: .07; filter: invert(1);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 75%);
  mask-image: radial-gradient(circle, #000 35%, transparent 75%);
  pointer-events: none;
}

/* ============ TRAÇOS ÚNICOS ============ */

/* --- Lanterna: a foto "acesa" só aparece perto do cursor --- */
.photo-light {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 45%, transparent 100%);
}
.photo-light img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(1.15) contrast(1.15);
  --r: 170px;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  transition: --r .4s;
}
/* comando "luz" no terminal: acende a foto inteira */
body.lit .photo-light img {
  -webkit-mask-image: none; mask-image: none; filter: none; /* luz acesa: foto em cores originais */
}
body.lit .hero-photo { filter: drop-shadow(0 0 40px rgba(34,211,238,.35)); }

/* --- Teclas --- */
.kbd {
  display: inline-block; padding: 0 .4rem; border: 1px solid rgba(148,163,184,.3);
  border-bottom-width: 2px; border-radius: 5px; font-size: .7rem; line-height: 1.4;
  font-family: 'JetBrains Mono', monospace; color: #94a3b8;
}

/* --- Cards: spotlight na borda + tilt 3D (variáveis via JS) --- */
.glass-hover { position: relative; transform-style: preserve-3d; will-change: transform; }
.glass-hover::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(34,211,238,.16), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.glass-hover:hover::before { opacity: 1; }
.glass-hover:hover { transform: none; } /* o tilt é controlado por JS */

/* --- HUD: barra de progresso e pontos de seção --- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 70;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green));
  box-shadow: 0 0 10px var(--cyan);
}
.hud-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: 18px; }
@media (min-width: 1024px) { .hud-dots { display: flex; } }
.hud-dots a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hud-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #475569; background: transparent; transition: all .3s; }
.hud-dots b { font: 400 .7rem 'JetBrains Mono', monospace; color: var(--cyan); opacity: 0; transform: translateX(6px); transition: all .3s; white-space: nowrap; }
.hud-dots a:hover b, .hud-dots a.active b { opacity: 1; transform: none; }
.hud-dots a.active i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* --- Decodificação de texto --- */
.decode { white-space: pre; }

/* --- Paleta de comandos (Ctrl+K) --- */
.palette { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 16vh; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.palette.hidden { display: none; }
.palette-box { width: min(92vw, 560px); overflow: hidden; box-shadow: 0 0 60px rgba(34,211,238,.18); }
.palette-list { max-height: 50vh; overflow-y: auto; padding: .4rem; }
.palette-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 8px; cursor: pointer; color: #cbd5e1; }
.palette-list li small { color: #64748b; }
.palette-list li.sel, .palette-list li:hover { background: rgba(34,211,238,.12); color: var(--cyan); }

/* --- Boot "FS.OS" --- */
.boot { position: fixed; inset: 0; z-index: 100; background: #050505; display: flex; align-items: center; justify-content: center;
  transition: opacity .6s, visibility .6s; }
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { width: min(90vw, 460px); position: relative; }
.boot-bulb { position: absolute; right: -10px; top: -90px; width: 90px; opacity: .08; filter: invert(1); }
.boot-log { font: 400 .8rem/1.7 'JetBrains Mono', monospace; color: var(--green); min-height: 9.5em; white-space: pre-wrap; margin: 0; }
.boot-bar { height: 3px; background: rgba(148,163,184,.15); border-radius: 9px; overflow: hidden; margin-top: 1rem; }
.boot-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow: 0 0 10px var(--cyan); }
.boot-skip { margin-top: 1rem; font: 400 .7rem 'JetBrains Mono', monospace; color: #475569; background: none; border: 0; cursor: pointer; }
.boot-skip:hover { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

/* ============ EVOLUÇÃO ============ */

/* --- Interruptor de luz (lâmpada FS no menu) --- */
.lamp { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(148,163,184,.25); background: rgba(15,17,24,.5); transition: all .3s; }
.lamp img { width: 18px; height: 18px; object-fit: contain; filter: invert(1) brightness(.8); transition: filter .3s; }
.lamp:hover { border-color: #fbbf24; }
.lamp[aria-pressed="true"] { border-color: #fbbf24; background: rgba(251,191,36,.15); box-shadow: 0 0 18px rgba(251,191,36,.55); }
.lamp[aria-pressed="true"] img { filter: invert(1) sepia(1) saturate(6) hue-rotate(5deg) brightness(1.1); }

/* --- Luz acesa muda o clima do site --- */
body { transition: background-color .6s; }
body.lit #cursor-glow { background: radial-gradient(circle, rgba(251,191,36,.16), transparent 65%); }
body.lit .tech-grid {
  background-image:
    linear-gradient(rgba(251,191,36,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,191,36,.07) 1px, transparent 1px);
}
body.lit .bg-mark { opacity: .5; filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) drop-shadow(0 0 40px rgba(251,191,36,.8)); }
body.lit .hero-photo { filter: drop-shadow(0 0 40px rgba(251,191,36,.35)); }
.bg-mark { transition: opacity .8s, filter .8s; }

/* --- Cursor em anel --- */
.cursor-ring { position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(34,211,238,.6); border-radius: 50%; pointer-events: none; z-index: 120; opacity: 0;
  transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s, opacity .3s; }
.cursor-ring.on { opacity: 1; }
.cursor-ring.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(34,211,238,.1); border-color: var(--cyan); }
body.lit .cursor-ring { border-color: rgba(251,191,36,.7); }
@media (pointer: coarse) { .cursor-ring { display: none; } }

/* --- Botões magnéticos --- */
.btn-neon { will-change: transform; }

/* --- Venn: Código ∩ Infra ∩ Negócios --- */
.venn { overflow: visible; }
.venn-c circle { mix-blend-mode: screen; stroke-width: 1.5; transition: fill-opacity .4s, stroke-opacity .4s, filter .4s; }
.venn-code circle { fill: rgba(34,211,238,.18); stroke: var(--cyan); }
.venn-infra circle { fill: rgba(167,139,250,.18); stroke: var(--purple); }
.venn-biz circle { fill: rgba(74,222,128,.18); stroke: var(--green); }
.venn-c { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: venn-float 7s ease-in-out infinite; }
.venn-infra { animation-delay: -2.3s; } .venn-biz { animation-delay: -4.6s; }
@keyframes venn-float { 50% { transform: translateY(-6px); } }
.venn-c:hover circle { fill-opacity: 1; filter: drop-shadow(0 0 22px currentColor); }
.venn-code:hover circle { filter: drop-shadow(0 0 22px rgba(34,211,238,.8)); }
.venn-infra:hover circle { filter: drop-shadow(0 0 22px rgba(167,139,250,.8)); }
.venn-biz:hover circle { filter: drop-shadow(0 0 22px rgba(74,222,128,.8)); }
.venn-t { fill: #e2e8f0; font: 600 12px 'JetBrains Mono', monospace; text-anchor: middle; letter-spacing: .12em; pointer-events: none; }
.venn-core circle { fill: #050505; stroke: #e2e8f0; stroke-width: 1.5; filter: drop-shadow(0 0 14px rgba(226,232,240,.6)); animation: core-pulse 3s ease-in-out infinite; }
@keyframes core-pulse { 50% { filter: drop-shadow(0 0 26px rgba(226,232,240,.95)); } }
.venn-fs { fill: #e2e8f0; font: 800 18px 'JetBrains Mono', monospace; text-anchor: middle; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .venn-c, .venn-core circle { animation: none; } }