/* The front page's booking with no words beside it (docs/website/plan/story.md), in one pale world, with the glass
   frosted (docs/website/plan/look.md → The immersive lab page). */

/* Her pushes in the phone's own plane: the stage's camera as a CSS perspective, each push a canvas placed with the
   phone's matrix, so it sits on the screen as the drawn one did and stays sharp while the canvas under it blurs. */
.deep { position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.deep .cam { position:absolute; left:0; top:0; width:100%; height:100%; transform-style:preserve-3d; }
.deep canvas { position:absolute; left:0; top:0; width:564px; height:132px; transform-style:preserve-3d; backface-visibility:hidden;
               opacity:0; will-change:transform, opacity; }

/* The request on a slab of glass drawn in the scene: the element keeps its words and its lit edge, and lets the slab,
   and what the slab bends, show through. */
.req.slab { background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
            box-shadow:inset 1px 1px 0 rgba(255,255,255,.8), inset -1px -1px 0 rgba(255,255,255,.3); }
.req.slab .slot { background:rgba(255,255,255,.6); }

/* The ask, alone on the right, as the front page has it; on a phone at the foot. */
.say { width:380px; }
.say p { font-size:21px; line-height:1.45; }
@media (max-width:760px) { .say { width:auto; } }


/* ?nav=next / ?nav=step: no scroll, a chapter at a time; Next at the foot, in the middle. */
html.steps, html.steps body { overflow:hidden; height:100%; }
html.steps .runway { display:none; }
.btn.next { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:20; border:0; cursor:pointer;
            transition:opacity .4s; }
.btn.next.done { opacity:0; pointer-events:none; }

/* Every glass card frosted, as the bird's are: the phone behind it softens instead of showing through. */
.lq, html.bend .lq { background:rgba(255,255,255,.68); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); }