/* ============================================================================
   baubra.com/lab: every design, listed like the front page's library.
   Built on Pixel Potion's styles (/designs/pixel-potion/style.css: glass, nav, toolbar,
   chips, cards); this file only adds what the lab needs on top.
   ========================================================================== */
/* no WebGL here: the soft CSS aurora, tinted by the design under the pointer */
.lab .aurora-css { display: block; }
.lab .aurora-css i { transition: background-color 1.4s var(--ease); }

.lab-intro { padding: clamp(130px, 18vh, 190px) 0 20px; }
.eyebrow { margin: 0 0 14px; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; color: var(--faint); }
.lab-intro h1 {
  margin: 0; font-weight: 700; letter-spacing: -.055em; line-height: .92; font-size: clamp(3.6rem, 12vw, 8.5rem);
  background: linear-gradient(100deg, #fff 30%, color-mix(in srgb, var(--c1) 55%, #fff) 60%, color-mix(in srgb, var(--c2) 60%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { margin: 22px 0 30px; max-width: 58ch; color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.lab-intro .actions { justify-content: flex-start; margin-top: 0; animation-delay: .2s; }

/* cards are links to the design itself */
.lab .card { text-decoration: none; }
.card .code { margin-left: auto; font-family: var(--mono); color: var(--faint); }
.card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card h3 .go { font-size: 1.05rem; color: var(--faint); transition: translate .35s var(--ease), color .3s; }
.card:hover h3 .go, .card:focus-visible h3 .go { translate: 4px 0; color: var(--ink); }
.status.orig::before { background: #9aa4ff; }
/* the live design wears a soft ring in its own colours */
.card.is-live { border-color: color-mix(in srgb, var(--a) 40%, var(--line)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px color-mix(in srgb, var(--a) 25%, transparent), 0 30px 70px -34px color-mix(in srgb, var(--a) 60%, transparent); }
/* a hint that the picture moves */
.media .hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
  border-radius: 999px; font-size: .74rem; color: rgba(255,255,255,.85); background: rgba(8, 7, 14, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .4s;
}
.media .hint svg { width: 11px; height: 11px; fill: currentColor; }
.media.playing .hint { opacity: 0; }