/* Labs card scenes — lightweight inline SVG illustrations, no canvas or image assets. */
.lab-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 390px;
}
.lab-card .lab-card-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 174px;
  margin: 10px 0 2px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(68, 147, 198, .12), rgba(149, 125, 203, .08));
  border: 1px solid rgba(182, 224, 231, .12);
  isolation: isolate;
}
.lab-card .lab-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 42%, rgba(184,223,207,.05));
  z-index: 3;
}
.lab-card .lab-card-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lab-card > .mt-12 {
  position: relative;
  z-index: 4;
  margin-top: 12px !important;
}
.lab-card .scene-float,
.lab-card .scene-orbit,
.lab-card .scene-twinkle,
.lab-card .scene-drift,
.lab-card .scene-pulse,
.lab-card .scene-spin {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes scene-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes scene-orbit { to { transform: rotate(360deg); } }
@keyframes scene-twinkle { 0%, 100% { opacity: .38; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes scene-drift { 0%, 100% { transform: translate(0, 0); opacity: .45; } 50% { transform: translate(7px, -5px); opacity: .95; } }
@keyframes scene-pulse { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes scene-spin { to { transform: rotate(360deg); } }

.scene-float { animation: scene-float 4.8s ease-in-out infinite; }
.scene-orbit { animation: scene-orbit 22s linear infinite; }
.scene-twinkle { animation: scene-twinkle 2.6s ease-in-out infinite; }
.scene-drift { animation: scene-drift 5s ease-in-out infinite; }
.scene-pulse { animation: scene-pulse 4s ease-in-out infinite; }
.scene-spin { animation: scene-spin 16s linear infinite; }
.scene-delay-1 { animation-delay: .5s; }
.scene-delay-2 { animation-delay: 1.15s; }
.scene-delay-3 { animation-delay: 1.8s; }

.lab-card .scene-label {
  fill: rgba(237, 243, 244, .82);
  font-family: Nunito, sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.lab-card .scene-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #e8f4f2;
  background: rgba(13, 25, 47, .72);
  border: 1px solid rgba(182, 224, 231, .18);
  box-shadow: 0 5px 14px rgba(3, 10, 22, .16);
  font-size: 10px;
  font-weight: 800;
}
.lab-card .scene-caption-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soft-accent, #a8dce5); }
.lab-card .scene-action {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 4;
  padding: 7px 9px;
  border-radius: 999px;
  color: #162536;
  background: var(--soft-yellow, #eedca6);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The visual scene is the focus on narrow screens; text stays readable below it. */
@media (max-width: 720px) {
  .lab-card { min-height: 360px; }
  .lab-card .lab-card-visual { height: 158px; margin-top: 8px; }
  .lab-card > .mt-12 { margin-top: 10px !important; }
  .lab-card .scene-caption { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-card .scene-float,
  .lab-card .scene-orbit,
  .lab-card .scene-twinkle,
  .lab-card .scene-drift,
  .lab-card .scene-pulse,
  .lab-card .scene-spin { animation: none; }
}