/* ==========================================================================
   Hero lab — alternative home hero (hero-lab.html): 3D head, designed-live
   wordmark, tagline and meta row.
   ========================================================================== */

.lab-hero {
  position: relative;
  min-height: calc(100svh - 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: clamp(16px, 3vh, 40px) var(--gutter) clamp(56px, 9vh, 84px);
  text-align: center;
  background: var(--bg);
  overflow: hidden;
}

/* ---- Head: layered wireframe that tilts toward the pointer -------------- */
.lab-head {
  width: clamp(110px, min(20vw, 22vh), 230px);
  aspect-ratio: 1;
  perspective: 700px;
  animation: lab-in 1s var(--ease) 0.05s both;
}

.lab-head__model {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.lab-head__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--o, 1);
  transform: translateZ(var(--z, 0px));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Title block ------------------------------------------------------- */
.lab-title {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
}

.lab-line {
  display: block;
  font-size: clamp(1.4rem, min(4.5vw, 6.2vh), 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.lab-line--a {
  animation: lab-in 0.9s var(--ease) 0.35s both;
}

/* Wordmark canvas (js/tech-text.js) — coloured by this `color`. */
.lab-word {
  display: block;
  width: 100%;
  height: clamp(140px, min(22vw, 31vh), 280px);
  color: var(--accent);
}

/* Revealed once the wordmark has been designed. */
.lab-line--b,
.lab-meta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.lab-hero.is-ready .lab-line--b,
.lab-hero.is-ready .lab-meta {
  opacity: 1;
  transform: none;
}

.lab-hero.is-ready .lab-meta {
  transition-delay: 0.18s;
}

/* ---- Meta row ---------------------------------------------------------- */
.lab-meta {
  --meta-gap: clamp(16px, 2.6vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  margin-top: clamp(10px, 2.4vh, 26px);
  font-size: clamp(0.82rem, 1.25vw, 1rem);
  color: var(--fg-muted);
}

.lab-meta li {
  display: flex;
  align-items: center;
}

.lab-meta li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 var(--meta-gap);
  border-radius: 50%;
  background: var(--border-strong);
}

/* ---- Scroll marker (uses .hero-scroll-cue from home.css) --------------- */
.lab-scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  gap: 6px;
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.9s var(--ease) 0.5s;
}

.lab-scroll .line { height: 26px; }

.lab-hero.is-ready .lab-scroll { opacity: 1; }

@keyframes lab-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .lab-meta { flex-direction: column; }
  .lab-meta li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-line--b,
  .lab-meta,
  .lab-scroll { opacity: 1; transform: none; }
  .lab-scroll { transform: translateX(-50%); }
}

/* ---- Wordmark canvas (TechText) ---------------------------------------- */
.tech-text {
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.tech-text-canvas {
  display: block;
  width: 100%;
  height: 100%;
}