/* =========================================================
   loading.css — Logic Analyzer Loader
   JS adds .show on #pageLoader
========================================================= */

.page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease, visibility 180ms ease;
}
.page-loader.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* background */
.page-loader .loader-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,208,.16), transparent 55%),
    radial-gradient(circle at 80% 65%, rgba(3,188,244,.14), transparent 60%),
    rgba(0,0,0,.92);
  backdrop-filter: blur(14px);
}
body.light .page-loader .loader-bg{
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,208,.18), transparent 55%),
    radial-gradient(circle at 80% 65%, rgba(3,188,244,.14), transparent 60%),
    rgba(255,255,255,.92);
}

/* center */
.page-loader .loader-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}

/* card */
.page-loader .loader-card{
  width:min(620px, 92vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
body.light .page-loader .loader-card{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
}

.page-loader .loader-inner{
  padding:16px 16px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.page-loader .loader-title{
  margin-top:10px;
  font-weight:950;
  letter-spacing:.01em;
  font-size:16px;
  color:#fff;
}
body.light .page-loader .loader-title{ color:#000; }

.page-loader .loader-sub{
  margin-top:6px;
  font-weight:800;
  font-size:12.5px;
  color: rgba(255,255,255,.72);
}
body.light .page-loader .loader-sub{ color: rgba(0,0,0,.65); }

/* progress bar */
.page-loader .pbar{
  margin-top:14px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
body.light .page-loader .pbar{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06);
}
.page-loader .pbar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,255,208,.85), rgba(3,188,244,.80), rgba(124,124,255,.75));
  animation: laBar 3.2s ease forwards;
}
@keyframes laBar{ to{ width:100%; } }

/* =========================================================
   LOGIC ANALYZER SCREEN
========================================================= */

.logic .la-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.logic .la-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  color:#fff;
  letter-spacing:.01em;
}
body.light .logic .la-title{ color:#000; }

.logic .dot.rec{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,70,70,.95);
  box-shadow: 0 0 18px rgba(255,70,70,.35);
  animation: recBlink 0.85s ease-in-out infinite;
}
@keyframes recBlink{
  0%,100%{ transform:scale(1); opacity:.55; }
  45%{ transform:scale(1.35); opacity:1; }
}

.logic .la-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.logic .tag{
  font-size:11px;
  font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}
.logic .tag.dim{ opacity:.75; }
body.light .logic .tag{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
}

.logic .la-screen{
  position:relative;
  height:210px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.38);
  overflow:hidden;
}
body.light .logic .la-screen{
  background: rgba(255,255,255,.60);
  border-color: rgba(0,0,0,.14);
}

/* grid */
.logic .la-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:.55;
}
body.light .logic .la-grid{
  background:
    linear-gradient(rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.10) 1px, transparent 1px);
}

/* channels */
.logic .la-ch{
  position:relative;
  height:calc(210px / 6);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.logic .la-ch:first-of-type{ border-top:none; }

.logic .label{
  width:44px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.06em;
  color: rgba(255,255,255,.78);
}
body.light .logic .label{ color: rgba(0,0,0,.62); }

.logic .wave{
  position:relative;
  flex:1;
  height:22px;
  border-radius:10px;
  background: rgba(255,255,255,.04);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
body.light .logic .wave{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}

/* digital pulses */
.logic .wave::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg,
      transparent 0 14px,
      rgba(0,255,208,.85) 14px 18px,
      transparent 18px 40px,
      rgba(0,255,208,.55) 40px 44px,
      transparent 44px 78px,
      rgba(0,255,208,.75) 78px 82px,
      transparent 82px 120px
    );
  opacity:.9;
  animation: laShift 1.15s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0,255,208,.14));
}
@keyframes laShift{
  from{ transform:translateX(-30%); }
  to{ transform:translateX(30%); }
}

/* channel variety */
.logic .ch2 .wave::before{ animation-duration: 1.0s; opacity:.85; }
.logic .ch3 .wave::before{ animation-duration: 1.25s; opacity:.80; }
.logic .ch4 .wave::before{ animation-duration: 0.95s; opacity:.92; }
.logic .ch5 .wave::before{ animation-duration: 1.35s; opacity:.75; }
.logic .ch6 .wave::before{ animation-duration: 1.10s; opacity:.82; }

/* trigger channel */
.logic .wave.trig{
  box-shadow: inset 0 0 0 1px rgba(255,70,70,.30);
}
.logic .wave.trig::before{
  background:
    linear-gradient(90deg,
      transparent 0 20px,
      rgba(255,70,70,.90) 20px 24px,
      transparent 24px 50px,
      rgba(0,255,208,.65) 50px 54px,
      transparent 54px 90px,
      rgba(0,255,208,.80) 90px 94px,
      transparent 94px 140px
    );
  filter: drop-shadow(0 0 10px rgba(255,70,70,.10));
}

/* moving cursor */
.logic .la-cursor{
  position:absolute;
  top:0; bottom:0;
  width:2px;
  left:-10px;
  background: rgba(3,188,244,.85);
  box-shadow: 0 0 14px rgba(3,188,244,.25);
  animation: laCursor 1.6s ease-in-out infinite;
  opacity:.85;
}
@keyframes laCursor{
  0%{ transform:translateX(0); opacity:.20; }
  25%{ opacity:.90; }
  100%{ transform:translateX(680px); opacity:.20; }
}

/* trigger marker */
.logic .la-trigger{
  position:absolute;
  top:0;
  left: 68%;
  width:2px;
  height:100%;
  background: rgba(255,70,70,.65);
  box-shadow: 0 0 16px rgba(255,70,70,.18);
  opacity:.75;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-loader, .page-loader *{
    animation:none !important;
    transition:none !important;
  }
}