/* ---------- 5 · CAMADA TÉCNICA ------------------------------------------- */

/* malha de 12 colunas ao fundo de cada seção */
section::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(90deg,rgb(var(--m-claro) / .055) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);}
section.light::before{background-image:linear-gradient(90deg,rgb(var(--m-escuro) / .07) 1px,transparent 1px);}

/* cantos de HUD nos blocos-chave */
.hud{position:relative;}
.hud::before,.hud::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border:1px solid var(--vios);opacity:.4;z-index:2;
  transition:width .35s var(--e-out),height .35s var(--e-out),opacity .35s;}
.hud::before{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:5px 0 0 0;}
.hud::after{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 5px 0;}
.hud:hover::before,.hud:hover::after{width:26px;height:26px;opacity:.95;}
.gband.hud::before,.gband.hud::after{border-color:rgba(255,255,255,.7);opacity:.5;}

/* índice gigante em outline */
.sidx{position:absolute;top:var(--s6);right:var(--gut);font-family:var(--f-disp);font-weight:700;
  font-size:clamp(88px,13vw,216px);line-height:.78;color:transparent;font-variant-numeric:tabular-nums;
  -webkit-text-stroke:1px rgb(var(--m-claro) / .16);pointer-events:none;user-select:none;z-index:1;
  will-change:transform;}
.light .sidx{-webkit-text-stroke-color:rgb(var(--m-escuro) / .15);}

/* barra de progresso + grão */
#prog{position:fixed;top:0;left:0;height:3px;width:0%;z-index:99;
  background:linear-gradient(90deg,var(--vio),var(--vios),var(--mag));
  box-shadow:0 0 14px rgb(var(--m-nucleo) / .8);transition:width .1s linear;}
#grain{position:fixed;inset:-100%;z-index:97;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,2%)}}