/* Scatter-based smart laboratory. Loaded after the legacy catalogue styles. */
.catalog-lab {
  --lab-scene-width: 100%;
  --lab-scene-height: clamp(620px, 56.28vw, 941px);
  position: relative;
  isolation: isolate;
  height: max(var(--lab-scene-height), calc(100svh - 73px));
  min-height: 0;
  overflow: hidden;
  background: #03080d;
}

.catalog-lab .lab-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  /* Approved v28 composition. Keep this 3344 x 1882 master locked. */
  background:
    url("outputs/lab-design/customer-catalog-showroom-v28-d-fresh-render-master-2x.png?v=20260825-aspect-locked")
      center top / var(--lab-scene-width) var(--lab-scene-height) no-repeat,
    radial-gradient(ellipse at 50% 18%, rgba(47, 107, 130, 0.3), transparent 68%),
    repeating-linear-gradient(90deg, rgba(84, 145, 164, 0.13) 0 1px, transparent 1px 6.25%),
    linear-gradient(180deg, #0a202a 0%, #071923 62%, #030b11 100%);
}

.catalog-lab .lab-backdrop::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--lab-scene-height);
  background: linear-gradient(
    180deg,
    rgba(1, 7, 12, 0.04),
    transparent 72%,
    rgba(3, 8, 13, 0.18) 88%,
    #03080d 100%
  );
  content: "";
}

.catalog-lab .lab-backdrop::after {
  position: absolute;
  z-index: 1;
  top: calc(var(--lab-scene-height) - 2px);
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(51, 113, 137, 0.24), transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(74, 119, 138, 0.12) calc(12.5% - 1px) 12.5%),
    repeating-linear-gradient(180deg, transparent 0 78px, rgba(70, 111, 128, 0.08) 79px 80px),
    linear-gradient(180deg, #07131a 0%, #051018 48%, #02080d 100%);
  content: "";
  pointer-events: none;
}

.catalog-lab .lab-heading {
  position: relative;
  z-index: 30;
  pointer-events: none;
}

.catalog-lab .lab-showcase {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  height: var(--lab-scene-height);
  padding: 0;
}

/* The backdrop and every full-scene interaction mask must share one origin.
   The legacy grid row previously pushed the showcase below the heading, which
   made an otherwise correct SAM outline appear lower than its background item. */
@media (min-width: 901px) {
  .catalog-lab {
    /* The approved background is 3344 x 1882. Fit that plane inside the
       viewport without ever stretching it; the surrounding laboratory panels
       fill any spare space on tall or ultrawide displays. */
    --lab-viewport-height: calc(100svh - 73px);
    --lab-scene-width: min(100vw, calc(var(--lab-viewport-height) * 1.7768331562));
    --lab-scene-height: calc(var(--lab-scene-width) * 0.5627990431);
    width: 100%;
    height: var(--lab-viewport-height);
    min-height: 0;
    aspect-ratio: auto;
    margin-inline: 0;
    border-inline: 0;
  }

  .catalog-lab .lab-showcase {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--lab-scene-width);
    height: var(--lab-scene-height);
    transform: translateX(-50%);
  }
}

.lab-scatter-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.lab-scene-highlight {
  position: absolute;
  z-index: 16;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 1px rgba(145, 247, 255, 0.92))
    drop-shadow(0 0 3px rgba(43, 205, 255, 0.52));
  transition: opacity 150ms ease;
}

.lab-scene-highlight.is-visible {
  opacity: 1;
}

.lab-object {
  position: absolute;
  z-index: calc(20 + var(--lab-depth));
  top: calc(var(--lab-y) * 1%);
  left: calc(var(--lab-x) * 1%);
  width: clamp(70px, 6.8vw, 104px);
  aspect-ratio: 1 / 1.06;
  border: 0;
  padding: 0;
  background: transparent;
  color: #effcff;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--lab-scale));
  transform-origin: center bottom;
  isolation: isolate;
}

.lab-object-glow {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: 4%;
  left: 8%;
  height: 23%;
  border: 1px solid rgba(114, 151, 166, 0.12);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.58), transparent 70%);
  opacity: 0.72;
  filter: blur(2px);
  transform: perspective(80px) rotateX(67deg);
  transition: opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.lab-object-edge-mask {
  display: none;
}

.lab-object-visual {
  position: absolute;
  inset: 0 0 18%;
  display: grid;
  place-items: center;
  transition: filter 180ms ease, transform 180ms ease;
}

.lab-object-visual img,
.lab-object-visual .lab-scene-cutout {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(0.94) brightness(1.04) contrast(1.16) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.72));
  transition: filter 180ms ease, opacity 180ms ease;
}

.lab-object-label {
  position: absolute;
  z-index: 4;
  right: 50%;
  bottom: -7px;
  display: grid;
  min-width: max-content;
  max-width: 160px;
  padding: 4px 8px 5px;
  border: 1px solid rgba(87, 232, 255, 0.22);
  background: rgba(2, 12, 19, 0.76);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.46);
  opacity: 0;
  text-align: center;
  transform: translateX(50%) translateY(5px);
  visibility: hidden;
  backdrop-filter: blur(5px);
  transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.lab-object-label strong {
  overflow: hidden;
  max-width: 148px;
  font: 700 clamp(9px, 0.67vw, 12px)/1.15 "Microsoft JhengHei", system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-object-label small {
  display: none;
}

.lab-object:is(:hover, :focus-visible, .is-preview) {
  z-index: 180;
  outline: none;
}

.lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual {
  filter: drop-shadow(0 0 10px rgba(87, 232, 255, 0.8)) drop-shadow(0 0 24px rgba(35, 244, 189, 0.35));
  transform: translateY(-4px) scale(1.06);
}

.lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual img,
.lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual .lab-scene-cutout {
  filter: saturate(1.08) brightness(1.08) contrast(1.18) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.62));
}

.lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-glow {
  border-color: rgba(87, 232, 255, 0.66);
  background: radial-gradient(ellipse, rgba(87, 232, 255, 0.44), rgba(35, 244, 189, 0.12) 38%, transparent 72%);
  box-shadow: 0 0 18px rgba(87, 232, 255, 0.44);
  opacity: 1;
  filter: blur(0);
}

.lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-label {
  border-color: rgba(87, 232, 255, 0.88);
  box-shadow: 0 0 16px rgba(87, 232, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.56);
  opacity: 1;
  transform: translateX(50%) translateY(0);
  visibility: visible;
}

@media (min-width: 901px) {
  .lab-object {
    z-index: 20;
    top: calc(var(--hot-y) * 1%);
    left: calc(var(--hot-x) * 1%);
    width: calc(var(--hot-width) * 1%);
    height: calc(var(--hot-height) * 1%);
    aspect-ratio: auto;
    border-radius: 0;
    transform: none;
    transform-origin: center;
  }

  .lab-object-visual {
    z-index: 1;
    inset: 0;
    display: none;
    overflow: visible;
  }

  .lab-object-glow {
    display: none;
  }

  .lab-object-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    filter: saturate(0.96) brightness(0.94) contrast(1.08) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.62));
  }

  .lab-object-edge-mask {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .lab-object-edge-mask img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.34;
    filter: saturate(1.08) brightness(1.08);
    transition: filter 180ms ease;
  }

  .lab-object[data-category="workshop-equipment"] .lab-object-edge-mask img {
    opacity: 1;
  }

  .lab-object[data-category="workshop-equipment"] .lab-object-label {
    top: -42px;
  }

  .lab-object-label {
    top: -12px;
    right: auto;
    bottom: auto;
    left: 50%;
    min-width: max-content;
    padding: 7px 10px;
    transform: translateX(-50%) translateY(6px);
  }

  .lab-object-label strong {
    max-width: 190px;
    font-size: clamp(12px, 0.9vw, 14px);
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-edge-mask {
    opacity: 1;
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-edge-mask img {
    filter:
      saturate(1.12) brightness(1.1)
      drop-shadow(0 0 1px rgba(133, 244, 255, 0.92))
      drop-shadow(0 0 5px rgba(45, 218, 255, 0.82))
      drop-shadow(0 0 11px rgba(22, 167, 255, 0.42));
  }

  .lab-object[data-category="workshop-equipment"]:is(:hover, :focus-visible, .is-preview) .lab-object-edge-mask img {
    filter:
      drop-shadow(0 0 2px rgba(130, 244, 255, 0.95))
      drop-shadow(0 0 6px rgba(45, 218, 255, 0.9))
      drop-shadow(0 0 13px rgba(22, 167, 255, 0.58));
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual {
    transform: none;
    filter: none;
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual img {
    filter: saturate(1.05) brightness(1.04) contrast(1.1) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.54));
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-label {
    transform: translateX(-50%) translateY(0);
  }

  .lab-object[data-category="ventilation"] .lab-object-label,
  .lab-object[data-category="water-pumps"] .lab-object-label {
    right: auto;
    left: 0;
    transform: translateY(5px);
  }

  .lab-object[data-category="ventilation"]:is(:hover, :focus-visible, .is-preview) .lab-object-label,
  .lab-object[data-category="water-pumps"]:is(:hover, :focus-visible, .is-preview) .lab-object-label {
    transform: translateY(0);
  }

  .lab-object[data-category="workshop-equipment"] .lab-object-label,
  .lab-object[data-category="material-handling"] .lab-object-label {
    left: auto;
    right: 0;
    transform: translateY(5px);
  }

  .lab-object[data-category="workshop-equipment"]:is(:hover, :focus-visible, .is-preview) .lab-object-label,
  .lab-object[data-category="material-handling"]:is(:hover, :focus-visible, .is-preview) .lab-object-label {
    transform: translateY(0);
  }
}

.catalog-lab .lab-center-stage {
  position: absolute;
  z-index: 10;
  top: 7%;
  bottom: 3%;
  left: 30%;
  width: 40%;
  min-width: 0;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  background: none !important;
}

.catalog-lab .lab-center-stage::before {
  position: absolute;
  right: 18%;
  bottom: 14%;
  left: 18%;
  height: 13%;
  border: 1px solid rgba(87, 232, 255, 0.2);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(87, 232, 255, 0.08), transparent 68%);
  box-shadow: inset 0 0 22px rgba(87, 232, 255, 0.08);
  content: none;
  opacity: 0.42;
  transform: perspective(90px) rotateX(68deg);
}

.catalog-lab .lab-hologram-target {
  position: absolute;
  z-index: 2;
  inset: 3% 0 13%;
  display: block !important;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.catalog-lab .lab-center-stage.has-projection .lab-hologram-target {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.catalog-lab .lab-hologram-target:focus-visible {
  outline: 2px solid rgba(87, 232, 255, 0.9);
  outline-offset: -12px;
}

.catalog-lab .machine-chamber {
  position: absolute;
  inset: 0;
}

.catalog-lab .gantry-beam {
  display: none;
}

.catalog-lab .lab-center-stage .lab-hologram-target .machine-visual {
  right: auto !important;
  bottom: 25%;
  left: 50% !important;
  width: min(21vw, 320px) !important;
  max-width: none !important;
  height: 48%;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.catalog-lab .lab-center-stage .lab-machine-image,
.catalog-lab .lab-center-stage .lab-machine-edge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.catalog-lab .lab-center-stage .lab-machine-image {
  opacity: 0.72;
  mix-blend-mode: screen;
  filter: brightness(1.08) contrast(1.04)
    drop-shadow(0 0 9px rgba(62, 218, 255, 0.62));
}

.catalog-lab .lab-center-stage .lab-machine-edge {
  display: none;
}

.catalog-lab .lab-center-stage .machine-energy-ring {
  right: 50%;
  bottom: 5%;
  width: 84%;
  transform: translateX(50%) rotateX(69deg);
}

.catalog-lab .lab-center-stage .machine-state {
  right: 50%;
  bottom: 4%;
  transform: translateX(50%);
}

.catalog-lab .lab-center-stage .lab-category-readout {
  position: absolute;
  z-index: 12;
  top: auto;
  right: -17%;
  bottom: 8%;
  width: min(230px, 55%);
  padding: 12px 14px;
  border-color: rgba(87, 232, 255, 0.48);
  background: rgba(2, 14, 22, 0.84);
  pointer-events: none !important;
  backdrop-filter: blur(10px);
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.catalog-lab .lab-center-stage .lab-category-readout * {
  pointer-events: none !important;
}

.catalog-lab .lab-center-stage.has-projection .lab-category-readout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.catalog-lab .lab-center-stage .lab-category-readout h2 {
  font-size: clamp(16px, 1.45vw, 24px);
}

.catalog-lab .lab-center-stage .lab-category-readout dl,
.catalog-lab .lab-center-stage .lab-category-readout button {
  margin-top: 8px;
}

.catalog-lab .lab-center-stage .lab-category-readout button {
  display: none;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .lab-object {
    width: clamp(68px, 7.6vw, 94px);
  }

  .catalog-lab .lab-center-stage .lab-category-readout {
    right: -13%;
    width: 190px;
  }
}

@media (max-width: 900px) {
  .catalog-lab {
    height: auto;
    min-height: 790px;
  }

  body[data-mobile-view="categories"] .catalog-lab .lab-showcase {
    height: auto;
    min-height: 0;
    overflow: visible;
    touch-action: pan-y;
  }

  .catalog-lab .lab-backdrop {
    background-position: center top;
    background-size: auto 560px;
  }

  .catalog-lab .lab-showcase {
    min-height: 730px;
    overflow: hidden;
  }

  .catalog-lab .lab-center-stage {
    z-index: 8;
    top: 1%;
    right: 3%;
    bottom: auto;
    left: 3%;
    width: auto;
    height: 430px;
  }

  .catalog-lab .lab-hologram-target {
    inset: -1% -2% 14%;
  }

  .catalog-lab .lab-center-stage .lab-hologram-target .machine-visual {
    bottom: 17%;
    width: min(44vw, 220px) !important;
    max-width: none !important;
    height: 46%;
  }

  .catalog-lab .lab-center-stage .machine-energy-ring {
    bottom: 8%;
    width: min(86vw, 430px);
  }

  .catalog-lab .lab-center-stage .machine-state {
    bottom: 5%;
    max-width: 78%;
  }

  .catalog-lab .lab-center-stage .lab-category-readout {
    top: auto;
    right: 8px;
    bottom: 5%;
    width: 170px;
    padding: 9px 10px;
    display: block !important;
  }

  .catalog-lab .lab-center-stage .lab-category-readout .lab-index,
  .catalog-lab .lab-center-stage .lab-category-readout dl {
    display: none;
  }

  .catalog-lab .lab-center-stage .lab-category-readout h2 {
    font-size: 15px;
  }

  .catalog-lab .lab-center-stage .lab-category-readout button {
    min-height: 34px;
    font-size: 12px;
  }

  .lab-scatter-layer {
    z-index: 18;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: 98px;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 126px);
    gap: 2px 8px;
    height: 276px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 18px 14px;
    background: linear-gradient(180deg, transparent, rgba(2, 10, 16, 0.86) 18%, rgba(2, 10, 16, 0.96));
    pointer-events: auto;
    scrollbar-color: rgba(87, 232, 255, 0.5) rgba(1, 8, 13, 0.72);
    scroll-snap-type: x proximity;
  }

  .lab-scene-highlight {
    display: none;
  }

  .lab-object {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    width: 96px;
    height: 118px;
    transform: none;
    scroll-snap-align: center;
  }

  .lab-object-visual {
    inset: 2px 4px 28px;
  }

  .lab-object-label {
    right: 50%;
    bottom: 1px;
    max-width: 96px;
    min-width: 88px;
    padding: 4px 5px;
    opacity: 0.86;
    transform: translateX(50%);
    visibility: visible;
  }

  .lab-object-label strong {
    max-width: 84px;
    font-size: 10px;
  }

  .lab-object:is(:hover, :focus-visible, .is-preview) .lab-object-visual {
    transform: translateY(-2px) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-object,
  .lab-object *,
  .catalog-lab .machine-chamber,
  .catalog-lab .machine-chamber * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}