/* ============================================================
   TWL · Lab FX — utility layer ".twl-lab" (add to any <section>)
   Tech/laboratory motifs: grid drift, vignette, hairlines,
   mono readout, scanline, registration marks, side ticks.
   All animations honor prefers-reduced-motion.
   ============================================================ */

@keyframes twlLabGridDrift{ from{ background-position:0 0; } to{ background-position:64px 64px; } }
@keyframes twlLabBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@keyframes twlLabScan{ 0%{ transform:translateY(-100%); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateY(100%); opacity:0; } }

.twl-lab{ position:relative; isolation:isolate; }
.twl-lab > *{ position:relative; z-index:1; }

/* ---------- dark sections must be PURE BLACK (kill orange radial wash) ----------
   Higher specificity (0,1,1) than the .twl-dz/.twl-ba/.twl-sv rule in twl-damage.css,
   so the atoms read as a premium glowing network on true black. */
body :is(.twl-dz, .twl-ba){
  background:#08080a;
}

body :is(section[data-twl-particles], .twl-lab):not(.twl-sv):not(.twl-lab--light):not(.wl-rev){
  background:#08080a;
  color:#f4f4f5;
}

body :is(section[data-twl-particles], .twl-lab):not(.twl-sv):not(.twl-lab--light):not(.wl-rev)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
  animation:twlLabGridDrift 90s linear infinite;
}

/* ---------- technical drifting grid (only where no grid exists) ---------- */
.twl-lab:not(.twl-dz):not(.twl-ba)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
  animation:twlLabGridDrift 90s linear infinite;
}
.twl-lab--light:not(.twl-dz):not(.twl-ba)::before{
  background-image:linear-gradient(rgba(15,23,42,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,23,42,.09) 1px,transparent 1px);
}

/* ---------- vignette ---------- */
.twl-lab::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(140% 100% at 50% 35%,transparent 55%,rgba(0,0,0,.45));
}
.twl-lab--light::after{
  background:radial-gradient(140% 100% at 50% 35%,transparent 55%,rgba(0,0,0,.06));
  mix-blend-mode:multiply;
}

/* ---------- hairlines top/bottom ---------- */
.twl-lab__hair{
  position:absolute; left:0; right:0; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.35),transparent);
}
.twl-lab__hair--top{ top:0; }
.twl-lab__hair--bottom{ bottom:0; }
.twl-lab--light .twl-lab__hair{ background:linear-gradient(90deg,transparent,rgba(255,106,0,.20),transparent); }

/* ---------- mono readout ---------- */
.twl-lab__readout{
  position:absolute; z-index:2; pointer-events:none;
  top:clamp(1rem,2.5vw,1.6rem); left:clamp(1rem,4vw,3rem);
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; line-height:1;
  color:rgba(255,255,255,.45);
}
.twl-lab--light .twl-lab__readout{ color:rgba(0,0,0,.40); }
.twl-lab__readout::after{
  content:"▌"; margin-left:.25em; animation:twlLabBlink 1s step-end infinite;
}

/* ---------- section scanline (opt-in: .twl-lab--scan) ---------- */
.twl-lab--scan .twl-lab__scan{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.55),transparent);
  animation:twlLabScan 7s ease-in-out infinite;
}

/* ---------- corner registration marks (opt-in: .twl-lab--marks) ---------- */
.twl-lab--marks .twl-lab__mark{
  position:absolute; width:18px; height:18px; z-index:0; pointer-events:none;
}
.twl-lab--marks .twl-lab__mark::before,
.twl-lab--marks .twl-lab__mark::after{
  content:""; position:absolute; background:rgba(255,106,0,.45);
}
.twl-lab--marks .twl-lab__mark::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.twl-lab--marks .twl-lab__mark::after{ top:50%; left:0; width:100%; height:1px; transform:translateY(-.5px); }
.twl-lab--marks.twl-lab--light .twl-lab__mark::before,
.twl-lab--marks.twl-lab--light .twl-lab__mark::after{ background:rgba(255,106,0,.30); }
.twl-lab__mark--tl{ top:clamp(.8rem,2vw,1.4rem); left:clamp(.8rem,2vw,1.4rem); }
.twl-lab__mark--tr{ top:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem); }
.twl-lab__mark--bl{ bottom:clamp(.8rem,2vw,1.4rem); left:clamp(.8rem,2vw,1.4rem); }
.twl-lab__mark--br{ bottom:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem); }
/* small circle node at each mark */
.twl-lab--marks .twl-lab__mark > i{
  position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,106,0,.45);
}
.twl-lab--marks.twl-lab--light .twl-lab__mark > i{ border-color:rgba(255,106,0,.30); }

/* ---------- side ticks (opt-in: .twl-lab--ticks, >=1024px) ---------- */
.twl-lab--ticks .twl-lab__ticks{ display:none; }
@media (min-width:1024px){
  .twl-lab--ticks .twl-lab__ticks{
    display:block; position:absolute; top:0; bottom:0; width:16px; z-index:0; pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(255,106,0,.30) 0,rgba(255,106,0,.30) 1px,transparent 1px,transparent 14px);
  }
  .twl-lab--ticks .twl-lab__ticks--left{ left:0; }
  .twl-lab--ticks .twl-lab__ticks--right{ right:0; }
  .twl-lab--ticks.twl-lab--light .twl-lab__ticks{
    background:repeating-linear-gradient(to bottom,rgba(15,23,42,.18) 0,rgba(15,23,42,.18) 1px,transparent 1px,transparent 14px);
  }
}

/* ---------- reduced-motion guard (kills every animation here) ---------- */
@media (prefers-reduced-motion:reduce){
  .twl-lab:not(.twl-dz):not(.twl-ba)::before{ animation:none; }
  .twl-lab__readout::after{ animation:none; }
  .twl-lab--scan .twl-lab__scan{ animation:none; opacity:0; }
}