/* ════════════════════════════════════════════════════════════
   demos.css — Live product demos for the landing page tool rows.
   Each .demo-frame[data-demo] embeds the REAL Portal.html in an
   iframe (desktop viewport 1440×822) scaled to fit, then demos.js
   drives the genuine workflow. No mock UI — this is the actual app.
   ════════════════════════════════════════════════════════════ */

.demo-frame {
  position:relative;
  width:100%;
  aspect-ratio:1440 / 822;
  overflow:hidden;
  background:#0a1628;
  border-radius:0 0 var(--radius-xl, 18px) var(--radius-xl, 18px);
}

/* Static poster shown before the live portal loads (and as no-JS fallback).
   The .demo-portal iframe fades in on top of it once ready. */
.demo-poster {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top left;
  display:block; z-index:0;
}

.demo-portal {
  position:absolute;
  top:0; left:0;
  width:1440px;
  height:822px;
  border:0;
  transform-origin:top left;
  pointer-events:none;        /* it's a demo, not interactive */
  background:#0a1628;
  opacity:0;
  transition:opacity .5s ease;
}
.demo-portal.ready { opacity:1; }

/* tiny loading shimmer until the portal is live */
.demo-loading {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#0a1628,#060e1a);
  transition:opacity .4s ease;
}
.demo-loading.hide { opacity:0; pointer-events:none; }
.demo-loading .dl-spin {
  width:30px; height:30px; border-radius:50%;
  border:3px solid rgba(0,176,155,0.25); border-top-color:var(--teal,#00b09b);
  animation:dl-rot .8s linear infinite;
}
@keyframes dl-rot { to { transform:rotate(360deg); } }

/* a soft "live" cursor dot the driver moves around (optional polish) */
.demo-cursor {
  position:absolute; z-index:3; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%;
  background:rgba(0,176,155,0.9);
  box-shadow:0 0 0 6px rgba(0,176,155,0.18), 0 2px 6px rgba(0,0,0,0.3);
  opacity:0; transition:opacity .25s ease, left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.demo-cursor.show { opacity:1; }
.demo-cursor.click { transform:scale(0.7); transition:transform .12s; }