/* ==========================================================================
   LAUDIX · BASE
   Reset, tipografia, layout, malha blueprint e utilitários.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--lx-base);
  color:var(--lx-text);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:var(--lh-normal);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Foco visível, consistente e legível sobre fundo escuro */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lx-gold);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

::selection{ background:var(--lx-gold-a40); color:#fff; }

/* Scrollbar — fina, técnica */
*{ scrollbar-width:thin; scrollbar-color:var(--lx-line-2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--lx-line-2);
  border-radius:99px;
  border:3px solid var(--lx-base);
}
*::-webkit-scrollbar-thumb:hover{ background:var(--lx-line-3); }

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--f-display);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--lx-text);
  text-wrap:balance;
}

h1{ font-size:var(--t-4xl); font-weight:800; line-height:var(--lh-tight); letter-spacing:var(--ls-tighter); }
h2{ font-size:var(--t-3xl); font-weight:750; line-height:1.08; letter-spacing:var(--ls-tighter); }
h3{ font-size:var(--t-xl); }
h4{ font-size:var(--t-lg); }

p{ margin:0; text-wrap:pretty; }

strong,b{ font-weight:600; color:var(--lx-text); }
em{ font-style:normal; }

/* Mono — a voz do sistema */
.mono,
.k,
[data-mono]{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  font-variant-ligatures:none;
}

/* Rótulo técnico: [ CHAVE: VALOR ] */
.k{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  color:var(--lx-text-3);
  white-space:nowrap;
}
.k::before{ content:'[ '; color:var(--lx-text-4); }
.k::after{  content:' ]'; color:var(--lx-text-4); }
.k--gold{ color:var(--lx-gold); }
.k--ok{ color:var(--lx-ok); }
.k--alert{ color:var(--lx-alert); }

/* Texto de apoio */
.lead{
  font-size:var(--t-lg);
  line-height:var(--lh-relaxed);
  color:var(--lx-text-2);
  max-width:var(--maxw-text);
  font-weight:400;
}
.muted{ color:var(--lx-text-2); }
.dim{ color:var(--lx-text-3); }

/* Destaque em âmbar dentro de título */
.hl{ color:var(--lx-gold); }
.hl-ok{ color:var(--lx-ok); }
/* Sublinhado técnico — linha de cota, não grifo */
.hl-u{
  position:relative;
  white-space:nowrap;
}
.hl-u::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:.06em;
  height:1px;
  background:var(--lx-gold);
  transform-origin:left;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--text{ max-width:calc(var(--maxw-text) + var(--gutter) * 2); }
.wrap--wide{ max-width:1560px; }

section{ position:relative; }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,5vw,80px); }

/* Cabeçalho de seção — a "etiqueta de prancha" */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--sp-6) clamp(24px,5vw,72px);
  align-items:end;
  margin-bottom:clamp(40px,5vw,72px);
}
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; align-items:start; }
}
.sec-head__idx{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
  color:var(--lx-text-3);
}
.sec-head__idx::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--lx-line-2), transparent);
}
.sec-head h2{ max-width:20ch; }
.sec-head .lead{ margin-top:var(--sp-4); }

/* --------------------------------------------------------------------------
   MALHA BLUEPRINT
   Duas escalas de grade + eixos de coordenada. Puro CSS, custo zero.
   -------------------------------------------------------------------------- */

.grid-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:var(--z-grid);
  background-image:
    /* grade fina */
    linear-gradient(to right,  var(--lx-grid-c, rgba(240,180,41,.045)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lx-grid-c, rgba(240,180,41,.045)) 1px, transparent 1px),
    /* grade grossa a cada 5 */
    linear-gradient(to right,  var(--lx-grid-c2, rgba(240,180,41,.075)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lx-grid-c2, rgba(240,180,41,.075)) 1px, transparent 1px);
  background-size:
    var(--grid-unit) var(--grid-unit),
    var(--grid-unit) var(--grid-unit),
    calc(var(--grid-unit) * 5) calc(var(--grid-unit) * 5),
    calc(var(--grid-unit) * 5) calc(var(--grid-unit) * 5);
  background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 100%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 40%, #000 35%, transparent 100%);
}
.grid-bg--full{
  -webkit-mask-image:none; mask-image:none;
  opacity:.7;
}

/* "Lanterna": a grade só se revela ao redor do cursor.
   --mx / --my são escritas por JS (js/blueprint.js). Sem JS, a grade fica
   visível em opacidade baixa — degradação graciosa. */
.grid-bg--torch{
  -webkit-mask-image:radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image:radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  opacity:1;
}
.no-js .grid-bg--torch{ -webkit-mask-image:none; mask-image:none; opacity:.6; }

/* Vinheta — foca o centro, escurece as bordas */
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:var(--z-grid);
  background:radial-gradient(ellipse 80% 60% at 50% 45%, transparent 0%, var(--lx-base) 100%);
  opacity:.75;
}

/* Linhas de cota nas laterais (réguas) */
.rule-x,.rule-y{
  position:absolute;
  background:var(--lx-line);
  z-index:var(--z-grid);
  pointer-events:none;
}
.rule-x{ height:1px; left:0; right:0; }
.rule-y{ width:1px; top:0; bottom:0; }

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:8px; left:8px; z-index:var(--z-boot);
  padding:10px 18px;
  background:var(--lx-gold); color:var(--lx-void);
  font-family:var(--f-mono); font-size:var(--t-mono);
  font-weight:600; letter-spacing:var(--ls-wide); text-transform:uppercase;
  border-radius:var(--r-sm);
  transform:translateY(-160%);
  transition:transform var(--d-base) var(--e-out);
}
.skip-link:focus{ transform:translateY(0); }

.stack{ display:grid; gap:var(--sp-5); }
.stack--sm{ gap:var(--sp-3); }
.stack--lg{ gap:var(--sp-7); }
.row{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }

.hr{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--lx-line-2) 12%, var(--lx-line-2) 88%, transparent);
}

/* Reveal on scroll — base para o GSAP e fallback CSS */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 22px, 0);
  transition:opacity var(--d-slower) var(--e-out), transform var(--d-slower) var(--e-out);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; }
}
.no-js [data-reveal]{ opacity:1; transform:none; }

/* Grão sutil — tira o "plástico" do digital */
.grain::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   CORTINA DE ENTRADA (boot)
   Curta, informativa e dispensável. Nunca sequestra a atenção.
   -------------------------------------------------------------------------- */
#boot{
  position:fixed; inset:0; z-index:var(--z-boot);
  background:var(--lx-void);
  display:grid; place-items:center;
  transition:opacity 520ms var(--e-out), visibility 520ms;
}
#boot[hidden]{ display:none; }
#boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.boot__inner{
  width:min(420px, 82vw);
  font-family:var(--f-mono);
  font-size:var(--t-mono-lg);
  color:var(--lx-text-3);
  letter-spacing:var(--ls-wide);
}
.boot__mark{
  display:flex; align-items:center; gap:14px;
  margin-bottom:26px; color:var(--lx-text);
}
.boot__mark img{ height:58px; width:auto; }
.boot__bar{
  height:2px; background:var(--lx-line);
  overflow:hidden; margin:16px 0 14px;
}
.boot__bar i{
  display:block; height:100%; width:0%;
  background:var(--lx-gold);
  box-shadow:0 0 12px var(--lx-gold-a40);
  transition:width 180ms linear;
}
.boot__log{ min-height:5.4em; }
.boot__log div{ opacity:0; animation:bootline 240ms var(--e-out) forwards; }
.boot__log b{ color:var(--lx-ok); font-weight:500; }
@keyframes bootline{ to{ opacity:1; } }

/* --------------------------------------------------------------------------
   BARRA DE ROLAGEM (barra de progresso do documento)
   -------------------------------------------------------------------------- */
#progress{
  position:fixed; top:0; left:0; z-index:var(--z-nav);
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--lx-gold-3), var(--lx-gold));
  box-shadow:0 0 10px var(--lx-gold-a40);
}