/* ============================================================
   Landing-page demo scenes.

   Since BL-PROD-69 a scene is a stack of PHOTOGRAPHS of the shipped app
   (assets/screens/, generated by `tools/design/app-shots.mjs`) that the
   runner cross-fades between. It used to be hand-drawn HTML pretending to
   be the product — a P1-P4 priority ladder, an onboarding stepper, a
   missed-call SMS thread, none of which the app has ever had — and that is
   exactly what the item existed to delete. So there are no app-UI rules
   left in this file and none may come back: a section that needs a new
   picture gets a new frame in that script, never a new class here.

   What remains is the browser window the desktop frames sit in, plus the
   reveal-on-scroll idiom the rest of the page shares.
   ============================================================ */

/* ---- shared entrance idiom (mirrors .reveal) ---- */
.js .d-anim{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.js .d-anim.d-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .d-anim{transition:none}}

/* ============================================================
   the browser window in the #day section
   ============================================================ */
.demo-chat{margin:clamp(40px,5vw,56px) auto 0;max-width:880px;background:#0e1120;border-radius:22px;padding:10px;box-shadow:var(--shadow-lift)}
.dc-chrome{display:flex;align-items:center;gap:7px;padding:6px 6px 12px}
.dc-chrome .dot{width:10px;height:10px;border-radius:50%}
.dc-chrome .url{margin-left:12px;background:#1c2138;color:#8a93a6;font-size:11.5px;font-weight:600;padding:5px 16px;border-radius:7px;flex:1;max-width:360px;text-align:center}
/* The capture's own aspect ratio, so the window never resizes between frames
   and shoves the rest of the page around mid-timeline. */
.dc-screen{position:relative;aspect-ratio:1280/900;border-radius:14px;overflow:hidden;background:#f4f6fa}

.demo-chat-cap{text-align:center;font-size:13px;color:var(--slate-light);font-weight:600;margin-top:16px}