/* ============================================================
   PhyCircuit — /lab/ playground visual language.
   Distinct-from-main-site experimental aesthetic: cyan-as-AI accent
   more prominent, animated PCB-grid background, glow effects, mono
   font emphasis. Still recognizably PhyCircuit (same base palette,
   same Φ monogram, same nav + footer chrome).
   ============================================================ */

/* ---------- hero ---------- */
.lab-hero {
  position: relative;
  min-height: 540px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, color-mix(in oklch, var(--accent-2) 18%, transparent) 0%, transparent 70%),
    var(--bg-0);
  overflow: hidden;
  isolation: isolate;
}
.lab-hero::before {
  /* subtle PCB-grid background */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklch, var(--accent-2) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--accent-2) 12%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 55%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 55%, black 30%, transparent 75%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.lab-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide, 1200px);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 880px) {
  .lab-hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}
.lab-hero__copy h1 {
  font-size: clamp(var(--fs-36), 5vw, var(--fs-56));
  line-height: 1.06;
  margin: var(--space-3) 0 var(--space-4);
}
.lab-hero__copy h1 em {
  font-style: normal;
  color: var(--accent-2);
  text-shadow: 0 0 28px color-mix(in oklch, var(--accent-2) 35%, transparent);
}
.lab-hero__copy .chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: color-mix(in oklch, var(--accent-2) 15%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in oklch, var(--accent-2) 25%, transparent);
  padding: 0.35rem 0.7rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.lab-hero__copy p {
  color: var(--fg-1);
  font-size: var(--fs-18);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.lab-hero__visual {
  position: relative;
  aspect-ratio: 6 / 4;
  width: 100%;
}
.lab-hero__visual svg { display: block; width: 100%; height: 100%; }

/* ---------- neural-PCB animation keyframes ---------- */
@keyframes lab-node-bloom {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lab-pulse-cyan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.16); }
}
@keyframes lab-trace-draw {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
@keyframes lab-glow-soft {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in oklch, var(--accent-2) 35%, transparent)); }
  50%      { filter: drop-shadow(0 0 12px color-mix(in oklch, var(--accent-2) 55%, transparent)); }
}

.lab-node {
  transform-origin: center;
  animation: lab-node-bloom 0.7s cubic-bezier(.2,0,0,1) both;
}
.lab-node-glow {
  transform-origin: center;
  animation: lab-pulse-cyan 2.4s ease-in-out infinite;
}
.lab-pcb-edge {
  stroke: var(--accent);
  stroke-width: 1.3;
  opacity: 0.55;
  fill: none;
  stroke-dasharray: 800;
  animation: lab-trace-draw 1.6s cubic-bezier(.2,0,0,1) both, lab-glow-soft 4s ease-in-out infinite;
}
.lab-neural-edge {
  stroke: var(--accent-2);
  stroke-width: 0.9;
  opacity: 0.7;
  fill: none;
}
.lab-particle {
  fill: var(--accent-2);
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent-2) 60%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .lab-node,
  .lab-node-glow,
  .lab-pcb-edge { animation: none; }
  .lab-pcb-edge { stroke-dashoffset: 0; }
  .lab-particle { display: none; }
}

/* ---------- positioning + card grid ---------- */
.lab-position {
  max-width: var(--container-wide, 1200px);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-5);
}
.lab-position p {
  font-size: var(--fs-18);
  color: var(--fg-1);
  line-height: 1.6;
  max-width: 72ch;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: var(--container-wide, 1200px);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
}
@media (max-width: 720px) { .lab-grid { grid-template-columns: 1fr; } }

.lab-card {
  position: relative;
  display: block;
  padding: var(--space-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  overflow: hidden;
}
.lab-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,
      color-mix(in oklch, var(--accent-2) 10%, transparent) 0%,
      transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.lab-card:hover {
  border-color: color-mix(in oklch, var(--accent-2) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--accent-2) 12%, transparent);
}
.lab-card:hover::before { opacity: 1; }
.lab-card:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
}
.lab-card--coming {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.lab-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.lab-card__monogram {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--accent-2);
  font-weight: 700;
  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--accent-2) 40%, transparent));
}
.lab-card__status {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.lab-card__status--live {
  background: color-mix(in oklch, var(--accent-2) 18%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in oklch, var(--accent-2) 35%, transparent);
}
.lab-card__status--soon {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line);
}
.lab-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-22);
  line-height: 1.2;
}
.lab-card p {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--fs-14);
  line-height: 1.55;
}
.lab-card__meta {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-2);
}