/* ---------------------------------------------------------------
   Product demo frames. Shared contract for the three cinematic
   loops (Trenches Lab, Osquare HQ, RedactPro).
   - .demo is a 16:10 stage, ink background, overflow hidden.
   - The poster <img> is what shows with JS off, on phones, and
     when the viewer prefers reduced motion.
   - Each demo adds .demo__stage children; animation is GSAP,
     transforms and opacity only, no filters on large layers.
   --------------------------------------------------------------- */
.demo {
  position: relative; aspect-ratio: 16 / 10; width: 100%;
  background: var(--ink-1); overflow: hidden; isolation: isolate;
  border-radius: 6px; border: 1px solid var(--ink-line);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9);
  container-type: inline-size;
}
.demo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.demo__stage { position: absolute; inset: 0; z-index: 1; }
/* Stage is only shown when the demo has mounted and may animate. */
.demo:not(.is-live) .demo__stage { visibility: hidden; }
.demo.is-live .demo__poster { visibility: hidden; }
/* Caption strip that demos can use for one line of narration at the bottom */
.demo__caption {
  position: absolute; left: 4%; bottom: 5%; z-index: 3; max-width: 60%;
  font-family: var(--font-display); font-size: clamp(0.6rem, 1.4cqw, 0.85rem); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-on-ink); text-shadow: 0 2px 16px rgba(0,0,0,0.7); opacity: 0;
}
.demo__caption b { color: var(--accent); font-weight: 500; }
/* Brass highlight ring that demos can position over a control */
.demo__ring {
  position: absolute; z-index: 3; border: 1.5px solid var(--accent); border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(201,168,106,0.18), 0 0 30px rgba(201,168,106,0.35); opacity: 0; pointer-events: none;
}
.demo__vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(7,9,12,0) 55%, rgba(7,9,12,0.55) 100%); }
/* Ink fade used at the loop seam */
.demo__fade { position: absolute; inset: 0; z-index: 4; background: var(--ink-0); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .demo .demo__stage { visibility: hidden !important; }
  .demo .demo__poster { visibility: visible !important; }
}