/* =========================================================
   MapSpective · demo video
   Video in the centre; captured calls stream in on the left,
   agent runs stream out on the right.
   ========================================================= */

.demo {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cream); color: var(--ink);
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4.5rem, 9vw, 8rem);
}
.demo::before {                    /* faint dot grid */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(11, 12, 16, 0.08) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 55%, #000 30%, transparent 75%);
}
.demo__inner { max-width: 96rem; margin: 0 auto; padding: 0 var(--pad); }

.demo__head { max-width: 50rem; margin: 0 auto; text-align: center; }
.demo__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
}
.demo__eyebrow i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(238, 53, 36, 0.15); animation: demoRec 1.6s ease-in-out infinite; }
@keyframes demoRec { 50% { opacity: 0.35; } }
.demo__head h2 { margin-top: 1rem; font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 4.4rem); line-height: 1; letter-spacing: -0.055em; }
.demo__head p:last-child { margin: 1.3rem auto 0; max-width: 38rem; font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--muted); }

/* ---------- stage: flow-in | video | flow-out ---------- */
.demo__stage {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid; align-items: stretch;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.3fr) minmax(15rem, 1fr);
}

/* ---------- side flows ---------- */
.demo-flow { position: relative; min-height: 20rem; }
/* nothing from a side flow may cross onto the video: clip only the edge that touches it */
.demo-flow--in { clip-path: inset(-60px 0 -60px -60px); }
.demo-flow--out { clip-path: inset(-60px -60px -60px 0); }
.demo-flow--in.is-vertical { clip-path: inset(-60px -60px 0 -60px); }
.demo-flow--out.is-vertical { clip-path: inset(0 -60px -60px -60px); }
.demo-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.demo-flow__path { fill: none; stroke: rgba(11, 12, 16, 0.16); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.demo-flow__glow { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.9; filter: drop-shadow(0 0 4px currentColor); }

.demo-flow__head {
  position: absolute; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.demo-flow--in .demo-flow__head { left: 0.2rem; }
.demo-flow--out .demo-flow__head { right: 0.2rem; }
.demo-flow__head span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.demo-flow__head b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* node cards (actions on the left, systems on the right) */
.dnode {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.85rem 0.55rem 0.55rem; border-radius: 0.9rem;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 12px 28px -18px rgba(11, 12, 16, 0.45);
  white-space: nowrap; will-change: transform;
}
.dnode__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--c) 12%, #fff); }
.dnode__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dnode__txt { display: grid; line-height: 1.15; }
.dnode__txt b { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; }
.dnode__txt small { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.dnode__ok {
  position: absolute; top: -0.45rem; right: -0.45rem; display: grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #0d7a45; box-shadow: 0 0 0 3px var(--cream);
  transform: scale(0); opacity: 0;
}
.dnode__ok svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dnode.is-fire .dnode__icon { animation: dFire 0.6s var(--ease); }
.dnode.is-hit { animation: dHit 0.7s var(--ease); }
.dnode.is-hit .dnode__ok { animation: dOk 1.6s var(--spring) forwards; }
@keyframes dFire { 40% { transform: scale(0.86); background: var(--c); } }
@keyframes dHit { 30% { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 12px 28px -18px rgba(11, 12, 16, 0.45); } }
@keyframes dOk { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.6); opacity: 0; } }

/* travelling packets */
.dpacket {
  position: absolute; left: 0; top: 0; z-index: 1; opacity: 0;          /* below the cards: packets slide out from under them */
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.6rem 0.32rem 0.32rem; border-radius: 999px;
  background: #0b0c10; color: #f4f1e8; font-family: var(--mono); font-size: 0.68rem; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(11, 12, 16, 0.6), 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
  pointer-events: none; will-change: transform, opacity;
}
.dpacket i { font-style: normal; font-weight: 500; font-size: 0.64rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--c); color: #fff; }
.demo-flow--in .dpacket i { color: #0b0c10; background: #f9ab14; }
.demo-video.is-hit::before { animation: dFrame 8s linear infinite, dFlash 0.5s var(--ease); }
@keyframes dFlash { 40% { filter: brightness(1.5); } }

/* ---------- video ---------- */
.demo-video {
  position: relative; border-radius: 1.2rem; background: #0b0c10; color: #f4f1e8;
  box-shadow: 0 50px 90px -40px rgba(10, 57, 178, 0.55), 0 30px 50px -30px rgba(11, 12, 16, 0.5);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease);
}
.demo-video::before {               /* animated brand-gradient frame */
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(1.2rem + 2px);
  background: linear-gradient(120deg, var(--blue), var(--yellow), var(--red), var(--blue));
  background-size: 300% 300%; animation: dFrame 8s linear infinite;
}
.demo-video::after {                /* soft halo */
  content: ""; position: absolute; inset: 8% 6% -6%; z-index: -2; border-radius: 2rem;
  background: linear-gradient(120deg, rgba(10, 57, 178, 0.5), rgba(249, 171, 20, 0.35), rgba(238, 53, 36, 0.4));
  filter: blur(40px); opacity: 0.6; animation: dFrame 8s linear infinite; background-size: 300% 300%;
}
@keyframes dFrame { to { background-position: 300% 0; } }

.demo-video__bar {
  position: relative; background: #0b0c10; border-radius: 1.2rem 1.2rem 0 0;
  display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(244, 241, 232, 0.1);
  font-family: var(--mono); font-size: 0.75rem; color: #8a8fa0;
}
.demo-video__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #3a3d48; }
.demo-video__bar i:nth-child(1) { background: var(--red); }
.demo-video__bar i:nth-child(2) { background: var(--yellow); }
.demo-video__bar i:nth-child(3) { background: #f4f1e8; }
.demo-video__bar span { margin-left: 0.6rem; }

.demo-video__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 0 1.2rem 1.2rem; background: #0a0c12; }
.demo-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0a0c12; }
.demo-video.is-empty .demo-video__media { visibility: hidden; }

/* placeholder until a video file exists */
.demo-video__empty {
  position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 0.9rem; text-align: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(10, 57, 178, 0.35), transparent 45%),
    radial-gradient(circle at 78% 70%, rgba(238, 53, 36, 0.25), transparent 45%), #0a0c12;
}
.demo-video.is-empty .demo-video__empty { display: grid; }
.demo-video__hint { margin-top: 4.6rem; font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: -0.02em; }
.demo-video__empty code { font-family: var(--mono); font-size: 0.8rem; color: #8a8fa0; padding: 0.3rem 0.7rem; border: 1px dashed rgba(244, 241, 232, 0.25); border-radius: 0.4rem; }

.demo-pipe { position: relative; display: flex; gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.demo-pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, #5b86ff, #f9ab14, #ff6a55, #f4f1e8, #5b86ff); opacity: 0.5; }
.demo-pipe i { position: relative; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #1b1e27; border: 2px solid rgba(244, 241, 232, 0.4); animation: dPipe 3s var(--ease) infinite; }
.demo-pipe i:nth-child(1) { --c: #5b86ff; animation-delay: 0s; }
.demo-pipe i:nth-child(2) { --c: #f9ab14; animation-delay: 0.3s; }
.demo-pipe i:nth-child(3) { --c: #ff6a55; animation-delay: 0.6s; }
.demo-pipe i:nth-child(4) { --c: #f4f1e8; animation-delay: 0.9s; }
.demo-pipe i:nth-child(5) { --c: #5b86ff; animation-delay: 1.2s; }
@keyframes dPipe { 15%, 45% { background: var(--c); border-color: var(--c); box-shadow: 0 0 18px var(--c); transform: scale(1.25); } }

/* play button */
.demo-video__play {
  position: absolute; left: 50%; top: 50%; width: 5.4rem; height: 5.4rem; margin: -2.7rem 0 0 -2.7rem;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: #f4f1e8; color: #0b0c10; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--spring), opacity 0.3s, visibility 0.3s;
}
.demo-video.is-empty .demo-video__play { top: 38%; }
.demo-video__play svg { width: 1.9rem; height: 1.9rem; margin-left: 0.25rem; fill: currentColor; }
.demo-video__play:hover { transform: scale(1.08); }
.demo-video__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #f4f1e8; animation: dRing 2.2s var(--ease) infinite; }
@keyframes dRing { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }
.demo-video.is-playing .demo-video__play { opacity: 0; visibility: hidden; transform: scale(0.7); }
.demo-video.is-empty .demo-video__play { cursor: default; }
.demo-video.is-empty .demo-video__play.is-nudge { animation: shake 0.4s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .demo__stage { grid-template-columns: 1fr; }
  .demo-flow { min-height: 12.5rem; }
  .demo-flow--in { order: 0; }
  .demo-video { order: 1; }
  .demo-flow--out { order: 2; }
  .demo-flow--out .demo-flow__head { top: auto; bottom: -1.8rem; right: auto; left: 0.2rem; }
  .demo-flow--out { margin-bottom: 1.8rem; }
  .dnode { padding: 0.45rem; border-radius: 0.8rem; }
  .dnode__txt small { display: none; }
}
@media (max-width: 640px) {
  .dnode__txt { display: none; }
  .demo-video__play { width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; }
  .demo-video__hint { margin-top: 3.2rem; }
  .demo-video__empty code { display: none; }
}