/* ==========================================================================
   STASE: interactive lab-bench hero
   Load AFTER styles.css. Everything here is scoped to either:
     .lab            (the new hero section), or
     body.page-home  (home-only nav overlay), so sub-pages are untouched.
   The old .hero rules in styles.css are no longer used by index.html
   and can stay in place (other pages may still use them).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HOME NAV: floating pills over the scene
   -------------------------------------------------------------------------- */

/* pills sit at the edges; the middle one is truly centred */


/* while a system is being inspected, the nav steps back (comes forward again on hover) */
body.page-home:has(.lab.is-scanning, .spot:focus-visible) .nav-left .logo-link:not(:hover),
body.page-home:has(.lab.is-scanning, .spot:focus-visible) .article-nav.nav-center:not(:hover),
body.page-home:has(.lab.is-scanning, .spot:focus-visible) .nav-right:not(:hover) {
  opacity: 0.32;
}


/* --------------------------------------------------------------------------
   2. THE BENCH (desktop)
   -------------------------------------------------------------------------- */
.lab {
  --img-ratio: 0.9794;        /* hero-img.jpeg: 1241 / 1267 */
  --mesh: 44px;
  position: relative;
  height: max(42vw, min(100svh, 1100px));
  min-height: 640px;
  background: var(--stone);
  overflow: hidden;
}

.lab-stage {
  position: absolute;
  inset: 0;
  container-type: size;        /* lets the scene size itself like object-fit: cover */
  isolation: isolate;
  overflow: hidden;
}

/* The scene is the photo's exact box: hotspots are placed in % of it, so they
   stay glued to the products at every viewport size. Anchored bottom-centre. */
.lab-scene {
  --W: max(100cqw, calc(100cqh * var(--img-ratio)));
  position: absolute;
  bottom: 0;
  width: var(--W);
  left: calc(50cqw - var(--W) / 2);
  aspect-ratio: 1241 / 1267;
}

.lab-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: saturate(0.55) brightness(1.04);
}

/* The mesh: stone veil + grid + node dots. A soft probe follows the cursor and thins it. */
.lab-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 0 0, rgba(14, 36, 84, 0.38) 1.5px, transparent 2.2px) 0 0 / calc(var(--mesh) * 2) calc(var(--mesh) * 2),
    linear-gradient(rgba(14, 36, 84, 0.075) 1px, transparent 1px) 0 0 / var(--mesh) var(--mesh),
    linear-gradient(90deg, rgba(14, 36, 84, 0.075) 1px, transparent 1px) 0 0 / var(--mesh) var(--mesh),
    rgba(216, 211, 211, 0.66);
}

/* Moves with transform only: a feathered circle of the unveiled photo that thins the mesh */
.lab-probe {
  --size: 300px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  pointer-events: none;
  translate: -9999px 0;
  will-change: translate;
  -webkit-mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.7), transparent);
  mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.7), transparent);
}
.lab-probe img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: var(--W);
  height: calc(var(--W) / var(--img-ratio));
  filter: saturate(0.55) brightness(1.04);
  will-change: translate;
}

/* Edges dissolve into the page colour */
.lab-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
 
  background:
    linear-gradient(to bottom, var(--stone) 0, transparent 24%),
    linear-gradient(to top, var(--stone-2) 0, transparent 13%),
    linear-gradient(to right, var(--stone) 0, transparent 11%, transparent 72%, var(--stone) 100%);
}



/* ---- hotspots ---------------------------------------------------------- */
.spot {
  --corner: 14px;
  position: absolute;
  z-index: 4;
  left: calc(var(--l) * 100%);
  top: calc(var(--t) * 100%);
  width: calc(var(--w) * 100%);
  height: calc(var(--h) * 100%);
  display: block;
  outline: none;
}
.lab.lab-js .spot { cursor: none; }

/* the un-veiled photo, revealed inside the hotspot's box */
.spot-sharp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  clip-path: inset(50% 50% 50% 50% round 10px);
  transition: opacity 0.35s var(--ease), clip-path 0.55s var(--ease);
}
.spot-sharp img {
  position: absolute;
  max-width: none;
  object-fit: fill;
  width: calc(100% / var(--w));
  height: calc(100% / var(--h));
  left: calc(var(--l) / var(--w) * -100%);
  top: calc(var(--t) / var(--h) * -100%);
}
.spot-sharp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(105, 222, 245, 0.9);
  box-shadow: inset 0 0 26px rgba(105, 222, 245, 0.2);
}

/* COURTNEY: the VitaPulse unit sits in front of its lower-left corner, so the reveal is L-shaped */
.spot.spot--courtney .spot-sharp {
  border-radius: 0;
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.spot.spot--courtney .spot-sharp::after { display: none; }
.spot.spot--courtney:hover .spot-sharp,
.spot.spot--courtney:focus-visible .spot-sharp,
.spot.spot--courtney.is-active .spot-sharp {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 41% 100%, 41% 60%, 0 60%);
}

/* corner brackets: faint at rest (they tell you where to hover), open up on hover */
.spot-frame {
  --c: var(--blue);
  position: absolute;
  inset: -4px;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size:
    var(--corner) 1.5px, 1.5px var(--corner), var(--corner) 1.5px, 1.5px var(--corner),
    var(--corner) 1.5px, 1.5px var(--corner), var(--corner) 1.5px, 1.5px var(--corner);
  transition: inset 0.45s var(--ease), opacity 0.3s ease;
  animation: lab-frame-in 0.9s calc(0.5s + var(--i, 0) * 0.14s) var(--ease) both;
}
@keyframes lab-frame-in {
  from { opacity: 0; inset: -18px; }
  to   { opacity: 0.5; inset: -4px; }
}

/* the info card */
.spot-card {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: calc(100% + 18px);
  width: max-content;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.5s var(--ease);
}
/* the laptop sits high in wide windows, so its card opens to the left instead */
.spot--nsuguard .spot-card { bottom: auto; top: 0; left: auto; right: calc(100% + 18px); align-items: flex-end; text-align: right; }

.spot-name {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-word);
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--navy);
  background: var(--off-white);
  border-radius: 8px;
}
.spot-info {
  display: block;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--off-white);
  background: rgba(0, 5, 27, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 6px;
}
.spot-info > span { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 0.5s var(--ease); }
.spot-go { color: var(--accent); margin-top: 6px; }
.spot-go svg {
  display: inline-block;
  vertical-align: -4px;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--arrow-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- active state (hover or keyboard focus) ----------------------------- */
.spot:hover .spot-sharp,
.spot:focus-visible .spot-sharp,
.spot.is-active .spot-sharp { opacity: 1; clip-path: inset(0 round 10px); }
.spot:hover .spot-frame,
.spot:focus-visible .spot-frame,
.spot.is-active .spot-frame { inset: -10px; opacity: 1; animation: none; }
.spot:hover .spot-card,
.spot:focus-visible .spot-card,
.spot.is-active .spot-card { opacity: 1; transform: translateY(0); }
.spot:hover .spot-info > span,
.spot:focus-visible .spot-info > span,
.spot.is-active .spot-info > span { clip-path: inset(0); }
.spot:hover .spot-info > span:nth-child(2),
.spot:focus-visible .spot-info > span:nth-child(2),
.spot.is-active .spot-info > span:nth-child(2) { transition-delay: 0.08s; }
.spot:hover .spot-info > span:nth-child(3),
.spot:focus-visible .spot-info > span:nth-child(3),
.spot.is-active .spot-info > span:nth-child(3) { transition-delay: 0.16s; }

/* ---- the lens: cursor background shown while inspecting a system ---------- */
.lab-lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  pointer-events: none;
  /* light ring + dark halo: legible over both the dark laptop screen and the pale bench */
  border: 1.5px solid rgba(249, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 5, 27, 0.6), inset 0 0 0 1px rgba(0, 5, 27, 0.35), 0 0 22px rgba(105, 222, 245, 0.45);
  background: radial-gradient(circle, rgba(105, 222, 245, 0.3) 0, rgba(105, 222, 245, 0) 72%);
  translate: var(--lx, -200px) var(--ly, -200px);
  scale: 0.55;
  will-change: translate;
  opacity: 0;
  transition: opacity 0.25s ease, scale 0.45s var(--ease);
}
.lab.is-scanning .lab-lens { opacity: 1; scale: 1; }

/* dot grid inside the lens, fading toward the rim */
.lab-lens::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(rgba(249, 255, 255, 0.85) 1px, transparent 1.6px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 75%);
  mask-image: radial-gradient(circle, #000 15%, transparent 75%);
}
/* reticle ticks pointing in from the rim + centre dot */
.lab-lens::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 1px rgba(0, 5, 27, 0.9));
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--off-white), var(--off-white)), linear-gradient(var(--off-white), var(--off-white)),
    linear-gradient(var(--off-white), var(--off-white)), linear-gradient(var(--off-white), var(--off-white)),
    radial-gradient(circle, var(--off-white) 1.5px, transparent 2px);
  background-position: 50% 0, 50% 100%, 0 50%, 100% 50%, center;
  background-size: 1.5px 14px, 1.5px 14px, 14px 1.5px, 14px 1.5px, 100% 100%;
}
.lens-read {
  position: absolute;
  left: 86%;
  top: 86%;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--off-white);
  background: var(--navy);
  border-radius: 3px;
}

/* ---- copy on top of the scene -------------------------------------------- */
.lab-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 120px var(--content-gutter) 34px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lab-title {
  font-family: var(--font-word);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  line-height: 1.15;
  color: var(--navy);
}
.lab-title span { display: block; }

/* headline steps aside while a system is being inspected */
.lab.is-scanning .lab-copy,
.lab:has(.spot:focus-visible) .lab-copy { opacity: 0; }

.lab-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--blue);
  transition: opacity 0.3s ease;
}
.lab-hint::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--blue);
}
.lab.is-scanning .lab-hint { opacity: 0; }

.lab-list { display: none; }

/* --------------------------------------------------------------------------
   3. TOUCH / SMALL SCREENS
   Same full photo and same reveal animations as desktop. There is no hover, so
   a small lens is dragged around instead; whatever it sits over becomes active.
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (hover: none) {
  /* fill the screen height; the photo covers it like on desktop. Its sides are cropped
     on tall screens, so the scene pans sideways as the lens is dragged (--pan, set by hero.js) */
  .lab {
    height: 100svh;
    min-height: 0;
  }

  .lab-scene { left: 0; translate: calc((100cqw - var(--W)) * 0.5) 0; will-change: translate; }
  .lab-probe { --size: 120px; }

  .lab-copy { padding: 84px 20px 0; }   /* clears the nav */
  .lab-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  .lab-veil {
    background:
      radial-gradient(circle at 0 0, rgba(14, 36, 84, 0.38) 1.5px, transparent 2.2px) 0 0 / 56px 56px,
      linear-gradient(rgba(14, 36, 84, 0.075) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(90deg, rgba(14, 36, 84, 0.075) 1px, transparent 1px) 0 0 / 28px 28px,
      rgba(216, 211, 211, 0.66);
  }
  .lab-fade {
    opacity: 0.4;
    background:
      linear-gradient(to bottom, var(--stone) 0, transparent 11%),
      linear-gradient(to top, var(--stone) 0, transparent 2%);
  }

  .lab-title{padding-top: 80px;}

  /* hotspots are driven by the lens, not by touches; only the open card is tappable */
  .spot { --corner: 10px; pointer-events: none; }
  .spot.is-active { pointer-events: auto; }

  .spot-card { bottom: calc(100% + 12px); }
  .spot--nsuguard .spot-card { top: auto; bottom: calc(100% + 12px); left: 0; right: auto; align-items: flex-start; text-align: left; }
  .spot-name { padding: 8px 14px; font-size: 0.85rem; }
  .spot-info { padding: 10px 12px; font-size: 0.68rem; }
  .spot-go svg { width: 14px; height: 14px; vertical-align: -3px; }

  /* the lens becomes a draggable handle, always visible */
  .lab-lens {
    width: 48px;
    height: 48px;
    margin: -32px 0 0 -32px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    opacity: 1;
    scale: 1;
  }
  .lab-lens.is-dragging { cursor: grabbing; scale: 1.12; }
  .lab-lens::after { background-size: 1.5px 10px, 1.5px 10px, 10px 1.5px, 10px 1.5px, 100% 100%; }
  .lens-read { font-size: 0.55rem; padding: 2px 5px; opacity: 0; transition: opacity 0.2s ease; }
.lab-lens.is-dragging .lens-read,
.lab.is-scanning .lens-read { opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lab-stage::after { display: none; }
  .spot-frame { animation: none; }
  .spot-sharp,
  .spot-card,
  .spot-info > span,
  .lab-lens,
  .lab-copy,
  .spot-frame { transition: none; }
}