/* Animated demo + Request Demo widget — sky/cyan palette, no per-app accents */

/* ---- Browser frame ---- */
.demo-frame{
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;
  /* Layered ambient shadow so the frame settles into the page instead of
     cutting against the background with a hard edge. */
  box-shadow:
    0 1px 2px rgba(2,6,23,.04),
    0 8px 20px rgba(2,6,23,.06),
    0 24px 60px rgba(2,6,23,.10);
}
.dark .demo-frame{
  background:#0f172a;border-color:#293548;
  /* On a near-black page a black drop-shadow is mathematically invisible (there's
     no lighter background left to darken). So depth comes from light instead:
     a lit top edge (rim light) plus a soft sky-tinted ambient cast — a COLORED
     shadow is lighter than the near-black page, so it actually shows. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 50px -22px rgba(14,165,233,.22);
}
.demo-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;}
.dark .demo-bar{background:#1e293b;border-color:#334155;}
.demo-bar span{width:10px;height:10px;border-radius:50%;background:#cbd5e1;}
.dark .demo-bar span{background:#475569;}
.demo-url{margin-left:8px;font-size:11px;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:2px 10px;}
.dark .demo-url{background:#0f172a;border-color:#334155;color:#94a3b8;}

/* ---- Screenshot stage ---- */
.demo-stage{position:relative;overflow:hidden;background:linear-gradient(135deg,#e0f2fe,#cffafe);}
.dark .demo-stage{background:linear-gradient(135deg,#0c4a6e33,#15576633);}
.demo-shot{display:block;width:100%;height:auto;}
/* Placeholder shown until a real screenshot is dropped in (img with no src / broken) */
.demo-stage::after{
  content:"Screenshot coming soon";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#0ea5e9;font-size:13px;font-weight:600;letter-spacing:.02em;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);z-index:0;
}
.dark .demo-stage::after{background:linear-gradient(135deg,#082f49,#083344);color:#38bdf8;}
.demo-shot{position:relative;z-index:1;}

/* ---- Ambient glow behind every frame ----
   Dark-mode depth comes from light, not shadow: a soft blurred radial "light
   pool" sits behind the frame and grounds it. The blur kills any hard edge so
   it never reads as a second rectangle. Crucially it lives in the wrapper's OWN
   stacking context (.demo at z-index:0, frame lifted to z-index:1) instead of
   z-index:-1 — a negative z-index drops the glow BEHIND any opaque ancestor
   section background, which is exactly why the earlier glow never appeared. */
.demo{position:relative;z-index:0;}
.demo .demo-frame{position:relative;z-index:1;}
.demo::before{
  content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;border-radius:30px;
  background:radial-gradient(ellipse 58% 48% at 50% 58%,rgba(14,165,233,.18),transparent 70%);
  filter:blur(40px);
}
.dark .demo::before{background:radial-gradient(ellipse 58% 48% at 50% 58%,rgba(14,165,233,.30),transparent 70%);}

/* ---- Variant B: parallax float (solution pages) ---- */
.demo--parallax .demo-frame{animation:demoFloat 6s ease-in-out infinite;}
/* the glow drifts in sync with the floating frame */
.demo--parallax::before{animation:demoFloat 6s ease-in-out infinite;}
@keyframes demoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.demo--parallax .demo-stage{min-height:260px;}

/* ---- Variant A: auto-scroll (homepage cards, tall screenshots) ---- */
.demo--scroll .demo-stage{height:120px;}
.demo--scroll .demo-shot{animation:demoScroll 6s ease-in-out infinite alternate;}
@keyframes demoScroll{0%{transform:translateY(0)}100%{transform:translateY(-45%)}}

/* ---- Variant: cover image with slow zoom (homepage cards, wide screenshots) ---- */
.demo--cover .demo-stage{height:180px;}
.demo--cover .demo-shot{width:100%;height:100%;object-fit:cover;object-position:top center;animation:demoZoom 14s ease-in-out infinite alternate;}
@keyframes demoZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}

/* ---- Slideshow: multiple real screenshots cross-fading in the frame (solution-page hero) ----
   The container's aspect ratio is set per page via the `--demo-aspect` CSS var
   on the .demo--slideshow root. This keeps the frame proportional to that
   product's typical screenshot. Any outlier slides (e.g. taller dashboards)
   letterbox inside via object-fit:contain rather than bloating the frame. */
.demo--slideshow .demo-stage{aspect-ratio:var(--demo-aspect, 16/10);min-height:0;transition:aspect-ratio .6s ease;}
.demo-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  opacity:0;transition:opacity 1s ease;
  z-index:1;
}
.demo-slide.is-active{opacity:1;}
/* Hide the "Screenshot coming soon" placeholder so it can't peek through during cross-fades. */
.demo--slideshow .demo-stage::after{display:none;}

/* ---- Request Demo widget ----
   One clean inline row: email grows to fill, the button stays fixed beside it.
   The heading copy already invites the email, so the form is shown directly —
   no two-step "click a button to reveal a field" reveal. */
.dr{margin-top:.5rem;}
.dr-form{display:flex;gap:.5rem;max-width:30rem;margin:0 auto;}
.dr-email{
  flex:1 1 auto;min-width:0;padding:.7rem 1rem;border-radius:.65rem;border:1px solid #cbd5e1;
  background:#fff;color:#0f172a;font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.dark .dr-email{background:#0f172a;border-color:#334155;color:#f1f5f9;}
.dr-email:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.2);}
.dr-submit{
  flex:0 0 auto;white-space:nowrap;background:#0ea5e9;color:#fff;border:0;border-radius:.65rem;
  padding:.7rem 1.4rem;font-weight:600;cursor:pointer;transition:background .3s,box-shadow .3s;
}
.dr-submit:hover{background:#0284c7;box-shadow:0 10px 25px -5px rgba(14,165,233,.4);}
.dr-submit:disabled{opacity:.6;cursor:not-allowed;}
.dark .dr-submit{color:#020617;}
.dr-status{margin-top:.6rem;font-size:.9rem;color:#0ea5e9;min-height:1.2em;}
.dr-status.dr-status--error{color:#f59e0b;}
.dr.done .dr-form{display:none;}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .demo--parallax .demo-frame,.demo--parallax::before,.demo--scroll .demo-shot,.demo--cover .demo-shot{animation:none;}
}